From f407527b6c04747bee29f4754d299e77934b427f Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 14 Apr 2025 14:11:49 +0200
Subject: [PATCH] fix(front): channel upload edit form

---
 .../channels/UploadMetadataForm.vue           | 100 ++++++++++--------
 front/src/components/library/EditForm.vue     |   1 +
 front/src/components/library/TrackBase.vue    |   2 +-
 3 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/front/src/components/channels/UploadMetadataForm.vue b/front/src/components/channels/UploadMetadataForm.vue
index 8864447a3..58ba2b501 100644
--- a/front/src/components/channels/UploadMetadataForm.vue
+++ b/front/src/components/channels/UploadMetadataForm.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Upload, Track } from '~/types'
 
-import { reactive, computed, watch } from 'vue'
+import { reactive, computed, watch, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import TagsSelector from '~/components/library/TagsSelector.vue'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
 
+import Input from '~/components/ui/Input.vue'
+import Pills from '~/components/ui/Pills.vue'
+
 type Values = Pick<Track, 'title' | 'position' | 'tags'> & { cover: string | null, description: string }
 interface Events {
   (e: 'update:values', values: Values): void
@@ -24,12 +26,25 @@ const props = withDefaults(defineProps<Props>(), {
   values: null
 })
 
+// TODO: Make Tags work
+
+type Item = { type: 'custom' | 'preset', label: string }
+type tagsModel = {
+  currents: Item[],
+  others?: Item[],
+}
+
+const tags = ref({
+  currents: [],
+  others: []
+} satisfies tagsModel)
+
 // TODO: check if `position: 0` is a good default
 const newValues = reactive<Values>({
   position: 0,
   description: '',
   title: '',
-  tags: [],
+  tags: tags.value.currents.map(tag => tag.label),
   cover: null,
   ...(props.values ?? props.upload.import_metadata ?? {})
 })
@@ -39,54 +54,45 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
 </script>
 
 <template>
-  <div :class="['ui', {loading: isLoading}, 'form']">
-    <div class="ui required field">
-      <label for="upload-title">
-        {{ t('components.channels.UploadMetadataForm.label.title') }}
-      </label>
-      <input
-        v-model="newValues.title"
-        type="text"
-      >
-    </div>
+  <Layout
+    form
+    :class="[{loading: isLoading}]"
+  >
+    <Input
+      v-model="newValues.title"
+      :label="t('components.channels.UploadMetadataForm.label.title')"
+      required
+    />
     <attachment-input
       v-model="newValues.cover"
       @delete="newValues.cover = ''"
     >
       {{ t('components.channels.UploadMetadataForm.label.image') }}
     </attachment-input>
-    <div class="ui small hidden divider" />
-    <div class="ui two fields">
-      <div class="ui field">
-        <label for="upload-tags">
-          {{ t('components.channels.UploadMetadataForm.label.tags') }}
-        </label>
-        <tags-selector
-          id="upload-tags"
-          v-model="newValues.tags"
-          :required="false"
-        />
-      </div>
-      <div class="ui field">
-        <label for="upload-position">
-          {{ t('components.channels.UploadMetadataForm.label.position') }}
-        </label>
-        <input
-          v-model="newValues.position"
-          type="number"
-          min="1"
-          step="1"
-        >
-      </div>
-    </div>
-    <div class="ui field">
-      <label for="upload-description">
-        {{ t('components.channels.UploadMetadataForm.label.description') }}
-      </label>
-      <content-form
-        v-model="newValues.description"
-        field-id="upload-description"
-      />
-    </div>
-  </div>
+    <label for="upload-tags">
+      {{ t('components.channels.UploadMetadataForm.label.tags') }}
+    </label>
+    <!-- TODO: Make Tags work -->
+    <Pills
+      :get="(v) => { tags = v }"
+      :set="() => tags"
+      label="Custom Tags"
+      cancel="Cancel"
+    />
+    <Spacer />
+    <Input
+      v-model="newValues.position"
+      type="number"
+      min="1"
+      step="1"
+      :label="t('components.channels.UploadMetadataForm.label.position')"
+    />
+    <label for="upload-description">
+      {{ t('components.channels.UploadMetadataForm.label.description') }}
+    </label>
+    <content-form
+      v-model="newValues.description"
+      field-id="upload-description"
+    />
+  </Layout>
 </template>
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index 401f21af1..dc5a7d243 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -303,6 +303,7 @@ const resetField = (fieldId: string) => {
           </attachment-input>
         </template>
         <template v-else-if="fieldConfig.type === 'tags'">
+          <!-- TODO: Make Tags work -->
           <Pills
             :id="fieldConfig.id"
             ref="tags"
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 4c16c7247..4997be242 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -202,7 +202,7 @@ watch(showDeleteModal, (newValue) => {
     <div class="meta">
       <span>{{ t('components.library.TrackBase.title') }}</span>
       <i class="bi bi-dot" />
-      <span>{{ track.album.title }}</span>
+      <span>{{ track.album?.title }}</span>
       <i
         v-if="totalDuration > 0"
         class="bi bi-dot"