From 282aabb7fa527032c287dc12f619e0eb23c82a87 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 4 Mar 2025 19:02:27 +0100
Subject: [PATCH] Added state selector for world

---
 components/global/input/ContentState.vue | 26 ++++++++++++++++++++++++
 components/world/form/Edit.vue           | 12 +++++++----
 i18n.config.ts                           | 12 +++++++++++
 models/CalendarConfig.ts                 |  4 ++--
 models/Entity.ts                         |  2 ++
 models/World.ts                          |  5 ++---
 server/api/worlds/query.get.ts           |  2 ++
 7 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 components/global/input/ContentState.vue
 create mode 100644 models/Entity.ts

diff --git a/components/global/input/ContentState.vue b/components/global/input/ContentState.vue
new file mode 100644
index 0000000..ef137d0
--- /dev/null
+++ b/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>
diff --git a/components/world/form/Edit.vue b/components/world/form/Edit.vue
index b048a6d..c1c999f 100644
--- a/components/world/form/Edit.vue
+++ b/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">
diff --git a/i18n.config.ts b/i18n.config.ts
index e736aea..8d51e4d 100644
--- a/i18n.config.ts
+++ b/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",
diff --git a/models/CalendarConfig.ts b/models/CalendarConfig.ts
index c122247..560c9b3 100644
--- a/models/CalendarConfig.ts
+++ b/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
diff --git a/models/Entity.ts b/models/Entity.ts
new file mode 100644
index 0000000..9fcdd1a
--- /dev/null
+++ b/models/Entity.ts
@@ -0,0 +1,2 @@
+export const contentStates = ["published", "draft", "archived"] as const
+export type ContentState = typeof contentStates[number]
diff --git a/models/World.ts b/models/World.ts
index 613981b..35f3c8e 100644
--- a/models/World.ts
+++ b/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
 }
diff --git a/server/api/worlds/query.get.ts b/server/api/worlds/query.get.ts
index 7d56ee2..f0fbac0 100644
--- a/server/api/worlds/query.get.ts
+++ b/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 (