[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 Alert from '~/components/ui/Alert.vue'
-import Card from '~/components/ui/Card.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="bi bi-broadcast-pin" style="font-size: 80px" />
-          <i class="feed icon" />
+        <Spacer />
         {{ t('components.library.Radios.empty.noResults') }}
-        </div>
+        <Spacer />
-        <router-link
+        <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>
+        </Button>
-      </div>
+      </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"
+        v-model:page="page"
-        :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
+        :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,29 +191,26 @@ 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">
+      <h1>
         {{ t('components.library.radios.Builder.header.builder') }}
-        </h2>
+      </h1>
       <p>
         {{ t('components.library.radios.Builder.description.builder') }}
       </p>
-        <div class="ui form">
+      <Spacer />
-          <div
+      <Layout form>
+        <Alert
           v-if="success"
-            class="ui positive message"
+          green
         >
           <h4 class="header">
             <template v-if="radioName">
@@ -217,51 +220,43 @@ onMounted(() => {
               {{ t('components.library.radios.Builder.header.created') }}
             </template>
           </h4>
-          </div>
+        </Alert>
-          <div class="">
+        <Input
-            <div class="field">
-              <label for="name">{{ t('components.library.radios.Builder.label.name') }}</label>
-              <input
           id="name"
           v-model="radioName"
+          :label="t('components.library.radios.Builder.label.name')"
           name="name"
           type="text"
           :placeholder="labels.placeholder.name"
-              >
+        />
-            </div>
+        <Textarea
-            <div class="field">
-              <label for="description">{{ t('components.library.radios.Builder.label.description') }}</label>
-              <textarea
           id="description"
           v-model="radioDesc"
+          :label="t('components.library.radios.Builder.label.description')"
           rows="2"
           type="text"
           :placeholder="labels.placeholder.description"
         />
-            </div>
+        <Toggle
-            <div class="ui toggle checkbox">
-              <input
           id="public"
           v-model="isPublic"
           type="checkbox"
-              >
+          :label="t('components.library.radios.Builder.label.public')"
-              <label for="public">{{ t('components.library.radios.Builder.label.public') }}</label>
+        />
-            </div>
+        <Button
-            <div class="ui hidden divider" />
-            <button
           :disabled="!canSave"
           :class="['ui', 'success', {loading: isLoading}, 'button']"
+          primary
           @click="save"
         >
           {{ t('components.library.radios.Builder.button.save') }}
-            </button>
+        </Button>
         <radio-button
           v-if="id"
           type="custom"
           :custom-radio-id="id"
         />
-          </div>
+      </Layout>
-        </div>
       <div class="ui form">
         <div class="inline field">
           <label
@@ -284,14 +279,14 @@ onMounted(() => {
               {{ f.label }}
             </option>
           </select>
-            <button
+          <Button
             id="addFilter"
+            primary
             :disabled="!currentFilterType"
-              class="ui button"
             @click="add"
           >
             {{ t('components.library.radios.Builder.button.filter') }}
-            </button>
+          </Button>
         </div>
         <p v-if="currentFilter">
           {{ currentFilter.help_text }}
@@ -340,6 +335,5 @@ onMounted(() => {
         />
       </template>
     </section>
-    </div>
+  </Layout>
-  </div>
 </template>

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

@@ -205,12 +205,12 @@ fetchCandidates()
       </semantic-modal>
     </td>
     <td>
-      <button
+      <Button
-        class="ui danger 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,6 +48,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
     >
       {{ radio.description }}
     </div>
+    <Spacer />
     <div class="extra content">
       <user-link
         v-if="radio.user"
@@ -59,14 +61,16 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
         :custom-radio-id="customRadioId"
         :object-id="objectId"
       />
-        <Link
+    </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') }}
-        </Link>
+      </Button>
-    </div>
+    </template>
   </Card>
   <Card
     v-else
@@ -80,6 +84,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
     >
       {{ radio.description }}
     </div>
+    <Spacer />
     <div class="extra content">
       <user-link
         v-if="radio.user"
@@ -90,13 +95,15 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
         :custom-radio-id="customRadioId"
         :object-id="objectId"
       />
-        <Link
+    </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') }}
-        </Link>
+      </Button>
-    </div>
+    </template>
   </Card>
 </template>