stringify character id

app/components/CharacterEditor.vue

@@ -1,18 +1,26 @@
 <template>
-  <EditorCard
-    name="character"
-    :modelId="props.characterId"
-    :action="props.action"
-    :fields="characterFields"
-    :initialValue="props.initialValue"
-    :options="options"
-    :isSaved="isSaved"
-    :redirectBack="{ name: 'characters' }"
-    :schema="schema"
-    @create="create"
-    @update="update"
-    @delete="destroy"
-  />
+  <div>
+    <SpinnerModal
+      v-if="isPending"
+      :visible="true"
+    />
+
+    <EditorCard
+      v-else
+      name="character"
+      :modelId="props.characterId"
+      :action="props.action"
+      :fields="characterFields"
+      :initialValue="props.initialValue"
+      :options="options"
+      :isSaved="isSaved"
+      :redirectBack="{ name: 'characters' }"
+      :schema="schema"
+      @create="create"
+      @update="update"
+      @delete="destroy"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -24,8 +32,9 @@ const props = defineProps({
   },
 
   characterId: {
-    type: Number,
-    validator: (value, props) => props.action === "create" || _isInteger(value)
+    type: String,
+    required: false,
+    validator: (value, props) => props.action === "create" || isPresent(value)
   },
 
   initialValue: {
@@ -40,7 +49,7 @@ const { createCharacter } = useCreateCharacter()
 const { updateCharacter } = useUpdateCharacter()
 const { deleteCharacter } = useDeleteCharacter()
 
-const { data: options } = useQuery(characterOptionsQuery)
+const { data: options, isPending } = useQuery(characterOptionsQuery)
 
 const schema =
   props.action === "create" ? createCharacterSchema : updateCharacterSchema

app/pages/edit.vue

@@ -10,6 +10,7 @@
       action="update"
       :characterId="characterId"
       :initialValue="character"
+      :class="isPlaceholderData && 'bg-primary/15'"
     />
   </div>
 </template>
@@ -21,8 +22,8 @@ definePageMeta({
   middleware: "signed-in"
 })
 
-const characterId = _toInteger(useRoute().params?.characterId)
-const { data: character, isLoading } = useQuery(() => characterByIdQuery(characterId))
+const characterId = _toString(useRoute("characterEdit").params?.characterId)
+const { data: character, isLoading, isPlaceholderData } = useQuery(() => characterByIdQuery(characterId))
 </script>
 
 <style scoped></style>

app/pages/show.vue

@@ -20,7 +20,7 @@ definePageMeta({
   path: "/show/:characterId(\\d+)"
 })
 
-const characterId = _toInteger(useRoute().params?.characterId)
+const characterId = _toString(useRoute("characterEdit").params?.characterId)
 const { data: character, isLoading } = useQuery(() => characterByIdQuery(characterId))
 </script>