On Grid Select Data Boards Lists Items Tasks

strawhat19 · Feb 17, 2025 · d294445 · d294445
1 parent 91209c8
commit d294445
Show file tree

Hide file tree

Showing 12 changed files with 314 additions and 101 deletions.
diff --git a/components/boards/board.tsx b/components/boards/board.tsx
@@ -1,11 +1,12 @@
 import Column from './column';
-import { getBoardTitleWidth, ItemTypes } from './boards';
 import { toast } from 'react-toastify';
+import { getBoardTitleWidth, ItemTypes } from './boards';
 import ConfirmAction from '../context-menus/confirm-action';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { forceFieldBlurOnPressEnter } from '../../shared/constants';
 import React, { useState, useContext, useEffect, useRef } from 'react';
 import { capitalizeAllWords, dev, formatDate, generateUniqueID, StateContext } from '../../pages/_app';
+import { Types } from '../../shared/types/types';
 
 export const addBoardScrollBars = () => {
     let boardColumnItems = document.querySelectorAll(`.boardColumnItems`);
@@ -76,9 +77,19 @@ export default function Board(props) {
 
     const expandCollapseBoard = (e, board) => {
         setBoard(prevBoard => {
-            return {
-                ...prevBoard,
-                expanded: !prevBoard.expanded,
+            if (board?.type == Types.Board) {
+                return {
+                    ...prevBoard,
+                    options: {
+                        ...prevBoard?.options,
+                        expanded: !prevBoard?.options?.expanded,
+                    }
+                }
+            } else {
+                return {
+                    ...prevBoard,
+                    expanded: !prevBoard.expanded,
+                }
             }
         });
     }
@@ -102,11 +113,11 @@ export default function Board(props) {
         e.preventDefault();
         setLoading(true);
         setSystemStatus(`Creating Column.`);
-        let newListID = `list_${board?.columnOrder.length + 1}`;
+        let newListID = `list_${board?.data?.columnIDs.length + 1}`;
         let columnID = `${newListID}_${generateUniqueID(IDs)}`;
         let formFields = e.target.children;
 
-        const newColumnOrder = Array.from(board?.columnOrder);
+        const newColumnOrder = Array.from(board?.data?.columnIDs);
         newColumnOrder.push(columnID);
 
         const newColumn = {
@@ -162,13 +173,16 @@ export default function Board(props) {
        }
 
         if (type === `column`) {
-            const newColumnOrder = Array.from(board?.columnOrder);
+            const newColumnOrder = Array.from(board?.data?.columnIDs);
             newColumnOrder.splice(source.index, 1);
             newColumnOrder.splice(destination.index, 0, draggableId);
 
             setBoard({
                 ...board,
-                columnOrder: newColumnOrder,
+                data: {
+                    ...board.data,
+                    listIDs: newColumnOrder,
+                }
             });
             return;
         }
@@ -221,16 +235,16 @@ export default function Board(props) {
         });
     }
 
-    // useEffect(() => {
-    //     let thisBoard = boards.find(brd => brd.id == board.id);
-    //     if (thisBoard) {
-    //         setBoard(thisBoard);
-    //     }
-    // }, [boards])
+    useEffect(() => {
+        let thisBoard = boards.find(brd => brd.id == board.id);
+        if (thisBoard) {
+            setBoard(thisBoard);
+        }
+    }, [boards])
 
     useEffect(() => {
         if (updates > 0) {
-            // dev() && board?.columnOrder &&  board?.columnOrder.length > 0 && console.log(`Updated Board`, board);
+            // dev() && board?.data?.columnIDs &&  board?.data?.columnIDs.length > 0 && console.log(`Updated Board`, board);
             setBoards(prevBoards => {
                 return prevBoards.map(brd => {
                     if (brd.id == board.id) {
@@ -259,7 +273,7 @@ export default function Board(props) {
         setPage(`Boards`);
         setUpdates(updates + 1);
         // dev() && console.log(`Updates`, updates);
-        // dev() && board?.columnOrder &&  board?.columnOrder.length > 0 && console.log(`Board`, board);
+        // dev() && board?.data?.columnIDs &&  board?.data?.columnIDs.length > 0 && console.log(`Board`, board);
 
     },  [board])
 
@@ -268,14 +282,14 @@ export default function Board(props) {
             <section className={`boardsTitle boards`} style={{paddingBottom: 0}}>
                 <div className={`board boardInner boardTitle`}>
                     <div {...props.provided.dragHandleProps} className={`boardDetailsRowContainer titleRow flex row`}>
-                        <div className={`boardDetailsRow flex row innerRow ${board?.expanded ? `expandedBoardDetailsRow` : `collapsedBoardDetailsRow`}`}>
-                            <div className={`boardIndexAndTitle flex row left ${board?.expanded ? `` : `stretch`}`}>
+                        <div className={`boardDetailsRow flex row innerRow ${(board?.expanded || board?.options?.expanded) ? `expandedBoardDetailsRow` : `collapsedBoardDetailsRow`}`}>
+                            <div className={`boardIndexAndTitle flex row left ${(board?.expanded || board?.options?.expanded) ? `` : `stretch`}`}>
                                 <h3 className={`boardIndexBadge`}>
                                     <span className={`subscript itemOrder slashes`}>
                                         {props.index + 1}
                                     </span>
                                 </h3>
-                                <h2 className={`boardTitleField ${board?.expanded ? `` : `stretch`}`}>
+                                <h2 className={`boardTitleField ${(board?.expanded || board?.options?.expanded) ? `` : `stretch`}`}>
                                     <input 
                                         type={`text`} 
                                         ref={boardNameRef} 
@@ -285,11 +299,11 @@ export default function Board(props) {
                                         defaultValue={board?.name ?? `Board`} 
                                         onBlur={(e) => changeLabel(e, board, setBoard)} 
                                         onKeyDown={(e) => forceFieldBlurOnPressEnter(e)}
-                                        style={{ width: board?.expanded ? (board.titleWidth ? board.titleWidth : `75px`) : `100%` }} 
-                                        className={`boardNameField changeLabel textOverflow ${board?.expanded ? `expandedBoardChangeLabel` : `stretch collapsedBoardChangeLabel`}`} 
+                                        style={{ width: (board?.expanded || board?.options?.expanded) ? (board.titleWidth ? board.titleWidth : `75px`) : `100%` }} 
+                                        className={`boardNameField changeLabel textOverflow ${(board?.expanded || board?.options?.expanded) ? `expandedBoardChangeLabel` : `stretch collapsedBoardChangeLabel`}`} 
                                     />
                                 </h2>
-                                {board?.expanded && <>
+                                {(board?.expanded || board?.options?.expanded) && <>
                                     <h3 className={`boardDate`}>
                                         <span className={`subscript rowDate itemDate itemName itemCreated itemUpdated textOverflow extended flex row`}>
                                             <i> - </i>
@@ -331,16 +345,16 @@ export default function Board(props) {
                                     |
                                 </span>
                             </h3>
-                            <div className={`boardOptionsRow flex row right ${board?.expanded ? `expandedBoardOptionsRow` : `collapsedBoardOptionsRow`}`}>
-                                {board?.expanded && <>
+                            <div className={`boardOptionsRow flex row right ${(board?.expanded || board?.options?.expanded) ? `expandedBoardOptionsRow` : `collapsedBoardOptionsRow`}`}>
+                                {(board?.expanded || board?.options?.expanded) && <>
                                     <h3 className={`boardOptions filtersSubscript`}>
                                         <span className={`boardOptionsLabel subscript`}>
                                             Options   
                                         </span>
                                     </h3>
                                 </>}
                                 <div className={`filterFormDiv filterButtons itemButtons`} style={{textAlign: `center`, justifyContent: `space-between`, alignItems: `center`}}>
-                                    {board?.expanded && <>
+                                    {(board?.expanded || board?.options?.expanded) && <>
                                         <button onClick={(e) =>  filterSubtasks(e)} id={`filter_tasks`} style={{ pointerEvents: `all`, width: `8%`, minWidth: 33, maxWidth: 33 }} title={`Filter Tasks`} className={`iconButton deleteButton filterButton ${(board.hideAllTasks || board?.tasksFiltered) ? `filterActive` : `filterInactive`}`}>
                                             <i style={{ color: `var(--gameBlue)`, fontSize: 13 }} className={`fas ${(board?.tasksFiltered && !board.hideAllTasks) ? `fa-times-circle` : board.hideAllTasks ? `fa-list-ol` : `fa-bars`}`}></i>
                                             <span className={`iconButtonText textOverflow extended`}>
@@ -402,7 +416,7 @@ export default function Board(props) {
                                         </button>
                                         {boards?.length > 1 && (
                                             <button onClick={(e) => expandCollapseBoard(e, board)} className={`iconButton`}>
-                                                {board?.expanded ? <i style={{ color: `var(--gameBlue)`, fontSize: 13 }} className="fas fa-chevron-up"></i> : <i style={{ color: `var(--gameBlue)`, fontSize: 13 }} className="fas fa-chevron-down"></i>}
+                                                {(board?.expanded || board?.options?.expanded) ? <i style={{ color: `var(--gameBlue)`, fontSize: 13 }} className="fas fa-chevron-up"></i> : <i style={{ color: `var(--gameBlue)`, fontSize: 13 }} className="fas fa-chevron-down"></i>}
                                             </button>
                                         )}
                                     </div>
@@ -412,11 +426,11 @@ export default function Board(props) {
                     </div>
                 </div>
             </section>
-            {board?.columnOrder && board?.columnOrder?.length > 0 && (
+            {board?.data?.columnIDs && board?.data?.columnIDs?.length > 0 && (
                 <Droppable droppableId={`${board.id}_boardColumns`} direction="horizontal" type="column">
                     {(provided, snapshot) => (
-                        <section id={`board_${board.id}`} className={`board lists columns container ${board?.expanded ? `expanded` : `collapsed`} ${snapshot.isDraggingOver ? `isDraggingOver` : ``} ${board?.columnOrder && (board?.columnOrder.length == 2 ? `clipColumns` : board?.columnOrder.length == 3 ? `threeBoard overflowingBoard` : board?.columnOrder.length > 3 ? `moreBoard overflowingBoard` : ``)}`} ref={provided.innerRef} {...provided.droppableProps} style={props.style}>
-                            {board?.columnOrder && board?.columnOrder.map((columnId, index) => {
+                        <section id={`board_${board.id}`} className={`board lists columns container ${(board?.expanded || board?.options?.expanded) ? `expanded` : `collapsed`} ${snapshot.isDraggingOver ? `isDraggingOver` : ``} ${board?.data?.columnIDs && (board?.data?.columnIDs.length == 2 ? `clipColumns` : board?.data?.columnIDs.length == 3 ? `threeBoard overflowingBoard` : board?.data?.columnIDs.length > 3 ? `moreBoard overflowingBoard` : ``)}`} ref={provided.innerRef} {...provided.droppableProps} style={props.style}>
+                            {board?.data?.columnIDs && board?.data?.columnIDs.map((columnId, index) => {
                                 const column = board?.columns[columnId];
                                 const items = column.itemIds.map(itemId => board?.items[itemId]);
                                 if (!column.itemType) column.itemType = ItemTypes.Item;

diff --git a/components/boards/boards.tsx b/components/boards/boards.tsx
@@ -1,13 +1,12 @@
 import Board from './board';
 import { toast } from 'react-toastify';
 import { createBoard } from '../../shared/database';
-import { getBoardsFromBoardIds } from '../../firebase';
 import MultiSelector from '../selector/multi-selector';
-import { useState, useEffect, useContext } from 'react';
 import IVFSkeleton from '../loaders/skeleton/ivf_skeleton';
+import { useState, useEffect, useContext, useRef } from 'react';
 import { capWords, dev, replaceAll, StateContext } from '../../pages/_app';
 import { Droppable, Draggable, DragDropContext } from 'react-beautiful-dnd';
-import { findHighestNumberInArrayByKey, generateArray } from '../../shared/constants';
+import { findHighestNumberInArrayByKey, generateArray, isValid } from '../../shared/constants';
 
 export enum ItemTypes {
     Item = `Item`,
@@ -37,32 +36,30 @@ export default function Boards(props: any) {
         user, 
         authState,
         setLoading, 
+        usersGrids,
         IDs, setIDs, 
         setSystemStatus, 
+        setUsersGridsState,
         rte, router, setRte, 
-        grids, gridsLoading, selectedGrids, setSelectedGrids, 
         boards, userBoards, setBoards, boardsLoading, setBoardsLoading,
+        grids, gridsLoading, selectedGrids, selectedGrid, setSelectedGrids, 
     } = useContext<any>(StateContext);
 
     let { dbBoards = boards } = props;
 
+    const multiSelectorRef = useRef(null);
     let [updates, setUpdates] = useState(0);
     let [useSingleSelect, ] = useState(true);
     let [useGridSearchCreate, ] = useState(false);
     let [searchingGrid, setSearchingGrid] = useState(true);
-
-    const setBoardsFromGrid = async (activeGrid) => {
-        setBoardsLoading(true);
-        let boardsForGrid = await getBoardsFromBoardIds(activeGrid?.data?.boardIDs);
-        setBoards(boardsForGrid);
-        setBoardsLoading(false);
-    }
 
     const updateSelectedGrids = async (updatedSelectedGrids) => {
-        setSelectedGrids(updatedSelectedGrids);
-        let activeGrid = updatedSelectedGrids[0];
-        // updateUserFields()
-        if (activeGrid) setBoardsFromGrid(activeGrid);
+        let thisGrid = updatedSelectedGrids[0];
+        setUsersGridsState(thisGrid?.id, usersGrids, false);
+        let userGridURL = `/user/${user?.rank}/grids/${thisGrid?.rank}`;
+        router.replace(userGridURL, undefined, {
+            shallow: true,
+        });
     }
 
     const onDragEnd = (dragEndEvent) => {
@@ -78,7 +75,7 @@ export default function Boards(props: any) {
         let updatedBoardsPositions = updatedBoards.map((brd, brdIndex) => ({ ...brd, position: brdIndex + 1 }));
         setBoards(updatedBoardsPositions);
 
-        // dev() && console.log(`Boards Drag`, updatedBoardsPositions);
+        dev() && console.log(`Boards Drag`, updatedBoardsPositions);
     }
 
     const addNewBoard = async (e) => {
@@ -161,7 +158,7 @@ export default function Boards(props: any) {
             <div className={`row gridRow ${gridsLoading ? `gridsAreLoading` : ``} ${(gridsLoading || grids?.length > 1) ? `hasGridSelector ${useSingleSelect ? `withSingleSelect` : ``}` : ``}`} style={{ padding: 0, paddingBottom: 7 }}>
                 <div className={`flex row left`} style={{ height: `var(--buttonSize)` }}>
                     <h1 className={`nx-mt-2 nx-text-4xl nx-font-bold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100`} style={{ maxWidth: `unset` }}>
-                        {user != null ? user?.name + `s ` : ``}{selectedGrids.length == 1 ? selectedGrids[0]?.name + (!useGridSearchCreate ? ` Grid` : ``) : `Grids`}
+                        {user != null ? user?.name + `s ` : ``}{(!gridsLoading && selectedGrids.length == 1) ? selectedGrids[0]?.name + (!useGridSearchCreate ? ` Grid` : ``) : `Grids`}
                     </h1>
                 </div>
                 <div className={`flex row middle`} style={{ textAlign: `center`, height: `var(--buttonSize)` }}>
@@ -188,9 +185,9 @@ export default function Boards(props: any) {
                     ) : grids?.length > 1 && (
                         <MultiSelector 
                             options={grids} 
+                            ref={multiSelectorRef}
                             id={`select_grid_type`}
                             single={useSingleSelect}
-                            defaultValue={selectedGrids} 
                             showClearAll={!useSingleSelect}
                             inputDisabled={useSingleSelect}
                             placeholder={`Search Grids to View`}
@@ -228,7 +225,8 @@ export default function Boards(props: any) {
                                 {(provided, snapshot) => (
                                     <div className={`all_boards_div ${snapshot.isDraggingOver ? `isDraggingOver` : ``}`} ref={provided.innerRef} {...provided.droppableProps}>
                                         {dbBoards && dbBoards?.length > 0 && dbBoards?.map((bord, bordIndex) => {
-                                            if (bord.expanded == null || bord.expanded == undefined) bord.expanded = true;
+                                            let boardDefaultExpanded = !isValid(bord?.expanded) || bord?.options?.expanded;
+                                            bord.expanded = boardDefaultExpanded;
                                             return (
                                                 <Draggable key={`${bordIndex + 1}_${bord.id}_bord_key`} draggableId={`${bordIndex + 1}_${bord.id}_draggable_bord`} index={bordIndex}>
                                                     {(provided, snapshot) => (

diff --git a/components/form.tsx b/components/form.tsx
@@ -71,6 +71,7 @@ export default function Form(props?: any) {
   const { id, navForm, className, style } = props;
 
   const { 
+    devEnv,
     onSignIn,
     onSignOut, 
     setContent,
@@ -362,14 +363,7 @@ export default function Form(props?: any) {
         </> : <></>}
       </> : <></>}
 
-      {formButtonField(
-        `Users Loading`, 
-        `usersSkeleton`, 
-        user ? `Sign Out` : authState,
-        <input className={(user && window?.location?.href?.includes(`profile`) || (authState == `Sign In` || authState == `Sign Up`)) ? `submit half` : `submit full`} type="submit" name="authFormSubmit" value={user ? `Sign Out` : authState} />,
-      )}
-
-      {user != null && (
+      {devEnv && user != null && (
         <div className={`formFieldWithConfirm`} style={{ position: `relative` }}>
           {formButtonField(
             `Users Loading`, 
@@ -383,6 +377,13 @@ export default function Form(props?: any) {
         </div>
       )}
 
+      {formButtonField(
+        `Users Loading`, 
+        `usersSkeleton`, 
+        user ? `Sign Out` : authState,
+        <input className={(user && window?.location?.href?.includes(`profile`) || (authState == `Sign In` || authState == `Sign Up`)) ? `submit half` : `submit full`} type="submit" name="authFormSubmit" value={user ? `Sign Out` : authState} />,
+      )}
+
       {(authState == `Sign In` || authState == `Sign Up`) && (
         formButtonField(
           `Users Loading`, 

diff --git a/components/grids/grid.tsx b/components/grids/grid.tsx
@@ -1,11 +1,7 @@
-import { useContext } from 'react';
 import Boards from '../boards/boards';
-import { StateContext } from '../../pages/_app';
 
 export default function Grid(props: any) {
-    let { user, selectedGrids} = useContext<any>(StateContext);
-    let { grid, grid_id = user != null ? user?.lastSelectedGridID : selectedGrids?.length > 0 ? selectedGrids[0]?.id : ``, className = `gridComponent` } = props;
-
+    let { className = `gridComponent` } = props;
     return (
         <div className={`grid userGrid ${className}`}>
             <Boards />