fix create task popup and fix bugs

Short-Tracker · Feb 4, 2024 · bbcf9c8 · bbcf9c8
1 parent 85d3a34
commit bbcf9c8
Show file tree

Hide file tree

Showing 13 changed files with 124 additions and 36 deletions.
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
@@ -9,3 +9,6 @@
   margin: 0 auto;
   text-rendering: optimizeLegibility;
 }
+.no-scroll {
+  overflow: hidden;
+}
diff --git a/src/components/Popup/CreateTask/CreateTask.module.scss b/src/components/Popup/CreateTask/CreateTask.module.scss
@@ -27,6 +27,7 @@
     border-radius: 8px;
     width: 100%;
     padding: 0;
+    cursor: pointer;
   }
   &__container {
     display: none;
@@ -36,45 +37,55 @@
     width: 100%;
     background-color: v.$white-color;
     border-radius: 0 0 8px 8px;
-    border-right: 1px solid v.$disabled-color;
-    border-bottom: 1px solid v.$disabled-color;
-    border-left: 1px solid v.$disabled-color;
+    border-right: 1px solid v.$accent-color;
+    border-bottom: 1px solid v.$accent-color;
+    border-left: 1px solid v.$accent-color;
   }
   &__select {
     width: 100%;
     height: 36px;
     border-radius: 8px;
     border: 1px solid v.$disabled-color;
     display: flex;
+    overflow: hidden;
   }
   &__show {
     display: block;
   }
   &__borders {
     border-radius: 8px 8px 0 0;
+    border-color: v.$accent-color;
   }
   &__mesh {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-gap: 4px;
+    margin-top: 12px;
+    overflow: auto;
   }
   &__label {
     margin-left: 16px;
     display: flex;
     align-items: center;
+    height: 24px;
   }
   &__text {
     margin-left: 10px;
   }
 }
+.name__title {
+  @include m.Body;
+  color: v.$black2-color;
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+}
 .textarea__container {
   width: 100%;
   max-width: 510px;
   margin-bottom: 16px;
   height: 120px;
 }
 .calendar {
-  margin-bottom: 16px;
   max-width: 250px;
   width: 100%;
   &__title {
@@ -101,7 +112,7 @@
     padding: 8px 16px;
     text-align: start;
     @include m.BodyLarge;
-    color: v.$disabled-color;
+    color: v.$black2-color;
     &:last-child {
       margin-right: 0;
     }
@@ -145,17 +156,12 @@
 .datetime {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   width: 100%;
   max-width: 510px;
 }
 .timeContainer {
   max-width: 250px;
   width: 100%;
-  height: 100%;
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
   margin-bottom: 16px;
 }
 .time {

diff --git a/src/components/Popup/CreateTask/CreateTask.tsx b/src/components/Popup/CreateTask/CreateTask.tsx
@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent, SyntheticEvent, useState } from 'react';
+import React, { BaseSyntheticEvent, SyntheticEvent, useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import styles from './CreateTask.module.scss';
 import CheckBox from '../../../ui-lib/CheckBoxes/CheckBox/CheckBox';
@@ -10,30 +10,30 @@ import { useDispatch, useSelector } from '../../../services/hooks';
 import { closeModal } from '../../../store';
 import createTaskThunk from '../../../thunks/create-task-thunk';
 import getTaskThunk from '../../../thunks/get-task-thunks';
-import { TTask } from '../../../types/types';
 
 type CheckboxValues = Record<string, boolean>;
 const CreateTask = () => {
   const dispatch = useDispatch();
   const closeModalState = () => {
     dispatch(closeModal());
   };
+  const user = useSelector((state) => state.user);
   const currentUsers = useSelector((state) => state.users);
   const users = currentUsers.results;
   const [showCheckboxesMenu, setShowCheckboxesMenu] = useState<boolean>(true);
   const [checkboxValues, setCheckboxValues] = useState<CheckboxValues>({});
   const [textareaValue, setTextareaValue] = useState<string>('');
   const [dateDropdownOpen, setDateDropdownOpen] = useState<boolean>(false);
   const [dateValue, setDateValue] = useState<string>('');
+  const [performersId, setPerformersId] = useState<number[]>([]);
 
-  const tasks: TTask = useSelector((state) => state.task);
   const createTaskState = (event: SyntheticEvent) => {
     event.preventDefault();
     dispatch(
       createTaskThunk({
         description: textareaValue,
         deadline_date: dateValue,
-        performers: [2],
+        performers: performersId,
       })
     );
     dispatch(getTaskThunk(true));
@@ -52,11 +52,59 @@ const CreateTask = () => {
     setDateValue(formattedValue);
     handleDateButtonClick();
   };
+  const encodeTo = (word: string) => {
+    return decodeURI(word);
+  };
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { target } = event;
-    const { name, value } = target;
+    const { name, id } = target;
     setCheckboxValues({ ...checkboxValues, [name]: target.checked });
+    if (target.checked && target.name !== 'всем') {
+      setPerformersId([...performersId, parseInt(id, 10)]);
+    } else {
+      setPerformersId(performersId.filter((item) => item !== parseInt(id, 10)));
+    }
+    if (target.name === 'всем') {
+      // eslint-disable-next-line array-callback-return
+      currentUsers.results.map((item) => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        setCheckboxValues((checkboxValues) => ({
+          ...checkboxValues,
+          [item.first_name]: true,
+        }));
+      });
+      const usersIdWithoutAll = currentUsers.results.slice(1);
+      // eslint-disable-next-line array-callback-return
+      usersIdWithoutAll.map((userId) => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        setPerformersId((performersId) => [...performersId, userId.id]);
+      });
+    }
+    if (target.name === 'всем' && !target.checked) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key in checkboxValues) {
+        if (checkboxValues[key]) {
+          delete checkboxValues[key];
+          setCheckboxValues({ ...checkboxValues });
+        }
+      }
+      setPerformersId([]);
+    }
+  };
+  const cleanData = () => {
+    // eslint-disable-next-line guard-for-in,no-restricted-syntax
+    for (const key in checkboxValues) {
+      if (!checkboxValues[key]) {
+        delete checkboxValues[key];
+        setCheckboxValues({ ...checkboxValues });
+      }
+    }
   };
+  useEffect(() => {
+    cleanData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [checkboxValues]);
+
   return (
     <form className={styles.form} onSubmit={createTaskState}>
       <div className={styles.checkboxes}>
@@ -68,7 +116,11 @@ const CreateTask = () => {
               !showCheckboxesMenu && styles.checkboxes__borders
             }`}
           >
-            <p className={styles.calendar__title}>Выберите сотрудника</p>
+            {Object.keys(checkboxValues).map((item) => (
+              <p className={styles.name__title} key={uuidv4()}>
+                {item},
+              </p>
+            ))}
           </div>
         </div>
         <div
@@ -78,14 +130,36 @@ const CreateTask = () => {
           id='checkboxes'
         >
           <div className={styles.checkboxes__mesh}>
-            {users.map((item, index) => (
+            <div className={styles.checkboxes__label} key={uuidv4()}>
+              <CheckBox
+                id={user.id}
+                name={user.first_name}
+                checked={checkboxValues[user.first_name] || false}
+                onChange={handleChange}
+              />
+              <p className={styles.name__title}>Себе</p>
+            </div>
+            <div className={styles.checkboxes__label} key={uuidv4()}>
+              <CheckBox
+                id='-1'
+                name='всем'
+                checked={checkboxValues[encodeTo('всем')] || false}
+                onChange={handleChange}
+              />
+              <p className={styles.name__title}>Всем</p>
+            </div>
+            {users.map((item) => (
               <div className={styles.checkboxes__label} key={uuidv4()}>
                 <CheckBox
+                  id={item.id}
                   name={item.first_name}
                   checked={checkboxValues[item.first_name] || false}
                   onChange={handleChange}
                 />
-                <p className={styles.checkboxes__text}>{item.first_name}</p>
+                <p className={styles.name__title}>
+                  {item.first_name}&ensp;
+                  {item.last_name}
+                </p>
               </div>
             ))}
           </div>
@@ -121,8 +195,8 @@ const CreateTask = () => {
           </div>
         </div>
         <div className={styles.timeContainer}>
-          <p className={styles.form__label}>Время (по МСК)</p>
-          <input className={styles.time} placeholder='--/--' />
+          <p className={styles.calendar__title}>Время (по МСК)</p>
+          <input className={styles.time} placeholder='--/--' disabled />
         </div>
       </div>
       <div className={styles.linkInput}>

diff --git a/src/components/Popup/Popup.module.scss b/src/components/Popup/Popup.module.scss
@@ -16,7 +16,6 @@
     content: '';
     width: 100%;
     height: 100%;
-    background-color: rgba(20, 20, 20, 0.2);
     opacity: 0.5;
   }
 

diff --git a/src/fonts/Onest.scss b/src/fonts/Onest.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'Onest';
+  font-family: 'Onest-Regular';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
@@ -8,7 +8,7 @@
     url('./Onest/Onest-Regular.woff') format('woff');
 }
 @font-face {
-  font-family: 'Onest';
+  font-family: 'Onest-Black';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
@@ -17,7 +17,7 @@
     url('./Onest/Onest-Black.woff') format('woff');
 }
 @font-face {
-  font-family: 'Onest';
+  font-family: 'Onest-Bold';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
@@ -26,7 +26,7 @@
     url('./Onest/Onest-Bold.woff') format('woff');
 }
 @font-face {
-  font-family: 'Onest';
+  font-family: 'Onest-Light';
   font-style: normal;
   font-weight: 200;
   font-display: swap;
@@ -35,7 +35,7 @@
     url('./Onest/Onest-Light.woff') format('woff');
 }
 @font-face {
-  font-family: 'Onest';
+  font-family: 'Onest-Medium';
   font-style: normal;
   font-weight: 500;
   font-display: swap;

diff --git a/src/globalStyles/mixins.scss b/src/globalStyles/mixins.scss
@@ -54,7 +54,6 @@
 @mixin H1 {
   font-family: Onest, sans-serif;
   font-size: 20px;
-  line-height: auto;
   font-weight: 700;
 }
 

diff --git a/src/index.scss b/src/index.scss
@@ -1,5 +1,6 @@
-@use './fonts/Onest.scss';
-
+@use './fonts/Onest';
+@use './globalStyles/normalize.scss';
+@use './components/App/App.module.scss';
 * {
   box-sizing: border-box;
   margin: 0;

diff --git a/src/pages/Main/Lead/Lead.tsx b/src/pages/Main/Lead/Lead.tsx
@@ -91,7 +91,6 @@ const Lead: FC<ITaskCard> = ({ allTasks }) => {
         : results,
     [results, tasksOfUserId]
   );
-  console.log(resultsToRender);
   const openCreateTask = () => {
     dispatch(openCreateTaskModal());
   };

diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
@@ -1,5 +1,5 @@
 import Login from 'pages/Login/Login';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'services/hooks';
 import getTaskThunk from 'thunks/get-task-thunks';
 import getUsersThunk from 'thunks/get-users-thunks';
@@ -9,12 +9,13 @@ import styles from './Main.module.scss';
 import User from './User/User';
 
 const Main = () => {
-  const [isUpdated, setIsUpdated] = useState<boolean>(false);
   const dispatch = useDispatch();
   const { isLoggedIn } = useSelector((state) => state.system);
   const isLead = useSelector((state) => state.user).is_team_lead;
   const tasks: TTask = useSelector((state) => state.task);
-
+  console.log(isLoggedIn);
+  console.log(isLead);
+  // const isLead = true;
   useEffect(() => {
     dispatch(getTaskThunk(isLoggedIn));
     dispatch(getUsersThunk(isLoggedIn));

diff --git a/src/store/userSlice.ts b/src/store/userSlice.ts
@@ -7,6 +7,8 @@ const initialState: TUser = {
   email: '',
   is_team_lead: false,
   full_name: '',
+  first_name: '',
+  last_name: '',
 };
 
 const userSlice = createSlice({

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -2,6 +2,8 @@
 export type TUser = {
   id: number;
   full_name: string;
+  first_name: string;
+  last_name: string;
   telegram_nickname: string;
   email: string;
   is_team_lead: boolean;

diff --git a/src/ui-lib/CheckBoxes/CheckBox/CheckBox.module.scss b/src/ui-lib/CheckBoxes/CheckBox/CheckBox.module.scss
@@ -13,7 +13,7 @@
     vertical-align: middle;
     height: 16px;
     width: 16px;
-    border: 1px solid v.$black-color;
+    border: 1px solid v.$name-task;
     border-radius: 4px;
     padding: 0;
     cursor: pointer;