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)"
> >

86
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,48 +147,23 @@ 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">
<label for="radios-search">{{ t('components.library.Radios.label.search') }}</label>
<div class="ui action input">
<input
id="radios-search" id="radios-search"
v-model="query" v-model="query"
type="text"
name="search" name="search"
:label="t('components.library.Radios.label.search')"
:placeholder="labels.searchPlaceholder" :placeholder="labels.searchPlaceholder"
> />
<Button
icon="bi-search"
type="submit"
:aria-label="t('components.library.Radios.button.search')"
>
</Button>
</div>
</div>
<div class="field">
<label for="radios-ordering">{{ t('components.library.Radios.ordering.label') }}</label>
<select <select
id="radios-ordering" id="radios-ordering"
:label="t('components.library.Radios.ordering.label')"
v-model="ordering" v-model="ordering"
class="ui dropdown" class="ui dropdown"
> >
@ -199,11 +175,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ sharedLabels.filters[option[1]] }} {{ sharedLabels.filters[option[1]] }}
</option> </option>
</select> </select>
</div>
<div class="field">
<label for="radios-ordering-direction">{{ t('components.library.Radios.ordering.direction.label') }}</label>
<select <select
id="radios-ordering-direction" id="radios-ordering-direction"
:label="t('components.library.Radios.ordering.direction.label')"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
@ -214,11 +188,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ t('components.library.Radios.ordering.direction.descending') }} {{ t('components.library.Radios.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div>
<div class="field">
<label for="radios-results">{{ t('components.library.Radios.pagination.results') }}</label>
<select <select
id="radios-results" id="radios-results"
:label="t('components.library.Radios.pagination.results')"
v-model="paginateBy" v-model="paginateBy"
class="ui dropdown" class="ui dropdown"
> >
@ -230,9 +202,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ opt }} {{ opt }}
</option> </option>
</select> </select>
</div> </Layout>
</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"
v-model:current="page" :page="page"
:paginate-by="paginateBy" :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
:total="result.count"
/> />
</div> </Layout>
</section>
</main>
</template> </template>

52
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,20 +34,12 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
</script> </script>
<template> <template>
<div class="ui card"> <Card
<div class="content">
<h4 class="header">
<router-link
v-if="radio.id" v-if="radio.id"
class="discrete link" large
:title="radio.name"
:to="{name: 'library.radios.detail', params: {id: radio.id}}" :to="{name: 'library.radios.detail', params: {id: radio.id}}"
> >
{{ radio.name }}
</router-link>
<template v-else>
{{ radio.name }}
</template>
</h4>
<div <div
class="description" class="description"
:class="{expanded: isDescriptionExpanded}" :class="{expanded: isDescriptionExpanded}"
@ -54,27 +47,56 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
> >
{{ radio.description }} {{ radio.description }}
</div> </div>
</div>
<div class="extra content"> <div class="extra content">
<user-link <user-link
v-if="radio.user" v-if="radio.user"
: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"
/> />
<router-link <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') }}
</router-link> </Link>
</div> </div>
</Card>
<Card
v-else
large
:title="radio.name"
>
<div
class="description"
:class="{expanded: isDescriptionExpanded}"
@click="isDescriptionExpanded = !isDescriptionExpanded"
>
{{ radio.description }}
</div> </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>