WIP: add difficulties fields to journey form

MaximeDan · Jun 18, 2024 · e989f02 · e989f02
1 parent a9c0ed9
commit e989f02
Show file tree

Hide file tree

Showing 12 changed files with 241 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@prisma/client": "^5.14.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "bcrypt": "^5.1.1",

diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -291,4 +291,14 @@ export const Icons = {
       </defs>
     </svg>
   ),
+  close: (props: LucideProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      fill="none"
+    >
+      <path d="M1 13L13 1M13 13L1 1" stroke="#D8552B" stroke-width="2" />
+    </svg>
+  ),
 };
diff --git a/src/components/form/StepCounter.tsx b/src/components/form/StepCounter.tsx
@@ -12,11 +12,11 @@ const StepCounter = ({ step, totalSteps }: StepCounterProps) => {
         <div
           key={index}
           className={`size-[11px] rounded-[10px] ${
-            index <= step ? "bg-slate-700" : "bg-slate-400"
+            index <= step ? "bg-orange" : "bg-gray-200"
           }`}
         />
       ))}
-      <p className="ml-1 text-[15px] font-semibold text-slate-700">
+      <p className="ml-1 text-[15px] font-semibold text-orange">
         Étape {step + 1}/{totalSteps}
       </p>
     </div>

diff --git a/src/components/form/journey/BottomSheetModal.tsx b/src/components/form/journey/BottomSheetModal.tsx
@@ -18,6 +18,7 @@ import { Sheet } from "react-modal-sheet";
 import "leaflet/dist/leaflet.css";
 import { useEffect, useState } from "react";
 import LeafletMap from "@/components/map/LeafletMap";
+import { Icons } from "@/components/Icons";
 
 type AddStepFormValues = z.infer<typeof addStepSchema>;
 
@@ -102,8 +103,8 @@ const BottomSheetModal = () => {
       disableDrag={dragDisabled}
     >
       <Sheet.Container>
-        <Sheet.Header />
-        <Sheet.Content>
+        <Sheet.Header className="bg-gray" />
+        <Sheet.Content className="bg-gray px-5">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(processForm)}>
               <div className="flex">
@@ -188,7 +189,10 @@ const BottomSheetModal = () => {
               />
 
               <Button>
-                {editedStep ? "Modifier l'étape" : "Ajouter une étape"}
+                <span>
+                  {editedStep ? "Modifier l'étape" : "Ajouter une étape"}
+                </span>
+                <Icons.arrowLink width={14} height={14} className="ml-2" />
               </Button>
             </form>
           </Form>

diff --git a/src/components/form/journey/JourneyForm.tsx b/src/components/form/journey/JourneyForm.tsx
@@ -15,6 +15,7 @@ import { Button } from "@/components/ui/button";
 import { zodResolver } from "@hookform/resolvers/zod";
 import StepCounter from "../StepCounter";
 import Steps from "./steps/Steps";
+import { Icons } from "@/components/Icons";
 
 export type JourneyFormValues = z.infer<typeof journeyFormSchema>;
 type FieldName = keyof JourneyFormValues;
@@ -98,8 +99,13 @@ const JourneyForm = () => {
   if (!isVisible) return null;
 
   return (
-    <div className="fixed left-0 top-0 z-10 flex size-full flex-col bg-white">
-      <Button onClick={dismissModal}>Quitter</Button>
+    <div className="fixed left-0 top-0 z-10 flex size-full flex-col overflow-scroll bg-background px-5  pb-12 pt-5">
+      <div className="flex justify-end">
+        <Button onClick={dismissModal}>
+          <span>Quitter</span>
+          <Icons.close width={14} height={14} className="ml-2" />
+        </Button>
+      </div>
       <Form {...form}>
         {!form.formState.isSubmitSuccessful && formStatus === "idle" && (
           <form onSubmit={form.handleSubmit(processForm)}>

diff --git a/src/components/form/journey/steps/FirstStep.tsx b/src/components/form/journey/steps/FirstStep.tsx
@@ -10,6 +10,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
+import { Icons } from "@/components/Icons";
 
 type FirstStepProps = {
   next: () => Promise<void>;
@@ -57,7 +58,10 @@ const FirstStep = ({ form, next }: FirstStepProps) => {
       />
 
       {/* TODO: add image file input */}
-      <Button onClick={next}>Suivant</Button>
+      <Button onClick={next}>
+        <span>Suivant</span>
+        <Icons.arrowLink className="ml-2" />
+      </Button>
     </div>
   );
 };

diff --git a/src/components/form/journey/steps/SecondStep.tsx b/src/components/form/journey/steps/SecondStep.tsx
@@ -5,6 +5,7 @@ import {
   FormControl,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
 } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
@@ -17,6 +18,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Icons } from "@/components/Icons";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
 type SecondStepProps = {
   prev: () => void;
@@ -48,7 +51,77 @@ const SecondStep = ({ form, next, prev }: SecondStepProps) => {
         )}
       />
 
-      {/* TO DO: radio fields on physical difficulty and clues difficulty */}
+      <FormField
+        control={form.control}
+        name="physicalDifficulty"
+        render={({ field }) => (
+          <FormItem className="space-y-3">
+            <FormControl>
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex"
+              >
+                <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormControl>
+                    <RadioGroupItem value="facile" />
+                  </FormControl>
+                  <FormLabel className="font-normal">Facile</FormLabel>
+                </FormItem>
+                <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormControl>
+                    <RadioGroupItem value="intermediaire" />
+                  </FormControl>
+                  <FormLabel className="font-normal">Intermédiaire</FormLabel>
+                </FormItem>
+                <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormControl>
+                    <RadioGroupItem value="difficile" />
+                  </FormControl>
+                  <FormLabel className="font-normal">Difficile</FormLabel>
+                </FormItem>
+              </RadioGroup>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="cluesDifficulty"
+        render={({ field }) => (
+          <FormItem className="space-y-3">
+            <FormControl>
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex"
+              >
+                <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormControl>
+                    <RadioGroupItem value="facile" />
+                  </FormControl>
+                  <FormLabel className="font-normal">Facile</FormLabel>
+                </FormItem>
+                <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormControl>
+                    <RadioGroupItem value="intermediaire" />
+                  </FormControl>
+                  <FormLabel className="font-normal">Intermédiaire</FormLabel>
+                </FormItem>
+                <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormControl>
+                    <RadioGroupItem value="difficile" />
+                  </FormControl>
+                  <FormLabel className="font-normal">Difficile</FormLabel>
+                </FormItem>
+              </RadioGroup>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
       <FormField
         control={form.control}
@@ -171,14 +244,18 @@ const SecondStep = ({ form, next, prev }: SecondStepProps) => {
         )}
       />
 
-      <div className="xs:mt-[60px] mt-11 flex justify-between">
-        <Button onClick={prev}>Retour</Button>
+      <div className="mt-11 flex justify-between xs:mt-[60px]">
+        <Button onClick={prev}>
+          <Icons.arrowLink className="mr-2 -scale-x-100" />
+          <span>Retour</span>
+        </Button>
         <Button
           onClick={async () => {
             await next();
           }}
         >
-          Continuer
+          <span>Continuer</span>
+          <Icons.arrowLink className="ml-2" />
         </Button>
       </div>
     </div>

diff --git a/src/components/form/journey/steps/ThirdStep.tsx b/src/components/form/journey/steps/ThirdStep.tsx
@@ -12,6 +12,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { useEffect } from "react";
+import { Icons } from "@/components/Icons";
 
 type ThirdStepProps = {
   prev: () => void;
@@ -57,18 +58,22 @@ const ThirdStep = ({ form, next, prev }: ThirdStepProps) => {
       />
 
       <Button className="flex items-center" onClick={showBottomSheet}>
-        <Plus size={24} />
+        <Plus size={24} stroke="var(--orange)" />
         <p>Ajouter une étape</p>
       </Button>
 
-      <div className="xs:mt-[60px] mt-11 flex justify-between">
-        <Button onClick={prev}>Retour</Button>
+      <div className="mt-11 flex justify-between xs:mt-[60px]">
+        <Button onClick={prev}>
+          <Icons.arrowLink className="mr-2 -scale-x-100" />
+          <span>Retour</span>
+        </Button>
         <Button
           onClick={async () => {
             await next();
           }}
         >
-          Continuer
+          <span>Continuer</span>
+          <Icons.arrowLink className="ml-2" />
         </Button>
       </div>
       <BottomSheetModal />

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -5,22 +5,15 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/tailwindUtils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium uppercase  disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: "rounded-full border border-beige text-foreground",
+        link: "text-foreground underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "px-[9px] py-[5px]",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "size-10",