Merge remote-tracking branch 'origin/develop' into feat/taskCard

# Conflicts: # src/assets/icons/index.ts
Short-Tracker · Feb 26, 2024 · 6d91359 · 6d91359
2 parents f4f04d8 + a7267dd
commit 6d91359
Show file tree

Hide file tree

Showing 9 changed files with 657 additions and 5 deletions.
diff --git a/src/components/AnaliticsString/AnaliticsString.module.scss b/src/components/AnaliticsString/AnaliticsString.module.scss
@@ -0,0 +1,54 @@
+@use '../../globalStyles/variables.scss' as v;
+@use '../../globalStyles/mixins.scss' as m;
+
+.container {
+  display: flex;
+  width: 452px;
+  height: 36px;
+  padding: 8px 0 8px 20px;
+  border-radius: 8px;
+  justify-content: space-between;
+  align-items: center;
+  @include m.Body;
+  color: v.$black2-color;
+
+  &_grey {
+    background-color: v.$login-background;
+  }
+}
+
+.time {
+  color: #7e7e7e;
+  margin-right: 20px;
+}
+
+.done {
+  height: 24px;
+  display: grid;
+  grid-template-columns: 70px 70px 70px;
+  column-gap: 5px;
+
+  &_container {
+    width: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 3px;
+
+    &_active {
+      border: 1px solid v.$accent-color;
+    }
+
+    &_green {
+      color: v.$analitics-green-text;
+      background-color: rgba(v.$analitics-green-background, 0.3);
+      @include m.BodyLarge;
+    }
+
+    &_grey {
+      color: v.$name-task;
+      background-color: v.$header-task-bg-color;
+      @include m.BodyLarge;
+    }
+  }
+}
diff --git a/src/components/AnaliticsString/AnaliticsString.tsx b/src/components/AnaliticsString/AnaliticsString.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import styles from './AnaliticsString.module.scss';
+
+export interface AnaliticsStringProps {
+  performer: string;
+  index: number;
+  activeColumn?: string;
+  time?: string;
+  inTime?: number;
+  afterDeadline?: number;
+  all?: number;
+}
+
+export const AnaliticsString: React.FC<AnaliticsStringProps> = ({
+  performer,
+  time,
+  inTime,
+  afterDeadline,
+  all,
+  index,
+  activeColumn,
+}) => {
+  return (
+    <div
+      className={`${styles.container} ${
+        index % 2 === 0 ? styles.container_grey : undefined
+      }`}
+    >
+      <p>{performer}</p>
+      {time ? (
+        <span className={styles.time}>{time}</span>
+      ) : (
+        <div className={styles.done}>
+          <div
+            className={`${styles.done_container} ${styles.done_container_green} ${
+              activeColumn === 'inTime' ? styles.done_container_active : undefined
+            }`}
+          >
+            <span>{inTime}</span>
+          </div>
+          <div
+            className={`${styles.done_container} ${styles.done_container_grey} ${
+              activeColumn === 'afterDeadline' ? styles.done_container_active : undefined
+            }`}
+          >
+            <span>{afterDeadline}</span>
+          </div>
+          <div
+            className={`${styles.done_container} ${
+              activeColumn === 'allDone' ? styles.done_container_active : undefined
+            }`}
+          >
+            <span>{all}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+AnaliticsString.defaultProps = {
+  time: '',
+  inTime: 0,
+  afterDeadline: 0,
+  all: 0,
+  activeColumn: '',
+};
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -7,6 +7,7 @@ import { Route, Routes, useLocation } from 'react-router-dom';
 import PrivateRoute from 'services/PrivateRoute';
 import { useDispatch, useSelector } from 'services/hooks';
 import refreshTokenThunk from 'thunks/refresh-token-thunk';
+import Analitics from 'pages/Analitics/Analitics';
 import { closeModal } from '../../store';
 import CreateTask from '../Popup/CreateTask/CreateTask';
 import Popup from '../Popup/Popup';
@@ -31,6 +32,7 @@ const App = () => {
         <Route element={<PrivateRoute path='/' />}>
           <Route element={<Main />} path='/main' />
           <Route element={<TaskPage />} path='/tasks/:taskId' />
+          <Route element={<Analitics />} path='/task-analitics' />
         </Route>
         <Route path='/error' element={<Error />} />
         <Route path='/error-server' element={<ErrorServer />} />

diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -17,16 +17,26 @@ import { useDispatch, useSelector } from 'services/hooks';
 import { getAllTeamTasks } from 'store/tasksOfUserSlice';
 import { TtaskState } from 'types/types';
 import { v4 as uuidv4 } from 'uuid';
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import styles from './SideBar.module.scss';
 
 const SideBar: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
   const currentUser = useSelector((state) => state.user);
   const tasks: TtaskState = useSelector((state) => state.tasks);
   const currentUsers = useSelector((state) => state.users);
   const dispatch = useDispatch();
   const [isSidebarMenuOpen, setisSidebarMenuOpen] = useState(false);
   const [isNewEmployeePopupOpen, setIsNewEmployeePopupOpen] = useState(false);
 
+  const activeMain = matchPath(location.pathname, '/main');
+  // const activeMessages = matchPath(location.pathname, '/');
+  // const activeMyTasks = matchPath(location.pathname, '/');
+  const activeAnalitics = matchPath(location.pathname, '/task-analitics');
+  // const activeArchive = matchPath(location.pathname, '/');
+
   const handleToggleMenu = () => {
     setisSidebarMenuOpen(!isSidebarMenuOpen);
   };
@@ -39,14 +49,20 @@ const SideBar: React.FC = () => {
     setIsNewEmployeePopupOpen(false);
   };
 
-  const showAllTasks = () => dispatch(getAllTeamTasks());
+  const showAllTasks = () => {
+    dispatch(getAllTeamTasks());
+    navigate('/main');
+  };
+
   const handleKeyDown = (evt: KeyboardEvent) => {
     if (evt.key === 'Enter' || evt.key === ' ') {
       evt.preventDefault();
       showAllTasks();
     }
   };
 
+  const showAnalitics = () => navigate('/task-analitics');
+
   return (
     <section className={styles.SideBar}>
       <div onClick={handleToggleMenu} className={styles.userWrapper}>
@@ -58,13 +74,13 @@ const SideBar: React.FC = () => {
       </div>
 
       <ul className={styles.linkWrapper}>
-        <li className={`${styles.navLi} ${styles.navLiActive}`}>
+        <li className={`${styles.navLi} ${activeMain ? styles.navLiActive : undefined}`}>
           <img
             src={allTaskIcon}
             className={`${styles.navImage} ${styles.navImageActive}`}
             alt='иконка'
           />
-          <button type='button' className={styles.navButton}>
+          <button type='button' className={styles.navButton} onClick={showAllTasks}>
             Все задачи
           </button>
         </li>
@@ -83,9 +99,13 @@ const SideBar: React.FC = () => {
             Мои Задачи
           </button>
         </li>
-        <li className={styles.navLi}>
+        <li
+          className={`${styles.navLi} ${
+            activeAnalitics ? styles.navLiActive : undefined
+          }`}
+        >
           <img src={analyticsIcon} className={styles.navImage} alt='иконка' />
-          <button type='button' className={styles.navButton}>
+          <button type='button' className={styles.navButton} onClick={showAnalitics}>
             Аналитика
           </button>
         </li>

diff --git a/src/globalStyles/mixins.scss b/src/globalStyles/mixins.scss
@@ -139,6 +139,20 @@
   font-weight: 400;
 }
 
+@mixin AnaliticsText {
+  font-family: 'Onest-Regular', sans-serif;
+  font-size: 30px;
+  line-height: 120%;
+  font-weight: 300;
+}
+
+@mixin AnaliticsNumber {
+  font-family: 'Onest-Regular', sans-serif;
+  font-size: 100px;
+  line-height: 120%;
+  font-weight: 400;
+}
+
 @mixin noselect {
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */

diff --git a/src/globalStyles/variables.scss b/src/globalStyles/variables.scss
@@ -40,3 +40,9 @@ $hold-text: #b2c5cd;
 $team: #dce4f3;
 $login-background: #f6f7fb;
 $task-stroke: #e6edf4;
+$analitics-green-text: #005345;
+$analitics-green-background: #A8EADA;
+$analitics-black-text: #4b4b4b;
+
+
+