From 737ee6739b715fb4ee046934605d1fd2c5ebe25b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 9 Jun 2024 14:27:53 +0200
Subject: [PATCH] Added switch component to toggle visibility

---
 components/calendar/form/CreateEvent.vue   | 27 +++++++++++++++++---
 components/calendar/form/UpdateEvent.vue   | 29 ++++++++++++++++++----
 components/ui/label/Label.vue              | 27 ++++++++++++++++++++
 components/ui/label/index.ts               |  1 +
 models/CalendarEvent.ts                    |  3 ++-
 server/api/calendars/events/[id].patch.ts  |  1 +
 server/api/calendars/events/create.post.ts |  1 +
 7 files changed, 79 insertions(+), 10 deletions(-)
 create mode 100644 components/ui/label/Label.vue
 create mode 100644 components/ui/label/index.ts

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 524121f..e2841fe 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/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 }}
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 3f64638..bb7fd68 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/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 }}
diff --git a/components/ui/label/Label.vue b/components/ui/label/Label.vue
new file mode 100644
index 0000000..8fba8db
--- /dev/null
+++ b/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>
diff --git a/components/ui/label/index.ts b/components/ui/label/index.ts
new file mode 100644
index 0000000..572c2f0
--- /dev/null
+++ b/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/models/CalendarEvent.ts b/models/CalendarEvent.ts
index c59f2fe..a1e9be0 100644
--- a/models/CalendarEvent.ts
+++ b/models/CalendarEvent.ts
@@ -24,7 +24,8 @@ export const postEventBodySchema = z.object({
     description: z.string().optional().nullable(),
     location: z.string().optional().nullable(),
     startDate: dateSchema.required(),
-    endDate: dateSchema.optional().nullable()
+    endDate: dateSchema.optional().nullable(),
+    hidden: z.boolean().optional().nullable()
   }),
   calendarId: z.number({ coerce: true }).int().positive()
 })
diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
index bd0815b..6e3298f 100644
--- a/server/api/calendars/events/[id].patch.ts
+++ b/server/api/calendars/events/[id].patch.ts
@@ -41,6 +41,7 @@ export default defineEventHandler(async (event) => {
           title: bodyData?.event.title,
           description: bodyData.event.description,
           location: bodyData.event.location,
+          hidden: bodyData.event.hidden,
           calendar_id: bodyData?.calendarId
         } as never
       )
diff --git a/server/api/calendars/events/create.post.ts b/server/api/calendars/events/create.post.ts
index c550ecb..9782b41 100644
--- a/server/api/calendars/events/create.post.ts
+++ b/server/api/calendars/events/create.post.ts
@@ -25,6 +25,7 @@ export default defineEventHandler(async (event) => {
           title: bodyData?.event.title,
           description: bodyData.event.description,
           location: bodyData.event.location,
+          hidden: bodyData.event.hidden,
           calendar_id: bodyData?.calendarId
         } as never
       )