[WIP] refactor(front): radio pages

front/src/components/audio/track/Table.vue

@@ -249,7 +249,7 @@ const updatePage = (page: number) => {
       <Pagination
         v-if="paginateResults"
         :pages="paginateBy"
-        v-model:page="page"
+        :page="page"
         @update:current="updatePage"
       />
     </div>
@@ -277,7 +277,7 @@ const updatePage = (page: number) => {
       <Pagination
         v-if="paginateResults"
         :pages="paginateBy"
-        v-model:page="page"
+        :page="page"
         @update:current="updatePage"
       />
     </div>

front/src/components/library/Radios.vue

@@ -12,16 +12,15 @@ import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
 
 import axios from 'axios'
-import $ from 'jquery'
 
 import Layout from '~/components/ui/Layout.vue'
 import Section from '~/components/ui/Section.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import RadioCard from '~/components/radios/Card.vue'
 import Button from '~/components/ui/Button.vue'
-import Link from '~/components/ui/Link.vue'
-import Card from '~/components/ui/Card.vue'
+import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -103,8 +102,6 @@ onOrderingUpdate(() => {
   fetchData()
 })
 
-onMounted(() => $('.ui.dropdown').dropdown())
-
 const { t } = useI18n()
 const labels = computed(() => ({
   searchPlaceholder: t('components.library.Radios.placeholder.search'),
@@ -165,7 +162,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           id="radios-ordering"
           :label="t('components.library.Radios.ordering.label')"
           v-model="ordering"
-          class="ui dropdown"
+          class="dropdown"
         >
           <option
             v-for="(option, key) in orderingOptions"
@@ -179,7 +176,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           id="radios-ordering-direction"
           :label="t('components.library.Radios.ordering.direction.label')"
           v-model="orderingDirection"
-          class="ui dropdown"
+          class="dropdown"
         >
           <option value="+">
             {{ t('components.library.Radios.ordering.direction.ascending') }}
@@ -192,7 +189,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           id="radios-results"
           :label="t('components.library.Radios.pagination.results')"
           v-model="paginateBy"
-          class="ui dropdown"
+          class="dropdown"
         >
           <option
             v-for="opt in paginateOptions"
@@ -204,23 +201,25 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         </select>
       </Layout>
       <div class="ui hidden divider" />
-      <div
+      <Alert
+        blue
+        style="align-items: center;"
         v-if="result && result.results.length === 0"
-        class="ui placeholder segment"
       >
-        <div class="ui icon header">
-          <i class="feed icon" />
-          {{ t('components.library.Radios.empty.noResults') }}
-        </div>
-        <router-link
+        <i class="bi bi-broadcast-pin" style="font-size: 80px" />
+        <Spacer />
+        {{ t('components.library.Radios.empty.noResults') }}
+        <Spacer />
+        <Button
           v-if="store.state.auth.authenticated"
+          primary
+          style="align-self:center;"
           :to="{name: 'library.radios.build'}"
-          class="ui success button labeled icon"
+          icon="bi-boombox-fill"
         >
-          <i class="rss icon" />
           {{ t('components.library.Radios.button.add') }}
-        </router-link>
-      </div>
+        </Button>
+      </Alert>
       <div
         v-if="result && result.results.length > 0"
         class="ui cards"
@@ -234,8 +233,8 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       </div>
       <Pagination
         v-if="result && result.count > paginateBy"
-        :page="page"
-        :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
+        v-model:page="page"
+        :pages="Math.ceil(result.count / paginateBy)"
       />
   </Layout>
 </template>

front/src/components/library/radios/Builder.vue

@@ -4,13 +4,19 @@ import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
-import $ from 'jquery'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
 import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import BuilderFilter from './Filter.vue'
+import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Input from '~/components/ui/Input.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Textarea from '~/components/ui/Textarea.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 export interface BuilderFilter {
   type: string
@@ -185,161 +191,149 @@ const save = async () => {
 
   isLoading.value = false
 }
-
-onMounted(() => {
-  $('.ui.dropdown').dropdown()
-})
 </script>
 
 <template>
-  <div
+  <Layout
+    stack
+    main
     v-title="labels.title"
-    class="ui vertical stripe segment"
   >
-    <div>
-      <section>
-        <h2 class="ui header">
-          {{ t('components.library.radios.Builder.header.builder') }}
-        </h2>
-        <p>
-          {{ t('components.library.radios.Builder.description.builder') }}
-        </p>
-        <div class="ui form">
-          <div
-            v-if="success"
-            class="ui positive message"
+    <section>
+      <h1>
+        {{ t('components.library.radios.Builder.header.builder') }}
+      </h1>
+      <p>
+        {{ t('components.library.radios.Builder.description.builder') }}
+      </p>
+      <Spacer />
+      <Layout form>
+        <Alert
+          v-if="success"
+          green
+        >
+          <h4 class="header">
+            <template v-if="radioName">
+              {{ t('components.library.radios.Builder.header.updated') }}
+            </template>
+            <template v-else>
+              {{ t('components.library.radios.Builder.header.created') }}
+            </template>
+          </h4>
+        </Alert>
+        <Input
+          id="name"
+          v-model="radioName"
+          :label="t('components.library.radios.Builder.label.name')"
+          name="name"
+          type="text"
+          :placeholder="labels.placeholder.name"
+        />
+        <Textarea
+          id="description"
+          v-model="radioDesc"
+          :label="t('components.library.radios.Builder.label.description')"
+          rows="2"
+          type="text"
+          :placeholder="labels.placeholder.description"
+        />
+        <Toggle
+          id="public"
+          v-model="isPublic"
+          type="checkbox"
+          :label="t('components.library.radios.Builder.label.public')"
+        />
+        <Button
+          :disabled="!canSave"
+          :class="['ui', 'success', {loading: isLoading}, 'button']"
+          primary
+          @click="save"
+        >
+          {{ t('components.library.radios.Builder.button.save') }}
+        </Button>
+        <radio-button
+          v-if="id"
+          type="custom"
+          :custom-radio-id="id"
+        />
+      </Layout>
+      <div class="ui form">
+        <div class="inline field">
+          <label
+            id="radioFilterLabel"
+            for="radio-filters"
+          >{{ t('components.library.radios.Builder.label.filter') }}</label>
+          <select
+            id="radio-filters"
+            v-model="currentFilterType"
+            class="ui dropdown"
           >
-            <h4 class="header">
-              <template v-if="radioName">
-                {{ t('components.library.radios.Builder.header.updated') }}
-              </template>
-              <template v-else>
-                {{ t('components.library.radios.Builder.header.created') }}
-              </template>
-            </h4>
-          </div>
-          <div class="">
-            <div class="field">
-              <label for="name">{{ t('components.library.radios.Builder.label.name') }}</label>
-              <input
-                id="name"
-                v-model="radioName"
-                name="name"
-                type="text"
-                :placeholder="labels.placeholder.name"
-              >
-            </div>
-            <div class="field">
-              <label for="description">{{ t('components.library.radios.Builder.label.description') }}</label>
-              <textarea
-                id="description"
-                v-model="radioDesc"
-                rows="2"
-                type="text"
-                :placeholder="labels.placeholder.description"
-              />
-            </div>
-            <div class="ui toggle checkbox">
-              <input
-                id="public"
-                v-model="isPublic"
-                type="checkbox"
-              >
-              <label for="public">{{ t('components.library.radios.Builder.label.public') }}</label>
-            </div>
-            <div class="ui hidden divider" />
-            <button
-              :disabled="!canSave"
-              :class="['ui', 'success', {loading: isLoading}, 'button']"
-              @click="save"
+            <option value="">
+              {{ t('components.library.radios.Builder.option.filter') }}
+            </option>
+            <option
+              v-for="f in availableFilters"
+              :key="f.label"
+              :value="f.type"
             >
-              {{ t('components.library.radios.Builder.button.save') }}
-            </button>
-            <radio-button
-              v-if="id"
-              type="custom"
-              :custom-radio-id="id"
-            />
-          </div>
+              {{ f.label }}
+            </option>
+          </select>
+          <Button
+            id="addFilter"
+            primary
+            :disabled="!currentFilterType"
+            @click="add"
+          >
+            {{ t('components.library.radios.Builder.button.filter') }}
+          </Button>
         </div>
-        <div class="ui form">
-          <div class="inline field">
-            <label
-              id="radioFilterLabel"
-              for="radio-filters"
-            >{{ t('components.library.radios.Builder.label.filter') }}</label>
-            <select
-              id="radio-filters"
-              v-model="currentFilterType"
-              class="ui dropdown"
-            >
-              <option value="">
-                {{ t('components.library.radios.Builder.option.filter') }}
-              </option>
-              <option
-                v-for="f in availableFilters"
-                :key="f.label"
-                :value="f.type"
-              >
-                {{ f.label }}
-              </option>
-            </select>
-            <button
-              id="addFilter"
-              :disabled="!currentFilterType"
-              class="ui button"
-              @click="add"
-            >
-              {{ t('components.library.radios.Builder.button.filter') }}
-            </button>
-          </div>
-          <p v-if="currentFilter">
-            {{ currentFilter.help_text }}
-          </p>
-        </div>
-        <table class="ui table">
-          <thead>
-            <tr>
-              <th class="two wide">
-                {{ t('components.library.radios.Builder.table.filter.header.name') }}
-              </th>
-              <th class="one wide">
-                {{ t('components.library.radios.Builder.table.filter.header.exclude') }}
-              </th>
-              <th class="six wide">
-                {{ t('components.library.radios.Builder.table.filter.header.config') }}
-              </th>
-              <th class="five wide">
-                {{ t('components.library.radios.Builder.table.filter.header.candidates') }}
-              </th>
-              <th class="two wide">
-                {{ t('components.library.radios.Builder.table.filter.header.actions') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <builder-filter
-              v-for="(f, index) in filters"
-              :key="f.hash"
-              v-model:data="filters[index]"
-              @delete="deleteFilter(index)"
-            />
-          </tbody>
-        </table>
-        <template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
-          <h3 class="ui header">
-            {{ t('components.library.radios.Builder.header.matches', checkResult.candidates.count) }}
-          </h3>
-          <track-table
-            v-if="checkResult.candidates.sample"
-            :tracks="checkResult.candidates.sample"
-            :playable="true"
-            :show-position="false"
-            :show-duration="false"
-            :display-actions="false"
+        <p v-if="currentFilter">
+          {{ currentFilter.help_text }}
+        </p>
+      </div>
+      <table class="ui table">
+        <thead>
+          <tr>
+            <th class="two wide">
+              {{ t('components.library.radios.Builder.table.filter.header.name') }}
+            </th>
+            <th class="one wide">
+              {{ t('components.library.radios.Builder.table.filter.header.exclude') }}
+            </th>
+            <th class="six wide">
+              {{ t('components.library.radios.Builder.table.filter.header.config') }}
+            </th>
+            <th class="five wide">
+              {{ t('components.library.radios.Builder.table.filter.header.candidates') }}
+            </th>
+            <th class="two wide">
+              {{ t('components.library.radios.Builder.table.filter.header.actions') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <builder-filter
+            v-for="(f, index) in filters"
+            :key="f.hash"
+            v-model:data="filters[index]"
+            @delete="deleteFilter(index)"
           />
-        </template>
-      </section>
-    </div>
-  </div>
+        </tbody>
+      </table>
+      <template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
+        <h3 class="ui header">
+          {{ t('components.library.radios.Builder.header.matches', checkResult.candidates.count) }}
+        </h3>
+        <track-table
+          v-if="checkResult.candidates.sample"
+          :tracks="checkResult.candidates.sample"
+          :playable="true"
+          :show-position="false"
+          :show-duration="false"
+          :display-actions="false"
+        />
+      </template>
+    </section>
+  </Layout>
 </template>

front/src/components/library/radios/Filter.vue

@@ -205,12 +205,12 @@ fetchCandidates()
       </semantic-modal>
     </td>
     <td>
-      <button
-        class="ui danger button"
+      <Button
+        destructive
         @click="emit('delete')"
       >
         {{ t('components.library.radios.Filter.removeButton') }}
-      </button>
+      </Button>
     </td>
   </tr>
 </template>

front/src/components/radios/Button.vue

@@ -79,7 +79,7 @@ const toggleRadio = () => {
   <Button
     :is-active="running"
     solid primary
-    icon="bi-broadcast"
+    icon="bi-boombox-fill"
     @click="toggleRadio"
   >
     {{ buttonLabel }}

front/src/components/radios/Card.vue

@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n'
 
 import RadioButton from './Button.vue'
 import Card from '~/components/ui/Card.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 interface Props {
   type: string
@@ -47,26 +48,29 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
     >
       {{ radio.description }}
     </div>
+    <Spacer />
     <div class="extra content">
       <user-link
         v-if="radio.user"
         :user="radio.user"
         class="left floated"
       />
-        <radio-button
-          class="right floated button"
-          :type="type"
-          :custom-radio-id="customRadioId"
-          :object-id="objectId"
-        />
-        <Link
-          v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
-          class="ui success button right floated"
-          :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
-        >
-          {{ t('components.radios.Card.button.edit') }}
-        </Link>
+      <radio-button
+        class="right floated button"
+        :type="type"
+        :custom-radio-id="customRadioId"
+        :object-id="objectId"
+      />
     </div>
+    <template #action>
+      <Button
+        v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
+        class="ui success button right floated"
+        :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
+      >
+        {{ t('components.radios.Card.button.edit') }}
+      </Button>
+    </template>
   </Card>
   <Card
     v-else
@@ -80,23 +84,26 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
     >
       {{ radio.description }}
     </div>
+    <Spacer />
     <div class="extra content">
       <user-link
         v-if="radio.user"
         :user="radio.user"
       />
-        <radio-button
-          :type="type"
-          :custom-radio-id="customRadioId"
-          :object-id="objectId"
-        />
-        <Link
-          v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
-          class="ui success button right floated"
-          :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
-        >
-          {{ t('components.radios.Card.button.edit') }}
-        </Link>
+      <radio-button
+        :type="type"
+        :custom-radio-id="customRadioId"
+        :object-id="objectId"
+      />
     </div>
+    <template #action>
+      <Button
+        v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
+        class="ui success button right floated"
+        :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
+      >
+        {{ t('components.radios.Card.button.edit') }}
+      </Button>
+    </template>
   </Card>
 </template>