Migration to nuxt 4
Used codemods CLI and reworked most alias'd path that stopped working
This commit is contained in:
Alexis
41
app/components/calendar/dialog/Categories.vue
Normal file
41
app/components/calendar/dialog/Categories.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script lang="ts" setup>
|
||||
import { PhX } from "@phosphor-icons/vue";
|
||||
|
||||
const { toggleCategoriesModal } = useCalendar()
|
||||
const { categories, isCategoriesModalOpen } = storeToRefs(useCalendar())
|
||||
|
||||
function handleClosing() {
|
||||
toggleCategoriesModal(false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiAlertDialog :open="isCategoriesModalOpen">
|
||||
<UiAlertDialogContent
|
||||
class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl"
|
||||
:disable-outside-pointer-events="true"
|
||||
:trap-focus="true"
|
||||
@focus-outside="handleClosing"
|
||||
@interact-outside="handleClosing"
|
||||
@close-auto-focus="(e) => e.preventDefault()"
|
||||
>
|
||||
<header>
|
||||
<UiAlertDialogTitle>
|
||||
<span class="text-2xl">
|
||||
{{ $t('entity.category.manageDialog.title') }}
|
||||
</span>
|
||||
</UiAlertDialogTitle>
|
||||
|
||||
<UiAlertDialogDescription>
|
||||
{{ $t('entity.category.manageDialog.subtitle') }}
|
||||
</UiAlertDialogDescription>
|
||||
</header>
|
||||
|
||||
<UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClosing">
|
||||
<PhX size="20" />
|
||||
</UiButton>
|
||||
|
||||
<CalendarCategoryTable :categories />
|
||||
</UiAlertDialogContent>
|
||||
</UiAlertDialog>
|
||||
</template>
|
||||
47
app/components/calendar/dialog/Create.vue
Normal file
47
app/components/calendar/dialog/Create.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script lang="ts" setup>
|
||||
import { PhX } from "@phosphor-icons/vue";
|
||||
import type { World } from "@@/models/World";
|
||||
|
||||
defineProps<{
|
||||
world: World,
|
||||
modalState?: boolean
|
||||
}>()
|
||||
|
||||
const calendarSkeletonName = ref<string>("")
|
||||
|
||||
function onChangedName(newName: string) {
|
||||
calendarSkeletonName.value = newName
|
||||
}
|
||||
|
||||
const emit = defineEmits(["on-close"])
|
||||
|
||||
function handleClose() {
|
||||
emit("on-close")
|
||||
setTimeout(() => calendarSkeletonName.value = "", 100)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiAlertDialog :open="modalState">
|
||||
<UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6" @close-auto-focus="(e) => e.preventDefault()">
|
||||
<UiAlertDialogTitle>
|
||||
<span class="text-2xl">
|
||||
<strong class="font-bold">{{ world.name }}</strong>
|
||||
<span class="opacity-30"> — </span>
|
||||
<span v-if="calendarSkeletonName">
|
||||
{{ calendarSkeletonName }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('entity.calendar.createDialog.title') }}
|
||||
</span>
|
||||
</span>
|
||||
</UiAlertDialogTitle>
|
||||
|
||||
<UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClose">
|
||||
<PhX size="20" />
|
||||
</UiButton>
|
||||
|
||||
<CalendarFormCreate v-if="world.id" :world-id="world.id" @on-changed-name="onChangedName" @on-close="handleClose" />
|
||||
</UiAlertDialogContent>
|
||||
</UiAlertDialog>
|
||||
</template>
|
||||
69
app/components/calendar/dialog/CreateEvent.vue
Normal file
69
app/components/calendar/dialog/CreateEvent.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<script lang="ts" setup>
|
||||
import type { RPGDate } from "@@/models/Date";
|
||||
|
||||
const { eventSkeleton, operationInProgress, currentRPGDate } = storeToRefs(useCalendar())
|
||||
const { resetSkeleton } = useCalendar()
|
||||
const popoverOpen = ref(false)
|
||||
|
||||
const props = defineProps<{
|
||||
date?: RPGDate
|
||||
btnClass?: string
|
||||
}>()
|
||||
|
||||
/**
|
||||
* Opens event creation's popover
|
||||
*/
|
||||
function openEventCreatePopover() {
|
||||
// If another operation is in progress, whether it's another create popup or a modal, don't bother opening it
|
||||
if (operationInProgress.value) {
|
||||
popoverOpen.value = false
|
||||
return
|
||||
}
|
||||
|
||||
resetSkeleton()
|
||||
|
||||
popoverOpen.value = true
|
||||
|
||||
// Set skeleton initial startDate if it's known
|
||||
if (props.date) {
|
||||
eventSkeleton.value.startDate = { ...props.date } // We need to clone it otherwise the props ends up mutating (?)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents the modal from closing if's still loading
|
||||
*
|
||||
* @param e The closing event (can be keydown or click)
|
||||
*/
|
||||
function handleClosing() {
|
||||
popoverOpen.value = false
|
||||
resetSkeleton()
|
||||
}
|
||||
|
||||
// If the date changes, the popover should close
|
||||
// Only for months for now (because it's the only view)
|
||||
watch(currentRPGDate, () => {
|
||||
if (!popoverOpen.value) return
|
||||
handleClosing()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiPopover v-model:open="popoverOpen">
|
||||
<UiPopoverTrigger as-child>
|
||||
<button :class="btnClass" @click="openEventCreatePopover()" />
|
||||
</UiPopoverTrigger>
|
||||
<UiPopoverContent
|
||||
:align="'center'"
|
||||
:side="'right'"
|
||||
:collision-padding="60"
|
||||
:disable-outside-pointer-events="true"
|
||||
:trap-focus="true"
|
||||
class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
|
||||
@escape-key-down.prevent="handleClosing"
|
||||
@pointer-down-outside.prevent="handleClosing"
|
||||
>
|
||||
<CalendarFormCreateEvent @event-created="handleClosing" />
|
||||
</UiPopoverContent>
|
||||
</UiPopover>
|
||||
</template>
|
||||
103
app/components/calendar/dialog/Delete.vue
Normal file
103
app/components/calendar/dialog/Delete.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<script lang="ts" setup>
|
||||
import { PhCircleNotch } from "@phosphor-icons/vue";
|
||||
import { useToast } from "~/components/ui/toast";
|
||||
import { ToastLifetime } from "~/components/ui/toast/use-toast";
|
||||
import type { Calendar } from "@@/models/CalendarConfig";
|
||||
|
||||
const { toast } = useToast()
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
modalState: boolean,
|
||||
calendar: Calendar | null
|
||||
}>()
|
||||
|
||||
const isLoading = ref<boolean>(false)
|
||||
|
||||
const emit = defineEmits(["on-close"])
|
||||
|
||||
async function handleAction(): Promise<void> {
|
||||
if (isLoading.value) return
|
||||
if (!props.calendar) return
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
const { error } = await tryCatch($fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" }))
|
||||
|
||||
if (error) {
|
||||
toast({
|
||||
title: error.message,
|
||||
variant: "destructive"
|
||||
})
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
toast({
|
||||
title: t("entity.calendar.deletedToast.title", { calendar: props.calendar.name }),
|
||||
variant: "success",
|
||||
duration: ToastLifetime.SHORT
|
||||
})
|
||||
|
||||
emit("on-close")
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents the modal from closing if's still loading
|
||||
*
|
||||
* @param e The closing event (can be keydown or click)
|
||||
*/
|
||||
function handleClosing() {
|
||||
if (!isLoading.value) {
|
||||
emit("on-close")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiAlertDialog :open="modalState">
|
||||
<UiAlertDialogContent
|
||||
:disable-outside-pointer-events="true"
|
||||
:trap-focus="true"
|
||||
class="min-w-96"
|
||||
@escape-key-down="handleClosing"
|
||||
@focus-outside="handleClosing"
|
||||
@interact-outside="handleClosing"
|
||||
@pointer-down-outside="handleClosing"
|
||||
@close-auto-focus="(e) => e.preventDefault()"
|
||||
>
|
||||
<UiAlertDialogTitle>
|
||||
{{ $t('entity.calendar.deleteDialog.title') }}
|
||||
</UiAlertDialogTitle>
|
||||
|
||||
<UiAlertDialogDescription>
|
||||
{{ $t('entity.calendar.deleteDialog.subtitle') }}
|
||||
</UiAlertDialogDescription>
|
||||
|
||||
<form @submit.prevent="handleAction">
|
||||
<footer class="flex gap-2 justify-between">
|
||||
<UiButton type="button" size="sm" variant="outline" @click="handleClosing">
|
||||
{{ $t('ui.action.back') }}
|
||||
</UiButton>
|
||||
|
||||
<div class="flex gap-2 justify-end">
|
||||
<Transition name="fade-delay">
|
||||
<UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
|
||||
{{ $t('ui.action.cancel') }}
|
||||
</UiButton>
|
||||
</Transition>
|
||||
|
||||
<UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
|
||||
<Transition name="fade">
|
||||
<PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
|
||||
</Transition>
|
||||
|
||||
{{ $t('entity.deleteOne', { entity: calendar?.name }) }}
|
||||
</UiButton>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</UiAlertDialogContent>
|
||||
</UiAlertDialog>
|
||||
</template>
|
||||
45
app/components/calendar/dialog/DeleteEvent.vue
Normal file
45
app/components/calendar/dialog/DeleteEvent.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
|
||||
|
||||
const isLoading = ref<boolean>(false)
|
||||
|
||||
// Watch the popover state
|
||||
watch(isDeleteEventModalOpen, (hasOpened, _o) => {
|
||||
if (hasOpened && lastActiveEvent.value) {
|
||||
eventSkeleton.value = structuredClone(toRaw(lastActiveEvent.value))
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Prevents the modal from closing if's still loading
|
||||
*
|
||||
* @param e The closing event (can be keydown or click)
|
||||
*/
|
||||
function handleClosing(e: Event): void {
|
||||
if (isLoading.value) {
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiAlertDialog v-model:open="isDeleteEventModalOpen">
|
||||
<UiAlertDialogContent
|
||||
:disable-outside-pointer-events="true"
|
||||
:trap-focus="true"
|
||||
class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
|
||||
@escape-key-down="handleClosing"
|
||||
@focus-outside="handleClosing"
|
||||
@interact-outside="handleClosing"
|
||||
@pointer-down-outside="handleClosing"
|
||||
>
|
||||
<UiAlertDialogTitle>{{ $t('entity.calendar.event.deleteDialog.title') }}</UiAlertDialogTitle>
|
||||
|
||||
<UiAlertDialogDescription>
|
||||
{{ $t('entity.calendar.event.deleteDialog.subtitle') }}
|
||||
</UiAlertDialogDescription>
|
||||
|
||||
<CalendarFormDeleteEvent />
|
||||
</UiAlertDialogContent>
|
||||
</UiAlertDialog>
|
||||
</template>
|
||||
63
app/components/calendar/dialog/QuickCreateEvent.vue
Normal file
63
app/components/calendar/dialog/QuickCreateEvent.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
|
||||
import { PhPlus } from "@phosphor-icons/vue";
|
||||
import { VisuallyHidden } from "radix-vue";
|
||||
|
||||
const isDialogOpen = ref<boolean>(false);
|
||||
const { resetSkeleton } = useCalendar();
|
||||
|
||||
// Toggles the dialog
|
||||
function toggleDialog() {
|
||||
isDialogOpen.value = !isDialogOpen.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Prevents the modal from closing if's still loading
|
||||
*/
|
||||
function handleClosing() {
|
||||
setTimeout(() => resetSkeleton(), 100)
|
||||
}
|
||||
|
||||
const breakpoints = useBreakpoints(
|
||||
breakpointsTailwind
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<Transition name="fade" appear>
|
||||
<UiButton
|
||||
class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
|
||||
:size="breakpoints.md.value ? 'default' : 'icon'"
|
||||
@click="toggleDialog"
|
||||
>
|
||||
<PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
|
||||
|
||||
<strong v-if="breakpoints.md.value" class="font-semibold">
|
||||
{{ $t("entity.calendar.event.newEvent") }}
|
||||
</strong>
|
||||
</UiButton>
|
||||
</Transition>
|
||||
</ClientOnly>
|
||||
|
||||
<UiDialog v-model:open="isDialogOpen">
|
||||
<UiDialogContent
|
||||
class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
|
||||
:trap-focus="true"
|
||||
@escape-key-down="handleClosing"
|
||||
@pointer-down-outside.prevent="handleClosing"
|
||||
>
|
||||
<UiDialogTitle class="max-md:mb-8">
|
||||
{{ $t("entity.calendar.event.addSingle") }}
|
||||
</UiDialogTitle>
|
||||
|
||||
<VisuallyHidden>
|
||||
<UiDialogDescription>
|
||||
{{ $t("entity.calendar.event.addSingleDescription") }}
|
||||
</UiDialogDescription>
|
||||
</VisuallyHidden>
|
||||
|
||||
<CalendarFormCreateEvent @event-created="toggleDialog" />
|
||||
</UiDialogContent>
|
||||
</UiDialog>
|
||||
</template>
|
||||
49
app/components/calendar/dialog/Update.vue
Normal file
49
app/components/calendar/dialog/Update.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script lang="ts" setup>
|
||||
import { PhX } from "@phosphor-icons/vue";
|
||||
import type { Calendar } from "@@/models/CalendarConfig";
|
||||
import type { World } from "@@/models/World";
|
||||
|
||||
const props = defineProps<{
|
||||
calendar: Calendar | null,
|
||||
world: World | null,
|
||||
modalState?: boolean
|
||||
}>()
|
||||
|
||||
const calendarSkeletonName = ref<string>(props.calendar?.name ?? "")
|
||||
|
||||
function onChangedName(newName: string) {
|
||||
calendarSkeletonName.value = newName
|
||||
}
|
||||
|
||||
const emit = defineEmits(["on-close"])
|
||||
|
||||
function handleClose() {
|
||||
emit("on-close")
|
||||
setTimeout(() => calendarSkeletonName.value = "", 100)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiAlertDialog :open="modalState">
|
||||
<UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6" @close-auto-focus="(e) => e.preventDefault()">
|
||||
<UiAlertDialogTitle>
|
||||
<span class="text-2xl">
|
||||
<strong class="font-bold">{{ world?.name }}</strong>
|
||||
<span class="opacity-30"> — </span>
|
||||
<span v-if="calendarSkeletonName">
|
||||
{{ calendarSkeletonName }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('entity.calendar.updateDialog.title') }}
|
||||
</span>
|
||||
</span>
|
||||
</UiAlertDialogTitle>
|
||||
|
||||
<UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClose">
|
||||
<PhX size="20" />
|
||||
</UiButton>
|
||||
|
||||
<CalendarFormUpdate v-if="calendar" :world="world" :calendar="calendar" @on-changed-name="onChangedName" @on-close="handleClose" />
|
||||
</UiAlertDialogContent>
|
||||
</UiAlertDialog>
|
||||
</template>
|
||||
47
app/components/calendar/dialog/UpdateEvent.vue
Normal file
47
app/components/calendar/dialog/UpdateEvent.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script lang="ts" setup>
|
||||
const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
|
||||
const { resetSkeleton } = useCalendar();
|
||||
|
||||
// Watch the popover state
|
||||
watch(isEditEventModalOpen, (hasOpened, _o) => {
|
||||
if (hasOpened && lastActiveEvent.value) {
|
||||
eventSkeleton.value = structuredClone(toRaw(lastActiveEvent.value))
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Prevents the modal from closing if's still loading
|
||||
*
|
||||
* @param e The closing event (can be keydown or click)
|
||||
*/
|
||||
function handleClosing() {
|
||||
isEditEventModalOpen.value = false
|
||||
setTimeout(() => resetSkeleton(), 100)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiDialog v-model:open="isEditEventModalOpen">
|
||||
<UiDialogContent
|
||||
:disable-outside-pointer-events="true"
|
||||
:trap-focus="true"
|
||||
class="pl-3 md:min-w-96 max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
|
||||
@escape-key-down="handleClosing"
|
||||
@focus-outside="handleClosing"
|
||||
@interact-outside="handleClosing"
|
||||
@pointer-down-outside="(e) => e.preventDefault()"
|
||||
>
|
||||
<header class="pl-8 grid gap-y-2 max-md:mb-8">
|
||||
<UiDialogTitle>
|
||||
{{ $t('entity.calendar.event.editDialog.title') }}
|
||||
</UiDialogTitle>
|
||||
|
||||
<UiDialogDescription>
|
||||
{{ $t('entity.calendar.event.editDialog.subtitle') }}
|
||||
</UiDialogDescription>
|
||||
</header>
|
||||
|
||||
<CalendarFormUpdateEvent @event-updated="handleClosing" />
|
||||
</UiDialogContent>
|
||||
</UiDialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user