diff --git a/src/cmps/BoardDetails.jsx b/src/cmps/BoardDetails.jsx
index fa30595..901b3b7 100644
--- a/src/cmps/BoardDetails.jsx
+++ b/src/cmps/BoardDetails.jsx
@@ -23,22 +23,39 @@ 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]);
//...............................
@@ -46,8 +63,8 @@ const BoardDetails = () => {
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 Loading...
;
+ if (!currentBoard)
+ return (
+ console.log(boards, currentBoard)}>Loading...
+ );
return (
diff --git a/src/cmps/BoardDetailsHeader.jsx b/src/cmps/BoardDetailsHeader.jsx
index 87aec12..69f46fc 100644
--- a/src/cmps/BoardDetailsHeader.jsx
+++ b/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 }) {
{
+ 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
>
{filterState ? (
{
+ console.log(filterBy);
+ }}
+ onChange={handleFilterChange}
+ type="text"
+ value={filterByToEdit}
autoFocus
onBlur={(e) => {
if (!e.currentTarget.contains(e.relatedTarget)) {
- handleFilterState(false);
+ handleFilterStateChange(false);
}
}}
/>
diff --git a/src/cmps/MainInnerIndex.jsx b/src/cmps/MainInnerIndex.jsx
index 6bcb5f2..0fd2e89 100644
--- a/src/cmps/MainInnerIndex.jsx
+++ b/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) {
diff --git a/src/cmps/SideBar.jsx b/src/cmps/SideBar.jsx
index c8487cb..6498202 100644
--- a/src/cmps/SideBar.jsx
+++ b/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)
}
diff --git a/src/cmps/dynamicCmps/modals/MembersModal.jsx b/src/cmps/dynamicCmps/modals/MembersModal.jsx
index 8cc9cc1..e5dd40f 100644
--- a/src/cmps/dynamicCmps/modals/MembersModal.jsx
+++ b/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*/}
{
- ParticipateMembers.map(member =>
+ ParticipateMembers.map(member=>
-
-
- {member.fullName}
-
+ 
+ {member.name}
+
)
}
@@ -32,19 +32,16 @@ export function MembersModal({ ParticipateMembers, onAddMember, onRemoveMember,
{
- nonParticipateMembers.map(member =>
+ nonParticipateMembers.map(member=>
- onAddMember(member)}>
-
-
{member.fullName}
+ onClick={()=>onAddMember(member)}>
+
+ {member.name}
)
}
-
+
{
- priorities.map((priority, index) =>
- - {
- console.log(priority)
- onPriorityChange(priority)
- }}
- style={{ backgroundColor: priority.color }}>
-
{priority.text}
+ priorities.map(priority =>
+ - onPriorityChange(priority)}
+ style={{backgroundColor: priority.color}}>
+ {priority.text}
)
}
+
)
}
\ No newline at end of file
diff --git a/src/services/board.service.js b/src/services/board.service.js
index 5dcab49..50bfa1a 100644
--- a/src/services/board.service.js
+++ b/src/services/board.service.js
@@ -8,8 +8,8 @@ const imageLinks = [
"https://images.pexels.com/photos/30071289/pexels-photo-30071289/free-photo-of-portrait-of-a-bearded-man-outdoors.jpeg?auto=compress&cs=tinysrgb&w=600",
];
-const STORAGE_KEY = 'boards'
-const CHAT_KEY = 'chat'
+const STORAGE_KEY = "boards";
+const CHAT_KEY = "chat";
export const boardService = {
query,
@@ -31,89 +31,94 @@ export const boardService = {
getDefaultFilter,
openChat,
getOpenChat,
-}
+ getFilterState,
+ setFilterStateSession,
+ getFilterContextSession,
+ setFilterContextSession,
+};
async function addBoard() {
try {
const newBoard = {
- title: 'New Board',
+ title: "New Board",
groups: [],
- }
+ };
- const savedBoard = await storageService.post(STORAGE_KEY, newBoard)
+ const savedBoard = await storageService.post(STORAGE_KEY, newBoard);
- return savedBoard
+ return savedBoard;
} catch (error) {
- console.error('Error adding board:', error)
- throw error
+ console.error("Error adding board:", error);
+ throw error;
}
}
async function query() {
try {
- let boards = await storageService.query(STORAGE_KEY)
- console.log(boards)
+ let boards = await storageService.query(STORAGE_KEY);
+ console.log(boards);
if (!boards || boards.length === 0) {
- await makeFirstBoard()
- boards = await storageService.query(STORAGE_KEY)
+ await makeFirstBoard();
+ boards = await storageService.query(STORAGE_KEY);
}
- return boards
+ console.log("dsfjsbdfkhbsdf ", boards)
+ return boards;
} catch (error) {
- console.log('Error:', error)
- throw error
+ console.log("Error:", error);
+ throw error;
}
}
function getById(id) {
- return storageService.get(STORAGE_KEY, id)
+ return storageService.get(STORAGE_KEY, id);
}
function remove(id) {
- return storageService.remove(STORAGE_KEY, id)
+ return storageService.remove(STORAGE_KEY, id);
}
async function save(boardToSave) {
console.log("this is the board to save: ", boardToSave);
if (boardToSave.id) {
- return storageService.put(STORAGE_KEY, boardToSave)
+ return storageService.put(STORAGE_KEY, boardToSave);
} else {
- return storageService.post(STORAGE_KEY, boardToSave)
+ return storageService.post(STORAGE_KEY, boardToSave);
}
}
async function addGroupToBoard(boardId, newGroup) {
- const board = await getById(boardId)
- if (!board) throw new Error('Board not found')
+ const board = await getById(boardId);
+ if (!board) throw new Error("Board not found");
- newGroup.id = `group${Date.now()}`
- const updatedGroups = [...(board.groups || []), { ...newGroup }]
+ newGroup.id = `group${Date.now()}`;
+ const updatedGroups = [...(board.groups || []), { ...newGroup }];
const updatedBoard = {
...board,
groups: updatedGroups,
- }
+ };
- await save(updatedBoard)
- return newGroup
+ await save(updatedBoard);
+ return newGroup;
}
async function addItemToGroup(boardId, groupId, newItem) {
- const board = await getById(boardId)
- if (!board) throw new Error('Board not found')
+ const board = await getById(boardId);
+ if (!board) throw new Error("Board not found");
- const groupIndex = board.groups.findIndex((group) => group.id === groupId)
- if (groupIndex === -1) throw new Error('Group not found')
+ const groupIndex = board.groups.findIndex((group) => group.id === groupId);
+ if (groupIndex === -1) throw new Error("Group not found");
- board.groups[groupIndex].tasks.push(newItem)
- await save(board)
+ board.groups[groupIndex].tasks.push(newItem);
+ await save(board);
}
async function removeGroupFromBoard(boardId, groupId) {
- const board = await getById(boardId)
- if (!board) throw new Error('Board not found')
+ const board = await getById(boardId);
+ if (!board) throw new Error("Board not found");
- board.groups = board.groups.filter((group) => group.id !== groupId)
- await save(board)
+ board.groups = board.groups.filter((group) => group.id !== groupId);
+ await save(board);
}
async function removeTasksFromGroup(boardId, tasksToRemove) {
@@ -135,13 +140,13 @@ async function removeTasksFromGroup(boardId, tasksToRemove) {
}
}
-function getDefaultFilter(){
+function getDefaultFilter() {
return {
tasTitle: "",
priority: "",
status: "",
members: "",
- }
+ };
}
async function removeTaskFromGroup(boardId, groupId, taskId) {
@@ -150,223 +155,224 @@ async function removeTaskFromGroup(boardId, groupId, taskId) {
if (!board) throw new Error("Board not found");
console.log("this is the board: ", board);
- const group = board.groups.find((group) => group.id === groupId)
- if (!group) throw new Error('Group not found')
+ const group = board.groups.find((group) => group.id === groupId);
+ if (!group) throw new Error("Group not found");
- group.tasks = group.tasks.filter((task) => task.id !== taskId)
+ group.tasks = group.tasks.filter((task) => task.id !== taskId);
- console.log('Task removed from group and local storage')
+ console.log("Task removed from group and local storage");
return await save(board);
} catch (error) {
- console.error('Error removing task:', error)
- throw error
+ console.error("Error removing task:", error);
+ throw error;
}
}
async function updateTaskInGroup(boardId, info) {
try {
- console.log(info)
- console.log(boardId, info.group.id, info.task.id, info.type, info.value)
- const board = await getById(boardId) // Call directly without 'this'
- const group = board.groups.find((group) => group.id === info.group.id)
- if (!group) throw new Error('Group not found')
+ console.log(info);
+ console.log(boardId, info.group.id, info.task.id, info.type, info.value);
+ const board = await getById(boardId); // Call directly without 'this'
+ const group = board.groups.find((group) => group.id === info.group.id);
+ if (!group) throw new Error("Group not found");
- const taskIndex = group.tasks.findIndex((task) => task.id === info.task.id)
- if (taskIndex === -1) throw new Error('Task not found')
+ const taskIndex = group.tasks.findIndex((task) => task.id === info.task.id);
+ if (taskIndex === -1) throw new Error("Task not found");
- group.tasks[taskIndex][info.type] = info.value
- console.log(info.type)
+ group.tasks[taskIndex][info.type] = info.value;
+ console.log(info.type);
await save(board).then(() => {
console.log(
group.tasks[taskIndex][info.type],
taskIndex,
group,
info.value
- )
- })
+ );
+ });
- return group.tasks[taskIndex]
+ return group.tasks[taskIndex];
} catch (error) {
- console.error('Error updating task:', error)
- throw error
+ console.error("Error updating task:", error);
+ throw error;
}
}
async function updateGroupInBoard(boardId, groupId, updatedGroupData) {
try {
- const board = await getById(boardId)
- if (!board) throw new Error('Board not found')
+ const board = await getById(boardId);
+ if (!board) throw new Error("Board not found");
- const groupIndex = board.groups.findIndex((group) => group.id === groupId)
- if (groupIndex === -1) throw new Error('Group not found')
+ const groupIndex = board.groups.findIndex((group) => group.id === groupId);
+ if (groupIndex === -1) throw new Error("Group not found");
board.groups[groupIndex] = {
...board.groups[groupIndex],
...updatedGroupData,
- }
- await save(board)
+ };
+ await save(board);
- return board.groups[groupIndex]
+ return board.groups[groupIndex];
} catch (error) {
- console.error('Error updating group:', error)
- throw error
+ console.error("Error updating group:", error);
+ throw error;
}
}
async function updateBoardName(boardId, newName) {
try {
// Retrieve the board by ID
- const board = await getById(boardId)
- if (!board) throw new Error(`Board with ID ${boardId} not found`)
+ const board = await getById(boardId);
+ if (!board) throw new Error(`Board with ID ${boardId} not found`);
// Update the board's name
- board.title = newName
+ board.title = newName;
// Save the updated board back to storage
- const updatedBoard = await save(board)
- return updatedBoard
+ const updatedBoard = await save(board);
+ return updatedBoard;
} catch (error) {
- console.error('Error updating board name:', error)
- throw error
+ console.error("Error updating board name:", error);
+ throw error;
}
}
async function makeFirstBoard() {
const imageLinks = [
- 'https://images.pexels.com/photos/30061809/pexels-photo-30061809/free-photo-of-fashionable-woman-posing-with-colorful-headscarf.jpeg?auto=compress&cs=tinysrgb&w=600',
- 'https://images.pexels.com/photos/30007901/pexels-photo-30007901/free-photo-of-thoughtful-man-in-grey-coat-outdoors.jpeg?auto=compress&cs=tinysrgb&w=600',
- 'https://images.pexels.com/photos/28773362/pexels-photo-28773362/free-photo-of-dynamic-black-and-white-portrait-of-young-man-on-phone.jpeg?auto=compress&cs=tinysrgb&w=600',
- 'https://images.pexels.com/photos/30071289/pexels-photo-30071289/free-photo-of-portrait-of-a-bearded-man-outdoors.jpeg?auto=compress&cs=tinysrgb&w=600',
- ]
+ "https://images.pexels.com/photos/30061809/pexels-photo-30061809/free-photo-of-fashionable-woman-posing-with-colorful-headscarf.jpeg?auto=compress&cs=tinysrgb&w=600",
+ "https://images.pexels.com/photos/30007901/pexels-photo-30007901/free-photo-of-thoughtful-man-in-grey-coat-outdoors.jpeg?auto=compress&cs=tinysrgb&w=600",
+ "https://images.pexels.com/photos/28773362/pexels-photo-28773362/free-photo-of-dynamic-black-and-white-portrait-of-young-man-on-phone.jpeg?auto=compress&cs=tinysrgb&w=600",
+ "https://images.pexels.com/photos/30071289/pexels-photo-30071289/free-photo-of-portrait-of-a-bearded-man-outdoors.jpeg?auto=compress&cs=tinysrgb&w=600",
+ ];
const usersInBoard = [
- { id: 'userid0', fullName: 'tal', color: 'red', imgUrl: imageLinks[0] },
- { id: 'userid1', fullName: 'shal', color: 'green', imgUrl: imageLinks[1] },
- { id: 'userid2', fullName: 'bal', color: 'black', imgUrl: imageLinks[2] },
- { id: 'userid3', fullName: 'shal', color: 'green', imgUrl: imageLinks[3] },
- ]
+ { id: "userid0", fullName: "tal", color: "red", imgUrl: imageLinks[0] },
+ { id: "userid1", fullName: "shal", color: "green", imgUrl: imageLinks[1] },
+ { id: "userid2", fullName: "bal", color: "black", imgUrl: imageLinks[2] },
+ { id: "userid3", fullName: "shal", color: "green", imgUrl: imageLinks[3] },
+ ];
const board = {
- title: 'SAR default board',
+ title: "SAR default board",
members: usersInBoard,
groups: [
{
id: Math.random().toString(36).slice(2),
- title: 'SAR',
- color: 'red',
+ title: "SAR",
+ color: "red",
tasks: [
{
- id: 't101',
- side: 'null',
- taskTitle: 'learn CSS',
+ id: "t101",
+ side: "null",
+ taskTitle: "learn CSS",
members: [usersInBoard[1], usersInBoard[2]],
- date: '27-02-2022',
- status: { text: 'Working on it', color: '#FDAB3D' },
- priority: { text: 'Low', color: '#86B6FB' },
+ date: "27-02-2022",
+ status: { text: "Working on it", color: "#FDAB3D" },
+ priority: { text: "Low", color: "#86B6FB" },
chat: [],
},
{
- id: 't102',
- side: 'null',
- taskTitle: 'learn Vue.js',
+ id: "t102",
+ side: "null",
+ taskTitle: "learn Vue.js",
members: [usersInBoard[0], usersInBoard[1], usersInBoard[2]],
- date: '28-02-2022',
- status: { text: 'Stuck', color: '#DF2F4A' },
- priority: { text: 'Medium', color: '#5559DF' },
+ date: "28-02-2022",
+ status: { text: "Stuck", color: "#DF2F4A" },
+ priority: { text: "Medium", color: "#5559DF" },
chat: [],
},
{
- id: 't103',
- side: 'null',
- taskTitle: 'learn JavaScript',
+ id: "t103",
+ side: "null",
+ taskTitle: "learn JavaScript",
members: [usersInBoard[1], usersInBoard[2], usersInBoard[3]],
- date: '01-03-2022',
- status: { text: 'Done', color: '#00C875' },
- priority: { text: 'Medium', color: '#5559DF' },
+ date: "01-03-2022",
+ status: { text: "Done", color: "#00C875" },
+ priority: { text: "Medium", color: "#5559DF" },
chat: [],
},
],
},
{
id: Math.random().toString(36).slice(2),
- title: 'SAR-2',
+ title: "SAR-2",
- color: 'blue',
+ color: "blue",
tasks: [
{
- id: 't201',
- side: 'null',
- taskTitle: 'write API documentation',
+ id: "t201",
+ side: "null",
+ taskTitle: "write API documentation",
members: [
usersInBoard[0],
usersInBoard[1],
usersInBoard[2],
usersInBoard[3],
],
- date: '03-03-2022',
- status: { text: 'Working on it', color: '#FDAB3D' },
- priority: { text: 'Critical ⚠️', color: '#333333' },
+ date: "03-03-2022",
+ status: { text: "Working on it", color: "#FDAB3D" },
+ priority: { text: "Critical ⚠️", color: "#333333" },
chat: [],
},
{
- id: 't202',
- side: 'null',
- taskTitle: 'debug front-end code',
+ id: "t202",
+ side: "null",
+ taskTitle: "debug front-end code",
members: [usersInBoard[2], usersInBoard[3]],
- date: '05-03-2022',
- status: { text: 'Stuck', color: '#DF2F4A' },
- priority: { text: 'Low', color: '#86B6FB' },
+ date: "05-03-2022",
+ status: { text: "Stuck", color: "#DF2F4A" },
+ priority: { text: "Low", color: "#86B6FB" },
chat: [],
},
{
- id: 't203',
- side: 'null',
- taskTitle: 'deploy application',
+ id: "t203",
+ side: "null",
+ taskTitle: "deploy application",
members: [usersInBoard[1], usersInBoard[3]],
- date: '06-03-2022',
- status: { text: 'Done', color: '#00C875' },
- priority: { text: 'High', color: '#401694' },
+ date: "06-03-2022",
+ status: { text: "Done", color: "#00C875" },
+ priority: { text: "High", color: "#401694" },
chat: [],
},
],
},
{
id: Math.random().toString(36).slice(2),
- title: 'SAR-3',
+ title: "SAR-3",
- color: 'green',
+ color: "green",
tasks: [
{
- id: 't301',
- side: 'null',
- taskTitle: 'set up database schema',
+ id: "t301",
+ side: "null",
+ taskTitle: "set up database schema",
members: [usersInBoard[0], usersInBoard[3]],
- date: '07-03-2022',
- status: { text: 'Not Started', color: '#C4C4C4' },
- priority: { text: 'High', color: '#401694' },
+ date: "07-03-2022",
+ status: { text: "Not Started", color: "#C4C4C4" },
+ priority: { text: "High", color: "#401694" },
chat: [],
},
{
- id: 't302',
- side: 'null',
- taskTitle: 'optimize queries',
+ id: "t302",
+ side: "null",
+ taskTitle: "optimize queries",
members: [usersInBoard[0], usersInBoard[1]],
- date: '08-03-2022',
- status: { text: 'Working on it', color: '#FDAB3D' },
- priority: { text: 'Low', color: '#86B6FB' },
+ date: "08-03-2022",
+ status: { text: "Working on it", color: "#FDAB3D" },
+ priority: { text: "Low", color: "#86B6FB" },
chat: [],
},
],
},
],
- }
+ };
- const boardsFromStorage = await storageService.query(STORAGE_KEY)
+ const boardsFromStorage = await storageService.query(STORAGE_KEY);
if (!boardsFromStorage || boardsFromStorage.length < 2) {
- await storageService.post(STORAGE_KEY, board)
- console.log('First board created successfully')
+ await storageService.post(STORAGE_KEY, board);
+ console.log("First board created successfully");
}
}
+
// newComments = [width: xxx, open: xxx, comments: [{id: xxx, comment: xxx}, ...]]
function saveTempChatInfo(id, width, newComment){
const newCommentsStr = sessionStorage.getItem(CHAT_KEY)
@@ -424,6 +430,31 @@ function getOpenChat(){
else return null
}
+function setFilterStateSession(state) {
+ sessionStorage.setItem("filterState", state);
+}
+function setFilterContextSession(txt){
+ sessionStorage.setItem("filterContext", txt);
+}
+function getFilterContextSession(){
+ const filterContext = sessionStorage.getItem("filterContext");
+ if (filterContext) {
+ return filterContext;
+ } else {
+ setFilterContextSession(false);
+ return "";
+ }
+}
+function getFilterState() {
+ const filterState = sessionStorage.getItem("filterState");
+ if (filterState) {
+ const state = JSON.parse(filterState);
+ return state;
+ } else {
+ setFilterStateSession(false);
+ return false;
+ }
+}
diff --git a/src/store/actions/boards.actions.js b/src/store/actions/boards.actions.js
index 23cf1a6..2ea43ca 100644
--- a/src/store/actions/boards.actions.js
+++ b/src/store/actions/boards.actions.js
@@ -3,7 +3,7 @@ import { showSuccessMsg } from "../../services/event-bus.service";
import { utilService } from "../../services/util.service";
import { store } from "../store";
-import { EDIT_BOARD, REMOVE_BOARD, SET_BOARDS, OPEN_MODAL, SET_FILTER_STATE } from '../reducer/boards.reducer'
+import { EDIT_BOARD, REMOVE_BOARD, SET_BOARDS, OPEN_MODAL, SET_FILTER_BY } from '../reducer/boards.reducer'
export async function addBoard() {
try {
@@ -27,6 +27,7 @@ export async function addBoard() {
export async function loadBoards() {
const boards = await boardService.query();
+ console.log(boards, 'kkkkkkkkk')
await store.dispatch({ type: SET_BOARDS, boards });
showSuccessMsg("Boards loaded");
}
@@ -207,9 +208,17 @@ export async function updateBoardName(boardId, newName) {
}
export async function openModal(taskId){
+ console.log("opened modal")
store.dispatch({ type: OPEN_MODAL, taskId })
}
-export function setFilterState(newState){
- store.dispatch({ type: SET_FILTER_STATE, newState })
+export function handleFilter(filterBy){
+ boardService.setFilterContextSession(filterBy)
+ store.dispatch({ type: SET_FILTER_BY, filterBy })
+}
+
+export function getFilterContext(){
+ const filterBy = boardService.getFilterContextSession()
+ store.dispatch({ type: SET_FILTER_BY, filterBy })
+ return filterBy
}
\ No newline at end of file
diff --git a/src/store/reducer/boards.reducer.js b/src/store/reducer/boards.reducer.js
index 57b2f5f..525ab1a 100644
--- a/src/store/reducer/boards.reducer.js
+++ b/src/store/reducer/boards.reducer.js
@@ -1,36 +1,37 @@
-import { boardService } from "../../services/board.service"
+import { boardService } from "../../services/board.service";
-export const SET_BOARDS = 'SET_BOARDS'
-export const EDIT_BOARD = 'EDIT_BOARD'
-export const REMOVE_BOARD = 'REMOVE_BOARD'
-export const ADD_BOARD = 'ADD_BOARD'
-export const OPEN_MODAL = 'OPEN_MODAL'
-export const SET_FILTER_STATE = 'SET_FILTER_STATE'
+export const SET_BOARDS = "SET_BOARDS";
+export const EDIT_BOARD = "EDIT_BOARD";
+export const REMOVE_BOARD = "REMOVE_BOARD";
+export const ADD_BOARD = "ADD_BOARD";
+export const OPEN_MODAL = "OPEN_MODAL";
+export const SET_FILTER_BY = "SET_FILTER";
const initialState = {
boards: [],
openModal: null,
- filterBy: boardService.getDefaultFilter(),
+ filterBy: "",
filterState: false,
-}
+};
export const boardReducer = (state = initialState, action) => {
switch (action.type) {
case SET_BOARDS:
+ console.log('coko melon')
return {
...state,
boards: action.boards,
- }
+ };
case REMOVE_BOARD:
return {
...state,
boards: state.boards.filter((board) => board.id !== action.boardId),
- }
+ };
case ADD_BOARD:
return {
...state,
boards: [...state.boards, action.board],
- }
+ };
case EDIT_BOARD:
return {
...state,
@@ -42,19 +43,19 @@ export const boardReducer = (state = initialState, action) => {
}
: { ...board }
),
- }
+ };
case OPEN_MODAL:
return {
...state,
- openModal: action.taskId
- }
- case SET_FILTER_STATE:
- return {
- ...state,
- filterState: action.newState
- }
+ openModal: action.taskId,
+ };
+ case SET_FILTER_BY:
+ return {
+ ...state,
+ filterBy: action.filterBy,
+ };
default:
- return state
+ return state;
}
-}
+};
diff --git a/src/styles/_Board-details-header.scss b/src/styles/_Board-details-header.scss
index 4d63f01..935501b 100644
--- a/src/styles/_Board-details-header.scss
+++ b/src/styles/_Board-details-header.scss
@@ -121,7 +121,7 @@ header.board-details-header {
}
& > .filter-input{
padding-left: 5px;
- border: 1px solid black;
+ border: 1px solid #0073ea;
border-radius: 5px;
input{
all: unset; /* Resets all default styles for the input */
diff --git a/src/styles/dynamicCmps/modals/_ChatModal.scss b/src/styles/dynamicCmps/modals/_ChatModal.scss
index 36fba81..df68b66 100644
--- a/src/styles/dynamicCmps/modals/_ChatModal.scss
+++ b/src/styles/dynamicCmps/modals/_ChatModal.scss
@@ -1,5 +1,5 @@
.chat-modal {
- z-index: 1000; // this z-index bs has to be solved..
+ z-index: 200; // this z-index bs has to be solved..
position: fixed; // unfortunately since absolute sticks with group-list element
top: 44px; // probably will change later
right: 0px;
@@ -19,6 +19,7 @@
opacity: 0;
background-color: #f5f6f8;
transition: opacity 0.15s ease;
+ z-index: 200;
&:hover {
cursor: grab;