fix(front): indentation
This commit is contained in:
ArneBo
parent
5f392150e8
commit
9dfb1bab00
|
|
@ -131,123 +131,123 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Layout stack main v-title="labels.title">
|
<Layout stack main v-title="labels.title">
|
||||||
<Header :h1="t('components.library.Albums.header.browse')" />
|
<Header :h1="t('components.library.Albums.header.browse')" />
|
||||||
<Layout form flex
|
<Layout form flex
|
||||||
:class="['ui', {'loading': isLoading}, 'form']"
|
:class="['ui', {'loading': isLoading}, 'form']"
|
||||||
@submit.prevent="search"
|
@submit.prevent="search"
|
||||||
|
>
|
||||||
|
<Input search
|
||||||
|
id="album-search"
|
||||||
|
v-model="query"
|
||||||
|
name="search"
|
||||||
|
:label="t('components.library.Albums.label.search')"
|
||||||
|
autofocus
|
||||||
|
:placeholder="labels.searchPlaceholder"
|
||||||
>
|
>
|
||||||
<Input search
|
</Input>
|
||||||
id="album-search"
|
<Pills
|
||||||
v-model="query"
|
v-model="tagList"
|
||||||
name="search"
|
:label="t('components.library.Albums.label.tags')"
|
||||||
:label="t('components.library.Albums.label.search')"
|
style="max-width: 150px;"
|
||||||
autofocus
|
|
||||||
:placeholder="labels.searchPlaceholder"
|
|
||||||
>
|
|
||||||
</Input>
|
|
||||||
<Pills
|
|
||||||
v-model="tagList"
|
|
||||||
:label="t('components.library.Albums.label.tags')"
|
|
||||||
style="max-width: 150px;"
|
|
||||||
/>
|
|
||||||
<Layout stack noGap label for="album-ordering">
|
|
||||||
<span class="label">
|
|
||||||
{{ t('components.library.Albums.ordering.label') }}
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
id="album-ordering"
|
|
||||||
v-model="ordering"
|
|
||||||
class="dropdown"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="(option, key) in orderingOptions"
|
|
||||||
:key="key"
|
|
||||||
:value="option[0]"
|
|
||||||
>
|
|
||||||
{{ sharedLabels.filters[option[1]] }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</Layout>
|
|
||||||
<Layout stack noGap label for="album-ordering-direction">
|
|
||||||
<span class="label">
|
|
||||||
{{ t('components.library.Albums.ordering.direction.label') }}
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
id="album-ordering-direction"
|
|
||||||
v-model="orderingDirection"
|
|
||||||
class="dropdown"
|
|
||||||
>
|
|
||||||
<option value="+">
|
|
||||||
{{ t('components.library.Albums.ordering.direction.ascending') }}
|
|
||||||
</option>
|
|
||||||
<option value="-">
|
|
||||||
{{ t('components.library.Albums.ordering.direction.descending') }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</Layout>
|
|
||||||
<Layout stack noGap label for="album-results">
|
|
||||||
<span class="label">
|
|
||||||
{{ t('components.library.Albums.pagination.results') }}
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
id="album-results"
|
|
||||||
v-model="paginateBy"
|
|
||||||
class="dropdown"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="opt in paginateOptions"
|
|
||||||
:key="opt"
|
|
||||||
:value="opt"
|
|
||||||
>
|
|
||||||
{{ opt }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
<Loader v-if="isLoading"/>
|
|
||||||
<Pagination
|
|
||||||
v-if="result && result.count > paginateBy"
|
|
||||||
v-model:page="page"
|
|
||||||
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
|
||||||
/>
|
/>
|
||||||
<Layout grid
|
<Layout stack noGap label for="album-ordering">
|
||||||
v-if="result && result.results.length > 0"
|
<span class="label">
|
||||||
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
{{ t('components.library.Albums.ordering.label') }}
|
||||||
>
|
</span>
|
||||||
<AlbumCard
|
<select
|
||||||
v-for="album in result.results"
|
id="album-ordering"
|
||||||
:key="album.id"
|
v-model="ordering"
|
||||||
:album="album"
|
class="dropdown"
|
||||||
/>
|
|
||||||
</Layout>
|
|
||||||
<Layout
|
|
||||||
stack
|
|
||||||
v-else-if="result && result.results.length === 0"
|
|
||||||
>
|
|
||||||
<Alert yellow>
|
|
||||||
<i class="bi bi-disc" />
|
|
||||||
{{ t('components.library.Albums.empty.noResults') }}
|
|
||||||
</Alert>
|
|
||||||
<Card
|
|
||||||
v-if="store.state.auth.authenticated"
|
|
||||||
:title="t('components.library.Albums.link.addMusic')"
|
|
||||||
solid
|
|
||||||
small
|
|
||||||
primary
|
|
||||||
style="text-align: center;"
|
|
||||||
:to="useModal('upload').to"
|
|
||||||
>
|
>
|
||||||
<template #image>
|
<option
|
||||||
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
|
v-for="(option, key) in orderingOptions"
|
||||||
</template>
|
:key="key"
|
||||||
</Card>
|
:value="option[0]"
|
||||||
|
>
|
||||||
|
{{ sharedLabels.filters[option[1]] }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
</Layout>
|
</Layout>
|
||||||
<Spacer grow />
|
<Layout stack noGap label for="album-ordering-direction">
|
||||||
<Pagination
|
<span class="label">
|
||||||
v-if="result && result.count > paginateBy"
|
{{ t('components.library.Albums.ordering.direction.label') }}
|
||||||
v-model:page="page"
|
</span>
|
||||||
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
<select
|
||||||
|
id="album-ordering-direction"
|
||||||
|
v-model="orderingDirection"
|
||||||
|
class="dropdown"
|
||||||
|
>
|
||||||
|
<option value="+">
|
||||||
|
{{ t('components.library.Albums.ordering.direction.ascending') }}
|
||||||
|
</option>
|
||||||
|
<option value="-">
|
||||||
|
{{ t('components.library.Albums.ordering.direction.descending') }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</Layout>
|
||||||
|
<Layout stack noGap label for="album-results">
|
||||||
|
<span class="label">
|
||||||
|
{{ t('components.library.Albums.pagination.results') }}
|
||||||
|
</span>
|
||||||
|
<select
|
||||||
|
id="album-results"
|
||||||
|
v-model="paginateBy"
|
||||||
|
class="dropdown"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="opt in paginateOptions"
|
||||||
|
:key="opt"
|
||||||
|
:value="opt"
|
||||||
|
>
|
||||||
|
{{ opt }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
<Loader v-if="isLoading"/>
|
||||||
|
<Pagination
|
||||||
|
v-if="result && result.count > paginateBy"
|
||||||
|
v-model:page="page"
|
||||||
|
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
||||||
|
/>
|
||||||
|
<Layout grid
|
||||||
|
v-if="result && result.results.length > 0"
|
||||||
|
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
|
||||||
|
>
|
||||||
|
<AlbumCard
|
||||||
|
v-for="album in result.results"
|
||||||
|
:key="album.id"
|
||||||
|
:album="album"
|
||||||
/>
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
<Layout
|
||||||
|
stack
|
||||||
|
v-else-if="result && result.results.length === 0"
|
||||||
|
>
|
||||||
|
<Alert yellow>
|
||||||
|
<i class="bi bi-disc" />
|
||||||
|
{{ t('components.library.Albums.empty.noResults') }}
|
||||||
|
</Alert>
|
||||||
|
<Card
|
||||||
|
v-if="store.state.auth.authenticated"
|
||||||
|
:title="t('components.library.Albums.link.addMusic')"
|
||||||
|
solid
|
||||||
|
small
|
||||||
|
primary
|
||||||
|
style="text-align: center;"
|
||||||
|
:to="useModal('upload').to"
|
||||||
|
>
|
||||||
|
<template #image>
|
||||||
|
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
</Layout>
|
||||||
|
<Spacer grow />
|
||||||
|
<Pagination
|
||||||
|
v-if="result && result.count > paginateBy"
|
||||||
|
v-model:page="page"
|
||||||
|
:pages="Math.ceil((result.count || 0)/paginateBy)"
|
||||||
|
/>
|
||||||
|
</Layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue