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/vui/Pagination.vue'
+import Pagination from '~/components/ui/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,97 +108,92 @@ 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">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ t('views.playlists.List.header.browse') }}
-      </h2>
-      <template v-if="store.state.auth.authenticated">
-        <Button
-          @click="store.commit('playlists/showModal', true)"
-        >
-          {{ t('views.playlists.List.button.manage') }}
-        </Button>
-        <div class="ui hidden divider" />
-      </template>
-      <form
-        :class="['ui', {'loading': isLoading}, 'form']"
-        @submit.prevent="search"
+  <Layout stack main>
+    <Layout
+      flex
+      style="justify-content: space-between;"
+      v-if="store.state.auth.authenticated"
+    >
+    <h1>{{ t('views.playlists.List.header.browse') }}</h1>
+      <Button
+        primary
+        @click="store.commit('playlists/showModal', true)"
       >
-        <div class="fields">
-          <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"
-                :placeholder="labels.searchPlaceholder"
-              >
-              <Button
-                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"
-              v-model="ordering"
-              class="ui dropdown"
-            >
-              <option
-                v-for="option in orderingOptions"
-                :key="option[0]"
-                :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
-              id="playlists-ordering-direction"
-              v-model="orderingDirection"
-              class="ui dropdown"
-            >
-              <option value="+">
-                {{ t('views.playlists.List.ordering.direction.ascending') }}
-              </option>
-              <option 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"
-              v-model="paginateBy"
-              class="ui dropdown"
-            >
-              <option
-                v-for="opt in paginateOptions"
-                :key="opt"
-                :value="opt"
-              >
-                {{ opt }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </form>
-      <div class="ui hidden divider" />
+        {{ t('views.playlists.List.button.manage') }}
+      </Button>
+    </Layout>
+    <template >
+
+    </template>
+    <Layout form flex
+      :class="['ui', {'loading': isLoading}, 'form']"
+      @submit.prevent="search"
+    >
+      <Input search
+        id="playlists-search"
+        v-model="query"
+        name="search"
+        :label="t('views.playlists.List.label.search')"
+        autofocus
+        :placeholder="labels.searchPlaceholder"
+      >
+      </Input>
+      <select
+        id="playlists-ordering"
+        :label="t('views.playlists.List.ordering.label')"
+        v-model="ordering"
+        class="dropdown"
+      >
+        <option
+          v-for="(option, key) in orderingOptions"
+          :key="key"
+          :value="option[0]"
+        >
+          {{ sharedLabels.filters[option[1]] }}
+        </option>
+      </select>
+      <select
+        :label="t('views.playlists.List.ordering.direction.label')"
+        id="playlists-ordering-direction"
+        v-model="orderingDirection"
+        class="ui dropdown"
+      >
+        <option value="+">
+          {{ t('views.playlists.List.ordering.direction.ascending') }}
+        </option>
+        <option value="-">
+          {{ t('views.playlists.List.ordering.direction.descending') }}
+        </option>
+      </select>
+      <select
+        :label="t('views.playlists.List.pagination.results')"
+        id="playlist-results"
+        v-model="paginateBy"
+        class="ui dropdown"
+      >
+        <option
+          v-for="opt in paginateOptions"
+          :key="opt"
+          :value="opt"
+        >
+          {{ 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>
       <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">
-        <pagination
-          v-if="result && result.results.length > 0"
-          v-model:current="page"
-          :paginate-by="paginateBy"
-          :total="result.count"
-        />
-      </div>
-    </section>
-  </main>
+    </Layout>
+    <Spacer grow />
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      :page="page"
+      :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
+    />
+  </Layout>
 </template>