From 863e8200e4601accdc81dff4c3db8606b9a8b18a Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 12 Feb 2025 11:39:28 +0100
Subject: [PATCH] fix(front): playlist modal

---
 front/src/components/playlists/Form.vue       |  67 ++---
 .../components/playlists/PlaylistModal.vue    | 282 +++++++++---------
 2 files changed, 167 insertions(+), 182 deletions(-)

diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 2f8b4058b..b2c39851d 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -7,7 +7,6 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
-import $ from 'jquery'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useLogger from '~/composables/useLogger'
@@ -59,10 +58,6 @@ const privacyLevelChoices = {
 } as const satisfies Record<PrivacyLevel, string>;
 
 const el = useCurrentElement()
-onMounted(async () => {
-  await nextTick()
-  $(el.value).find('.dropdown').dropdown()
-})
 
 const isLoading = ref(false)
 const submit = async () => {
@@ -103,11 +98,11 @@ const submit = async () => {
   <Layout form
     @submit.prevent="submit()"
   >
-    <h4
+    <h3
       v-if="title"
     >
       {{ t('components.playlists.Form.header.createPlaylist') }}
-    </h4>
+    </h3>
     <Alert
       v-if="success"
       green
@@ -138,36 +133,34 @@ const submit = async () => {
         </li>
       </ul>
     </Alert>
-    <div class="three fields">
-      <div class="field">
-        <label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
-        <Input
-          id="playlist-name"
-          v-model="name"
-          name="name"
-          required
-          type="text"
-          :placeholder="labels.placeholder"
-        />
-      </div>
-      <div class="field">
-      <Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
-      </div>
-      <div class="field">
-        <span id="updatePlaylistLabel" />
-        <Button
-          primary
-          :class="['ui', 'fluid', {'loading': isLoading}, 'button']"
-          type="submit"
-        >
-          <template v-if="playlist">
-            {{ t('components.playlists.Form.button.update') }}
-          </template>
-          <template v-else>
-            {{ t('components.playlists.Form.button.create') }}
-          </template>
-        </Button>
-      </div>
+    <div class="field">
+      <label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
+      <Input
+        id="playlist-name"
+        v-model="name"
+        name="name"
+        required
+        type="text"
+        :placeholder="labels.placeholder"
+      />
+    </div>
+    <div class="field">
+    <Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
+    </div>
+    <div class="field">
+      <span id="updatePlaylistLabel" />
+      <Button
+        primary
+        :class="['ui', 'fluid', {'loading': isLoading}, 'button']"
+        type="submit"
+      >
+        <template v-if="playlist">
+          {{ t('components.playlists.Form.button.update') }}
+        </template>
+        <template v-else>
+          {{ t('components.playlists.Form.button.create') }}
+        </template>
+      </Button>
     </div>
   </Layout>
 </template>
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 0124f60c7..c66e1ed78 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -16,6 +16,7 @@ import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 const logger = useLogger()
 const store = useStore()
@@ -83,6 +84,9 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
 }
 
 store.dispatch('playlists/fetchOwn')
+watch(playlistNameFilter, () => console.log(playlistNameFilter.value))
+watch(sortedPlaylists, () => console.log(sortedPlaylists.value))
+watch(playlists, () => console.log(playlists.value))
 </script>
 
 <template>
@@ -91,154 +95,142 @@ store.dispatch('playlists/fetchOwn')
     :title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
     :cancel="t('components.playlists.PlaylistModal.button.cancel')"
   >
-    <h4 class="header">
-      <template v-if="track">
-      // TODO: Check subheader
-        <h2 class="ui header">
-          {{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
-          <div class="ui sub header">
-            {{ t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
-          </div>
-        </h2>
-      </template>
-      <span v-else>
-        {{ t('components.playlists.PlaylistModal.header.manage') }}
-      </span>
-    </h4>
-    <div class="scrolling content">
-      <playlist-form
-        :key="formKey"
-        :create="true"
-      />
-      <div class="ui divider" />
-      <div v-if="playlists.length > 0">
-        <Alert
-          v-if="showDuplicateTrackAddConfirmation"
-          role="alert"
-          yellow
-        >
-          <p>
-            <i18n-t keypath="components.playlists.PlaylistModal.warning.duplicate">
-              <strong>{{ track?.title }}</strong>
-              <strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
-            </i18n-t>
-          </p>
-          <Button
-            primary
-            @click="addToPlaylist(lastSelectedPlaylist, true)"
-          >
-            {{ t('components.playlists.PlaylistModal.button.addDuplicate') }}
-          </Button>
-        </Alert>
-        <Alert
-          v-if="errors.length > 0"
-          role="alert"
-          red
-        >
-          <h4 class="header">
-            {{ t('components.playlists.PlaylistModal.header.addFailure') }}
-          </h4>
-          <ul class="list">
-            <li
-              v-for="(error, key) in errors"
-              :key="key"
-            >
-              {{ error }}
-            </li>
-          </ul>
-        </Alert>
-        <h4 class="ui header">
-          {{ t('components.playlists.PlaylistModal.header.available') }}
-        </h4>
-        <div class="ui form">
-          <div class="fields">
-            <div class="field">
-              <label for="playlist-name-filter">{{ t('components.playlists.PlaylistModal.label.filter') }}</label>
-              <Input
-                search
-                id="playlist-name-filter"
-                v-model="playlistNameFilter"
-                :placeholder="labels.filterPlaylistField"
-              />
-            </div>
-          </div>
+    <template v-if="track">
+      <h3 class="ui header">
+        {{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
+        <div class="ui sub header">
+          {{ t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
         </div>
-        <table
-          v-if="sortedPlaylists.length > 0"
-          class="ui unstackable very basic table"
-        >
-          <thead>
-            <tr>
-              <th><span class="visually-hidden">{{ t('components.playlists.PlaylistModal.table.edit.header.edit') }}</span></th>
-              <th>
-                {{ t('components.playlists.PlaylistModal.table.edit.header.name') }}
-              </th>
-              <th class="sorted descending">
-                {{ t('components.playlists.PlaylistModal.table.edit.header.lastModification') }}
-              </th>
-              <th>
-                {{ t('components.playlists.PlaylistModal.table.edit.header.tracks') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(playlist, key) in sortedPlaylists"
-              :key="key"
-            >
-              <td>
-                <Link
-                  solid
-                  secondary
-                  square-small
-                  :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
-                  icon="bi-pencil-fill"
-                >
-                  <span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
-                </Link>
-              </td>
-              <td>
-                <router-link
-                  :to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
-                  @click="store.state.playlists.showModal = false"
-                >
-                  {{ playlist.name }}
-                </router-link>
-              </td>
-              <td><human-date :date="playlist.modification_date" /></td>
-              <td>{{ playlist.tracks_count }}</td>
-              <td>
-                <Button
-                  v-if="track"
-                  low-height
-                  secondary
-                  :title="labels.addToPlaylist"
-                  icon="bi-plus"
-                  @click.prevent="addToPlaylist(playlist.id, false)"
-                >
-                  {{ t('components.playlists.PlaylistModal.button.addTrack') }}
-                </Button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <template v-else>
-          <div class="ui small placeholder segment component-placeholder">
-            <h4 class="ui header">
-              {{ t('components.playlists.PlaylistModal.header.noResults') }}
-            </h4>
-          </div>
-        </template>
-      </div>
-      <div
-        v-else
-        class="ui placeholder segment"
+      </h3>
+    </template>
+    <div v-if="playlists.length > 0">
+      <Alert
+        v-if="showDuplicateTrackAddConfirmation"
+        yellow
       >
-        <div class="ui icon header">
-          <i class="bi bi-list" />
-          {{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
-        </div>
+        <p>
+          <i18n-t keypath="components.playlists.PlaylistModal.warning.duplicate">
+            <strong>{{ track?.title }}</strong>
+            <strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
+          </i18n-t>
+        </p>
+        <Button
+          primary
+          @click="addToPlaylist(lastSelectedPlaylist, true)"
+        >
+          {{ t('components.playlists.PlaylistModal.button.addDuplicate') }}
+        </Button>
+      </Alert>
+      <Alert
+        v-if="errors.length > 0"
+        role="alert"
+        red
+      >
+        <h4 class="header">
+          {{ t('components.playlists.PlaylistModal.header.addFailure') }}
+        </h4>
+        <ul class="list">
+          <li
+            v-for="(error, key) in errors"
+            :key="key"
+          >
+            {{ error }}
+          </li>
+        </ul>
+      </Alert>
+
+      <h4 class="ui header">
+        {{ t('components.playlists.PlaylistModal.header.available') }}
+      </h4>
+      <!-- <Input
+        id="playlist-name-filter"
+        v-model="playlistNameFilter"
+        :placeholder="labels.filterPlaylistField"
+        :label="t('components.playlists.PlaylistModal.label.filter')"
+      /> -->
+      <table
+        v-if="sortedPlaylists.length > 0"
+        class="ui unstackable very basic table"
+      >
+        <thead>
+          <tr>
+            <th><span class="visually-hidden">{{ t('components.playlists.PlaylistModal.table.edit.header.edit') }}</span></th>
+            <th>
+              {{ t('components.playlists.PlaylistModal.table.edit.header.name') }}
+            </th>
+            <th class="sorted descending">
+              {{ t('components.playlists.PlaylistModal.table.edit.header.lastModification') }}
+            </th>
+            <th>
+              {{ t('components.playlists.PlaylistModal.table.edit.header.tracks') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(playlist, key) in sortedPlaylists"
+            :key="key"
+          >
+            <td>
+              <Link
+                solid
+                secondary
+                square-small
+                :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
+                icon="bi-pencil-fill"
+              >
+                <span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
+              </Link>
+            </td>
+            <td>
+              <router-link
+                :to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
+                @click="store.state.playlists.showModal = false"
+              >
+                {{ playlist.name }}
+              </router-link>
+            </td>
+            <td><human-date :date="playlist.modification_date" /></td>
+            <td>{{ playlist.tracks_count }}</td>
+            <td>
+              <Button
+                v-if="track"
+                low-height
+                secondary
+                :title="labels.addToPlaylist"
+                icon="bi-plus"
+                @click.prevent="addToPlaylist(playlist.id, false)"
+              >
+                {{ t('components.playlists.PlaylistModal.button.addTrack') }}
+              </Button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <template v-else>
+      <Spacer />
+        <Alert blue>
+          <span>
+            {{ t('components.playlists.PlaylistModal.header.noResults') }}
+          </span>
+        </Alert>
+      </template>
+    </div>
+    <div
+      v-else
+      class="ui placeholder segment"
+    >
+      <div class="ui icon header">
+        <i class="bi bi-list" />
+        {{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
       </div>
     </div>
+
+    <Spacer />
+
+    <playlist-form
+      :key="formKey"
+      :create="true"
+    />
   </Modal>
 </template>