fix/ profile finish

hackathon-Gazprom · Aug 13, 2024 · 413ebd2 · 413ebd2
1 parent 5c3b766
commit 413ebd2
Show file tree

Hide file tree

Showing 13 changed files with 345 additions and 179 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -6,6 +6,8 @@ import { useEffect, useState } from 'react';
 import { initialCards } from 'src/services/mock';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
 import Registration from 'src/pages/Registration/Registration';
+import { allowDrop, handleDragStart, handleDrop } from 'src/services/dragAndDrop';
+import { selectMembers } from 'src/store/features/slice/membersSlice';
 import {
   membersProps,
   RegisterDataProps,
@@ -15,8 +17,7 @@ import {
   selectUsers,
   setLoggedIn,
 } from 'src/store/features/slice/userSlice';
-import { allowDrop, handleDragStart, handleDrop } from 'src/services/dragAndDrop';
-import { selectMembers } from 'src/store/features/slice/membersSlice';
+
 
 export default function App() {
   let { loggedIn } = useAppSelector(selectUsers);

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -10,7 +10,7 @@ import {
   selectMembers,
   setIsFilterOpen,
 } from 'src/store/features/slice/membersSlice';
-import { DroppedCard, membersProps } from 'src/services/types';
+import { membersProps } from 'src/services/types';
 import { selectUsers } from 'src/store/features/slice/userSlice';
 const cx = cn.bind(styles);
 

diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -16,11 +16,14 @@ import {
   UpOutlined,
   UserOutlined,
 } from '@ant-design/icons';
+import { useAppDispatch, useAppSelector } from 'src/store/hooks';
+import { selectMembers, setShortWindow } from 'src/store/features/slice/membersSlice';
 
 const cx = cn.bind(styles);
 
 export default function SideBar() {
-  const [shortWindow, setShortWindow] = useState(false);
+  let { shortWindow } = useAppSelector(selectMembers);
+  const dispatch = useAppDispatch();
   const [showMore, setShorMore] = useState(true);
   const location = useLocation();
 
@@ -142,7 +145,7 @@ export default function SideBar() {
         className={cx(styles.sideBarButton, {
           [styles.sideBarButton_short]: shortWindow,
         })}
-        onClick={() => setShortWindow(!shortWindow)}
+        onClick={() => dispatch(setShortWindow(!shortWindow))}
       >
         Скрыть
         {shortWindow ? <RightOutlined /> : <LeftOutlined />}

diff --git a/src/pages/Employees/Employees.module.scss b/src/pages/Employees/Employees.module.scss
@@ -20,6 +20,9 @@
   flex-wrap: wrap;
   gap: 24px;
   padding-top: 32px;
+  &_center {
+    justify-content: center;
+  }
 }
 
 .pagesContainer {
@@ -52,4 +55,8 @@
       cursor: not-allowed;
     }
   }
+}
+
+.marginLeft {
+  margin-left: 110px;
 }
diff --git a/src/pages/Employees/Employees.tsx b/src/pages/Employees/Employees.tsx
@@ -14,9 +14,10 @@ import {
 import cn from 'classnames/bind';
 import { itemsPerPage } from 'src/services/const';
 
-const cx = cn.bind(styles);
-
 export default function Employees() {
+  let { shortWindow } = useAppSelector(selectMembers);
+  const cx = cn.bind(styles);
+
   const location = useLocation();
   const dispatch = useAppDispatch();
   const { members, membersAmount, currentPage } = useAppSelector(selectMembers);
@@ -50,8 +51,16 @@ export default function Employees() {
 
   return (
     <div className={styles.employees}>
-      <p className={styles.title}>Всего {membersAmount} сотрудников</p>
-      <div className={styles.headerContainer}>
+      <p
+        className={cx(styles.title, {
+          [styles.marginLeft]: shortWindow,
+        })}
+      >
+        Всего {membersAmount} сотрудников
+      </p>
+      <div className={cx(styles.headerContainer, {
+          [styles.marginLeft]: shortWindow,
+        })}>
         <FilterList
           employesRout={employesRout}
           teams='ФИО'
@@ -80,7 +89,11 @@ export default function Employees() {
           </div>
         </div>
       </div>
-      <div className={styles.cardContainer}>
+      <div
+        className={cx(styles.cardContainer, {
+          [styles.cardContainer_center]: shortWindow,
+        })}
+      >
         {members.map((card, index) => (
           <Card
             id={card.id}

diff --git a/src/pages/Profile/Profile.module.scss b/src/pages/Profile/Profile.module.scss
@@ -12,6 +12,7 @@
   gap: 44px;
   position: relative;
   padding: 24px;
+  max-height: 521px;
 }
 
 .photoContainer {
@@ -33,6 +34,12 @@
   list-style: none;
   gap: 48px;
   padding: 24px;
+  max-height: 290px;
+  height: 100%;
+  &_row {
+    flex-direction: column;
+    max-height: 846px;
+  }
 }
 
 .containerButtons {
@@ -44,11 +51,28 @@
 }
 
 .containerInfo {
-
+  @include flex-column-center;
+  align-items: flex-start;
+  gap: 40px;
+  &_column {
+    flex-direction: row;
+  }
 }
 
 .eventsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px 60px;
+}
 
+.itemContainer {
+  @include flex-column-center;
+  align-items: flex-start;
+  border: $border-white;
+  border-radius: 8px;
+  padding: 24px;
+  width: 345px;
+  gap: 16px;
 }
 
 .button {
@@ -63,18 +87,22 @@
 .photo {
   width: 150px;
   height: 150px;
-  border: $border-white;
+  border-radius: $border-white;
   border: none;
+  object-fit: cover
+
 }
 
 .name {
   @include mp-null;
   @include use-font(24px, 28.8px);
+  text-align: center;
 }
 
 .text {
   @include mp-null;
   @include use-font(20px, 24px);
+  text-align: center;
   &_bold {
     color: $main-text-grey;
   }
@@ -83,6 +111,7 @@
 .textInfo {
   @include mp-null;
   @include use-font(14px, 16.8px, 400);
+  margin-right: auto;
   &_bold {
     font-weight: 500;
   }
@@ -91,6 +120,7 @@
 .item {
   @include flex-column-center;
   justify-content: space-between;
+  height: 242px;
   gap: 24px;
 }
 
@@ -100,4 +130,27 @@
   object-fit: contain;
   margin-top: auto;
   align-self: flex-end;
-}
+}
+
+.itemContainerTitle {
+  @include mp-null;
+  @include use-font(16px, 19.2px, 500);
+}
+
+.itemContainerList {
+  @include mp-null;
+  @include flex-column-center;
+  align-items: flex-start;
+  list-style: none;
+  gap: 12px;
+}
+
+.itemContainerItem {
+  @include mp-null;
+  @include use-font(14px, 16.8px, 400);
+}
+
+.colorBlue {
+  color: $button-hover;
+  cursor: pointer;
+}
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
@@ -1,46 +1,73 @@
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import styles from 'src/pages/Profile/Profile.module.scss';
-import Photo from 'src/assets/images/Avatar.png';
 import {
   CHARTS_DATA,
   EVENTS_DATA,
-  INFO_DATA,
-  PROFILE_DATA,
+  PROJECT_DATA,
 } from 'src/services/mock';
+import { useAppDispatch, useAppSelector } from 'src/store/hooks';
+import { selectMembers } from 'src/store/features/slice/membersSlice';
+import cn from 'classnames/bind';
+import {
+  fetchGetProfile,
+  selectUsers,
+} from 'src/store/features/slice/userSlice';
+import { useEffect } from 'react';
+import { BASE_URL } from 'src/store/api';
 
 export default function Profile() {
+  let { shortWindow } = useAppSelector(selectMembers);
+  let { profile } = useAppSelector(selectUsers);
+  console.log('profile: ', profile);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(fetchGetProfile());
+  }, [dispatch]);
+
+  const cx = cn.bind(styles);
+
   return (
     <div className={styles.profile}>
       <div className={styles.containerProfile}>
         <div className={styles.photoContainer}>
-          <img src={Photo} alt='ваше фото' className={styles.photo} />
+          <img
+            src={`${BASE_URL}${profile?.image}`}
+            alt='ваше фото'
+            className={styles.photo}
+          />
           <div className={styles.containerText}>
-            <p className={styles.name}>Карпов Сергей</p>
-            {PROFILE_DATA.map((item, index) => (
-              <p key={index} className={`${styles.text} ${styles.text_bold}`}>
-                {item}
-              </p>
-            ))}
-          </div>
+            <p className={styles.name}>{profile?.full_name}</p>
+            <p className={`${styles.text} ${styles.text_bold}`}>
+              {profile?.profile.position}
+            </p>
+           </div>
         </div>
         <div className={styles.containerText}>
           <p className={`${styles.textInfo} ${styles.textInfo_bold}`}>
-            Дата рождения 12.12.1987
+            Дата рождения {profile?.profile.birthday}
+          </p>
+          <p className={styles.textInfo}>Тел. {profile?.profile.phone}</p>
+          <p className={styles.textInfo}>{profile?.email}</p>
+          <p className={styles.textInfo}>
+            Местонахождение: Санкт-Петербург GMT+3
           </p>
-
-          {INFO_DATA.map((item, index) => (
-            <p key={index} className={styles.textInfo}>
-              {item}
-            </p>
-          ))}
         </div>
         <div className={styles.containerButtons}>
           <EditOutlined className={styles.button} />
           <DeleteOutlined className={styles.button} />
         </div>
       </div>
-      <div className={styles.containerInfo}>
-        <ul className={styles.containerCharts}>
+      <div
+        className={cx(styles.containerInfo, {
+          [styles.containerInfo_column]: !shortWindow,
+        })}
+      >
+        <ul
+          className={cx(styles.containerCharts, {
+            [styles.containerCharts_row]: !shortWindow,
+          })}
+        >
           {CHARTS_DATA.map((item, index) => (
             <li className={styles.item} key={index}>
               <p className={styles.text}>{item.text}</p>
@@ -52,18 +79,41 @@ export default function Profile() {
             </li>
           ))}
         </ul>
+        {/* <div> */}
         <div className={styles.eventsContainer}>
-      {EVENTS_DATA.map((cont, index) => (
-        <div className="item" key={index}>
-          <h3>{cont.title}</h3>
-          <ul>
-            {cont.items.map((item, idx) => (
-              <li key={idx}>{item}</li>
-            ))}
-          </ul>
-          <a href="#">{cont.link}</a>
-        </div>
-      ))}
+          {EVENTS_DATA.map((cont, index) => (
+            <div className={styles.itemContainer} key={index}>
+              <h3 className={styles.itemContainerTitle}>{cont.title}</h3>
+              <ul className={styles.itemContainerList}>
+                {cont.items.map((item, idx) => (
+                  <li className={styles.itemContainerItem} key={idx}>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+              <a
+                className={`${styles.itemContainerItem} ${styles.colorBlue}`}
+                href='#'
+              >
+                {cont.link}
+              </a>
+            </div>
+          ))}
+          {PROJECT_DATA.map((cont, index) => (
+            <div className={styles.itemContainer} key={index}>
+              <h3 className={styles.itemContainerTitle}>{cont.title}</h3>
+              <ul className={styles.itemContainerList}>
+                {cont.items.map((item, idx) => (
+                  <li
+                    className={`${styles.itemContainerItem} ${styles.colorBlue}`}
+                    key={idx}
+                  >
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
         </div>
       </div>
     </div>