From eb61ba05c109fbec2e05d3484e180d9222306a52 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Tue, 11 Feb 2025 12:59:59 +0100
Subject: [PATCH] feat(front): add privacy slider to playlist modal

---
 front/src/components/playlists/Form.vue | 36 +++++--------------------
 1 file changed, 7 insertions(+), 29 deletions(-)

diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 3fcb045de..2f8b4058b 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -16,6 +16,7 @@ import Layout from '~/components/ui/Layout.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
+import Slider from '~/components/ui/Slider.vue'
 
 interface Events {
   (e: 'update:playlist', value: Playlist): void
@@ -51,20 +52,11 @@ const labels = computed(() => ({
 }))
 
 const sharedLabels = useSharedLabels()
-const privacyLevelChoices = computed(() => [
-  {
-    value: 'me',
-    label: sharedLabels.fields.privacy_level.choices.me
-  },
-  {
-    value: 'instance',
-    label: sharedLabels.fields.privacy_level.choices.instance
-  },
-  {
-    value: 'everyone',
-    label: sharedLabels.fields.privacy_level.choices.everyone
-  }
-] as { value: PrivacyLevel, label: string }[])
+const privacyLevelChoices = {
+  me: sharedLabels.fields.privacy_level.choices.me,
+  instance: sharedLabels.fields.privacy_level.choices.instance,
+  everyone: sharedLabels.fields.privacy_level.choices.everyone
+} as const satisfies Record<PrivacyLevel, string>;
 
 const el = useCurrentElement()
 onMounted(async () => {
@@ -159,21 +151,7 @@ const submit = async () => {
         />
       </div>
       <div class="field">
-        <label for="playlist-visibility">{{ t('components.playlists.Form.label.visibility') }}</label>
-        <!-- TODO: Replace with Slider.vue -->
-        <select
-          id="playlist-visibility"
-          v-model="privacyLevel"
-          class="ui dropdown"
-        >
-          <option
-            v-for="(c, key) in privacyLevelChoices"
-            :key="key"
-            :value="c.value"
-          >
-            {{ c.label }}
-          </option>
-        </select>
+      <Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
       </div>
       <div class="field">
         <span id="updatePlaylistLabel" />