Merge pull request #50 from Sicnecher/sicnecher-branch

Sicnecher branch

src/cmps/BoardDetails.jsx

@@ -23,31 +23,48 @@ const BoardDetails = () => {
   const [checkedBoxes, setCheckedBoxes] = useState([]);
   const [checkedGroups, setCheckedGroups] = useState([]);
   const boards = useSelector((state) => state.boardModule.boards);
+  const [currentBoard, setCurrentBoard] = useState(
+    boards.find((board) => board.id === boardId)
+  );
   const loggedinUser = useSelector((state) => state.userModule.user);
   const users = useSelector((state) => state.userModule.users);
+  const filterBy = useSelector((state) => state.boardModule.filterBy);
 
-  const currentBoard = boards.find((board) => board.id === boardId);
+  // const currentBoard = boards.find((board) => board.id === boardId);
 
   const groups = currentBoard?.groups || [];
 
-  //.........................
   useEffect(() => {
-    onLoadBoards();
-  }, [boards.groups]);
+    if (!currentBoard)
+      setCurrentBoard(boards.find((board) => board.id === boardId));
+  }, [boards]);
 
-  async function onLoadBoards() {
-    await loadBoards();
-    await loadUsers();
-  }
+  useEffect(() => {
+    if (boards[0]) {
+      const board = boards.find((board) => board.id === boardId);
+      console.log(boards, filterBy, currentBoard, boardId);
+      const regExp = new RegExp(filterBy, "i");
+      const filteredGroups = board.groups
+        .map((group) => ({
+          ...group,
+          tasks: group.tasks.filter((task) => regExp.test(task.taskTitle)), // Filter tasks
+        }))
+        .filter((group) => group.tasks.length > 0); // Keep groups that have tasks
+
+      setCurrentBoard({ ...board, groups: filteredGroups }); // Update currentBoard with filtered groups
+      loadBoards();
+      loadUsers();
+    }
+  }, [filterBy]);
 
   //...............................
 
   function handleAddGroup() {
     addGroup(boardId);
   }
 
-  function chatTempInfoUpdate(cellId, width, newComment){
-    boardService.saveTempChatInfo(cellId, width, newComment)
+  function chatTempInfoUpdate(cellId, width, newComment) {
+    boardService.saveTempChatInfo(cellId, width, newComment);
   }
 
   function openChat(id){
@@ -124,7 +141,10 @@ const BoardDetails = () => {
     removeGroup(boardId, groupId);
   }
 
-  if (!currentBoard) return <div>Loading...</div>;
+  if (!currentBoard)
+    return (
+      <div onClick={() => console.log(boards, currentBoard)}>Loading...</div>
+    );
 
   return (
     <div className="board-details">

src/cmps/BoardDetailsHeader.jsx

@@ -2,15 +2,34 @@ import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import HomeIcon from "@mui/icons-material/HomeOutlined";
 import HorizDotsIcon from "@mui/icons-material/MoreHorizOutlined";
 import SearchIcon from "@mui/icons-material/SearchOutlined";
+import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { setFilterState } from "../store/actions/boards.actions";
+import { handleFilter, getFilterContext } from "../store/actions/boards.actions";
+import { boardService } from "../services/board.service";
 export function BoardDetailsHeader({ boardTitle }) {
   const filterBy = useSelector((state) => state.boardModule.filterBy);
-  const filterState = useSelector((state) => state.boardModule.filterState);
+  const boards = useSelector((state) => state.boardModule.boards);
+  const [filterByToEdit, setFilterByToEdit] = useState(filterBy);
+  const [filterState, setFilterState] = useState(boardService.getFilterState());
+
+  useEffect(() => {
+    const filter = getFilterContext();
+    setFilterByToEdit(filter);
+  }, [])
+
+  useEffect(() => {
+    handleFilter(filterByToEdit);
+  }, [filterByToEdit]);
+
   const iconStyle = { width: 20, height: 18 };
 
-  function handleFilterState(state) {
-    console.log("skjfhiushdfuigh", filterState, state);
+  function handleFilterChange({ target }) {
+    const value = target.value;
+    setFilterByToEdit(value);
+  }
+
+  function handleFilterStateChange(state) {
+    boardService.setFilterStateSession(state);
     !filterState == state && setFilterState(state);
   }
   return (
@@ -40,21 +59,28 @@ export function BoardDetailsHeader({ boardTitle }) {
         </div>
         <div
           onBlur={(e) => {
+            console.log("Ragnar")
             if (!e.currentTarget.contains(e.relatedTarget)) {
-              handleFilterState(false); // Only trigger if focus leaves the div and its children
+              handleFilterStateChange(false); // Only trigger if focus leaves the div and its children
             }
           }}
-          onClick={() => handleFilterState(true)}
+          onClick={() => handleFilterStateChange(true)}
           className={filterState ? "filter-input" : "choice-div"}
           tabIndex={0} // Make the div focusable
         >
           <SearchIcon style={{ width: 24, height: 24 }} />
           {filterState ? (
             <input
+              onClick={() => {
+                console.log(filterBy);
+              }}
+              onChange={handleFilterChange}
+              type="text"
+              value={filterByToEdit}
               autoFocus
               onBlur={(e) => {
                 if (!e.currentTarget.contains(e.relatedTarget)) {
-                  handleFilterState(false);
+                  handleFilterStateChange(false);
                 }
               }}
             />

src/cmps/MainInnerIndex.jsx

@@ -9,15 +9,17 @@ import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
 export function MainInnerIndex({ user, isBoard, boards }) {
   const navigate = useNavigate();
+
   useEffect(() => {
-    loadBoardsAndUsers();
+    loadBoardsAndUsers()
   }, []);
 
   const iconStyle = { width: 22, height: 22 };
 
+
   function loadBoardsAndUsers() {
-    loadBoards();
-    loadUsers();
+    loadBoards()
+    loadUsers()
   }
 
   function onUpdateBoardName(id, title) {

src/cmps/SideBar.jsx

@@ -26,6 +26,7 @@ export function SideBar({ boards, user, onRemoveBoard }) {
 
   function handleDotsClick(event, boardId) {
     event.stopPropagation();
+    console.log(boardId);
     onRemoveBoard(boardId)
   }
 

src/cmps/dynamicCmps/modals/MembersModal.jsx

@@ -1,11 +1,11 @@
 
-export function MembersModal({ ParticipateMembers, onAddMember, onRemoveMember, users }) {
+export function MembersModal({ParticipateMembers, onAddMember, onRemoveMember, usersInBoard}){
 
     //temporary taking from demo data
-    const membersInBoard = [...users]
+    const membersInBoard = [...usersInBoard]
 
-    const nonParticipateMembers = membersInBoard.filter(member =>
-        !ParticipateMembers.find(cMember => cMember.id === member.id))
+    const nonParticipateMembers = membersInBoard.filter(member=> 
+        !ParticipateMembers.find(cMember=> cMember.id === member.id))
 
 
     return (
@@ -14,11 +14,11 @@ export function MembersModal({ ParticipateMembers, onAddMember, onRemoveMember,
             {/* list of members you can remove from task*/}
             <ul className="participate-list">
                 {
-                    ParticipateMembers.map(member =>
+                    ParticipateMembers.map(member=>
                         <li key={member.id}>
-                            <img src={member.imgUrl} />
-                            <p>{member.fullName}</p>
-                            <button onClick={() => onRemoveMember(member)}>x</button>
+                            <img src={member.image}/>
+                            <p>{member.name}</p>
+                            <button onClick={()=>onRemoveMember(member)}>x</button>
                         </li>
                     )
                 }
@@ -32,19 +32,16 @@ export function MembersModal({ ParticipateMembers, onAddMember, onRemoveMember,
 
                 <ul className="non-participate-list">
                     {
-                        nonParticipateMembers.map(member =>
+                        nonParticipateMembers.map(member=>
                             <li key={member.id}
-                                onClick={() => onAddMember(member)}>
-                                <img src={member.imgUrl} />
-                                <p>{member.fullName}</p>
+                            onClick={()=>onAddMember(member)}>
+                                <img src={member.image}/>
+                                <p>{member.name}</p>
                             </li>
                         )
                     }
                 </ul>
-
             </div>
-
-
         </section>
     )
 }

src/cmps/dynamicCmps/modals/PriorityModal.jsx

@@ -1,32 +1,28 @@
 
 
-export function PriorityModal({ onPriorityChange }) {
+export function PriorityModal({onPriorityChange}){
 
     //temporary priorities selection
-
-
-    const priorities = [{ text: 'Low', color: '#86B6FB' }, { text: 'Medium', color: '#5559DF' },
-    { text: 'High', color: '#401694' }, { text: 'Critical ⚠️', color: '#333333' }, { text: ' ', color: '#C4C4C4' }]
+    const priorities = [{text:'Low', color:'#86B6FB'},{text:'Medium', color:'#5559DF'},
+        {text:'High', color:'#401694'},{text:'Critical ⚠️', color:'#333333'}]
 
 
     return (
         <section className="priority-modal">
             {/* list of quick access prioritise */}
-            <ul className="item-flex">
+            <ul>
                 {
-                    priorities.map((priority, index) =>
-                        <li key={index} className="modal-item"
-                            onClick={() => {
-                                console.log(priority)
-                                onPriorityChange(priority)
-                            }}
-                            style={{ backgroundColor: priority.color }}>
-                            <p>{priority.text}</p>
+                    priorities.map(priority =>
+                        <li key={priority.text}
+                            onClick={()=>onPriorityChange(priority)}
+                            style={{backgroundColor: priority.color}}>
+                            {priority.text}
                         </li>
                     )
                 }
             </ul>
 
+            <button>Edit Labels</button>
         </section>
     )
 }