fix(app): handle item prefix as string

Author: hendrikheil

src/app/src/components/shared/item/ItemCardForm.vue

@@ -65,7 +65,21 @@ const schema = computed(() => z.object({
   extension: z.enum([...CONTENT_EXTENSIONS, ...MEDIA_EXTENSIONS] as [string, ...string[]]).nullish(),
   prefix: z.preprocess(
     val => val === '' ? null : val,
-    z.number().int().positive().nullish(),
+    z.string()
+      .regex(/^\d+$/, 'Prefix be a string containing only digits')
+      .refine(
+        (prefix: string | null | undefined) => {
+          if (prefix === null || prefix === undefined) {
+            return true
+          }
+
+          const num = Number(prefix)
+
+          return Number.isInteger(num) && num >= 0
+        },
+        'Prefix must be a positive integer',
+      )
+      .nullish(),
   ),
 }).refine(() => {
   const siblings = props.parentItem.children?.filter(child => !child.hide) || []
@@ -87,7 +101,7 @@ const schema = computed(() => z.object({
 type Schema = {
   name: string
   extension: string | null | undefined
-  prefix: number | null | undefined
+  prefix: string | null | undefined
 }
 const state = reactive<Schema>({
   name: originalName.value,
@@ -267,11 +281,11 @@ async function onSubmit() {
                       <span />
                     </template>
                     <UInput
-                      v-model.number="state.prefix"
-                      type="number"
+                      v-model="state.prefix"
+                      type="text"
+                      pattern="[0-9]*"
                       variant="soft"
                       placeholder="N°"
-                      min="1"
                       class="h-5"
                       size="xs"
                       :disabled="isLoading"

src/app/src/types/tree.ts

@@ -15,7 +15,7 @@ export interface TreeItem {
   name: string
   fsPath: string // can be used as id
   type: 'file' | 'directory' | 'root'
-  prefix: number | null
+  prefix: string | null
   collections: string[]
   status?: TreeStatus
   routePath?: string

src/app/src/utils/file.ts

@@ -50,11 +50,11 @@ export const FILE_ICONS = {
   ...AUDIO_EXTENSIONS.reduce((acc, ext) => ({ ...acc, [ext]: 'i-lucide-file-audio' }), {}),
 }
 
-export function parseName(name: string): { name: string, prefix: number | null, extension: string | null } {
+export function parseName(name: string): { name: string, prefix: string | null, extension: string | null } {
   const prefixMatch = name.match(/^(\d+)\./)
   const extensionMatch = name.match(/\.(\w+)$/)
   return {
-    prefix: prefixMatch ? Number.parseInt(prefixMatch[1], 10) : null,
+    prefix: prefixMatch ? prefixMatch[1] : null,
     extension: extensionMatch ? extensionMatch[1] : null,
     name: name.replace(/^\d+\./, ''),
   }