Added state selector for world

components/global/input/ContentState.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { contentStates, type ContentState } from "~/models/Entity";
+
+const model = defineModel<ContentState>({ default: "draft" });
+</script>
+
+<template>
+  <UiSelect v-model="model">
+    <UiSelectTrigger>
+      <UiSelectValue
+        :placeholder="$t('ui.contentState.selectOne')"
+      />
+    </UiSelectTrigger>
+    <UiSelectContent position="popper">
+      <UiSelectGroup>
+        <UiSelectItem
+          v-for="state in contentStates"
+          :key="state"
+          :value="state"
+        >
+          {{ $t(`ui.contentState.${state}`) }}
+        </UiSelectItem>
+      </UiSelectGroup>
+    </UiSelectContent>
+  </UiSelect>
+</template>

components/world/form/Edit.vue

@@ -83,10 +83,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"
@@ -94,6 +90,14 @@ 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 mb-4">
+          <InputColor v-model="worldSkeleton.color" />
+        </div>
+
+        <div class="-mx-1 mb-4">
+          <InputContentState v-model="worldSkeleton.state" />
+        </div>
       </div>
 
       <footer class="flex justify-end gap-2 mt-6">

i18n.config.ts

@@ -38,6 +38,12 @@ export default defineI18nConfig(() => ({
           black: "Black",
           white: "White",
         },
+        contentState: {
+          selectOne: "Select a publication state",
+          published: "Published",
+          draft: "Draft",
+          archived: "Archived",
+        },
         greeting: "Connected as {user}",
         anonymousGreeting: "Preferences",
         backToProfile: "Back to profile",
@@ -293,6 +299,12 @@ export default defineI18nConfig(() => ({
           black: "Noir",
           white: "Blanc",
         },
+        contentState: {
+          selectOne: "Modify l'état de publication",
+          published: "Publié",
+          draft: "Brouillon",
+          archived: "Archivé",
+        },
         greeting: "Connecté en tant que {user}",
         anonymousGreeting: "Préférences",
         backToProfile: "Retour au profil",

models/CalendarConfig.ts

@@ -3,8 +3,8 @@ import type { CalendarEvent } from "./CalendarEvent"
 import { calendarMonthSchema, type CalendarMonth } from "./CalendarMonth"
 import { dateSchema, type RPGDate } from "./Date"
 import type { World } from "./World"
+import type { ContentState } from "./Entity"
 
-export type CalendarState = "published" | "draft" | "archived"
 
 export interface CalendarConfig {
   months: CalendarMonth[]
@@ -17,7 +17,7 @@ export interface Calendar extends CalendarConfig {
   name: string
   events: CalendarEvent[]
   eventNb?: Array<{ count: number }>
-  state: CalendarState
+  state: ContentState
   color?: string
   world?: World
   createdAt?: string

models/Entity.ts

@@ -0,0 +1,2 @@
+export const contentStates = ["published", "draft", "archived"] as const
+export type ContentState = typeof contentStates[number]

models/World.ts

@@ -1,8 +1,7 @@
 import { z } from "zod"
 import type { Calendar } from "./CalendarConfig"
 import { rpgColorSchema, type RPGColor } from "./Color"
-
-export type WorldState = "published" | "draft" | "archived"
+import type { ContentState } from "./Entity"
 
 export interface World {
   id?: number
@@ -11,7 +10,7 @@ export interface World {
   color?: RPGColor
   calendars?: Calendar[]
   gmId?: string
-  state?: WorldState
+  state?: ContentState
   createdAt?: string
   updatedAt?: string
 }

server/api/worlds/query.get.ts

@@ -17,6 +17,7 @@ export default defineEventHandler(async (event) => {
     name,
     description,
     color,
+    state,
     createdAt:created_at,
     updatedAt:updated_at,
     gmId:gm_id,
@@ -35,6 +36,7 @@ export default defineEventHandler(async (event) => {
     name,
     description,
     color,
+    state,
     createdAt:created_at,
     updatedAt:updated_at,
     calendars (