connect beck

frontend/src/components/app/APIurl.ts

@@ -4,5 +4,7 @@ export const API_BASE = "http://localhost/api/" //3 сервер
 
 export const API_REG = "auth/signup/"
 export const API_CREATE_TOKEN = "auth/login/"
-export const API_CREATE_EVENT = "events/"
+export const API_EVENT = "events/"
+export const API_USERS = "users/"
+
 

frontend/src/components/entities/VacancyCard/VacancyCard.module.less

@@ -2,5 +2,15 @@
     max-width: 800px;
     padding: 20px;
     margin-bottom: 10px;
-    height: 200px;
+
+}
+.up{
+    display: flex;
+    flex-direction: column;
+}
+.header{
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
+    padding: 0;
 }

frontend/src/components/entities/VacancyCard/VacancyCard.tsx

@@ -2,22 +2,37 @@ import { useTranslation } from "react-i18next";
 import { Button } from "../../shared/ui/button";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../shared/ui/card"
 import less from "./VacancyCard.module.less";
+import { TrashIcon } from "lucide-react";
+import { deleteEvent } from "../../pages/AdminEventPage/AdminEventAPI";
 
-const VacancyCard = () =>{
+interface VacancyCardProms{
+  title: string;
+  date: string;
+  desc: string;
+  cardId: string;
+  admin: boolean;
+}
+
+const VacancyCard = ({title, date, desc,cardId, admin = false} : VacancyCardProms) =>{
   const { t } = useTranslation();
 
 
     return(
         <Card className={`${less["card"]} flex flex-row `}>
 <div className="flex flex-col">
-  <CardHeader className="p-0">
-    <CardTitle className="p-0">Lorem ipsum</CardTitle>
-    <CardDescription>Lorem ipsum</CardDescription>
+  <CardHeader className={less["header"]}>
+    <div className={less["up"]}>
+    <CardTitle className="p-0">{title}</CardTitle>
+    <CardDescription>Дата начала: {date}</CardDescription>
+    </div>
+{admin &&(
+    <Button size="icon" variant="ghost" onClick={() => deleteEvent(cardId)}><TrashIcon/></Button>
+    )}
   </CardHeader>
   <CardContent className="p-0 mt-4">
-    <p>Lorem ipsum dolor sit amet consectetur. Lorem justo sit nunc commodo nam fames dui ac ullamcorper. Laoreet faucibus semper adipiscing lobortis.</p>
+    <p>{desc}</p>
   </CardContent>
-      <Button  className="mt-5">{t("respondRequest")}</Button>
+      <Button  className="mt-2">{t("respondRequest")}</Button>
   </div>
 </Card>
 

frontend/src/components/pages/AdminEventPage/AdminEventAPI.ts

@@ -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);
+    });
+}

frontend/src/components/pages/AdminEventPage/AdminEventPage.tsx

@@ -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
 

frontend/src/components/pages/Main/Main.module.less

@@ -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%; 
     }
 }
-

frontend/src/components/pages/Main/Main.tsx

@@ -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;

frontend/src/components/shared/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "../../../lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

frontend/src/components/shared/ui/command.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "../../../lib/utils"
+import { Dialog, DialogContent } from "src/components/shared/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

frontend/src/components/shared/ui/popover.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

frontend/src/components/widgets/Header/AuthAPI.ts

@@ -1,6 +1,5 @@
 import { FormEvent } from "react";
-import { API_BASE, API_CREATE_TOKEN, API_REG } from "../../app/APIurl";
-import { useNavigate } from 'react-router-dom';
+import { API_BASE, API_CREATE_TOKEN, API_USERS } from "../../app/APIurl";
   
 //логин
 export const submitLogin = (e: FormEvent<HTMLFormElement>) => {
@@ -42,8 +41,10 @@ export const submitRegister = (e: FormEvent<HTMLFormElement>, navigate: Function
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
     const formProps = Object.fromEntries(formData);
+    console.log(formProps)
 
-    fetch(`${API_BASE}${API_REG}`, {
+
+    fetch(`${API_BASE}${API_USERS}`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"

frontend/src/components/widgets/Header/Header.module.less

@@ -6,6 +6,11 @@
     align-items: center;
     padding: 0px 32px;
     width: 100%;
+    z-index: 999;
+    position: fixed;
+    width: 100%;
+    top:  0;
+    background-color: hsl(var(--background));
 
 }