Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added switch component to toggle visibility

Browse Source
This commit is contained in:
Alexis
2024-06-09 14:27:53 +02:00
parent 43768cb49d
commit 737ee6739b
7 changed files with 79 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/calendar/form/CreateEvent.vue
View File

@@ -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 }}

29
components/calendar/form/UpdateEvent.vue
View File

@@ -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 }}

27
components/ui/label/Label.vue Normal file
View File

@@ -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>

1
components/ui/label/index.ts Normal file
View File

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

3
models/CalendarEvent.ts
View File

@@ -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()
})

1
server/api/calendars/events/[id].patch.ts
View File

@@ -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
)

1
server/api/calendars/events/create.post.ts
View File

@@ -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
)