style: some more styling

Sicnecher · Jan 18, 2025 · f6dd863 · f6dd863
2 parents 888b02f + 5b75103
commit f6dd863
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 184 deletions.
diff --git a/src/cmps/BoardDetails.jsx b/src/cmps/BoardDetails.jsx
@@ -49,12 +49,12 @@ const BoardDetails = () => {
   const onTaskUpdate = async (changeInfo) =>
     await updateTask(currentBoard.id, changeInfo);
 
-  const cmpOrder = ["taskTitle", "priority", "status", "members", "date", "radwan"];
+  const cmpOrder = ["taskTitle", "priority", "status", "members", "date", "+"];
 
   const uid = () => Math.random().toString(36).slice(2);
-  const labels = ["item", "priority", "status", "members", "date"];
+  const labels = ["item", "priority", "status", "members", "date", "+"];
 
-  const progress = [null, null, "priority", "status", null, "date"];
+  const progress = [null, null, "priority", "status", 'nothing', 'nothing', 'nothing'];
 
   const handleCheckBoxClick = (groupId, taskId) => {
     console.log(groupId, taskId);
@@ -120,7 +120,7 @@ const BoardDetails = () => {
 
   return (
     <div className="board-details">
-    <BoardDetailsHeader boardTitle={currentBoard.title} />
+      <BoardDetailsHeader boardTitle={currentBoard.title} />
       <section className="group-list">
         {groups.map((group) => (
           <GroupPreview

diff --git a/src/cmps/GroupPreview.jsx b/src/cmps/GroupPreview.jsx
@@ -5,6 +5,10 @@ import { TaskTitle } from "./dynamicCmps/TaskTitle";
 import { Priority } from "./dynamicCmps/Priority";
 import { AddTask } from "./AddTask.jsx";
 import { useState } from "react";
+import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { ArrowRightIcon } from "@mui/x-date-pickers/icons";
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
 
 export const GroupPreview = ({
   labels,
@@ -26,12 +30,22 @@ export const GroupPreview = ({
   const [expanded, setExpanded] = useState(true);
   const [groupTitle, setGroupTitle] = useState(group.title);
 
-  const style = { borderLeft: `0.3rem solid ${group.color}` };
+  const style = {
+    borderRight: '1px solid #e0dede',
+    borderLeft: `0.3rem solid ${group.color}`,
+    borderTop: '1px solid #e0dede',
+
+
+  };
   const titleHead = { color: group.color };
 
   return (
     <>
       <div className="group-title-flex">
+        <button className="remove" onClick={() => handleDelete(group.id, boardId)}><MoreHorizIcon /></button>
+        <span className="arrow" onClick={() => setExpanded((prev) => !prev)}>
+          {expanded ? <ArrowDownIcon /> : <ArrowRightIcon />}
+        </span>
         <input
           onBlur={() => handleGroupNameChange(groupTitle, group)}
           style={titleHead}
@@ -41,11 +55,9 @@ export const GroupPreview = ({
           onChange={(e) => setGroupTitle(e.target.value)}
         />
 
-        <span className="arrow" onClick={() => setExpanded((prev) => !prev)}>
-          {expanded ? "👇🏻" : "👉🏻"}
-        </span>
 
-        <button className="remove" onClick={() => handleDelete(group.id, boardId)}>X</button>
+
+
       </div>
 
       <section className="group-list">
@@ -63,14 +75,16 @@ export const GroupPreview = ({
                 onChange={() => { }}
                 onClick={() => handleMasterCheckboxClick(group)}
                 checked={checkedGroups.includes(group.id)}
+
               />
               {cmpOrder.map((cmp, index) => (
-                <div key={`label-${index}`}>{labels[index] || ""}</div>
+                <div style={{ textAlign: `${labels[index] === '+' ? 'start' : 'center'}` }} key={`label-${index}`}>{labels[index] || ""}</div>
               ))}
             </section>
 
             {/* Render tasks by cmp order */}
             {group.tasks.map((task) => (
+
               <section
                 className="group grid"
                 key={`task-${task.id}`}
@@ -139,7 +153,7 @@ const DynamicCmp = ({
     case "priority":
       return (
         <Priority
-          cellId={task.id+'priority'}
+          cellId={task.id + 'priority'}
           group={group}
           task={task}
           priority={info}
@@ -150,11 +164,11 @@ const DynamicCmp = ({
     case "taskTitle":
       return (
         <TaskTitle
-          cellId={task.id+'title'}
+          cellId={task.id + 'title'}
           group={group}
           task={task}
           loggedinUser={loggedinUser}
-          users ={users}
+          users={users}
           chat={chat}
           text={info}
           onTaskUpdate={onTaskUpdate}
@@ -164,7 +178,7 @@ const DynamicCmp = ({
     case "status":
       return (
         <Status
-          cellId={task.id+'status'}
+          cellId={task.id + 'status'}
           group={group}
           task={task}
           taskId={task.id}
@@ -176,7 +190,7 @@ const DynamicCmp = ({
     case "members":
       return (
         <Members
-          cellId={task.id+'members'}
+          cellId={task.id + 'members'}
           group={group}
           task={task}
           taskId={task.id}
@@ -189,13 +203,19 @@ const DynamicCmp = ({
     case "date":
       return (
         <Date
-          cellId={task.id+'date'}
+          cellId={task.id + 'date'}
           group={group}
           task={task}
           date={info}
           onTaskUpdate={onTaskUpdate}
         />
       )
+    case "+":
+      return (
+        <div >
+
+        </div>
+      )
 
     default:
       console.error(`Unknown component type: ${cmpType}`);

diff --git a/src/cmps/dynamicCmps/Date.jsx b/src/cmps/dynamicCmps/Date.jsx
@@ -13,8 +13,8 @@ export function Date({ cellId, group, task, date, onTaskUpdate }) {
     // close and open modal as needed
     function modalToggle() {
         modal
-        ? openModal(null)
-        : openModal(cellId)
+            ? openModal(null)
+            : openModal(cellId)
     }
 
     function onDateChange(date) {
@@ -23,12 +23,14 @@ export function Date({ cellId, group, task, date, onTaskUpdate }) {
     }
 
     function handleClickOutsideModal(event) {
-        if ( modalRef.current &&
+        if (modalRef.current &&
             !modalRef.current.contains(event.target) &&
             !dateCellRef.current.contains(event.target)
         ) modalToggle()
     }
 
+
+
     useEffect(() => {
         if (modal) {
             document.addEventListener('mousedown', handleClickOutsideModal);
@@ -42,15 +44,14 @@ export function Date({ cellId, group, task, date, onTaskUpdate }) {
 
 
 
-
-
     return (
         <section className="date">
             {/* Date cell */}
             <div
                 className="date-cell"
                 ref={dateCellRef}
                 onClick={modalToggle}>
+
                 {date}
             </div>
 

diff --git a/src/cmps/dynamicCmps/TaskTitle.jsx b/src/cmps/dynamicCmps/TaskTitle.jsx
@@ -1,20 +1,18 @@
-import {useState, useRef, useEffect } from "react"
+import { useState, useRef, useEffect } from "react"
 import { showErrorMsg } from '../../services/event-bus.service.js'
 import { ChatModal } from "./modals/ChatModal.jsx"
 import ChatIcon from '@mui/icons-material/MapsUgcOutlined';
 import { openModal } from '../../store/actions/boards.actions.js'
 import { useSelector } from "react-redux";
 
-export function TaskTitle ({cellId, 
-  users, 
-  loggedinUser, 
-  chat, 
-  group, 
-  task, 
-  text, 
-  onTaskUpdate }) 
-
-  {
+export function TaskTitle({ cellId,
+  users,
+  loggedinUser,
+  chat,
+  group,
+  task,
+  text,
+  onTaskUpdate }) {
   const [onEditMode, setOnEditMode] = useState(false)
   const [textToEdit, setTextToEdit] = useState(text)
 
@@ -24,12 +22,12 @@ export function TaskTitle ({cellId,
   const modalRef = useRef(null)
   const ChatButtonRef = useRef(null)
 
-    // close and open modal as needed
-    function modalToggle() {
-        modal
-        ? openModal(null)
-        : openModal(cellId)
-    }
+  // close and open modal as needed
+  function modalToggle() {
+    modal
+      ? openModal(null)
+      : openModal(cellId)
+  }
 
   function handleClickOutsideModal(event) {
     if (!modalRef.current.contains(event.target)
@@ -47,36 +45,37 @@ export function TaskTitle ({cellId,
 
   }, [modal])
 
-  function onAddComment(comment){
-    const newComment = {userId: loggedinUser.id,
-      sentAt: new Date().getTime(), 
-      text: comment, 
-      replies:[]
+  function onAddComment(comment) {
+    const newComment = {
+      userId: loggedinUser.id,
+      sentAt: new Date().getTime(),
+      text: comment,
+      replies: []
     }
-    onTaskUpdate({group, task, type:'chat', value: [newComment, ...chat]})
+    onTaskUpdate({ group, task, type: 'chat', value: [newComment, ...chat] })
   }
 
-  function onAddReply(commentSentTime, replyTxt){
-    const newReply = {userId: loggedinUser.id, sentAt: new Date().getTime(), text: replyTxt}
+  function onAddReply(commentSentTime, replyTxt) {
+    const newReply = { userId: loggedinUser.id, sentAt: new Date().getTime(), text: replyTxt }
     const updatedChat = chat.map(comment => {
       return comment.sentAt === commentSentTime
         ? { ...comment, replies: [newReply, ...comment.replies] }
         : comment
     })
 
-    console.log(updatedChat[0].replies) // reply not here
+    console.log(updatedChat[0].replies)
     onTaskUpdate({ group, task, type: 'chat', value: updatedChat })
   }
 
-  // toggel btween spectate and edit mode
+
   function toggleEditMode() {
     if (onEditMode) {
-      // not alowing user insert unvalid title
+
       if (!checkTitleValidation(textToEdit)) {
         setTextToEdit(text)
         showErrorMsg("Name can't be empty")
       }
-      // if everyting ok update title changes
+
       else {
         onTaskUpdate({ group, task, type: 'taskTitle', value: textToEdit })
       }
@@ -106,13 +105,13 @@ export function TaskTitle ({cellId,
     }
   }
 
-  function onUpdateTitleInChat(text){
+  function onUpdateTitleInChat(text) {
     onTaskUpdate({ group, task, type: 'taskTitle', value: text })
   }
 
   return (
     <>
-      <section className="task-title">
+      <section className="task-title ">
         <div className="title-part">
           {
             !onEditMode
@@ -127,25 +126,26 @@ export function TaskTitle ({cellId,
               />
           }
         </div>
-        <div style={{ borderLeft: '1px solid rgb(232, 232, 232)', padding: '.8rem', color: 'rgb(128, 128, 128)', cursor: 'pointer' }}>
+        <div className="chat-icon">
           <ChatIcon onClick={modalToggle} ref={ChatButtonRef} />
         </div>
       </section >
 
       {/*chat modal*/}
-      {modal && 
-          <div ref={modalRef}>
-            <ChatModal 
-              onAddReply={onAddReply} 
-              onAddComment={onAddComment} 
-              chat={chat}
-              users={[...users]}
-              loggedinUser={loggedinUser}
-              text={text}
-              onUpdateTitleInChat={onUpdateTitleInChat}
-              modalToggle={modalToggle}/>
-          </div>
-        }
+      {
+        modal &&
+        <div ref={modalRef}>
+          <ChatModal
+            onAddReply={onAddReply}
+            onAddComment={onAddComment}
+            chat={chat}
+            users={[...users]}
+            loggedinUser={loggedinUser}
+            text={text}
+            onUpdateTitleInChat={onUpdateTitleInChat}
+            modalToggle={modalToggle} />
+        </div>
+      }
 
     </>
   )

diff --git a/src/cmps/dynamicCmps/modals/DateModal.jsx b/src/cmps/dynamicCmps/modals/DateModal.jsx
@@ -7,28 +7,25 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 import dayjs from 'dayjs';
 
-export function DateModal({currentDate, onDateChange }) {
+export function DateModal({ currentDate, onDateChange }) {
 
-    // the currant day on date cell that convert to dayjs style that DateCalendar supports
-    const [newJday,setNewJday] = useState(dayjs(currentDate, 'DD-MM-YYYY'))
+    const [newJday, setNewJday] = useState(dayjs(currentDate, 'DD-MM-YYYY'))
 
-    // fixing some library problem with DD-MM form...
-    useEffect(()=>{
+    useEffect(() => {
         setNewJday(dayjs(currentDate, 'DD-MM-YYYY'))
-    },[currentDate])
+    }, [currentDate])
 
     const handleDateChange = newDate => {
-        // Format the date to MM-DD-YYYY
         const formattedDate = newDate.format('DD-MM-YYYY')
         onDateChange(formattedDate)
     }
 
     return (
         <section className="date-modal">
             <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <DateCalendar 
-                value={newJday}
-                onChange={handleDateChange}/>
+                <DateCalendar
+                    value={newJday}
+                    onChange={handleDateChange} />
             </LocalizationProvider>
         </section>
     )