Feat/create exercise

apps/api/src/modules/exercise/exercise.controller.ts

@@ -1,5 +1,4 @@
 import { exerciseContract } from '@dropit/contract';
-import { UpdateExercise } from '@dropit/schemas';
 import {
   BadRequestException,
   Controller,

apps/web/package.json

@@ -9,12 +9,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dropit/schemas": "workspace:*",
+    "@dropit/contract": "workspace:*",
     "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@tanstack/react-query": "^5.62.7",
     "@tanstack/react-router": "^1.89.0",
     "@tanstack/react-table": "^8.20.6",
+    "@ts-rest/core": "^3.51.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.469.0",

apps/web/src/components/exercises/data-table.tsx

@@ -10,6 +10,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '../ui/button';
 import {
@@ -19,6 +20,7 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu';
 import { Input } from '../ui/input';
+import { Separator } from '../ui/separator';
 import {
   Table,
   TableBody,
@@ -31,11 +33,13 @@ import {
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
+  onDialogCreation: (open: boolean) => void;
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
+  onDialogCreation,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -73,32 +77,38 @@ export function DataTable<TData, TValue>({
             className="max-w-sm"
           />
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
-              Columns
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanHide())
-              .map((column) => {
-                return (
-                  <DropdownMenuCheckboxItem
-                    key={column.id}
-                    className="capitalize"
-                    checked={column.getIsVisible()}
-                    onCheckedChange={(value) =>
-                      column.toggleVisibility(!!value)
-                    }
-                  >
-                    {column.id}
-                  </DropdownMenuCheckboxItem>
-                );
-              })}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                Columns
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  );
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Separator orientation="vertical" className="h-6" />
+          <Button onClick={() => onDialogCreation(true)}>
+            Ajouter un exercice
+          </Button>
+        </div>
       </div>
       <div className="rounded-md border">
         <Table>
@@ -152,25 +162,25 @@ export function DataTable<TData, TValue>({
       </div>
       <div className="flex justify-between items-center">
         <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} de{' '}
-          {table.getFilteredRowModel().rows.length} colonne(s) sectectionné.
+          {table.getFilteredSelectedRowModel().rows.length} sur{' '}
+          {table.getFilteredRowModel().rows.length} colonne(s) sectectionnée.
         </div>
         <div className="flex items-center justify-end space-x-2 py-4">
           <Button
             variant="outline"
-            size="sm"
+            size="icon"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            Précédent
+            <ChevronLeft />
           </Button>
           <Button
             variant="outline"
-            size="sm"
+            size="icon"
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            Suivant
+            <ChevronRight />
           </Button>
         </div>
       </div>

apps/web/src/components/exercises/dialog-creation.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+
+interface DialogCreationProps {
+  title: string;
+  description?: string;
+  children: ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function DialogCreation({
+  title,
+  description,
+  children,
+  open,
+  onOpenChange,
+}: DialogCreationProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/exercises/exercise-creation-form.tsx

@@ -0,0 +1,139 @@
+import { api } from '@/lib/api';
+import { CreateExercise } from '@dropit/schemas';
+import { useState } from 'react';
+import { Button } from '../ui/button';
+import { FileUpload } from '../ui/file-upload';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { Textarea } from '../ui/textarea';
+
+interface ExerciseCreationFormProps {
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export function ExerciseCreationForm({
+  onSuccess,
+  onCancel,
+}: ExerciseCreationFormProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState<Partial<CreateExercise>>({});
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const response = await api.createExercise({
+        body: {
+          // biome-ignore lint/style/noNonNullAssertion: <explanation>
+          name: formData.name!,
+          // biome-ignore lint/style/noNonNullAssertion: <explanation>
+          exerciseCategory: formData.exerciseCategory!,
+          description: formData.description,
+          englishName: formData.englishName,
+          shortName: formData.shortName,
+          // La gestion de la vidéo nécessitera probablement une route séparée pour l'upload
+        },
+      });
+
+      if (response.status === 201) {
+        onSuccess?.();
+      }
+    } catch (error) {
+      console.error('Erreur lors de la création:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleChange = (field: keyof CreateExercise, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="grid gap-4 py-4">
+      <div className="grid gap-2">
+        <Label htmlFor="name">Nom</Label>
+        <Input
+          id="name"
+          placeholder="Nom de l'exercice"
+          value={formData.name ?? ''}
+          onChange={(e) => handleChange('name', e.target.value)}
+          required
+        />
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="category">Catégorie</Label>
+        <Select
+          value={formData.exerciseCategory}
+          onValueChange={(value) => handleChange('exerciseCategory', value)}
+          required
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Sélectionner une catégorie" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="halterophilie">Haltérophilie</SelectItem>
+            <SelectItem value="musculation">Musculation</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          placeholder="Description de l'exercice"
+          value={formData.description ?? ''}
+          onChange={(e) => handleChange('description', e.target.value)}
+        />
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="englishName">Nom en anglais</Label>
+        <Input
+          id="englishName"
+          placeholder="Nom en anglais"
+          value={formData.englishName ?? ''}
+          onChange={(e) => handleChange('englishName', e.target.value)}
+        />
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="shortName">Abbréviation</Label>
+        <Input
+          id="shortName"
+          placeholder="Abbréviation"
+          value={formData.shortName ?? ''}
+          onChange={(e) => handleChange('shortName', e.target.value)}
+        />
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="video">Vidéo</Label>
+        <FileUpload
+          id="video"
+          accept="video/mp4,video/webm,video/ogg"
+          aria-label="Upload une vidéo"
+        />
+      </div>
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isLoading}
+        >
+          Annuler
+        </Button>
+        <Button type="submit" disabled={isLoading}>
+          {isLoading ? 'Création...' : 'Créer'}
+        </Button>
+      </div>
+    </form>
+  );
+}