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