From bbcf9c899115b7da4a0199d77ab63bf5460dcec3 Mon Sep 17 00:00:00 2001 From: udartapkom Date: Sun, 4 Feb 2024 22:52:25 +0300 Subject: [PATCH] fix create task popup and fix bugs --- src/components/App/App.module.scss | 3 + .../Popup/CreateTask/CreateTask.module.scss | 28 +++--- .../Popup/CreateTask/CreateTask.tsx | 94 +++++++++++++++++-- src/components/Popup/Popup.module.scss | 1 - src/fonts/Onest.scss | 10 +- src/globalStyles/mixins.scss | 1 - src/index.scss | 5 +- src/pages/Main/Lead/Lead.tsx | 1 - src/pages/Main/Main.tsx | 7 +- src/store/userSlice.ts | 2 + src/types/types.ts | 2 + .../CheckBoxes/CheckBox/CheckBox.module.scss | 2 +- src/ui-lib/CheckBoxes/CheckBox/CheckBox.tsx | 4 +- 13 files changed, 124 insertions(+), 36 deletions(-) diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss index 76fa228..b89c6eb 100644 --- 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 index dc4661c..22c8aad 100644 --- 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,9 +37,9 @@ 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%; @@ -46,27 +47,38 @@ 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; @@ -74,7 +86,6 @@ 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 index 94a64be..0a8836a 100644 --- 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,7 +10,6 @@ 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; const CreateTask = () => { @@ -18,6 +17,7 @@ const CreateTask = () => { const closeModalState = () => { dispatch(closeModal()); }; + const user = useSelector((state) => state.user); const currentUsers = useSelector((state) => state.users); const users = currentUsers.results; const [showCheckboxesMenu, setShowCheckboxesMenu] = useState(true); @@ -25,15 +25,15 @@ const CreateTask = () => { const [textareaValue, setTextareaValue] = useState(''); const [dateDropdownOpen, setDateDropdownOpen] = useState(false); const [dateValue, setDateValue] = useState(''); + const [performersId, setPerformersId] = useState([]); - 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) => { 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 (
@@ -68,7 +116,11 @@ const CreateTask = () => { !showCheckboxesMenu && styles.checkboxes__borders }`} > -

Выберите сотрудника

+ {Object.keys(checkboxValues).map((item) => ( +

+ {item}, +

+ ))}
{ id='checkboxes' >
- {users.map((item, index) => ( +
+ +

Себе

+
+
+ +

Всем

+
+ {users.map((item) => (
-

{item.first_name}

+

+ {item.first_name}  + {item.last_name} +

))}
@@ -121,8 +195,8 @@ const CreateTask = () => {
-

Время (по МСК)

- +

Время (по МСК)

+
diff --git a/src/components/Popup/Popup.module.scss b/src/components/Popup/Popup.module.scss index 48a0b70..b81d801 100644 --- 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 index a2b33bd..16ffb73 100644 --- 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 index d1e1308..7d91e4c 100644 --- 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 index 80c35b5..a641b11 100644 --- 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 index 089cedc..c99b776 100644 --- a/src/pages/Main/Lead/Lead.tsx +++ b/src/pages/Main/Lead/Lead.tsx @@ -91,7 +91,6 @@ const Lead: FC = ({ 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 index 5d2cfaa..98166f1 100644 --- 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(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 index 897414d..7d66351 100644 --- 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 index a8058ce..23311c7 100644 --- 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 index 356184f..aa18c66 100644 --- 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; diff --git a/src/ui-lib/CheckBoxes/CheckBox/CheckBox.tsx b/src/ui-lib/CheckBoxes/CheckBox/CheckBox.tsx index 893688d..f2ce2b9 100644 --- a/src/ui-lib/CheckBoxes/CheckBox/CheckBox.tsx +++ b/src/ui-lib/CheckBoxes/CheckBox/CheckBox.tsx @@ -4,12 +4,14 @@ import styles from './CheckBox.module.scss'; interface CheckboxProps extends React.ComponentPropsWithoutRef<'input'> { checked: boolean; onChange: (e: React.ChangeEvent) => void; + id: number | any; } -const Checkbox: FC = ({ checked, onChange, ...rest }) => ( +const Checkbox: FC = ({ checked, onChange, id, ...rest }) => ( // eslint-disable-next-line jsx-a11y/label-has-associated-control