From d6d5912de1b868b2b671144b501dceba5e6ee8d4 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 12 Feb 2025 19:13:35 +0100
Subject: [PATCH] [web] Refactor list of properties

---
 web-src/src/components/ListProperties.vue     |  50 +++++++
 .../src/components/ModalDialogPlayable.vue    |  40 +-----
 .../src/components/ModalDialogQueueItem.vue   | 131 +++++++-----------
 3 files changed, 102 insertions(+), 119 deletions(-)
 create mode 100644 web-src/src/components/ListProperties.vue

diff --git a/web-src/src/components/ListProperties.vue b/web-src/src/components/ListProperties.vue
new file mode 100644
index 00000000..ba26e058
--- /dev/null
+++ b/web-src/src/components/ListProperties.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="title is-4">
+    <a v-if="item.handler" @click="item.handler" v-text="item.name"></a>
+    <span v-else v-text="item.name" />
+  </div>
+  <cover-artwork
+    v-if="item.image"
+    :url="item.image"
+    :artist="item.artist"
+    :album="item.name"
+    class="is-normal mb-5"
+  />
+  <div class="buttons">
+    <a
+      v-for="button in buttons"
+      :key="button.label"
+      v-t="button.label"
+      class="button is-small"
+      @click="button.handler"
+    />
+  </div>
+  <div
+    v-for="property in item.properties?.filter((p) => p.value)"
+    :key="property.label"
+    class="mb-3"
+  >
+    <div v-t="property.label" class="is-size-7 is-uppercase" />
+    <div class="title is-6">
+      <a
+        v-if="property.handler"
+        @click="property.handler"
+        v-text="property.value"
+      />
+      <span v-else class="title is-6" v-text="property.value" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CoverArtwork from '@/components/CoverArtwork.vue'
+
+export default {
+  name: 'ListProperties',
+  components: { CoverArtwork },
+  props: {
+    buttons: { default: () => [], type: Array },
+    item: { required: true, type: Object }
+  }
+}
+</script>
diff --git a/web-src/src/components/ModalDialogPlayable.vue b/web-src/src/components/ModalDialogPlayable.vue
index d1c83d9e..155a3d4c 100644
--- a/web-src/src/components/ModalDialogPlayable.vue
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -1,53 +1,19 @@
 <template>
   <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
     <template #content>
-      <div class="title is-4">
-        <a v-if="item.handler" @click="item.handler" v-text="item.name"></a>
-        <span v-else v-text="item.name" />
-      </div>
-      <cover-artwork
-        v-if="item.image"
-        :url="item.image"
-        :artist="item.artist"
-        :album="item.name"
-        class="is-normal mb-5"
-      />
-      <div class="buttons">
-        <a
-          v-for="button in buttons"
-          :key="button.label"
-          v-t="button.label"
-          class="button is-small"
-          @click="button.handler"
-        />
-      </div>
-      <div
-        v-for="property in item.properties?.filter((p) => p.value)"
-        :key="property.label"
-        class="mb-3"
-      >
-        <div v-t="property.label" class="is-size-7 is-uppercase" />
-        <div class="title is-6">
-          <a
-            v-if="property.handler"
-            @click="property.handler"
-            v-text="property.value"
-          />
-          <span v-else class="title is-6" v-text="property.value" />
-        </div>
-      </div>
+      <list-properties :buttons="buttons" :item="item" />
     </template>
   </modal-dialog>
 </template>
 
 <script>
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ListProperties from '@/components/ListProperties.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlayable',
-  components: { ModalDialog, CoverArtwork },
+  components: { ListProperties, ModalDialog },
   props: {
     buttons: { default: () => [], type: Array },
     item: { required: true, type: Object },
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index f7156ca8..cd1afe92 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -1,92 +1,13 @@
 <template>
   <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
     <template #content>
-      <div class="title is-4" v-text="item.title" />
-      <div class="subtitle" v-text="item.artist" />
-      <div v-if="item.album" class="mb-3">
-        <div v-t="'property.album'" class="is-size-7 is-uppercase" />
-        <div class="title is-6">
-          <a @click="open_album" v-text="item.album" />
-        </div>
-      </div>
-      <div v-if="item.album_artist" class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('property.album-artist')"
-        />
-        <div class="title is-6">
-          <a @click="open_album_artist" v-text="item.album_artist" />
-        </div>
-      </div>
-      <div v-if="item.composer" class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.composer')"
-        />
-        <div class="title is-6" v-text="item.composer" />
-      </div>
-      <div v-if="item.year" class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.year')"
-        />
-        <div class="title is-6" v-text="item.year" />
-      </div>
-      <div v-if="item.genre" class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.genre')"
-        />
-        <div class="title is-6">
-          <a @click="open_genre" v-text="item.genre" />
-        </div>
-      </div>
-      <div v-if="item.disc_number" class="mb-3">
-        <div class="is-size-7 is-uppercase" v-text="$t('property.position')" />
-        <div
-          class="title is-6"
-          v-text="[item.disc_number, item.track_number].join(' / ')"
-        />
-      </div>
-      <div v-if="item.length_ms" class="mb-3">
-        <div class="is-size-7 is-uppercase" v-text="$t('property.duration')" />
-        <div
-          class="title is-6"
-          v-text="$filters.durationInHours(item.length_ms)"
-        />
-      </div>
-      <div class="mb-3">
-        <div class="is-size-7 is-uppercase" v-text="$t('property.path')" />
-        <div class="title is-6" v-text="item.path" />
-      </div>
-      <div class="mb-3">
-        <div class="is-size-7 is-uppercase" v-text="$t('property.type')" />
-        <div
-          class="title is-6"
-          v-text="
-            `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-          "
-        />
-      </div>
-      <div v-if="item.samplerate" class="mb-3">
-        <div class="is-size-7 is-uppercase" v-text="$t('property.quality')" />
-        <div
-          class="title is-6"
-          v-text="
-            $t('dialog.track.quality-value', {
-              format: item.type,
-              bitrate: item.bitrate,
-              channels: $filters.channels(item.channels),
-              samplerate: item.samplerate
-            })
-          "
-        />
-      </div>
+      <list-properties :item="playable" />
     </template>
   </modal-dialog>
 </template>
 
 <script>
+import ListProperties from '@/components/ListProperties.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
@@ -94,7 +15,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogQueueItem',
-  components: { ModalDialog },
+  components: { ListProperties, ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   setup() {
@@ -119,6 +40,52 @@ export default {
           icon: 'play'
         }
       ]
+    },
+    playable() {
+      return {
+        name: this.item.title,
+        properties: [
+          {
+            label: 'property.album',
+            value: this.item.album,
+            handler: this.open_album
+          },
+          {
+            label: 'property.album-artist',
+            value: this.item.album_artist,
+            handler: this.open_album_artist
+          },
+          { label: 'property.composer', value: this.item.composer },
+          { label: 'property.year', value: this.item.year },
+          {
+            label: 'property.genre',
+            value: this.item.genre,
+            handler: this.open_genre
+          },
+          {
+            label: 'property.position',
+            value: [this.item.disc_number, this.item.track_number].join(' / ')
+          },
+          {
+            label: 'property.duration',
+            value: this.$filters.durationInHours(this.item.length_ms)
+          },
+          { label: 'property.path', value: this.item.path },
+          {
+            label: 'property.type',
+            value: `${this.$t(`media.kind.${this.item.media_kind}`)} - ${this.$t(`data.kind.${this.item.data_kind}`)}`
+          },
+          {
+            label: 'property.quality',
+            value: this.$t('dialog.track.quality-value', {
+              format: this.item.type,
+              bitrate: this.item.bitrate,
+              channels: this.$filters.channels(this.item.channels),
+              samplerate: this.item.samplerate
+            })
+          }
+        ]
+      }
     }
   },
   watch: {