MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(front): [WIP] Radios page

This commit is contained in:
ArneBo 2025-01-07 11:56:34 +01:00 committed by upsiflu
parent 72649a48e3
commit 11dcd8db19
3 changed files with 132 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/components/favorites/List.vue
View File

@ -109,10 +109,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</script> </script>
<template> <template>
<Layout main stack <Layout main stack no-gap align-left
v-title="labels.title" v-title="labels.title"
> >
<Spacer/>
<Section <Section
no-items
v-if="results" v-if="results"
:h1="t('components.favorites.List.title', store.state.favorites.count)" :h1="t('components.favorites.List.title', store.state.favorites.count)"
> >

176
front/src/components/library/Radios.vue
View File

@ -14,8 +14,14 @@ import { useStore } from '~/store'
import axios from 'axios' import axios from 'axios'
import $ from 'jquery' import $ from 'jquery'
import Pagination from '~/components/vui/Pagination.vue' import Layout from '~/components/ui/Layout.vue'
import Section from '~/components/ui/layout/Section.vue'
import Pagination from '~/components/ui/Pagination.vue'
import RadioCard from '~/components/radios/Card.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 Input from '~/components/ui/Input.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels' import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering' import useOrdering from '~/composables/navigation/useOrdering'
@ -109,17 +115,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</script> </script>
<template> <template>
<main v-title="labels.title"> <Layout main stack>
<section class="ui vertical stripe segment"> <Section :h1="t('components.library.Radios.header.browse')" />
<h2 class="ui header"> <h2 class="ui header">
{{ t('components.library.Radios.header.browse') }}
</h2>
<div class="ui hidden divider" />
<div class="ui row">
<h3 class="ui header">
{{ t('components.library.Radios.header.instance') }} {{ t('components.library.Radios.header.instance') }}
</h3> </h2>
<div class="ui cards"> <Layout flex>
<radio-card <radio-card
v-if="isAuthenticated" v-if="isAuthenticated"
:type="'actor-content'" :type="'actor-content'"
@ -146,93 +147,62 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
v-if="store.state.auth.authenticated && scope === 'me'" v-if="store.state.auth.authenticated && scope === 'me'"
:type="'less-listened_library'" :type="'less-listened_library'"
/> />
</div> </Layout>
</div> <Spacer />
<Section :h2="t('components.library.Radios.header.user')" :action="{ text:t('components.library.Radios.button.create'), to:'/library/radios/build' }" />
<div class="ui hidden divider" /> <Layout flex form
<h3 class="ui header">
{{ t('components.library.Radios.header.user') }}
</h3>
<router-link
v-if="isAuthenticated"
class="ui success button"
to="/library/radios/build"
>
{{ t('components.library.Radios.button.create') }}
</router-link>
<div class="ui hidden divider" />
<form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search" @submit.prevent="search"
> >
<div class="fields"> <Input search
<div class="field"> id="radios-search"
<label for="radios-search">{{ t('components.library.Radios.label.search') }}</label> v-model="query"
<div class="ui action input"> name="search"
<input :label="t('components.library.Radios.label.search')"
id="radios-search" :placeholder="labels.searchPlaceholder"
v-model="query" />
type="text" <select
name="search" id="radios-ordering"
:placeholder="labels.searchPlaceholder" :label="t('components.library.Radios.ordering.label')"
> v-model="ordering"
<Button class="ui dropdown"
icon="bi-search" >
type="submit" <option
:aria-label="t('components.library.Radios.button.search')" v-for="(option, key) in orderingOptions"
> :key="key"
</Button> :value="option[0]"
</div> >
</div> {{ sharedLabels.filters[option[1]] }}
<div class="field"> </option>
<label for="radios-ordering">{{ t('components.library.Radios.ordering.label') }}</label> </select>
<select <select
id="radios-ordering" id="radios-ordering-direction"
v-model="ordering" :label="t('components.library.Radios.ordering.direction.label')"
class="ui dropdown" v-model="orderingDirection"
> class="ui dropdown"
<option >
v-for="(option, key) in orderingOptions" <option value="+">
:key="key" {{ t('components.library.Radios.ordering.direction.ascending') }}
:value="option[0]" </option>
> <option value="-">
{{ sharedLabels.filters[option[1]] }} {{ t('components.library.Radios.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> <select
<div class="field"> id="radios-results"
<label for="radios-ordering-direction">{{ t('components.library.Radios.ordering.direction.label') }}</label> :label="t('components.library.Radios.pagination.results')"
<select v-model="paginateBy"
id="radios-ordering-direction" class="ui dropdown"
v-model="orderingDirection" >
class="ui dropdown" <option
> v-for="opt in paginateOptions"
<option value="+"> :key="opt"
{{ t('components.library.Radios.ordering.direction.ascending') }} :value="opt"
</option> >
<option value="-"> {{ opt }}
{{ t('components.library.Radios.ordering.direction.descending') }} </option>
</option> </select>
</select> </Layout>
</div>
<div class="field">
<label for="radios-results">{{ t('components.library.Radios.pagination.results') }}</label>
<select
id="radios-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" /> <div class="ui hidden divider" />
<div <div
v-if="result && result.results.length === 0" v-if="result && result.results.length === 0"
@ -262,14 +232,10 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
:custom-radio="radio" :custom-radio="radio"
/> />
</div> </div>
<div class="ui center aligned basic segment"> <Pagination
<pagination v-if="result && result.count > paginateBy"
v-if="result && result.count > paginateBy" :page="page"
v-model:current="page" :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
:paginate-by="paginateBy" />
:total="result.count" </Layout>
/>
</div>
</section>
</main>
</template> </template>

94
front/src/components/radios/Card.vue
View File

@ -6,6 +6,7 @@ import { useStore } from '~/store'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import RadioButton from './Button.vue' import RadioButton from './Button.vue'
import Card from '~/components/ui/Card.vue'
interface Props { interface Props {
type: string type: string
@ -33,27 +34,18 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
</script> </script>
<template> <template>
<div class="ui card"> <Card
<div class="content"> v-if="radio.id"
<h4 class="header"> large
<router-link :title="radio.name"
v-if="radio.id" :to="{name: 'library.radios.detail', params: {id: radio.id}}"
class="discrete link" >
:to="{name: 'library.radios.detail', params: {id: radio.id}}" <div
> class="description"
{{ radio.name }} :class="{expanded: isDescriptionExpanded}"
</router-link> @click="isDescriptionExpanded = !isDescriptionExpanded"
<template v-else> >
{{ radio.name }} {{ radio.description }}
</template>
</h4>
<div
class="description"
:class="{expanded: isDescriptionExpanded}"
@click="isDescriptionExpanded = !isDescriptionExpanded"
>
{{ radio.description }}
</div>
</div> </div>
<div class="extra content"> <div class="extra content">
<user-link <user-link
@ -61,20 +53,50 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
:user="radio.user" :user="radio.user"
class="left floated" class="left floated"
/> />
<div class="ui hidden divider" /> <radio-button
<radio-button class="right floated button"
class="right floated button" :type="type"
:type="type" :custom-radio-id="customRadioId"
:custom-radio-id="customRadioId" :object-id="objectId"
:object-id="objectId" />
/> <Link
<router-link v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id" class="ui success button right floated"
class="ui success button right floated" :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
:to="{name: 'library.radios.edit', params: {id: customRadioId }}" >
> {{ t('components.radios.Card.button.edit') }}
{{ t('components.radios.Card.button.edit') }} </Link>
</router-link>
</div> </div>
</div> </Card>
<Card
v-else
large
:title="radio.name"
>
<div
class="description"
:class="{expanded: isDescriptionExpanded}"
@click="isDescriptionExpanded = !isDescriptionExpanded"
>
{{ radio.description }}
</div>
<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>
</div>
</Card>
</template> </template>