2025-02-22

src/components/SearchMediaDialog.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+  import { useTemplateRef } from "vue";
+
+  import ImposterBox from "./ImposterBox.vue";
+
+  const { isToggled, toggleDialog } = defineProps<{
+    /** Est-ce que la modale est activée ou non. */
+    isToggled: boolean;
+    /** Fonction déclenchant l'activation ou désactivation de la modale. */
+    toggleDialog: () => void;
+  }>();
+  defineEmits<(e: "dialog-hidden", dialogId: string) => void>();
+
+  const form = useTemplateRef<HTMLFormElement>("form");
+
+  const resetAndClose = () => {
+    form.value?.reset();
+    toggleDialog();
+  };
+</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">
+        <fieldset class="cluster">
+          <legend>Type du média</legend>
+          <div class="field">
+            <input
+              id="film" checked name="media-type"
+              type="radio" value="film"
+            >
+            <label for="film">Film</label>
+          </div>
+
+          <div class="field">
+            <input
+              id="series" name="media-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">
+        </div>
+        <div class="field stack">
+          <label for="media-release-year">Année de sortie</label> <input id="media-release-year" type="number">
+        </div>
+
+        <div class="cluster buttons">
+          <button class="invert" type="submit">
+            Rechercher
+          </button>
+          <button type="reset">
+            Réinitialiser
+          </button>
+        </div>
+      </form>
+    </template>
+  </ImposterBox>
+</template>