Fixed a bug with dates and some style issues

2025-03-05 20:03:52 +01:00
parent 8848fa75b1
commit 1aa3350da3
15 changed files with 90 additions and 33 deletions
--- a/components/calendar/PreviewCard.vue
+++ b/components/calendar/PreviewCard.vue
@@ -23,14 +23,14 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen

 <template>
  <UiCard
-    class="w-full h-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
+    class="w-full h-full flex flex-col transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
    :link="calendarLink"
  >
    <UiCardHeader>
      <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
    </UiCardHeader>

-    <UiCardContent>
+    <UiCardContent class="grow">
      <p class="flex items-center gap-1">
        <PhCalendarDots size="24" weight="fill" />
        <span>{{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0].count }) }}</span>
@@ -48,13 +48,13 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
    </UiCardContent>

    <UiCardFooter>
-      <ul class="grid gap-2">
+      <ul class="grid gap-1 text-sm">
        <li class="flex gap-1 items-center">
-          <PhFilePlus size="20" />
+          <PhFilePlus size="18" />
          <span>{{ $t('common.createdAt', { createdAt }) }}</span>
        </li>
        <li v-if="updatedAt" class="flex gap-1 items-center">
-          <PhPencilSimpleLine size="20" />
+          <PhPencilSimpleLine size="18" />
          <span>{{ $t('common.updatedAt', { updatedAt }) }}</span>
        </li>
      </ul>
--- a/components/calendar/dialog/Create.vue
+++ b/components/calendar/dialog/Create.vue
@@ -17,6 +17,7 @@ const emit = defineEmits(["on-close"])

 function handleClose() {
  emit("on-close")
+  setTimeout(() => calendarSkeletonName.value = "", 100)
 }
 </script>

--- a/components/calendar/form/Create.vue
+++ b/components/calendar/form/Create.vue
@@ -97,7 +97,7 @@ function handleFormCancel() {
            </div>
          </UiTabsTrigger>
        </UiTabsList>
-        <UiTabsContent value="global">
+        <UiTabsContent value="global" class="grid gap-6">
          <input
            id="new-calendar-name"
            v-model="calendarSkeleton.name"
@@ -105,9 +105,17 @@ function handleFormCancel() {
            name="new-calendar-name"
            required
            :placeholder="$t('common.title')"
-            class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            class="w-full py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
            @input="handleNameChange"
          >
+
+          <div class="-mx-1 px-1 grid gap-3">
+            <UiLabel for="new-calendar-state">
+              {{ $t('ui.contentState.label') }}
+            </UiLabel>
+
+            <InputContentState id="new-calendar-state" v-model="calendarSkeleton.state" />
+          </div>
        </UiTabsContent>
        <UiTabsContent value="months">
          <CalendarInputMonthList v-model:model-value="calendarSkeleton.months" />
--- a/components/global/AddCard.vue
+++ b/components/global/AddCard.vue
@@ -6,7 +6,7 @@ const emit = defineEmits(["on-click"])

 <template>
  <UiCard
-    class="h-full md:w-fit transition-all bg-transparent dark:hover:bg-gray-950 dark:focus-within:outline-gray-900 hover:-translate-y-0"
+    class="h-full md:w-fit transition-all bg-transparent hover:text-slate-900 text-slate-500 dark:hover:text-slate-100 dark:text-slate-500 dark:focus-within:outline-gray-900 hover:-translate-y-0"
    has-click
    @on-click="emit('on-click')"
  >
--- a/components/global/input/Color.vue
+++ b/components/global/input/Color.vue
@@ -2,12 +2,16 @@
 import { cn } from "@/lib/utils";
 import { type RPGColor, rpgColors } from "~/models/Color";

+defineProps<{
+  id: string
+}>();
+
 const model = defineModel<RPGColor>({ default: "white" });
 </script>

 <template>
  <UiSelect v-model="model">
-    <UiSelectTrigger>
+    <UiSelectTrigger :id>
      <UiSelectValue
        :placeholder="$t('ui.colors.selectOne')"
        class="input-color"
--- a/components/global/input/ContentState.vue
+++ b/components/global/input/ContentState.vue
@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 import { contentStates, type ContentState } from "~/models/Entity";

+defineProps<{
+  id: string
+}>();
+
 const model = defineModel<ContentState>({ default: "draft" });
 </script>

 <template>
  <UiSelect v-model="model">
-    <UiSelectTrigger>
+    <UiSelectTrigger :id>
      <UiSelectValue
        :placeholder="$t('ui.contentState.selectOne')"
      />
--- a/components/ui/label/Label.vue
+++ b/components/ui/label/Label.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
    v-bind="delegatedProps"
    :class="
      cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
        props.class,
      )
    "
--- a/components/world/PreviewCard.vue
+++ b/components/world/PreviewCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhArchive, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
+import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
 import type { World } from "~/models/World";
 import { DateTime } from "luxon";

@@ -16,7 +16,7 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS

 <template>
  <UiCard
-    class="w-full h-full transition-all"
+    class="w-full h-full flex flex-col transition-all"
    :link="`/my/worlds/${world.id}`"
    :class="{
      'hover:bg-slate-50 dark:hover:bg-sky-950 dark:focus-within:outline-sky-900': !world.color,
@@ -38,13 +38,17 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
      'bg-pink-100 dark:bg-pink-950 border-pink-200 hover:bg-pink-50 dark:hover:bg-pink-900 dark:border-pink-900 dark:focus-within:outline-pink-900': world.color === 'pink',
      'bg-pink-100 dark:bg-rose-950 border-rose-200 hover:bg-rose-50 dark:hover:bg-rose-900 dark:border-rose-900 dark:focus-within:outline-rose-900': world.color === 'rose',
      'text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900': world.color === 'black',
-      ' hover:bg-slate-50 dark:hover:text-slate-900 dark:hover:bg-slate-300 dark:border-slate-500 dark:focus-within:outline-slate-100': world.color === 'white',
+      ' hover:bg-slate-50 dark:hover:text-slate-900 dark:hover:bg-slate-200 dark:border-slate-700 dark:focus-within:outline-slate-100': world.color === 'white',
    }"
  >
    <UiCardHeader class="gap-4">
      <UiCardTitle>
        {{ world.name }}
      </UiCardTitle>
+      <div v-if="world.state === 'published'" class="flex items-center gap-1 text-sm">
+        <PhFile size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.published') }}</span>
+      </div>
      <div v-if="world.state === 'draft'" class="flex items-center gap-1 text-sm">
        <PhFileDashed size="20" weight="fill" />
        <span>{{ $t('ui.contentState.draft') }}</span>
@@ -54,7 +58,8 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
        <span>{{ $t('ui.contentState.archived') }}</span>
      </div>
    </UiCardHeader>
-    <UiCardContent>
+
+    <UiCardContent class="grow">
      <p class="italic">{{ world.description }}</p>

      <div class="flex gap-1 absolute top-4 right-4 z-20">
@@ -69,13 +74,13 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
    </UiCardContent>

    <UiCardFooter>
-      <ul class="grid gap-2">
+      <ul class="grid gap-1 text-sm">
        <li class="flex gap-1 items-center">
-          <PhFilePlus size="20" />
+          <PhFilePlus size="18" />
          <span>{{ $t('common.createdAt', { createdAt }) }}</span>
        </li>
        <li v-if="updatedAt" class="flex gap-1 items-center">
-          <PhPencilSimpleLine size="20" />
+          <PhPencilSimpleLine size="18" />
          <span>{{ $t('common.updatedAt', { updatedAt }) }}</span>
        </li>
      </ul>
--- a/components/world/form/Create.vue
+++ b/components/world/form/Create.vue
@@ -57,7 +57,7 @@ function handleFormCancel() {
 <template>
  <template v-if="worldSkeleton">
    <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
-      <div>
+      <div class="grid gap-4">
        <input
          id="new-world-name"
          v-model="worldSkeleton.name"
@@ -69,10 +69,6 @@ function handleFormCancel() {
          @input="handleNameChange"
        >

-        <div class="-mx-1 mb-4">
-          <InputColor v-model="worldSkeleton.color" />
-        </div>
-
        <textarea
          id="new-world-description"
          v-model="worldSkeleton.description"
@@ -80,6 +76,22 @@ function handleFormCancel() {
          :placeholder="$t('entity.addDescription')"
          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
        />
+
+        <div class="-mx-1 grid gap-3">
+          <UiLabel for="new-world-color">
+            {{ $t('ui.colors.label') }}
+          </UiLabel>
+
+          <InputColor id="new-world-color" v-model="worldSkeleton.color" />
+        </div>
+
+        <div class="-mx-1 grid gap-3">
+          <UiLabel for="new-world-state">
+            {{ $t('ui.contentState.label') }}
+          </UiLabel>
+
+          <InputContentState id="new-world-state" v-model="worldSkeleton.state" />
+        </div>
      </div>

      <footer class="flex justify-end gap-2 mt-6">
--- a/components/world/form/Update.vue
+++ b/components/world/form/Update.vue
@@ -71,7 +71,7 @@ function handleFormCancel() {
 <template>
  <template v-if="worldSkeleton">
    <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
-      <div>
+      <div class="grid gap-4">
        <input
          id="new-world-name"
          v-model="worldSkeleton.name"
@@ -79,7 +79,7 @@ function handleFormCancel() {
          name="new-world-name"
          required
          :placeholder="$t('common.title')"
-          class="w-full -my-1 mb-4 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+          class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
          @input="handleNameChange"
        >

@@ -91,12 +91,20 @@ function handleFormCancel() {
          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
        />

-        <div class="-mx-1 mb-4">
-          <InputColor v-model="worldSkeleton.color" />
+        <div class="-mx-1 grid gap-3">
+          <UiLabel for="new-world-color">
+            {{ $t('ui.colors.label') }}
+          </UiLabel>
+
+          <InputColor id="new-world-color" v-model="worldSkeleton.color" />
        </div>

-        <div class="-mx-1 mb-4">
-          <InputContentState v-model="worldSkeleton.state" />
+        <div class="-mx-1 grid gap-3">
+          <UiLabel for="new-world-state">
+            {{ $t('ui.contentState.label') }}
+          </UiLabel>
+
+          <InputContentState id="new-world-state" v-model="worldSkeleton.state" />
        </div>
      </div>

--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -17,6 +17,7 @@ export default defineI18nConfig(() => ({
          edit: "Edit",
        },
        colors: {
+          label: "Color",
          selectOne: "Select a color",
          red: "Red",
          orange: "Orange",
@@ -39,6 +40,7 @@ export default defineI18nConfig(() => ({
          white: "White",
        },
        contentState: {
+          label: "Status",
          selectOne: "Select a publication state",
          published: "Published",
          draft: "Draft",
@@ -278,6 +280,7 @@ export default defineI18nConfig(() => ({
          edit: "Modifier",
        },
        colors: {
+          label: "Couleur",
          selectOne: "Sélectionner une couleur",
          red: "Rouge",
          orange: "Orange",
@@ -300,7 +303,8 @@ export default defineI18nConfig(() => ({
          white: "Blanc",
        },
        contentState: {
-          selectOne: "Modify l'état de publication",
+          label: "État de publication",
+          selectOne: "Modifier l'état de publication",
          published: "Publié",
          draft: "Brouillon",
          archived: "Archivé",
--- a/models/World.ts
+++ b/models/World.ts
@@ -15,6 +15,9 @@ export interface World {
  updatedAt?: string
 }

+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WorldChannelPayload = World & Record<string, any>
+
 export const postWorldSchema = z.object({
  name: z.string(),
  description: z.string().optional().nullable(),
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { RealtimeChannel } from "@supabase/supabase-js"
-import type { World } from "~/models/World";
+import type { World, WorldChannelPayload } from "~/models/World";

 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
@@ -31,10 +31,14 @@ function hideCreateDialog() {
 /** Active world channel */
 let worldChannel: RealtimeChannel

+
 /** Handles world insertion realtime events */
-function handleInsertedWorld(newWorld: World) {
+function handleInsertedWorld(newWorld: WorldChannelPayload) {
  if (!worlds.value?.data) return

+  newWorld.createdAt = newWorld.created_at;
+  newWorld.gmId = newWorld.gm_id;
+
  try {
    worlds.value?.data.push(newWorld)
  } catch (err) {
--- a/server/api/worlds/[id].patch.ts
+++ b/server/api/worlds/[id].patch.ts
@@ -58,7 +58,9 @@ export default defineEventHandler(async (event) => {
        name,
        description,
        color,
-        gm_id,
+        createdAt:created_at,
+        updatedAt:updated_at,
+        gmId:gm_id,
        state
      `)
      .single<World>()
--- a/server/api/worlds/create.post.ts
+++ b/server/api/worlds/create.post.ts
@@ -33,6 +33,8 @@ export default defineEventHandler(async (event) => {
        name,
        description,
        color,
+        createdAt:created_at,
+        updatedAt:updated_at,
        gmId:gm_id
      `)
      .single<World>()