From 1477c58e3a01654efc847e1b02f4b7ab997bbc80 Mon Sep 17 00:00:00 2001
From: Konrad Mohrfeldt <km@roko.li>
Date: Thu, 25 Jul 2024 23:48:52 +0200
Subject: [PATCH] fix: move dialogs to dialog controls

This reduces the number of permission checks and also ensures that the
button will only show up, when the dialog is available as well ruling
out any typos in the permission names *cough*.

refs #300
---
 src/components/playlist/APlaylistEditor.vue | 36 +++++++--------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/components/playlist/APlaylistEditor.vue b/src/components/playlist/APlaylistEditor.vue
index 27aa0f88..ee8ffee0 100644
--- a/src/components/playlist/APlaylistEditor.vue
+++ b/src/components/playlist/APlaylistEditor.vue
@@ -117,6 +117,9 @@
               <icon-formkit-url class="tw-flex-none" />
               {{ t('playlist.editor.control.importFile') }}
             </button>
+            <GetFileImportUrl v-slot="{ resolve }">
+              <AFileUrlDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetFileImportUrl>
           </APermissionGuard>
         </div>
         <div class="tw-flex tw-flex-wrap tw-justify-center tw-items-center tw-gap-3 tw-mt-1">
@@ -125,47 +128,32 @@
               <icon-solar-play-stream-bold class="tw-flex-none" />
               {{ t('playlist.editor.control.addStream') }}
             </button>
+            <GetStreamUrl v-slot="{ resolve }">
+              <AStreamURLDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetStreamUrl>
           </APermissionGuard>
           <APermissionGuard show-permissions="program.add__line">
             <button type="button" class="btn btn-default" @click="addInputToPlaylist">
               <icon-game-icons-jack-plug class="tw-flex-none" />
               {{ t('playlist.editor.control.addInput') }}
             </button>
+            <GetInputUrl v-slot="{ resolve }">
+              <AInputUrlDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetInputUrl>
           </APermissionGuard>
           <APermissionGuard show-permissions="program.add__m3ufile">
             <button type="button" class="btn btn-default" @click="addM3utoPlaylist">
               <icon-ph-playlist-light class="tw-flex-none" />
               {{ t('playlist.editor.control.addM3u') }}
             </button>
+            <GetM3uUrl v-slot="{ resolve }">
+              <AM3uUrlDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetM3uUrl>
           </APermissionGuard>
         </div>
       </div>
     </fieldset>
   </div>
-
-  <APermissionGuard show-permissions="program.add__stream">
-    <GetStreamUrl v-slot="{ resolve }">
-      <AStreamURLDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetStreamUrl>
-  </APermissionGuard>
-
-  <APermissionGuard show-permissions="program.add__import">
-    <GetFileImportUrl v-slot="{ resolve }">
-      <AFileUrlDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetFileImportUrl>
-  </APermissionGuard>
-
-  <APermissionGuard show-permissions="program.add__line">
-    <GetInputUrl v-slot="{ resolve }">
-      <AInputUrlDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetInputUrl>
-  </APermissionGuard>
-
-  <APermissionGuard show-permissions="programm.add__m3ufile">
-    <GetM3uUrl v-slot="{ resolve }">
-      <AM3uUrlDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetM3uUrl>
-  </APermissionGuard>
 </template>
 
 <script lang="ts" setup>
-- 
GitLab