connect beck

2024-04-02 21:31:19 +03:00
parent 4c6a5ff723
commit e1f438909c
15 changed files with 523 additions and 117 deletions
@@ -1,5 +1,5 @@
 import { FormEvent } from "react";
-import { API_BASE, API_CREATE_EVENT } from "../../app/APIurl";
+import { API_BASE, API_EVENT } from "../../app/APIurl";

 export const submitAddEvent = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
@@ -8,7 +8,7 @@ export const submitAddEvent = (e: FormEvent<HTMLFormElement>) => {
    console.log(formProps)


-    fetch(`${API_BASE}${API_CREATE_EVENT}`, {
+    fetch(`${API_BASE}${API_EVENT}`, {
      method: "POST",
      headers: {
          "Content-Type": "application/json",
@@ -29,37 +29,48 @@ export const submitAddEvent = (e: FormEvent<HTMLFormElement>) => {
  })
  .then(data => {
      console.log('Успешно:', data);
+      return data
  })
  .catch(error => {
      console.error('Возникла ошибка с созданием:', error);
  });
 }
-
 export const eventList = () => {
+    return fetch(`${API_BASE}${API_EVENT}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    })
+    .then(response => {
+        if (response.ok) { 
+            return response.json(); 
+        } else {
+            throw new Error('Код ошибки: ' + response.status);
+        }
+    })
+    .then(data => {
+        return data; 
+    })
+    .catch(error => {
+        console.error('Возникла ошибка с получением:', error);
+    });
+}
+export const deleteEvent = (id:string) => {
+     fetch(`${API_BASE}${API_EVENT}${id}`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    })
+    .then(response => {
+        if (response.ok) { 

-
-    fetch(`${API_BASE}${API_CREATE_EVENT}`, {
-      method: "GET",
-      headers: {
-          "Content-Type": "application/json",
-      },
-  })
-  .then(response => {
-    
-      console.log(response.status);
-
-      if (response.ok) { 
-          console.log('Получен:', response.headers.get('Location'));
-          return response.json(); 
-      } else {
-
-          throw new Error('Код ошибки: ' + response.status);
-      }
-  })
-  .then(data => {
-      console.log('Успешно:', data);
-  })
-  .catch(error => {
-      console.error('Возникла ошибка с получением:', error);
-  });
-}
+        } else {
+            throw new Error('Код ошибки: ' + response.status);
+        }
+    })
+    .catch(error => {
+        console.error('Возникла ошибка с удалением:', error);
+    });
+}
@@ -11,63 +11,47 @@ import { useEffect, useState } from "react";



-const AdminEventPage = () =>{
-    const { t } = useTranslation();
-    let wfew = JSON.stringify(eventList());
-    console.log(typeof wfew);
-    console.log(wfew );
+const AdminEventPage = () => {
+  const { t } = useTranslation();


-    const [events, setEvents] = useState<Event[]>([]);
+  const [events, setEvents] = useState<Event[]>([]);

-    useEffect(() => {
-      fetchData(); 
-    }, []);
-  
-    const fetchData = () => {
-      eventList() // Вызываем функцию eventList из файла api.ts
-        .then((data: Event[]) => {
-          setEvents(data); // Устанавливаем полученные данные в состояние
-        })
-        .catch((error: any) => {
-          console.error('Произошла ошибка:', error); // Обрабатываем ошибку, если она возникла
-        });
-    };
+  useEffect(() => {
+    eventList().then((data) => {
+        setEvents(data)
+    }).catch(error => {
+      console.error('Возникла ошибка с получением:', error)
+    })
+  }, []);

-    return(
-      <div className={less["admin-event__page"]}>
-        <div className={less["cont_1"]}>
+
+  return (
+    <div className={less["admin-event__page"]}>
+      <div className={less["cont_1"]}>
        <form className={less["input-form"]} onSubmit={(event) => submitAddEvent(event)}>
-                    <h1 className={less["title-titleform"]}>{t("createEvent")}</h1>
-                    <Input type="text" name="title" placeholder="Event name" />
-                    <Input type="date" name="start_date" placeholder="Start Date" />
-                    <Input type="date" name="end_date" placeholder="End Date" />
+          <h1 className={less["title-titleform"]}>{t("createEvent")}</h1>
+          <Input type="text" name="title" placeholder="Event name" />
+          <Input type="date" name="start_date" placeholder="Start Date" />
+          <Input type="date" name="end_date" placeholder="End Date" />

-                    <Textarea name="description" placeholder="About Event" />
-                    <div className={less["liner-block"]}>
-                    <Switch name="is_online" />
-                    <Label htmlFor="airplane-mode">Онлайн мероприятие</Label>
-                    </div>
-                    <Button>{t("createEvent")}</Button>
-                </form>
+          <Textarea name="description" placeholder="About Event" />
+          <div className={less["liner-block"]}>
+            <Switch name="is_online" />
+            <Label htmlFor="airplane-mode">Онлайн мероприятие</Label>
+          </div>
+          <Button>{t("createEvent")}</Button>
+        </form>

      </div>
-      <Button onClick={eventList}>{t("createEvent")}</Button>
-      
      <div className={less["cont_2"]}>
      {events.map((event) => (
-          <li key={event.created_at}>
-            <div>Название: {event.title}</div>
-            <div>Дата: {event.updated_at}</div>
-            {/* Добавьте другие свойства вашего объекта, если они есть */}
-          </li>
-        ))}
-          <VacancyCard></VacancyCard>
-      <VacancyCard></VacancyCard>
-      <VacancyCard></VacancyCard>
-</div>
+        <VacancyCard title={event.title} date={event.start_date} desc={event.description} cardId={event.id} admin={true}></VacancyCard>
+
+      ))}
      </div>
-    )
+    </div>
+  )
 }
 export default AdminEventPage

@@ -1,21 +1,24 @@
 .divv{
    margin: 0;
 }
+.novis{
+    opacity: 0;
+    visibility: hidden;
+}
 .general-content{
    margin-left: 20px;
    display: flex;
-    height: 90vh;
 }
 .general-left{
    width: 50%; 
-    display: flex;
-    justify-content: center;   
-    align-items: center;
-    flex-direction: column;
+    padding: 10px;
+    padding-top: 80px;
    border-right-width: 1px;
 }
 .general-right{
+    padding-top: 80px;
    margin-left: 20px;
+    width: 30%;
    
 }
 .input-form{
@@ -32,9 +35,24 @@
 .title-form{
    font-size: 30px;
 }
+.card{
+    max-width: 800px;
+    padding: 20px;
+    margin-bottom: 10px;
+
+}
+.up{
+    display: flex;
+    flex-direction: column;
+}
+.header{
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
+    padding: 0;
+}
@media (max-width: 820px) {
    .general-left{
        width: 100%; 
    }
 }
-
@@ -5,6 +5,13 @@ import { submitRegister } from "../../widgets/Header/AuthAPI";
 import { Button } from "../../shared/ui/button";
 import { Textarea } from "../../shared/ui/textarea";
 import { Link, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { deleteEvent, eventList } from "../AdminEventPage/AdminEventAPI";
+import VacancyCard from "../../entities/VacancyCard/VacancyCard";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card";
+import { TrashIcon } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../shared/ui/dialog";
+import { t } from "i18next";



@@ -12,27 +19,66 @@ const Main = () => {
    const { t } = useTranslation();
    const navigate = useNavigate();

-    return (
-        <div className={less["general-content"]}>
-            <div className={less["general-left"]}>
-                <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
-                    <h1 className={less["title-form"]}>{t("entrance")}</h1>
-                    <Input type="text" name="first_name" placeholder="First name" />
-                    <Input type="text" name="last_name" placeholder="Last name" />
-                    <Input type="date" name="birth_date" placeholder="Date" />
-                    <Input type="email" name="email" placeholder="Email" />
-                    
-                    <Textarea name="about" placeholder="About" />
+    const [events, setEvents] = useState<Event[]>([]);

-                    <Button>{t("buttonLoginInSystem")}</Button>
-                </form>
-                <Button variant="link" asChild><Link to={"/dash/admin"}>{t("iorganizer")}</Link></Button>
+    useEffect(() => {
+        eventList().then((data) => {
+            setEvents(data)
+        }).catch(error => {
+            console.error('Возникла ошибка с получением:', error)
+        })
+    }, []);

-            </div>
-            <div className={less["general-right"] + " shadow"}>
-            </div>
+return (
+    <div className={less["general-content"]}>
+        <div className={less["general-left"]}>
+            {events.map((event) => (
+                <Card className={`${less["card"]} flex flex-row `}>
+                    <div className="flex flex-col">
+                        <CardHeader className={less["header"]}>
+                            <div className={less["up"]}>
+                                <CardTitle className="p-0">{event.title}</CardTitle>
+                                <CardDescription>Дата начала: {event.start_date}</CardDescription>
+                            </div>
+                            {false && (
+                                <Button size="icon" variant="ghost" onClick={() => deleteEvent(event.id)}><TrashIcon /></Button>
+                            )}
+                        </CardHeader>
+                        <CardContent className="p-0 mt-4" >
+                            <p>{event.description}</p>
+                        </CardContent>
+                        <Dialog>
+                            <DialogTrigger className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2">{t("respondRequest")}</DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle><h1 className={less["title-form"]}>{t("entrance")}</h1></DialogTitle>
+                                    <DialogDescription>
+                                        <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
+                                            <div className={less["novis"]}><Input type="text" name="event_id" value={event.id} placeholder="Event" /></div>
+                                            <Input type="text" name="first_name" placeholder="First name" />
+                                            <Input type="text" name="last_name" placeholder="Last name" />
+                                            <Input type="date" name="birth_date" placeholder="Date" />
+                                            <Input type="email" name="email" placeholder="Email" />
+                                            <Textarea name="bio" placeholder="About" />
+
+                                            <Button>{t("buttonLoginInSystem")}</Button>
+                                        </form>
+                                    </DialogDescription>
+                                </DialogHeader>
+                            </DialogContent>
+                        </Dialog>
+
+                    </div>
+                </Card>
+            ))}
+            <Button variant="link" asChild><Link to={"/dash/admin"}>{t("iorganizer")}</Link></Button>

        </div>
-    )
+        <div className={less["general-right"] + " shadow"}>
+
+        </div>
+
+    </div>
+)
 }
 export default Main;