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

feat(ui): [WIP] Artist page

This commit is contained in:
ArneBo 2024-12-30 12:54:39 +01:00 committed by upsiflu
parent fdaba924a1
commit 2818c3eff3
1 changed files with 71 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
front/src/components/library/Artists.vue
View File

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