Added groups

src/components/todoStuff/todoBoard.js

@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import TodoCard from './todoCard.js'
 
 import styles from './todoBoard.module.css'
 
 export default function TodoBoard(props) {
-  const { columns, cards, userId, categories, onCardClick } = props
+  const { columns, cards, userId, categories, onCardClick, namedGroups } = props
+  const [selectedGroup, setSelectedGroup] = useState(null)
 
   const clickableTypes = Object.keys(columns).reduce((acc, key) => {
     const col = columns[key]
@@ -15,8 +16,52 @@ export default function TodoBoard(props) {
     return acc
   }, [])
 
+  const groups = cards.reduce((acc, card) => {
+    if (!acc.includes(card.group) && card.group) {
+      acc.push(card.group)
+    }
+    return acc
+  }, [])
+
+  const renderGrouper = () => {
+    const sg = namedGroups[selectedGroup]
+    return (
+      <>
+        <div className={styles.groupContainer}>
+          {groups.map((group) => {
+            const namedGroup = namedGroups[group]
+            return (
+              <div
+                className={`${styles.group} ${group === selectedGroup &&
+                  styles.selectedGroup}`}
+                key={group}
+                onClick={() => {
+                  setSelectedGroup(group)
+                }}
+              >
+                {namedGroup ? namedGroup.name : group}
+              </div>
+            )
+          })}
+          <div
+            className={styles.group}
+            onClick={() => {
+              setSelectedGroup(null)
+            }}
+          >
+            {'Összes'}
+          </div>
+        </div>
+        {sg && sg.description ? (
+          <div className={styles.groupDescription}>{sg.description}</div>
+        ) : null}
+      </>
+    )
+  }
+
   return (
     <div className={styles.tableContainer}>
+      {renderGrouper()}
       <div className={styles.table}>
         {Object.keys(columns).map((key) => {
           const category = columns[key]
@@ -25,7 +70,9 @@ export default function TodoBoard(props) {
               <div className={styles.categoryName}>{category.name}</div>
               {cards.map((card, i) => {
                 if (card.state === key) {
-                  // TODO: determine if clickable here
+                  if (selectedGroup && card.group !== selectedGroup) {
+                    return null
+                  }
                   return (
                     <TodoCard
                       key={i}

src/components/todoStuff/todoBoard.module.css

@@ -21,3 +21,25 @@
 .tableCol {
   flex: 1;
 }
+
+.groupDescription {
+  font-size: 16px;
+  padding: 4px;
+}
+
+.groupContainer {
+  display: flex;
+}
+
+.group {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.group:hover {
+  background-color: #333;
+}
+
+.selectedGroup {
+  background-color: #444;
+}

src/components/todoStuff/todoCard.js

@@ -4,12 +4,15 @@ import styles from './todoCard.module.css'
 
 export default function TodoCard(props) {
   const { categories, onClick, userId } = props
-  const { name, category, points, votes, id } = props.cardData
+  const { name, category, points, votes, id, group } = props.cardData
   const voted = votes.includes(userId)
 
   return (
     <div
-      className={`${styles.card} ${voted && styles.voted}`}
+      className={styles.card}
+      style={{
+        border: `2px solid ${group || '#99f'}`,
+      }}
       onClick={() => {
         onClick(props.cardData)
       }}
@@ -31,7 +34,7 @@ export default function TodoCard(props) {
         </span>
       </div>
       <div className={styles.numbers}>
-        <div>
+        <div className={`${voted && styles.voted}`}>
           <div>{`Votes: ${votes.length}`}</div>
         </div>
         <div>{points}</div>

src/components/todoStuff/todoCard.module.css

@@ -1,5 +1,4 @@
 .card {
-  border: 2px solid #99f;
   border-radius: 2px;
   padding: 5px;
   margin: 6px 3px;
@@ -7,7 +6,7 @@
 }
 
 .voted {
-  border: 2px solid #cf9;
+  color: #cf9;
 }
 
 .card:hover {
@@ -26,8 +25,8 @@
 }
 
 .category {
-  word-break: break-all;
   font-size: 10px;
+  white-space: nowrap;
 }
 
 .numbers {

src/components/todoStuff/todoRow.js

@@ -4,7 +4,7 @@ import styles from './todoRow.module.css'
 
 export default function TodoRow(props) {
   const { categories, userId, onClick } = props
-  const { name, category, votes, id } = props.rowData
+  const { name, category, votes, id, group } = props.rowData
   const voted = votes.includes(userId)
 
   return (
@@ -12,7 +12,10 @@ export default function TodoRow(props) {
       onClick={() => {
         onClick(props.rowData)
       }}
-      className={`${styles.row} ${voted && styles.voted}`}
+      className={styles.row}
+      style={{
+        border: `2px solid ${group || '#99f'}`,
+      }}
     >
       <div className={styles.id}>{`#${id}`}</div>
       <div className={styles.description}>{name}</div>
@@ -30,7 +33,9 @@ export default function TodoRow(props) {
           {categories[category].name}
         </div>
       </div>
-      <div className={styles.votes}>{`Votes: ${votes.length}`}</div>
+      <div
+        className={`${styles.votes} ${voted && styles.voted}`}
+      >{`Votes: ${votes.length}`}</div>
     </div>
   )
 }

src/components/todoStuff/todoRow.module.css

@@ -33,7 +33,7 @@
 }
 
 .voted {
-  border: 2px solid #cf9;
+  color: #cf9;
 }
 
 .catName {
@@ -41,6 +41,6 @@
 }
 
 .category {
-  word-break: break-all;
   font-size: 10px;
+  white-space: nowrap;
 }

src/components/todoStuff/todoSidebar.js

@@ -20,6 +20,7 @@ export default function Todos({ card, userId, categories, columns, voteOn }) {
             color: 'white',
             borderRadius: '2px',
             padding: '0px 2px',
+            whiteSpace: 'nowrap',
           }}
         >
           {categories[category].name}

src/components/todoStuff/todos.js

@@ -21,6 +21,7 @@ export default function Todos() {
   const [categories, setCategories] = useState(null)
   const [userId, setUserId] = useState(null)
   const [sidebarCard, setSidebarCard] = useState(null)
+  const [groups, setGroups] = useState(null)
 
   useEffect(() => {
     console.info('Fetching todos')
@@ -37,6 +38,7 @@ export default function Todos() {
 
   const setTodos = (data) => {
     setCategories(data.todos.categories)
+    setGroups(data.todos.groups)
     setUserId(data.userId)
 
     setCards(data.todos.cards)
@@ -122,6 +124,7 @@ export default function Todos() {
           userId={userId}
           categories={categories}
           onCardClick={onClick}
+          namedGroups={groups}
         />
         <TodoTable
           tables={tables}