Merge pull request #97 from moodbeat/feat/activity

Feat/activity
moodbeat · Aug 1, 2023 · 877e393 · 877e393
2 parents 10a823e + 634e830
commit 877e393
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 55 deletions.
diff --git a/src/Routing.tsx b/src/Routing.tsx
@@ -74,7 +74,7 @@ export const Routing: React.FC<Props> = ({
           />
         }
       >
-        <Route path="/" element={<Main events={events} />} />
+        <Route path="/" element={<Main events={events} fetchEvents={fetchEvents}/>} />
 
         <Route
           path="tests"

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -304,7 +304,7 @@ export const App = () => {
     );
   }
 
-  // запрос мероприятий для вкладки мероприятия
+  // запрос мероприятий
   async function fetchEvents() {
     try {
       if (role === "hr" || role === "chief" || role === "employee") {

diff --git a/src/components/EventsMain/EventsMain.tsx b/src/components/EventsMain/EventsMain.tsx
@@ -1,26 +1,33 @@
 import styles from "./eventsMain.module.css";
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { EventInterface } from "@/types";
 import { EventsMainCard } from "./EventsMainCard/EventsMainCard";
 
 interface Props {
   events: EventInterface[];
+  fetchEvents: ()=> void;
 }
 
-export const EventsMain: React.FC<Props> = ({events}) => {
-  const [eventsSort, setEventsSort] = useState<EventInterface[]>([]);
+export const EventsMain: React.FC<Props> = ({events, fetchEvents}) => {
+  // const [eventsSort, setEventsSort] = useState<EventInterface[]>([]);
 
-  useEffect(()=>{
-    setEventsSort(events.slice(0,2))
-  },[events]);
+  // console.log(events);
+  // useEffect(()=>{
+  //   setEventsSort(events.slice(0,3))
+  // },[events]);
 
   return (
     <div className={styles.events}>
       <h3 className={styles.title}>Предстоящие мероприятия</h3>
       <ul className={styles.list}>
-        {eventsSort.length > 0 && eventsSort.map((item) =>
-          <EventsMainCard key={item.id} item={item}/>
-        )}
+        {events.length > 0 ?
+          events.map((item) =>
+            <EventsMainCard key={item.id} item={item}  fetchEvents={fetchEvents}/>
+          ) :
+          <li className={styles.pointNoEvents}>
+            <p>Пока нет запланированных мероприятий</p>
+          </li>
+        }
       </ul>
     </div>
   );

diff --git a/src/components/EventsMain/EventsMainCard/EventsMainCard.tsx b/src/components/EventsMain/EventsMainCard/EventsMainCard.tsx
@@ -1,11 +1,14 @@
 import styles from "./eventsMainCard.module.css";
 import { EventInterface } from "@/types";
-import React from "react";
+import React, { useState } from "react";
+import { EventsMainPopup } from "../EventsMainPopup/EventsMainPopup";
 
 interface Props {
   item: EventInterface;
+  fetchEvents: ()=> void;
 }
-export const EventsMainCard: React.FC<Props> = ({item}) => {
+export const EventsMainCard: React.FC<Props> = ({item, fetchEvents}) => {
+  const [isPopupEventMain, setIsPopupEventMain] = useState(false);
   const monthNames = ["Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря"];
   const dataStart = new Date(item.start_time);
   const dataEnd = new Date(item.end_time);
@@ -14,21 +17,41 @@ export const EventsMainCard: React.FC<Props> = ({item}) => {
   const hoursEnd = dataEnd.getHours() < 10 ? `0${dataEnd.getHours()}` : `${dataEnd.getHours()}`;
   const minutesEnd = dataEnd.getMinutes() < 10 ? `0${dataEnd.getMinutes()}` : `${dataEnd.getMinutes()}`;
 
-  console.log()
+  // let moveMouse = 0;
+  const handleHoverCard = () => {
+    // if (moveMouse === 0) {
+      setIsPopupEventMain(true);
+      // console.log(e);
+      console.log('yes');
+    // }
+
+    // moveMouse ++;
+  }
+  const handleHoverCardOff = () => {
+    // moveMouse === 0 && console.log(e);
+    // moveMouse = 0;
+    setIsPopupEventMain(false);
+    console.log('no')
+  }
+
 
   return (
-    <li className={styles.point}>
-      <div className={styles.leftBlock}>
-        <p className={styles.count}>{dataStart.getDate()}</p>
-        <p className={styles.month}>{monthNames[dataStart.getMonth()]}</p>
-      </div>
-      <div className={styles.rightBlock}>
-        <p className={styles.typeActivity}>{item.name}</p>
-        <p className={styles.time}>
-          <span>{`${hoursStart}:${minutesStart}`}&mdash;</span>
-          <span>{`${hoursEnd}:${minutesEnd}`}</span>
-        </p>
+    <li  className={styles.point}>
+      <div className={styles.eventMainCard} onMouseOver={handleHoverCard} onMouseOut={handleHoverCardOff}>
+        <div className={styles.leftBlock}>
+          <p className={styles.day}>{dataStart.getDate() < 10  ? ("0" + dataStart.getDate()) : dataStart.getDate()}</p>
+          <p className={styles.month}>{monthNames[dataStart.getMonth()]}</p>
+        </div>
+        <div className={styles.rightBlock}>
+          <p className={styles.name}>{item.name}</p>
+          <p className={styles.time}>
+            <span>{`${hoursStart}:${minutesStart}`}&mdash;</span>
+            <span>{`${hoursEnd}:${minutesEnd}`}</span>
+          </p>
+        </div>
       </div>
+      <EventsMainPopup item={item} fetchEvents={fetchEvents} isPopupEventMain={isPopupEventMain}/>
     </li>
+
   );
 }
diff --git a/src/components/EventsMain/EventsMainCard/eventsMainCard.module.css b/src/components/EventsMain/EventsMainCard/eventsMainCard.module.css
@@ -1,67 +1,64 @@
-.point {
+/* .point {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 324px;
+} */
+.eventMainCard {
   display: flex;
   width: 324px;
-  justify-content: space-between;
   padding: 12px 16px;
   border-radius: 20px;
   margin-bottom: 12px;
   background: #fff;
-  gap: 20px;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.eventMainCard:hover {
+  background-color: var(--color-card-hover);
 }
 
 .leftBlock {
   display:flex;
   flex-direction: column;
+  min-width: 52px;
 }
 
 .right-block {
   display:flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-end;
   gap: 8px;
 }
 
-.count {
+.day {
   margin: 0;
   margin-bottom: 4px;
   color: var(--color-black);
   font-family: Montserrat;
-  font-size: 34px;
+  font-size: 32px;
   font-weight: 500;
-  line-height: 24px;
+  line-height: 22px;
 }
 
 .month {
   margin: 0;
   color: var(--color-black);
-  font: var(--font-body);
+  font: var(--font-caption);
 }
 
-.typeActivity {
+.name {
   margin: 0;
+  max-width: 228px;
+  white-space : nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--color-accent-purple);
   font: var(--font-body);
-  text-align: right;
 }
 
 .time {
   margin: 0;
   color: var(--color-icon-secondary);
   font: var(--font-caption);
 }
-
-/* .point-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 4px;
-}
-
-.text {
-  margin: 0;
-  color: var(--color-black);
-  font: var(--font-body);
-} */
-
-
diff --git a/src/components/EventsMain/EventsMainPopup/EventsMainPopup.tsx b/src/components/EventsMain/EventsMainPopup/EventsMainPopup.tsx
@@ -0,0 +1,16 @@
+import styles from "./eventsMainPopup.module.css";
+import { EventInterface } from "@/types";
+import { EventsCard } from "@/components/EventsPage/EventsCard/EventsCard";
+interface Props {
+  item: EventInterface;
+  fetchEvents: ()=> void;
+  isPopupEventMain: boolean;
+}
+export const EventsMainPopup: React.FC<Props> = ({item, fetchEvents, isPopupEventMain}) => {
+  console.log(isPopupEventMain);
+  return (
+    <div className={isPopupEventMain ? styles.popupEvent_active : styles.popupEvent}>
+      <EventsCard item={item} fetchEvents={fetchEvents}/>
+    </div>
+  )
+}
diff --git a/src/components/EventsMain/EventsMainPopup/eventsMainPopup.module.css b/src/components/EventsMain/EventsMainPopup/eventsMainPopup.module.css
@@ -0,0 +1,23 @@
+.popupEvent {
+  /* display: none; */
+  opacity: 0;
+  position: absolute;
+  right: 350px;
+  bottom: 100px;
+  transition: opacity 0.5s linear;
+}
+
+.popupEvent_active {
+  /* display: block; */
+  opacity: 1;
+  transition: opacity 0.5s linear;
+  position: absolute;
+  right: 350px;
+  bottom: 100px;
+  border-radius: 20px;
+  box-shadow: var(--shadow-medium);
+  border: 1px solid #e9eff2;
+
+  /* top: -64px; */
+}
+
diff --git a/src/components/EventsMain/eventsMain.module.css b/src/components/EventsMain/eventsMain.module.css
@@ -9,6 +9,18 @@
 }
 
 .list {
+  max-height: 226px;
+  overflow: hidden scroll;
   padding: 0;
   list-style: none;
 }
+
+.list::-webkit-scrollbar {
+  width: 0;
+}
+
+.pointNoEvents {
+  color: var(--color-icon-secondary);
+  font: var(--font-body);
+
+}
diff --git a/src/components/EventsPage/EventsCard/EventsCard.tsx b/src/components/EventsPage/EventsCard/EventsCard.tsx
@@ -82,7 +82,7 @@ export const EventsCard: React.FC<Props> = ({item, fetchEvents}) => {
   return (
     <li className={styles.eventsCard}>
       <div className={styles.eventsCard__header}>
-        <p className={styles.eventsCard__day}>{dataStart.getDate()}</p>
+        <p className={styles.eventsCard__day}>{dataStart.getDate() < 10  ? ("0" + dataStart.getDate()) : dataStart.getDate()}</p>
         <p className={styles.eventsCard__month}>{monthNames[dataStart.getMonth()]}</p>
         <p className={styles.eventsCard__time}>
           <span className={styles.eventsCard__timeStart}>{`${hoursStart}:${minutesStart}`}&mdash;</span>

diff --git a/src/components/EventsPage/EventsCard/eventsCard.module.css b/src/components/EventsPage/EventsCard/eventsCard.module.css
@@ -9,7 +9,7 @@
 }
 .eventsCard__header {
   display: grid;
-  grid-template-columns: 110px 88px 1fr;
+  grid-template-columns: 115px 88px 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 0 8px;
 }
@@ -20,7 +20,7 @@
   font-size: 87px;
   font-family: Montserrat;
   font-weight: 500;
-  line-height: 88px;
+  line-height: 61px;
   color: var(--color-black);
 }
 .eventsCard__month {
@@ -78,6 +78,12 @@
   color: var(--color-accent-purple);
 } */
 .eventsCard__heading {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  height: 36px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin: 0;
   margin-top: 69px;
   /* margin-top: 12px; */
@@ -86,6 +92,12 @@
   word-wrap: break-word;
 }
 .eventsCard__content {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  height: 72px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin: 8px 0 60px 0;
   font: var(--font-body);
   color: var(--color-black);

diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -24,8 +24,9 @@ import { ButtonTelegramm } from "@/components/ButtonTelegramm/ButtonTelegramm";
 
 interface Props {
   events: EventInterface[];
+  fetchEvents: ()=> void;
 }
-export const Main = ({events}: Props): ReactElement | null => {
+export const Main = ({events, fetchEvents}: Props): ReactElement | null => {
   const isOnline = useOnlineCheck();
   const [activitiesData] = useRequest(getActivityTypes);
   const currentUser = useAppSelector(selectUserInfo);
@@ -105,7 +106,7 @@ export const Main = ({events}: Props): ReactElement | null => {
                   articles={articles}
                   title={'Как улучшить ментальное здоровье'}
                 />
-                <EventsMain  events={events}/>
+                <EventsMain  events={events} fetchEvents={fetchEvents} />
               </section>
               <ButtonTelegramm />
             </main>