From 09077156ad677648bcc73e24b82b792d1c9ae6f3 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 8 Dec 2024 20:33:48 +0100
Subject: [PATCH] chore(ui): [WIP] replace jquery-based dropdown with new
 popover

---
 front/src/components/library/TrackBase.vue | 32 ++++++++++++----------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 88d6f84a7..a2b89ef61 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -161,9 +161,9 @@ const open = ref(false)
               </span>
             </div>
             <div class="eight wide right aligned column button-group">
-            <PlayButton :track="track" />
-            <TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
-            <TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
+              <PlayButton :track="track" />
+              <TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
+              <TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
 
               <a
                 v-if="upload"
@@ -234,18 +234,20 @@ const open = ref(false)
                       {{ t('components.library.TrackBase.link.discogs') }}
                     </Button>
                   </PopoverItem>
-                  <router-link
+
+                  <PopoverItem>
+                    <RouterLink
                     v-if="track.is_local"
                     :to="{name: 'library.tracks.edit', params: {id: track.id }}"
                     class="basic item"
-                  >
-                  <PopoverItem>
-                    <Button v-if="track.is_local" :to="{ name: 'library.tracks.edit', params: { id: track.id } }" tag="router-link" variant="outline" icon="bi-pencil">
-                      {{ t('components.library.TrackBase.button.edit') }}
-                    </Button>
+                    >
+                      <Button v-if="track.is_local" :to="{ name: 'library.tracks.edit', params: { id: track.id } }" tag="router-link" variant="outline" icon="bi-pencil">
+                        {{ t('components.library.TrackBase.button.edit') }}
+                      </Button>
+                    </RouterLink>
                   </PopoverItem>
-                  </router-link>
-                  <dangerous-button
+                  <!-- TODO: Make  the following button dangerous. Btw, it's actually a modal triggered by a button! -->
+                  <Button
                     v-if="artist && store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === store.state.auth.fullUsername"
                     :class="['ui', {loading: isLoading}, 'item']"
                     @confirm="remove()"
@@ -269,7 +271,7 @@ const open = ref(false)
                         {{ t('components.library.TrackBase.button.delete') }}
                       </p>
                     </template>
-                  </dangerous-button>
+                  </Button>
                   <div class="divider" />
                   <div
                     v-for="obj in getReportableObjects({track})"
@@ -299,9 +301,9 @@ const open = ref(false)
                     <i class="wrench icon" />
                     {{ t('components.library.TrackBase.link.django') }}
                   </a>
-                </div>
-              </template>
-            </Popover>
+                </template>
+              </Popover>
+            </div>
           </div>
         </div>
       </section>