From 6a55fb131537dbe2e054206480bd8df25a392fab Mon Sep 17 00:00:00 2001
From: phatnguyen <phatnguyen@gmx.de>
Date: Sat, 23 Sep 2023 10:29:39 +0200
Subject: [PATCH 1/3] style: optimize, prepare for update edit dialog

---
 src/frontend/components/BaseMenuButton.vue | 14 +++++++++--
 src/frontend/components/ProjectItem.vue    | 28 +++++++++++++++-------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/frontend/components/BaseMenuButton.vue b/src/frontend/components/BaseMenuButton.vue
index a9b1409..092a4c5 100644
--- a/src/frontend/components/BaseMenuButton.vue
+++ b/src/frontend/components/BaseMenuButton.vue
@@ -26,7 +26,17 @@ withDefaults(defineProps<{
    */
   menuClass?: string
 }>(), { variant: 'ghost', iconOnly: true })
+
+const emits = defineEmits<{
+  /**
+   * Triggers when menu is open
+   * @property {boolean} state current state of menu
+   */
+  (e: 'toggleMenu', state: boolean): void
+}>()
+
 const isMenuOpen = ref(false)
+watch(isMenuOpen, () => emits('toggleMenu', isMenuOpen.value))
 const button = ref<HTMLButtonElement>()
 onClickOutside(button, () => isMenuOpen.value = false)
 </script>
@@ -52,8 +62,8 @@ onClickOutside(button, () => isMenuOpen.value = false)
       <ul
         v-if="isMenuOpen"
         tabindex="0"
-        class="absolute right-0 top-0 z-1 border border-border rounded-sm bg-primary-foreground py-1"
-        :class="menuClass"
+        class="absolute right-0 top-0 border border-border rounded-sm bg-primary-foreground py-1"
+        :class="[menuClass, isMenuOpen ? 'z-2' : 'z-0']"
       >
         <li v-for="_, i in length" :key="i" class="px-1">
           <!-- @slot Slot for content
diff --git a/src/frontend/components/ProjectItem.vue b/src/frontend/components/ProjectItem.vue
index 401418a..42992ec 100644
--- a/src/frontend/components/ProjectItem.vue
+++ b/src/frontend/components/ProjectItem.vue
@@ -309,14 +309,14 @@ function handleEdit(songIndex: number) {
           </div>
         </template>
         <template #content="{ index: ftIndex }">
-          <li class="px-1">
+          <div class="px-1">
             <BaseButton
               variant="ghost" class="w-full"
               @click="handleStoreAll({ fileType: SUPPORT_FILE_TYPES[ftIndex] })"
             >
               {{ `.${SUPPORT_FILE_TYPES[ftIndex]}` }}
             </BaseButton>
-          </li>
+          </div>
         </template>
       </BaseMenuButton>
 
@@ -345,6 +345,10 @@ function handleEdit(songIndex: number) {
         <thead>
           <tr class="border-b border-b-border">
             <th class="sticky left-0 top-0 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
+              #
+            </th>
+
+            <th class="sticky left-41px top-0 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
               {{ t('song.title') }}
             </th>
 
@@ -376,7 +380,7 @@ function handleEdit(songIndex: number) {
               {{ t('song.isrc') }}
             </th>
 
-            <th class="h-12 pl-4 pr-6 text-right align-middle font-medium text-muted-foreground">
+            <th class="sticky right-72px top-0 z-1 h-12 bg-primary-foreground pl-4 pr-6 text-right align-middle font-medium text-muted-foreground">
               {{ t('button.edit') }}
             </th>
 
@@ -391,7 +395,11 @@ function handleEdit(songIndex: number) {
             v-for="({ duration, offset, metaIndex, metadataOptions }, songIndex) in file.segments"
             :key="songIndex" class="border-b border-b-border"
           >
-            <td class="sticky left-0 top-0 z-1 min-w-200px bg-primary-foreground p-4 align-middle font-medium">
+            <td class="sticky left-0 top-0 z-1 bg-primary-foreground p-4 align-middle font-medium">
+              {{ songIndex + 1 }}
+            </td>
+
+            <td class="sticky left-41px top-0 z-1 min-w-200px bg-primary-foreground p-4 align-middle font-medium">
               {{ metadataOptions?.[metaIndex]?.title ?? t('song.unknown') }}
             </td>
 
@@ -423,7 +431,7 @@ function handleEdit(songIndex: number) {
               {{ metadataOptions?.[metaIndex]?.isrc ?? t('song.unknown') }}
             </td>
 
-            <td class="p-4 text-right align-middle">
+            <td class="sticky right-72px top-0 z-1 bg-primary-foreground p-4 text-right align-middle">
               <BaseButton
                 icon-only variant="ghost"
                 :disabled="file.segments && (file.segments[songIndex].metadataOptions?.length ?? 0) <= 1"
@@ -433,11 +441,15 @@ function handleEdit(songIndex: number) {
               </BaseButton>
             </td>
 
-            <td class="sticky right-0 top-0 z-1 bg-primary-foreground p-4 text-right align-middle">
+            <td
+              class="sticky right-0 top-0 overflow-visible bg-primary-foreground p-4 text-right align-middle"
+              :class="currentStoringIndex === songIndex ? 'z-2' : 'z-1'"
+            >
               <BaseMenuButton
                 v-if="saveSettings.shouldAsk"
                 :disabled="!duration || !offset || isStoring"
                 :length="SUPPORT_FILE_TYPES.length"
+                @toggle-menu="(state) => currentStoringIndex = state ? songIndex : -1"
               >
                 <template #button>
                   <BaseLoader
@@ -448,7 +460,7 @@ function handleEdit(songIndex: number) {
                   <span v-else class="i-carbon-download" />
                 </template>
                 <template #content="{ index: ftIndex }">
-                  <li class="px-1">
+                  <div class="px-1">
                     <BaseButton
                       variant="ghost"
                       @click="duration && offset && handleStore({
@@ -461,7 +473,7 @@ function handleEdit(songIndex: number) {
                     >
                       {{ `.${SUPPORT_FILE_TYPES[ftIndex]}` }}
                     </BaseButton>
-                  </li>
+                  </div>
                 </template>
               </BaseMenuButton>
 

From 89ea2f35f66850345265adfa8c820e23d3e5110f Mon Sep 17 00:00:00 2001
From: phatnguyen <phatnguyen@gmx.de>
Date: Sat, 23 Sep 2023 14:04:08 +0200
Subject: [PATCH 2/3] feat: update change metadata modal

---
 src/frontend/components.d.ts                 |   2 +-
 src/frontend/components/EditSongModal.vue    |  39 -----
 src/frontend/components/ModalEditSegment.vue | 151 +++++++++++++++++++
 src/frontend/components/ProjectItem.vue      |  23 +--
 src/frontend/locales/en.json                 |   7 +-
 5 files changed, 164 insertions(+), 58 deletions(-)
 delete mode 100644 src/frontend/components/EditSongModal.vue
 create mode 100644 src/frontend/components/ModalEditSegment.vue

diff --git a/src/frontend/components.d.ts b/src/frontend/components.d.ts
index ec55a19..f2c03b0 100644
--- a/src/frontend/components.d.ts
+++ b/src/frontend/components.d.ts
@@ -27,7 +27,7 @@ declare module 'vue' {
     ConfirmModal: typeof import('./components/ConfirmModal.vue')['default']
     CreateProjectModal: typeof import('./components/CreateProjectModal.vue')['default']
     DashboardItem: typeof import('./components/DashboardItem.vue')['default']
-    EditSongModal: typeof import('./components/EditSongModal.vue')['default']
+    ModalEditSegment: typeof import('./components/ModalEditSegment.vue')['default']
     NotFound: typeof import('./components/NotFound.vue')['default']
     ProjectItem: typeof import('./components/ProjectItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/frontend/components/EditSongModal.vue b/src/frontend/components/EditSongModal.vue
deleted file mode 100644
index 7f1b54a..0000000
--- a/src/frontend/components/EditSongModal.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { Metadata } from 'models/api'
-
-const props = defineProps<{
-  /**
-   * Array of metadata passed from edited segment
-   */
-  metadatas: Metadata[]
-  /**
-   * Selected opt as initial value
-   */
-  opt: string
-}>()
-
-const emits = defineEmits<{
-  /**
-   * Emits an event 'change' when the option changes.
-   * @property {number} v value of changed option
-   */
-  (e: 'change', v: number): void
-}>()
-
-const opts = props.metadatas.map((m, i) =>
-  ({
-    value: `${i}`,
-    label: Object.values(m).map(v => v).join('_'),
-  }))
-
-const opt = ref(props.opt)
-watch(opt, () => emits('change', +opt.value))
-</script>
-
-<template>
-  <BaseSelect v-model="opt" :options="opts">
-    <template #label>
-      {{ opts[+opt].label }}
-    </template>
-  </BaseSelect>
-</template>
diff --git a/src/frontend/components/ModalEditSegment.vue b/src/frontend/components/ModalEditSegment.vue
new file mode 100644
index 0000000..3e92c1c
--- /dev/null
+++ b/src/frontend/components/ModalEditSegment.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { Metadata } from 'models/api'
+
+const props = defineProps<{
+  /**
+   * Index of segment
+   */
+  segmentIndex: number
+  /**
+   * Current metaIndex of segment
+   */
+  metaIndex: number
+  /**
+   * Array of found metadata of segment
+   */
+  metadata: Metadata[]
+}>()
+
+const emits = defineEmits<{
+  /**
+   * Emits an event 'ok' when the "OK" action is triggered.
+   * @property {number} metaIndex new value for metaIndex
+   */
+  (e: 'ok', metaIndex: number): void
+  /**
+   * Emits an event 'cancel' when the "Cancel" action is triggered.
+   */
+  (e: 'cancel'): void
+}>()
+
+const { t } = useI18n()
+const index = ref(props.metaIndex)
+const isMouseOverRow = ref(false)
+</script>
+
+<template>
+  <BaseModal>
+    <template #header>
+      <h2 class="text-2xl">
+        {{ t('song.change_metadata_for_segment', { index: segmentIndex + 1 }) }}
+      </h2>
+    </template>
+
+    <template #body>
+      <div class="max-h-400px max-w-1000px wh-full overflow-auto pb-5">
+        <table class="w-full caption-bottom text-sm">
+          <thead class="sticky left-0 right-0 top-0 z-2 bg-primary-foreground">
+            <tr class="border-b border-b-border">
+              <th class="sticky left-0 top-0 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
+                  &nbsp;
+              </th>
+
+              <th class="sticky sticky left-50px left-53px top-0 top-0 z-1 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.title') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.artist') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.album') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.year') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.albumartist') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.genre') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.isrc') }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="({ title, artist, album, year, albumartist, genre, isrc }, i) in metadata"
+              :key="i" class="group cursor-pointer border-b border-b-border hover:bg-secondary"
+              :class="!isMouseOverRow && index === i ? 'bg-secondary' : 'bg-primary-foreground'"
+              @mouseover="isMouseOverRow = true"
+              @mouseleave="isMouseOverRow = false"
+              @click="index = i"
+            >
+              <td
+                class="sticky left-0 top-0 z-1 px-4 align-middle group-hover:bg-secondary"
+                :class="!isMouseOverRow && index === i ? 'bg-secondary' : 'bg-primary-foreground'"
+              >
+                <span v-if="i === index" class="i-carbon:checkmark mt-1" />
+              </td>
+
+              <td
+                class="sticky left-50px top-0 z-1 min-w-200px p-4 align-middle font-medium group-hover:bg-secondary"
+                :class="!isMouseOverRow && index === i ? 'bg-secondary' : 'bg-primary-foreground'"
+              >
+                {{ title ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-150px p-4 align-middle">
+                {{ artist ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-350px p-4 align-middle">
+                {{ album ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-100px p-4 align-middle">
+                {{ year ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-120px p-4 align-middle">
+                {{ albumartist ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-100px p-4 align-middle">
+                {{ genre ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-120px p-4 align-middle">
+                {{ isrc ?? t('song.unknown') }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p class="mt-6 text-center text-muted-foreground">
+        {{ t('song.metadata_list_caption') }}
+      </p>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-x-2">
+        <BaseButton variant="secondary" @click="emits('cancel')">
+          {{ t('button.cancel') }}
+        </BaseButton>
+
+        <BaseButton @click="emits('ok', index)">
+          {{ t('button.change') }}
+        </BaseButton>
+      </div>
+    </template>
+  </BaseModal>
+</template>
diff --git a/src/frontend/components/ProjectItem.vue b/src/frontend/components/ProjectItem.vue
index 42992ec..afcb4f6 100644
--- a/src/frontend/components/ProjectItem.vue
+++ b/src/frontend/components/ProjectItem.vue
@@ -8,8 +8,7 @@ import type { Project, ProjectFileSegment } from '../models/types'
 import type { Metadata, PostAudioSplitBodyPresetName } from '../models/api'
 import { getAudioStreamSplittingAPI } from '../models/api'
 import { SUPPORT_FILE_TYPES } from '../includes/constants'
-import ConfirmModal from './ConfirmModal.vue'
-import EditSongModal from './EditSongModal.vue'
+import ModalEditSegment from '../components/ModalEditSegment.vue'
 
 const props = defineProps<{
   /**
@@ -225,28 +224,20 @@ async function handleStoreAll(
 }
 
 function handleEdit(songIndex: number) {
-  let newMetaIndex = 0
   const { open, close } = useModal({
-    component: ConfirmModal,
+    component: ModalEditSegment,
     attrs: {
-      contentClass: 'max-w-50vw lg:max-w-[500px]',
+      segmentIndex: songIndex,
+      metaIndex: props.file?.segments?.[songIndex].metaIndex ?? 0,
+      metadata: props.file?.segments?.[songIndex].metadataOptions ?? [],
       onCancel() { close() },
-      onOk() {
+      onOk(newMetaIndex) {
         emits('changeMeta', songIndex, newMetaIndex)
         regions.value?.clearRegions()
         props.file.segments && addRegion(props.file.segments)
         close()
       },
     },
-    slots: {
-      default: {
-        component: h(EditSongModal, {
-          metadatas: props.file.segments?.[songIndex]?.metadataOptions ?? [],
-          opt: `${props.file.segments?.[songIndex]?.metaIndex ?? 0}`,
-          onChange(v) { newMetaIndex = v },
-        }),
-      },
-    },
   })
 
   open()
@@ -393,7 +384,7 @@ function handleEdit(songIndex: number) {
         <tbody>
           <tr
             v-for="({ duration, offset, metaIndex, metadataOptions }, songIndex) in file.segments"
-            :key="songIndex" class="border-b border-b-border"
+            :key="songIndex" class="border-b border-b-border bg-primary-foreground"
           >
             <td class="sticky left-0 top-0 z-1 bg-primary-foreground p-4 align-middle font-medium">
               {{ songIndex + 1 }}
diff --git a/src/frontend/locales/en.json b/src/frontend/locales/en.json
index 3ddd68c..f35ecb1 100644
--- a/src/frontend/locales/en.json
+++ b/src/frontend/locales/en.json
@@ -17,7 +17,8 @@
     "set": "Set",
     "process": "Process",
     "clear": "Clear",
-    "save_all": "Save all"
+    "save_all": "Save all",
+    "change": "Change"
   },
   "placeholder": {},
   "sidebar": {
@@ -91,7 +92,9 @@
       "normal": "Normal",
       "lenient": "Lenient",
       "extra_lenient": "Extra Lenient"
-    }
+    },
+    "metadata_list_caption": "Found metadata",
+    "change_metadata_for_segment": "Change Metadata for Segment {index}"
   },
   "toast": {
     "empty_field": "Please enter a valid value!",

From 246c31aaf049afb746fbb70c701729cd5c42587d Mon Sep 17 00:00:00 2001
From: ChrisItisdud <chris.reichel@gmx.net>
Date: Sat, 23 Sep 2023 18:16:37 +0200
Subject: [PATCH 3/3] i18n

---
 src/frontend/locales/de.json | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/locales/de.json b/src/frontend/locales/de.json
index 815cd5a..9c85a91 100644
--- a/src/frontend/locales/de.json
+++ b/src/frontend/locales/de.json
@@ -16,7 +16,9 @@
     "save": "Speichern",
     "set": "Übernehmen",
     "process": "Verarbeiten",
-    "clear": "Alle löschen"
+    "clear": "Alle löschen",
+    "save_all": "Alle speichern",
+    "change": "Ändern"
   },
   "placeholder": {},
   "sidebar": {
@@ -88,7 +90,9 @@
       "lenient": "Locker",
       "normal": "Normal",
       "strict": "Strikt"
-    }
+    },
+    "metadata_list_caption": "Gefundene Metadatan",
+    "change_metadata_for_segment": "Metadaten für Segment {index} ändern"
   },
   "toast": {
     "empty_field": "Bitte geben Sie einen gültigen Wert ein!",