[WIP] refactor(front): Playlist Editor

front/src/components/playlists/Editor.vue

@@ -14,6 +14,9 @@ import draggable from 'vuedraggable'
 import axios from 'axios'
 
 import PlaylistForm from '~/components/playlists/Form.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 interface Events {
   (e: 'update:playlistTracks', value: PlaylistTrack[]): void
@@ -163,7 +166,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
 </script>
 
 <template>
-  <div class="ui text container component-playlist-editor">
+  <Layout stack>
     <playlist-form
       v-model:playlist="playlist"
       :title="undefined"
@@ -171,7 +174,6 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
     <h3 class="ui top attached header">
       {{ t('components.playlists.Editor.header.editor') }}
     </h3>
-    <div class="ui attached segment">
       <template v-if="status === 'loading'">
         <div class="ui active tiny inline loader" />
         {{ t('components.playlists.Editor.loading.sync') }}
@@ -179,10 +181,10 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       <template v-else-if="status === 'errored'">
         <i class="dangerclose icon" />
         {{ t('components.playlists.Editor.error.sync') }}
-        <div
+        <Alert
+          red
           v-if="errors.length > 0"
           role="alert"
-          class="ui negative message"
         >
           <ul class="list">
             <li
@@ -192,12 +194,12 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
               {{ error }}
             </li>
           </ul>
-        </div>
+        </Alert>
       </template>
-      <div
+      <Alert
+        red
         v-else-if="status === 'confirmDuplicateAdd'"
         role="alert"
-        class="ui warning message"
       >
         <p>
           {{ t('components.playlists.Editor.warning.duplicate') }}
@@ -211,28 +213,27 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
             {{ track }}
           </li>
         </ul>
-        <button
+        <Button
-          class="ui small success button"
+          primary
           @click="insertMany(queueTracks, true)"
         >
           {{ t('components.playlists.Editor.button.addDuplicate') }}
-        </button>
+        </Button>
-      </div>
+      </Alert>
       <template v-else-if="status === 'saved'">
-        <i class="success check icon" />
+        <i class="success bi- bi-check" />
         {{ t('components.playlists.Editor.message.sync') }}
       </template>
-    </div>
+      <Button
-    <div class="ui bottom attached segment">
-      <button
         :disabled="queueTracks.length === 0"
+        primary
         :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
         :title="labels.copyTitle"
+        icon="bi-plus"
         @click="insertMany(queueTracks, false)"
       >
-        <i class="plus icon" />
         {{ t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
-      </button>
+      </Button>
 
       <dangerous-button
         :disabled="tracks.length === 0"
@@ -263,6 +264,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
           {{ t('components.playlists.Editor.help.reorder') }}
         </p>
         <div class="table-wrapper">
+        <!-- TODO: Use activity.vue -->
           <table class="ui compact very basic unstackable table">
             <draggable
               v-model="tracks"
@@ -309,6 +311,5 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
           </table>
         </div>
       </template>
-    </div>
+  </Layout>
-  </div>
 </template>

front/src/components/playlists/Form.vue

@@ -12,6 +12,11 @@ import $ from 'jquery'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useLogger from '~/composables/useLogger'
 
+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'
+
 interface Events {
   (e: 'update:playlist', value: Playlist): void
 }
@@ -103,19 +108,17 @@ const submit = async () => {
 </script>
 
 <template>
-  <form
+  <Layout form
-    class="ui form"
     @submit.prevent="submit()"
   >
     <h4
       v-if="title"
-      class="ui header"
     >
       {{ t('components.playlists.Form.header.createPlaylist') }}
     </h4>
-    <div
+    <Alert
       v-if="success"
-      class="ui positive message"
+      green
     >
       <h4 class="header">
         <template v-if="playlist">
@@ -125,11 +128,11 @@ const submit = async () => {
           {{ t('components.playlists.Form.header.createSuccess') }}
         </template>
       </h4>
-    </div>
+    </Alert>
-    <div
+    <Alert
       v-if="errors.length > 0"
+      red
       role="alert"
-      class="ui negative message"
     >
       <h4 class="header">
         {{ t('components.playlists.Form.header.createFailure') }}
@@ -142,18 +145,18 @@ const submit = async () => {
           {{ error }}
         </li>
       </ul>
-    </div>
+    </Alert>
     <div class="three fields">
       <div class="field">
         <label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
-        <input
+        <Input
           id="playlist-name"
           v-model="name"
           name="name"
           required
           type="text"
           :placeholder="labels.placeholder"
-        >
+        />
       </div>
       <div class="field">
         <label for="playlist-visibility">{{ t('components.playlists.Form.label.visibility') }}</label>
@@ -173,7 +176,8 @@ const submit = async () => {
       </div>
       <div class="field">
         <span id="updatePlaylistLabel" />
-        <button
+        <Button
+          primary
           :class="['ui', 'fluid', {'loading': isLoading}, 'button']"
           type="submit"
         >
@@ -183,8 +187,8 @@ const submit = async () => {
           <template v-else>
             {{ t('components.playlists.Form.button.create') }}
           </template>
-        </button>
+        </Button>
       </div>
     </div>
-  </form>
+  </Layout>
 </template>