2025-02-23

2025-02-24

src/components/SearchMediaDialog.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+  import { Effect, pipe } from "effect";
   import { useTemplateRef } from "vue";
+  import { useRouter } from "vue-router";
 
   import ImposterBox from "./ImposterBox.vue";
 
@@ -12,46 +14,72 @@
   defineEmits<(e: "dialog-hidden", dialogId: string) => void>();
 
   const form = useTemplateRef<HTMLFormElement>("form");
+  const router = useRouter();
 
   const resetAndClose = () => {
     form.value?.reset();
     toggleDialog();
   };
+
+  const redirectToSearch = async (event: Event): void => {
+    if (!form.value?.checkValidity()) return;
+    event.preventDefault();
+
+    await pipe(
+      Effect.fromNullable(form.value),
+      Effect.andThen((form: HTMLFormElement) => new FormData(form)),
+      Effect.andThen((formData: FormData) => new URLSearchParams(formData)),
+      Effect.andThen((searchParams: URLSearchParams) => Object.fromEntries(searchParams.entries())),
+      Effect.tap(query => router.push({ path: "/search", query })),
+      Effect.runPromise,
+    );
+  };
 </script>
 
 <template>
   <ImposterBox dialog-id="add-media" :is-toggled="isToggled" @dialog-hidden="resetAndClose">
     <template #title>Ajouter un média</template>
     <template #content>
-      <form ref="form" class="stack">
+      <form
+        id="add-media-form" ref="form" action=""
+        class="stack" method="dialog"
+      >
         <fieldset class="cluster">
           <legend>Type du média</legend>
           <div class="field">
             <input
-              id="film" checked name="media-type"
-              type="radio" value="film"
+              id="film" checked for="add-media-form"
+              name="type" type="radio" value="film"
             >
             <label for="film">Film</label>
           </div>
 
           <div class="field">
             <input
-              id="series" name="media-type" type="radio"
-              value="series"
+              id="series" for="add-media-form" name="type"
+              type="radio" value="series"
             >
             <label for="series">Série</label>
           </div>
         </fieldset>
 
         <div class="field stack">
-          <label for="media-title">Titre</label> <input id="media-title" type="text">
+          <label for="query">Titre</label>
+          <input
+            id="query" for="add-media-form" name="query"
+            required type="text"
+          >
         </div>
         <div class="field stack">
-          <label for="media-release-year">Année de sortie</label> <input id="media-release-year" type="number">
+          <label for="year">Année de sortie</label>
+          <input
+            id="year" for="add-media-form" name="year"
+            type="number"
+          >
         </div>
 
         <div class="cluster buttons">
-          <button class="invert" type="submit">
+          <button class="invert" type="submit" @click="redirectToSearch">
             Rechercher
           </button>
           <button type="reset">