From 2818c3eff338964c0c8d9bfbfa47a3dc2773d57a Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 30 Dec 2024 12:54:39 +0100
Subject: [PATCH] feat(ui): [WIP] Artist page

---
 front/src/components/library/Artists.vue | 164 ++++++++++-------------
 1 file changed, 71 insertions(+), 93 deletions(-)

diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 8415ec62f..740d51460 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -22,6 +22,8 @@ import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -128,95 +130,73 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       <h2>
         {{ t('components.library.Artists.header.browse') }}
       </h2>
-      <form
+      <Layout form flex
         :class="['ui', {'loading': isLoading}, 'form']"
         @submit.prevent="search"
       >
-        <div class="fields">
-          <div class="field">
-            <Input search
-              id="artist-search"
-              v-model="query"
-              name="search"
-              :label="t('components.library.Artists.label.search')"
-              autofocus
-              :placeholder="labels.searchPlaceholder"
-            >
-            </Input>
-          </div>
-          <div class="field">
-            <label for="tags-search">{{ t('components.library.Artists.label.tags') }}</label>
-            <tags-selector v-model="tags" />
-          </div>
-          <div class="field">
-            <label for="artist-ordering">{{ t('components.library.Artists.ordering.label') }}</label>
-            <select
-              id="artist-ordering"
-              v-model="ordering"
-              class="ui dropdown"
-            >
-              <option
-                v-for="(option, key) in orderingOptions"
-                :key="key"
-                :value="option[0]"
-              >
-                {{ sharedLabels.filters[option[1]] }}
-              </option>
-            </select>
-          </div>
-          <div class="field">
-            <label for="artist-ordering-direction">{{ t('components.library.Artists.ordering.direction.label') }}</label>
-            <select
-              id="artist-ordering-direction"
-              v-model="orderingDirection"
-              class="ui dropdown"
-            >
-              <option value="+">
-                {{ t('components.library.Artists.ordering.direction.ascending') }}
-              </option>
-              <option value="-">
-                {{ t('components.library.Artists.ordering.direction.descending') }}
-              </option>
-            </select>
-          </div>
-          <div class="field">
-            <label for="artist-results">{{ t('components.library.Artists.pagination.results') }}</label>
-            <select
-              id="artist-results"
-              v-model="paginateBy"
-              class="ui dropdown"
-            >
-              <option
-                v-for="opt in paginateOptions"
-                :key="opt"
-                :value="opt"
-              >
-                {{ opt }}
-              </option>
-            </select>
-          </div>
-          <div class="field">
-            <span id="excludeHeader">{{ t('components.library.Artists.label.excludeCompilation') }}</span>
-            <div
-              id="excludeCompilation"
-              class="ui toggle checkbox"
-            >
-              <Input
-                id="exclude-compilation"
-                v-model="excludeCompilation"
-                true-value="true"
-                false-value="null"
-                type="checkbox"
-              />
-              <label
-                for="exclude-compilation"
-                class="visually-hidden"
-              >{{ t('components.library.Artists.label.excludeCompilation') }}</label>
-            </div>
-          </div>
-        </div>
-      </form>
-      <div class="ui hidden divider" />
+        <Input search
+          id="artist-search"
+          v-model="query"
+          name="search"
+          :label="t('components.library.Artists.label.search')"
+          autofocus
+          :placeholder="labels.searchPlaceholder"
+        >
+        </Input>
+        <Input
+          v-model="tags"
+          :label="t('components.library.Artists.label.tags')"
+        />
+        <select
+          id="artist-ordering"
+          :label="t('components.library.Artists.ordering.label')"
+          v-model="ordering"
+          class="ui dropdown"
+        >
+          <option
+            v-for="(option, key) in orderingOptions"
+            :key="key"
+            :value="option[0]"
+          >
+            {{ sharedLabels.filters[option[1]] }}
+          </option>
+        </select>
+        <select
+          :label="t('components.library.Artists.ordering.direction.label')"
+          id="artist-ordering-direction"
+          v-model="orderingDirection"
+          class="ui dropdown"
+        >
+          <option value="+">
+            {{ t('components.library.Artists.ordering.direction.ascending') }}
+          </option>
+          <option value="-">
+            {{ t('components.library.Artists.ordering.direction.descending') }}
+          </option>
+        </select>
+        <select
+          :label="t('components.library.Artists.pagination.results')"
+          id="artist-results"
+          v-model="paginateBy"
+          class="ui dropdown"
+        >
+          <option
+            v-for="opt in paginateOptions"
+            :key="opt"
+            :value="opt"
+          >
+            {{ opt }}
+          </option>
+        </select>
+        <Toggle
+          :label="t('components.library.Artists.label.excludeCompilation')"
+          id="exclude-compilation"
+          v-model="excludeCompilation"
+          true-value="true"
+          false-value="null"
+          type="checkbox"
+        />
+      </Layout>
       <div
         v-if="result && result.results.length > 0"
         style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
@@ -227,21 +207,19 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         >
           <div class="ui loader" />
         </div>
-        <artist-card
+        <ArtistCard
           v-for="artist in result.results"
           :key="artist.id"
           :artist="artist"
         />
       </div>
-      <div
+      <Layout stack
         v-else-if="!isLoading"
-        class="ui placeholder segment sixteen wide column"
-        style="text-align: center; display: flex; align-items: center"
       >
-        <div class="ui icon header">
+        <Alert yellow>
           <i class="compact disc icon" />
           {{ t('components.library.Artists.empty.noResults') }}
-        </div>
+        </Alert>
         <router-link
           v-if="store.state.auth.authenticated"
           :to="{name: 'content.index'}"
@@ -250,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           <i class="upload icon" />
           {{ t('components.library.Artists.button.upload') }}
         </router-link>
-      </div>
+      </Layout>
       <div class="ui center aligned basic segment">
         <pagination
           v-if="result && result.count > paginateBy"