{item.answer}
} + {activeIndex === index && ( +{item.answer}
+ )} ))} diff --git a/src/components/AddUseful/AddUseful.tsx b/src/components/AddUseful/AddUseful.tsx index 91b434f..f15d62e 100644 --- a/src/components/AddUseful/AddUseful.tsx +++ b/src/components/AddUseful/AddUseful.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import {useState} from 'react'; -import {Field, Form, Formik} from 'formik'; +import {ChangeEvent, useState} from 'react'; +import {Field, Form, Formik, useFormik} from 'formik'; import styles from "./addUseful.module.scss"; import * as Api from "@/shared/api/Api"; import Select from "react-select"; import {ClosePopup} from "@/components/EventsPage/img/closePopup"; +import CloseIcon from "@/assets/closeIcon.png"; interface CardData { @@ -16,6 +17,10 @@ interface CardData { text: string; } +interface FormValues { + preview_image: File | null; +} + const CustomStyles = { input: (provided: any) => ({ ...provided, @@ -93,6 +98,7 @@ const addCard = async (values: {}) => { const AddUseful: React.FCДобавить публикацию материала
@@ -130,9 +151,27 @@ const AddUseful: React.FC = ({onClose}: any) => {
{({isSubmitting}) => (
Предстоящие мероприятия
-
- {eventsSort.length > 0 && eventsSort.map((item) =>
-
-
+
Пока нет запланированных мероприятий
+
+ }
-
- {dataStart.getDate()}
-{monthNames[dataStart.getMonth()]}
-
-
+ 
-
+
);
}
diff --git a/src/components/EventsMain/EventsMainCard/eventsMainCard.module.css b/src/components/EventsMain/EventsMainCard/eventsMainCard.module.css
index d667af1..c566c7f 100644
--- a/src/components/EventsMain/EventsMainCard/eventsMainCard.module.css
+++ b/src/components/EventsMain/EventsMainCard/eventsMainCard.module.css
@@ -1,46 +1,60 @@
-.point {
+/* .point {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ height: 324px;
+} */
+.eventMainCard {
display: flex;
- width: 100%;
- justify-content: space-between;
+ width: 324px;
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;
}
-.rightBlock {
+.right-block {
display:flex;
flex-direction: column;
justify-content: center;
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)
+ font: var(--font-body);
}
.time {
@@ -48,18 +62,3 @@
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
new file mode 100644
index 0000000..abce228
--- /dev/null
+++ b/src/components/EventsMain/EventsMainPopup/EventsMainPopup.tsx
@@ -0,0 +1,15 @@
+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 = ({item, fetchEvents, isPopupEventMain}) => {
+ return (
+ = ({closePopupAddEvent, isPopupAddEv
const [isPopupRequest, setIsPopupRequest] = useState(false);
const [isRequest, setIsRequest] = useState(false);
const [valueData, setValueData] = useState(null);
- const [isEnterData, setIsEnterData] = useState(false);
- const [headingEvent, setHeadingEvent] = useState('');
- const [reviewPost, setReviewPost] = useState('');
const [valueTimeStart, setValueTimeStart] = useState('00:00');
const [isEnterTimeStart, setIsEnterTimeStart] = useState(false);
const [valueTimeEnd, setValueTimeEnd] = useState('00:00');
const [isEnterTimeEnd, setIsEnterTimeEnd] = useState(false);
+ const [valueTimeErr, setValueTimeErr] = useState('');
+ const [headingEvent, setHeadingEvent] = useState('');
+ const [headingEventErr, setHeadingEventErr] = useState('');
+ const [reviewPost, setReviewPost] = useState('');
+ const [reviewPostErr, setReviewPostErr] = useState('');
+ const [isValidForm, setIsValidForm] = useState(false);
+ const [clickSubmit, setClickSubmit] = useState(false)
+ // закрытие попапов при клике по фону или Esc
useEscapeKeyEvent(closePopupAddEvent);
useEffect(()=>{
@@ -44,49 +47,45 @@ export const AddEventPopup: React.FC = ({closePopupAddEvent, isPopupAddEv
resetForm();
}
};
- // const valuesStart = {
- // // date: new Date().getDate(),
- // start_time: new Date(),
- // end_time: new Date(),
- // // typeActivity: "",
- // name: "",
- // text: "",
- // // contact: "",
- // // expiration: "",
- // for_all: true,
- // }
- // const [values, setValues] = useState(valuesStart);
+ //
+
+ const setTime = (time: any) => {
+ const hour = time.slice(0,2);
+ const minute = time.slice(-2);
+ return {hour, minute}
+ }
+
+ const resetForm = () => {
+ setValueData(null);
+ setValueTimeStart('00:00');
+ setIsEnterTimeStart(false);
+ setValueTimeEnd('00:00');
+ setIsEnterTimeEnd(false);
+ setValueTimeErr('');
+ setHeadingEvent('');
+ setReviewPost('');
+ setReviewPostErr('');
+ setHeadingEventErr('');
+ }
const onSubmit = (e: any) => {
- console.log(e.target.elements);
- console.log(valueData);
e.preventDefault();
+ if (!isValidForm) {
+ setClickSubmit(!clickSubmit);
+ return;
+ }
setIsRequest(false);
const year = (valueData !== null) ? (valueData.getFullYear()) : new Date().getFullYear();
const month = (valueData !== null) ? (valueData.getMonth()) : new Date().getMonth();
const day = (valueData !== null) ? (valueData.getDate()) : new Date().getDate();
+ const hourStart = setTime(e.target.elements.timeStart.value).hour;
+ const minuteStart = setTime(e.target.elements.timeStart.value).minute;
+ const hourEnd = setTime(e.target.elements.timeEnd.value).hour;
+ const minuteEnd = setTime(e.target.elements.timeEnd.value).minute;
- // const month = new Date(e.target.elements[2].value).getMonth();
- // const day = new Date(e.target.elements[2].value).getDate();
- const hourStart = e.target.elements.timeStart.value.slice(0,2);
- const minuteStart = e.target.elements.timeStart.value.slice(-2);
- const hourEnd = e.target.elements.timeEnd.value.slice(0,2);
- const minuteEnd = e.target.elements.timeEnd.value.slice(-2);
- // console.log(year);
- // console.log(month);
- // console.log(day);
- // console.log(hourStart);
- // console.log(minuteStart);
- // console.log(hourEnd);
- // console.log(minuteEnd);
const event = {
- // start_time: (valueData !== null) ? (valueData.setHours(hourStart, minuteStart)) : valueData,
-
start_time: new Date(year, month, day, hourStart, minuteStart),
-
end_time: new Date(year, month, day, hourEnd, minuteEnd),
- // end_time: (valueData !== null) ? (valueData.setHours(hourEnd, minuteEnd)) : valueData,
-
// typeActivity: e.target.elements.typeActivity.value,
name: e.target.elements.name.value,
text: e.target.elements.text.value,
@@ -94,18 +93,6 @@ export const AddEventPopup: React.FC = ({closePopupAddEvent, isPopupAddEv
// expiration: e.target.elements.expiration.value,
for_all: true,
}
- // console.log(event)
- // setValues({
- // // date: e.target.elements.date.value,
- // start_time: new Date(year, month, day, hourStart, minuteStart),
- // end_time: new Date(year, month, day, hourEnd, minuteEnd),
- // // typeActivity: e.target.elements.typeActivity.value,
- // name: e.target.elements.name.value,
- // text: e.target.elements.text.value,
- // // contact: e.target.elements.contact.value,
- // // expiration: e.target.elements.expiration.value,
- // for_all: true,
- // });
submitEvent(event);
e.target.reset();
resetForm();
@@ -130,17 +117,6 @@ export const AddEventPopup: React.FC = ({closePopupAddEvent, isPopupAddEv
}
}
- const resetForm = () => {
- setValueData(null);
- setIsEnterData(false);
- setValueTimeStart('00:00');
- setIsEnterTimeStart(false);
- setValueTimeEnd('00:00');
- setIsEnterTimeEnd(false);
- setHeadingEvent('');
- setReviewPost('');
- }
-
// попап о результатах отправки сабмита (успешно/не успешно)
const closePopupRequest = () => {
setIsPopupRequest(false);
@@ -150,10 +126,42 @@ export const AddEventPopup: React.FC = ({closePopupAddEvent, isPopupAddEv
},[isPopupRequest])
//
- // const handleValueData = (e: any) => {
- // valueData !== e.target.value && setIsEnterData(true);
- // setValueData(e.target.value);
- // }
+ // валидация полей даты и времени
+ useEffect(() => {
+ setValueTimeErr('');
+ const hourStart = setTime(valueTimeStart).hour;
+ const minuteStart = setTime(valueTimeStart).minute;
+ const hourEnd = setTime(valueTimeEnd).hour;
+ const minuteEnd = setTime(valueTimeEnd).minute;
+ const duration = new Date().setHours(hourEnd, minuteEnd) - new Date().setHours(hourStart, minuteStart);
+
+ ((duration < 1800000 && (isEnterTimeEnd || isEnterTimeStart)) &&
+ setValueTimeErr('Продолжительность мероприятия не менее 30 минут'));
+ (valueData === null && (isEnterTimeEnd || isEnterTimeStart)) &&
+ setValueTimeErr('Обязательное поле');
+ },[valueTimeStart, valueTimeEnd, valueData, isEnterTimeStart]);
+ //
+
+ // валидация формы
+ useEffect(() => {
+ (valueData !== null && valueTimeErr.length === 0 &&
+ headingEvent.length > 0 && headingEvent.length <= 64 &&
+ reviewPost.length > 8 && reviewPost.length <= 130
+ ) ? setIsValidForm(true) : setIsValidForm(false);
+ });
+ //
+
+ // подсвечиваем поля не прошедшие валидацию при попытке сабмита
+ useEffect(()=>{
+ if (isPopupAddEvent) {
+ setIsEnterTimeStart(true);
+ (headingEvent.length <= 0 || headingEvent.length > 64) && setHeadingEventErr('Обязательное поле');
+ (reviewPost.length <= 8 || reviewPost.length > 130) && setReviewPostErr('Обязательное поле');
+ }
+ }, [clickSubmit])
+ //
+
+ // управление полями формы
const handleValueData = (date: Date | null) => {
// valueData !== date && setIsEnterData(true);
setValueData(date);
@@ -166,20 +174,30 @@ export const AddEventPopup: React.FC = ({closePopupAddEvent, isPopupAddEv
valueTimeEnd !== e.target.value && setIsEnterTimeEnd(true);
setValueTimeEnd(e.target.value);
}
+ const handleValueHeading = (e: any) => {
+ // valueData !== date && setIsEnterData(true);
+ setHeadingEvent(e.target.value);
+ setHeadingEventErr(e.target.validationMessage);
+ }
+ const handleValueReviewPost = (e: any) => {
+ // valueData !== date && setIsEnterData(true);
+ setReviewPost(e.target.value);
+ setReviewPostErr(e.target.validationMessage);
+ }
return (
Тимбилдинг
-- {`${hoursStart}:${minutesStart}`}— - {`${hoursEnd}:${minutesEnd}`} -
+
+
-
- {/*
+
+ {dataStart.getDate() < 10 ? ("0" + dataStart.getDate()) : dataStart.getDate()}
+{monthNames[dataStart.getMonth()]}
+
+
{item.name}
++ {`${hoursStart}:${minutesStart}`}— + {`${hoursEnd}:${minutesEnd}`} +
+
-
*/}
+ Тимбилдинг
- -
+
+
+ )
+}
diff --git a/src/components/EventsMain/EventsMainPopup/eventsMainPopup.module.css b/src/components/EventsMain/EventsMainPopup/eventsMainPopup.module.css
new file mode 100644
index 0000000..a519917
--- /dev/null
+++ b/src/components/EventsMain/EventsMainPopup/eventsMainPopup.module.css
@@ -0,0 +1,24 @@
+.popupEvent {
+ position: absolute;
+ right: 350px;
+ bottom: 100px;
+ display: none;
+ opacity: 0;
+
+ /* transition: opacity 0.2s linear; */
+}
+
+.popupEvent_active {
+ position: absolute;
+ right: 350px;
+ bottom: 100px;
+ display: block;
+ border: 1px solid #e9eff2;
+ border-radius: 20px;
+ box-shadow: var(--shadow-medium);
+ opacity: 1;
+ transition: opacity 0.2s linear;
+
+ /* top: -64px; */
+}
+
diff --git a/src/components/EventsMain/eventsMain.module.css b/src/components/EventsMain/eventsMain.module.css
index d632052..19e8a97 100644
--- 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/AddEventPopup/AddEventPopup.tsx b/src/components/EventsPage/AddEventPopup/AddEventPopup.tsx
index afc3b9a..ce71414 100644
--- a/src/components/EventsPage/AddEventPopup/AddEventPopup.tsx
+++ b/src/components/EventsPage/AddEventPopup/AddEventPopup.tsx
@@ -2,14 +2,12 @@ import * as Api from "@/shared/api/Api";
import { EventInterface } from "@/types";
import styles from "./addEventPopup.module.css";
import React, {useState, useEffect} from "react";
-// import {CustomDatePicker} from "@/shared/ui/CustomDatePicker/CustomDatePicker.tsx";
-
import {CustomDatePicker} from "@/shared/ui/CustomDatePicker/CustomDatePicker.tsx";
import {ClosePopup} from "../img/closePopup";
import dash from "../img/dash.svg"
import { useEscapeKeyEvent } from "@/shared/hooks/useEscapeKey";
import { PopupRequest } from "../PopupRequest/PopupRequest";
-// import { date } from "yup";
+import {ErrorMessage} from "@/shared/ui/ErrorMessage/ErrorMessage";
interface Props {
closePopupAddEvent: (e: any) => void;
@@ -22,14 +20,19 @@ export const AddEventPopup: React.FC handleCloseOutside(e)}>
{isPopupRequest && }
-