fix(ui): [WIP] Playlist Search

front/src/views/playlists/List.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import ArtistCard from '~/components/artist/Card.vue'
 import type { OrderingProps } from '~/composables/navigation/useOrdering'
-import type { Playlist, BackendResponse } from '~/types'
+import type { Artist, BackendResponse } from '~/types'
 import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
@@ -12,11 +13,13 @@ import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
 
 import axios from 'axios'
-import $ from 'jquery'
 
-import PlaylistCardList from '~/components/playlists/CardList.vue'
+import Pagination from '~/components/ui/Pagination.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -97,7 +100,7 @@ onOrderingUpdate(() => {
   fetchData()
 })
 
-onMounted(() => $('.ui.dropdown').dropdown())
+// onMounted(() => $('.ui.dropdown').dropdown())
 
 const { t } = useI18n()
 const labels = computed(() => ({
@@ -105,66 +108,56 @@ const labels = computed(() => ({
   searchPlaceholder: t('views.playlists.List.placeholder.search')
 }))
 
-const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
+const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
 </script>
 
 <template>
-  <main v-title="labels.playlists">
+  <Layout stack main>
-    <section class="ui vertical stripe segment">
+    <Layout
-      <h2 class="ui header">
+      flex
-        {{ t('views.playlists.List.header.browse') }}
+      style="justify-content: space-between;"
-      </h2>
+      v-if="store.state.auth.authenticated"
-      <template v-if="store.state.auth.authenticated">
+    >
+    <h1>{{ t('views.playlists.List.header.browse') }}</h1>
       <Button
+        primary
         @click="store.commit('playlists/showModal', true)"
       >
         {{ t('views.playlists.List.button.manage') }}
       </Button>
-        <div class="ui hidden divider" />
+    </Layout>
+    <template >
+
     </template>
-      <form
+    <Layout form flex
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"
     >
-        <div class="fields">
+      <Input search
-          <div class="field">
-            <label for="playlists-search">{{ t('views.playlists.List.label.search') }}</label>
-            <div class="ui action input">
-              <input
         id="playlists-search"
         v-model="query"
-                type="text"
         name="search"
+        :label="t('views.playlists.List.label.search')"
+        autofocus
         :placeholder="labels.searchPlaceholder"
       >
-              <Button
+      </Input>
-                type="submit"
-                icon="bi-search"
-                :aria-label="t('views.playlists.List.button.search')"
-              >
-                <i class="search icon" />
-              </Button>
-            </div>
-          </div>
-          <div class="field">
-            <label for="playlists-ordering">{{ t('views.playlists.List.ordering.label') }}</label>
       <select
         id="playlists-ordering"
+        :label="t('views.playlists.List.ordering.label')"
         v-model="ordering"
-              class="ui dropdown"
+        class="dropdown"
       >
         <option
-                v-for="option in orderingOptions"
+          v-for="(option, key) in orderingOptions"
-                :key="option[0]"
+          :key="key"
           :value="option[0]"
         >
           {{ sharedLabels.filters[option[1]] }}
         </option>
       </select>
-          </div>
-          <div class="field">
-            <label for="playlists-ordering-direction">{{ t('views.playlists.List.ordering.direction.label') }}</label>
       <select
+        :label="t('views.playlists.List.ordering.direction.label')"
         id="playlists-ordering-direction"
         v-model="orderingDirection"
         class="ui dropdown"
@@ -176,11 +169,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           {{ t('views.playlists.List.ordering.direction.descending') }}
         </option>
       </select>
-          </div>
-          <div class="field">
-            <label for="playlists-results">{{ t('views.playlists.List.pagination.results') }}</label>
       <select
-              id="playlists-results"
+        :label="t('views.playlists.List.pagination.results')"
+        id="playlist-results"
         v-model="paginateBy"
         class="ui dropdown"
       >
@@ -192,10 +183,17 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           {{ opt }}
         </option>
       </select>
+    </Layout>
+    <Layout grid
+      v-if="result && result.results.length > 0"
+      style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
+    >
+      <div
+        v-if="isLoading"
+        class="ui inverted active dimmer"
+      >
+        <div class="ui loader" />
       </div>
-        </div>
-      </form>
-      <div class="ui hidden divider" />
       <playlist-card-list
         v-if="result && result.results.length > 0"
         :playlists="result.results"
@@ -217,14 +215,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           {{ t('views.playlists.List.button.create') }}
         </Button>
       </div>
-      <div class="ui center aligned basic segment">
+    </Layout>
-        <pagination
+    <Spacer grow />
-          v-if="result && result.results.length > 0"
+    <Pagination
-          v-model:current="page"
+      v-if="result && result.count > paginateBy"
-          :paginate-by="paginateBy"
+      :page="page"
-          :total="result.count"
+      :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
     />
-      </div>
+  </Layout>
-    </section>
-  </main>
 </template>