Added switch component to toggle visibility

components/calendar/form/CreateEvent.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { RPGDate } from '~/models/Date';
 
-import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
+import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea } from '@phosphor-icons/vue'
 
 const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
 const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
@@ -96,7 +96,7 @@ function handleCancel() {
       @pointer-down-outside="handleClosing"
     >
       <form @submit.prevent="handleSubmit">
-        <div class="grid grid-cols-2 gap-y-4">
+        <div class="grid grid-cols-2 gap-y-6">
           <div class="col-span-2 pl-8">
             <input
               id="new-event-title"
@@ -119,7 +119,7 @@ function handleCancel() {
           </div>
 
           <div class="col-span-2">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-4">
               <PhAlarm size="18" weight="fill" />
 
               <CalendarInputRPGDate
@@ -140,7 +140,7 @@ function handleCancel() {
           </div>
 
           <div class="col-span-2">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 
               <input
@@ -153,6 +153,25 @@ function handleCancel() {
             </div>
           </div>
 
+          <div class="col-span-2">
+            <div class="flex items-center gap-4">
+              <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
+              <PhEyeClosed v-else size="18" />
+
+              <div class="flex items-center gap-x-2">
+                <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+                <UiLabel for="new-event-visibility">
+                  <template v-if="!eventSkeleton.hidden">
+                    Évènement visible
+                  </template>
+                  <template v-else>
+                    Évènement caché
+                  </template>
+                </UiLabel>
+              </div>
+            </div>
+          </div>
+
           <div class="text-red-500 pl-8">
             <span class="text-sm">
               {{ formErrors.message }}

components/calendar/form/UpdateEvent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhAlarm, PhCircleNotch, PhMapPinArea, PhPencilSimpleLine } from '@phosphor-icons/vue'
+import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
 const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
@@ -81,9 +81,9 @@ function handleCancel() {
       </VisuallyHidden>
 
       <form @submit.prevent="handleAction">
-        <div class="grid grid-cols-2 gap-y-4">
+        <div class="grid grid-cols-2 gap-y-6">
           <div class="col-span-2">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-4">
               <PhPencilSimpleLine size="20" weight="fill" />
 
               <input
@@ -109,7 +109,7 @@ function handleCancel() {
           </div>
 
           <div class="col-span-2">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-4">
               <PhAlarm size="18" weight="fill" />
 
               <CalendarInputRPGDate
@@ -130,7 +130,7 @@ function handleCancel() {
           </div>
 
           <div class="col-span-2">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 
               <input
@@ -143,6 +143,25 @@ function handleCancel() {
             </div>
           </div>
 
+          <div class="col-span-2">
+            <div class="flex items-center gap-4">
+              <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
+              <PhEyeClosed v-else size="18" />
+
+              <div class="flex items-center gap-x-2">
+                <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+                <UiLabel for="new-event-visibility">
+                  <template v-if="!eventSkeleton.hidden">
+                    Évènement visible par tous
+                  </template>
+                  <template v-else>
+                    Évènement caché
+                  </template>
+                </UiLabel>
+              </div>
+            </div>
+          </div>
+
           <div class="text-red-500 ml-8">
             <span class="text-sm">
               {{ formErrors.message }}

components/ui/label/Label.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Label, type LabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'