убрала конфликт при слиянии

Short-Tracker · Feb 1, 2024 · 5a27ef4 · 5a27ef4
2 parents 3027dc6 + 85d3a34
commit 5a27ef4
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 145 deletions.
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -12,8 +12,9 @@ import { lid } from 'assets/images'; // Initial image
 import SideBarUser from 'components/SideBarUser/SideBarUser';
 import SideBarUserMenu from 'components/SideBarUserMenu/SideBarUserMenu';
 import NewEmployeePopup from 'components/Popup/NewEmployee/NewEmployee';
-import React, { useState } from 'react';
-import { useSelector } from 'services/hooks';
+import React, { KeyboardEvent, useState } from 'react';
+import { useDispatch, useSelector } from 'services/hooks';
+import { getAllTeamTasks } from 'store/tasksOfUserSlice';
 import { TTask } from 'types/types';
 import { v4 as uuidv4 } from 'uuid';
 import styles from './SideBar.module.scss';
@@ -22,7 +23,7 @@ const SideBar: React.FC = () => {
   const currentUser = useSelector((state) => state.user);
   const tasks: TTask = useSelector((state) => state.task);
   const currentUsers = useSelector((state) => state.users);
-
+  const dispatch = useDispatch();
   const [isSidebarMenuOpen, setisSidebarMenuOpen] = useState(false);
   const [isNewEmployeePopupOpen, setIsNewEmployeePopupOpen] = useState(false);
 
@@ -36,6 +37,13 @@ const SideBar: React.FC = () => {
 
   const handleCancel = () => {
     setIsNewEmployeePopupOpen(false);
+
+  const showAllTasks = () => dispatch(getAllTeamTasks());
+  const handleKeyDown = (evt: KeyboardEvent) => {
+    if (evt.key === 'Enter' || evt.key === ' ') {
+      evt.preventDefault();
+      showAllTasks();
+    }
   };
 
   return (
@@ -91,10 +99,16 @@ const SideBar: React.FC = () => {
       <ul className={styles.membersWrapper}>
         <li className={styles.teamLi}>
           <img src={AllTeamIcon} className={styles.navImage} alt='иконка' />
-          <button className={styles.allTeamButton}>Вся команда</button>
+          <button
+            className={styles.allTeamButton}
+            onClick={showAllTasks}
+            onKeyDown={handleKeyDown}
+          >
+            Вся команда
+          </button>
         </li>
         {currentUsers.results.map((user) => {
-          return <SideBarUser fullName={user.first_name} key={uuidv4()} />;
+          return <SideBarUser fullName={user.first_name} id={user.id} key={uuidv4()} />;
         })}
       </ul>
       {isNewEmployeePopupOpen && <NewEmployeePopup closePopup={handleCancel} />}

diff --git a/src/components/SideBarUser/SideBarUser.tsx b/src/components/SideBarUser/SideBarUser.tsx
@@ -1,16 +1,29 @@
 import { lid } from 'assets/images'; // Initial image
-import React from 'react';
+import React, { KeyboardEvent } from 'react';
+import { useDispatch } from 'services/hooks';
+import { getUserTasks } from 'store/tasksOfUserSlice';
 import styles from './SidebarUser.module.scss';
 
 type Tprops = {
   fullName: string;
+  id: number;
 };
 
-const SideBarUser: React.FC<Tprops> = ({ fullName }) => {
+const SideBarUser: React.FC<Tprops> = ({ fullName, id }) => {
+  const dispatch = useDispatch();
+  const getTasks = () => dispatch(getUserTasks({ id }));
+  const handleKeyDown = (evt: KeyboardEvent) => {
+    if (evt.key === 'Enter' || evt.key === ' ') {
+      evt.preventDefault();
+      getTasks();
+    }
+  };
   return (
     <li className={styles.memberWrapper}>
       <img className={styles.memberImg} src={lid} alt='Изображение пользователя' />
-      <button className={styles.memberName}>{fullName}</button>
+      <button className={styles.memberName} onClick={getTasks} onKeyDown={handleKeyDown}>
+        {fullName}
+      </button>
     </li>
   );
 };

diff --git a/src/components/Task/Task.tsx b/src/components/Task/Task.tsx
@@ -5,32 +5,33 @@ import { useSelector } from 'services/hooks';
 import { resetActiveMenu, setActiveMenu } from 'store/taskMenuActiveSlice';
 import EditButton from 'ui-lib/Buttons/editTaskButton/editTaskButton';
 import { ClockIcon, CommentsIcon, FlagIcon } from 'ui-lib/Icons';
-import { TPerformers } from '../../types/types';
 import styles from './Task.module.scss';
 
 // содержимое карточки
 export interface TaskProps {
   text: string;
   date: string;
   headerText: string;
-  isLead: boolean | null;
   ownTask: boolean;
   status: string;
   taskID: number;
-  performers: TPerformers[];
   completedTime: string;
+  taskCreatorId: number;
+  isCurrentUserLead: boolean;
+  currentUserId: number;
 }
 
 export const Task: React.FC<TaskProps> = ({
   text,
   date,
   headerText,
-  isLead,
   ownTask,
   status,
   taskID,
-  performers,
   completedTime,
+  taskCreatorId,
+  isCurrentUserLead,
+  currentUserId,
 }) => {
   const [isMenuOpened, setIsMenuOpened] = React.useState(false);
   const dispatch = useDispatch();
@@ -67,7 +68,7 @@ export const Task: React.FC<TaskProps> = ({
   return (
     <div className={styles.container}>
       {/* Шапка отображается только для лида для не своей задачи */}
-      {isLead && !ownTask && (
+      {isCurrentUserLead && currentUserId !== taskCreatorId && (
         <div className={styles.task_header}>
           <ClockIcon />
           <p className={styles.task_header_text}>{headerText}</p>
@@ -77,15 +78,16 @@ export const Task: React.FC<TaskProps> = ({
         {/* Открытие меню редактирования */}
         {isMenuOpened && (
           <TaskEditMenu
-            isLead={isLead}
             ownTask={ownTask}
             handleToggleEditMenu={handleToggleEditMenu}
             handleCloseEditMenu={handleCloseEditMenu}
             status={status}
             taskID={taskID}
-            performers={performers}
             deadlineDate={completedTime}
             description={text}
+            taskCreatorId={taskCreatorId}
+            isCurrentUserLead={isCurrentUserLead}
+            currentUserId={currentUserId}
           />
         )}
 

diff --git a/src/components/TaskEditMenu/TaskEditMenu.tsx b/src/components/TaskEditMenu/TaskEditMenu.tsx
@@ -1,42 +1,54 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
+import { TaskStatus } from 'types/types';
 import { UniversalButton } from 'ui-lib/Buttons';
 import { BallpenIcon, TrashIcon } from 'ui-lib/Icons';
 import { useClose, useDispatch } from '../../services/hooks';
 import updateTaskThunk from '../../thunks/update-task-thunk';
-import { TPerformers } from '../../types/types';
 import styles from './TaskEditMenu.module.scss';
 // import { changeTaskStatus } from '../../store/taskSlice';
 
 export interface TaskEditMenuProps {
-  isLead: boolean | null;
   ownTask: boolean;
   handleToggleEditMenu: () => void;
   handleCloseEditMenu: () => void;
   status: string;
   taskID: number;
-  performers: TPerformers[];
   deadlineDate: string;
   description: string;
+  taskCreatorId: number;
+  isCurrentUserLead: boolean;
+  currentUserId: number;
 }
 
 export const TaskEditMenu: React.FC<TaskEditMenuProps> = ({
-  isLead,
   ownTask,
   handleToggleEditMenu,
   handleCloseEditMenu,
   status,
-  performers,
   deadlineDate,
   description,
   taskID,
+  taskCreatorId,
+  isCurrentUserLead,
+  currentUserId,
 }) => {
+  const [currentStatus, setStatus] = React.useState(status);
   const dispatch = useDispatch();
   useClose(styles.container, handleCloseEditMenu);
-  const notOwnLeadTask = isLead && !ownTask;
-  const notOwnPerformerTask = !isLead && !ownTask;
 
-  const [currentStatus, setStatus] = React.useState(status);
+  const isTaskEditable = currentUserId === taskCreatorId;
+  const isStatusEditable = isTaskEditable || ownTask;
+
+  const isArchivedVisible =
+    status === TaskStatus.ARCHIVED || (status === TaskStatus.DONE && isCurrentUserLead);
+  const isHoldVisible = status === TaskStatus.HOLD || status === TaskStatus.IN_PROGRESS;
+  const isDoneVisible = status === TaskStatus.DONE || status === TaskStatus.IN_PROGRESS;
+  const isInProgressVisible =
+    status === TaskStatus.IN_PROGRESS || status === TaskStatus.TO_DO;
+  const isToDoVisible =
+    status === TaskStatus.TO_DO || (status === TaskStatus.ARCHIVED && isCurrentUserLead);
+
   const onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setStatus(evt.target.value);
   };
@@ -66,8 +78,7 @@ export const TaskEditMenu: React.FC<TaskEditMenuProps> = ({
     <div className={styles.container}>
       {/* Кнопки отображаются у лида для задачи сотруднику, */}
       {/* а также у лида и сотрудника для своей задачи */}
-      {/* как применить условие ИЛИ? */}
-      {(notOwnLeadTask || ownTask) && (
+      {isTaskEditable && (
         <div className={styles.edit_buttons}>
           <div
             className={styles.edit_button}
@@ -79,76 +90,89 @@ export const TaskEditMenu: React.FC<TaskEditMenuProps> = ({
             <BallpenIcon />
             Редактировать
           </div>
-          <div
-            className={styles.edit_button}
-            onClick={handleToggleEditMenu}
-            role='button'
-            tabIndex={0}
-            onKeyDown={handleKeyDown}
-          >
-            <TrashIcon />
-            Удалить
-          </div>
+          {(status === TaskStatus.DONE || status === TaskStatus.ARCHIVED) && (
+            <div
+              className={styles.edit_button}
+              onClick={handleToggleEditMenu}
+              role='button'
+              tabIndex={0}
+              onKeyDown={handleKeyDown}
+            >
+              <TrashIcon />
+              Удалить
+            </div>
+          )}
         </div>
       )}
       {/* Смена статуса отображаются для своих задач */}
       {/* и задачи у сотрудника от лида */}
-      {(notOwnPerformerTask || ownTask) && (
+      {isStatusEditable && (
         <form className={styles.status}>
-          <label className={styles.status_radiobutton}>
-            <input
-              className={styles.status_radiobutton_input}
-              type='radio'
-              value='to do'
-              checked={currentStatus === 'to do'}
-              onChange={onChange}
-            />
-            Todo
-          </label>
-          <label className={styles.status_radiobutton}>
-            <input
-              className={styles.status_radiobutton_input}
-              type='radio'
-              value='in progress'
-              checked={currentStatus === 'in progress'}
-              onChange={onChange}
-            />
-            In progress
-          </label>
-          <label className={styles.status_radiobutton}>
-            <input
-              className={styles.status_radiobutton_input}
-              type='radio'
-              value='done'
-              checked={currentStatus === 'done'}
-              onChange={onChange}
-            />
-            Done
-          </label>
-          {/* <label className={styles.status_radiobutton}> */}
-          {/*  <input */}
-          {/*    className={styles.status_radiobutton_input} */}
-          {/*    type="radio" */}
-          {/*    value="archived" */}
-          {/*    checked={currentStatus === 'archived'} */}
-          {/*    onChange={onChange} */}
-          {/*  /> */}
-          {/*  Archived */}
-          {/* </label> */}
-          <label className={styles.status_radiobutton}>
-            <input
-              className={styles.status_radiobutton_input}
-              type='radio'
-              value='hold'
-              checked={currentStatus === 'hold'}
-              onChange={onChange}
-            />
-            Hold
-          </label>
+          {isToDoVisible && (
+            <label className={styles.status_radiobutton}>
+              <input
+                className={styles.status_radiobutton_input}
+                type='radio'
+                value={TaskStatus.TO_DO}
+                checked={currentStatus === TaskStatus.TO_DO}
+                onChange={onChange}
+              />
+              Todo
+            </label>
+          )}
+          {isInProgressVisible && (
+            <label className={styles.status_radiobutton}>
+              <input
+                className={styles.status_radiobutton_input}
+                type='radio'
+                value={TaskStatus.IN_PROGRESS}
+                checked={currentStatus === TaskStatus.IN_PROGRESS}
+                onChange={onChange}
+              />
+              In progress
+            </label>
+          )}
+          {isDoneVisible && (
+            <label className={styles.status_radiobutton}>
+              <input
+                className={styles.status_radiobutton_input}
+                type='radio'
+                value={TaskStatus.DONE}
+                checked={currentStatus === TaskStatus.DONE}
+                onChange={onChange}
+              />
+              Done
+            </label>
+          )}
+          {isHoldVisible && (
+            <label className={styles.status_radiobutton}>
+              <input
+                className={styles.status_radiobutton_input}
+                type='radio'
+                value={TaskStatus.HOLD}
+                checked={currentStatus === TaskStatus.HOLD}
+                onChange={onChange}
+              />
+              Hold
+            </label>
+          )}
+          {isArchivedVisible && (
+            <label className={styles.status_radiobutton}>
+              <input
+                className={styles.status_radiobutton_input}
+                type='radio'
+                value={TaskStatus.ARCHIVED}
+                checked={currentStatus === TaskStatus.ARCHIVED}
+                onChange={onChange}
+              />
+              Archived
+            </label>
+          )}
           <UniversalButton
             className={styles.status_button}
             type='button'
             onClick={updateTaskStatus}
+            disabled={status === currentStatus}
           >
             <p className={styles.status_button_text}>Переместить</p>
           </UniversalButton>