fix(front): [WIP] Tags; function type

front/src/components/library/Albums.vue

@@ -50,8 +50,6 @@ const page = usePage()
 
 const tags = useRouteQuery<string[]>('tag', [], { transform: (param: string | string[] | null) => (param === null ? [] : Array.isArray(param) ? param : [param]).filter(p => p.trim() !== '') })
 
-const tagList = useTags(tags)
-
 const q = useRouteQuery('query', '')
 const query = ref(q.value ?? '')
 syncRef(q, query, { direction: 'ltr' })
@@ -153,9 +151,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         autofocus
         :placeholder="labels.searchPlaceholder"
       />
-      {{ tagList }}
       <Pills
-        v-model="tagList"
+        :get="model => { tags = model.currents.map(({ label }) => label) }"
+        :set="model => ({
+          ...model,
+          currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
+        })"
         :label="t('components.library.Albums.label.tags')"
         style="max-width: 150px;"
       />

front/src/components/library/Artists.vue

@@ -48,11 +48,6 @@ const page = usePage()
 
 const tags = useRouteQuery<string[]>('tag', [])
 
-const tagList = computed(() => ({
-  currents: [].map(tag => ({ type: 'custom' as const, label: tag })),
-  others: tags.value.map(tag => ({ type: 'custom' as const, label: tag }))
-}))
-
 const q = useRouteQuery('query', '')
 const query = ref(q.value)
 syncRef(q, query, { direction: 'ltr' })
@@ -155,7 +150,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         :placeholder="labels.searchPlaceholder"
       />
       <Pills
-        v-model="tagList"
+        :get="model => { tags = model.currents.map(({ label }) => label) }"
+        :set="model => ({
+          ...model,
+          currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
+        })"
         :label="t('components.library.Artists.label.tags')"
         style="max-width: 150px;"
       />

front/src/components/library/EditForm.vue

@@ -294,7 +294,11 @@ const resetField = (fieldId: string) => {
           <Pills
             :id="fieldConfig.id"
             ref="tags"
-            v-model="values[fieldConfig.id]"
+            :get="model => { values[fieldConfig.id] = model.currents.map(({ label }) => label) }"
+            :set="model => ({
+              ...model,
+              currents: (values[fieldConfig.id] as string[]).map(tag => ({ type: 'custom' as const, label: tag })),
+            })"
             :label="fieldConfig.label"
             required="fieldConfig.required"
           >

front/src/components/library/Podcasts.vue

@@ -61,8 +61,6 @@ const submittable = ref(false)
 
 const tags = useRouteQuery<string[]>('tag', [])
 
-const tagList = useTags(tags)
-
 computed(() => ({
   currents: [].map(tag => ({ type: 'custom' as const, label: tag })),
   others: tags.value.map(tag => ({ type: 'custom' as const, label: tag }))
@@ -156,7 +154,7 @@ const { to: upload } = useModal('upload')
       :h1="t('components.library.Podcasts.header.browse')"
       :action="{
         text: t('views.channels.SubscriptionsList.link.addNew'),
-        onClick: ()=> channelIsOpen = true,
+        onClick: () => { channelIsOpen = true },
         icon: 'bi-plus',
         primary: true
       }"
@@ -177,7 +175,11 @@ const { to: upload } = useModal('upload')
         :placeholder="labels.searchPlaceholder"
       />
       <Pills
-        v-model="tagList"
+        :get="model => { tags = model.currents.map(({ label }) => label) }"
+        :set="model => ({
+          ...model,
+          currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
+        })"
         :label="t('components.library.Podcasts.label.tags')"
         style="max-width: 150px;"
       />

front/src/views/channels/List.vue

@@ -76,10 +76,6 @@ const modalContent = ref()
 const createForm = ref()
 const page = usePage()
 const tags = useRouteQuery<string[]>('tag', [])
-const tagList = computed(() => ({
-  currents: [].map(tag => ({ type: 'custom' as const, label: tag })),
-  others: tags.value.map(tag => ({ type: 'custom' as const, label: tag }))
-}))
 
 const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props)
 
@@ -203,7 +199,7 @@ const showCreateModal = ref(false)
       :h1="t('views.auth.ProfileOverview.header.channels')"
       :action="{
         text: t('views.channels.SubscriptionsList.link.addNew'),
-        onClick: ()=> showCreateModal = true,
+        onClick: () => { showCreateModal = true },
         icon: 'bi-plus',
         primary: true
       }"
@@ -226,7 +222,11 @@ const showCreateModal = ref(false)
         :placeholder="labels.searchPlaceholder"
       />
       <Pills
-        v-model="tagList"
+        :get="model => { tags = model.currents.map(({ label }) => label) }"
+        :set="model => ({
+          ...model,
+          currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
+        })"
         :label="t('components.library.Podcasts.label.tags')"
         style="max-width: 150px;"
       />