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

fix(ui): [WIP] Playlist Search

This commit is contained in:
ArneBo 2025-01-05 17:30:28 +01:00 committed by upsiflu
parent d83cfd714c
commit d5f8b674b8
1 changed files with 99 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
front/src/views/playlists/List.vue
View File

@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import ArtistCard from '~/components/artist/Card.vue'
import type { OrderingProps } from '~/composables/navigation/useOrdering' import type { OrderingProps } from '~/composables/navigation/useOrdering'
import type { Playlist, BackendResponse } from '~/types' import type { Artist, BackendResponse } from '~/types'
import type { RouteRecordName } from 'vue-router' import type { RouteRecordName } from 'vue-router'
import type { OrderingField } from '~/store/ui' import type { OrderingField } from '~/store/ui'
import { computed, onMounted, ref, watch } from 'vue' import { computed, ref, watch, onMounted } from 'vue'
import { useRouteQuery } from '@vueuse/router' import { useRouteQuery } from '@vueuse/router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { syncRef } from '@vueuse/core' import { syncRef } from '@vueuse/core'
@ -12,11 +13,13 @@ import { sortedUniq } from 'lodash-es'
import { useStore } from '~/store' import { useStore } from '~/store'
import axios from 'axios' import axios from 'axios'
import $ from 'jquery'
import PlaylistCardList from '~/components/playlists/CardList.vue' import Pagination from '~/components/ui/Pagination.vue'
import Pagination from '~/components/vui/Pagination.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 Alert from '~/components/ui/Alert.vue'
import Spacer from '~/components/ui/layout/Spacer.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'
@ -97,7 +100,7 @@ onOrderingUpdate(() => {
fetchData() fetchData()
}) })
onMounted(() => $('.ui.dropdown').dropdown()) // onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
@ -105,97 +108,92 @@ const labels = computed(() => ({
searchPlaceholder: t('views.playlists.List.placeholder.search') searchPlaceholder: t('views.playlists.List.placeholder.search')
})) }))
const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b))) const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
</script> </script>
<template> <template>
<main v-title="labels.playlists"> <Layout stack main>
<section class="ui vertical stripe segment"> <Layout
<h2 class="ui header"> flex
{{ t('views.playlists.List.header.browse') }} style="justify-content: space-between;"
</h2> v-if="store.state.auth.authenticated"
<template v-if="store.state.auth.authenticated"> >
<Button <h1>{{ t('views.playlists.List.header.browse') }}</h1>
@click="store.commit('playlists/showModal', true)" <Button
> primary
{{ t('views.playlists.List.button.manage') }} @click="store.commit('playlists/showModal', true)"
</Button>
<div class="ui hidden divider" />
</template>
<form
:class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search"
> >
<div class="fields"> {{ t('views.playlists.List.button.manage') }}
<div class="field"> </Button>
<label for="playlists-search">{{ t('views.playlists.List.label.search') }}</label> </Layout>
<div class="ui action input"> <template >
<input
id="playlists-search" </template>
v-model="query" <Layout form flex
type="text" :class="['ui', {'loading': isLoading}, 'form']"
name="search" @submit.prevent="search"
:placeholder="labels.searchPlaceholder" >
> <Input search
<Button id="playlists-search"
type="submit" v-model="query"
icon="bi-search" name="search"
:aria-label="t('views.playlists.List.button.search')" :label="t('views.playlists.List.label.search')"
> autofocus
<i class="search icon" /> :placeholder="labels.searchPlaceholder"
</Button> >
</div> </Input>
</div> <select
<div class="field"> id="playlists-ordering"
<label for="playlists-ordering">{{ t('views.playlists.List.ordering.label') }}</label> :label="t('views.playlists.List.ordering.label')"
<select v-model="ordering"
id="playlists-ordering" class="dropdown"
v-model="ordering" >
class="ui dropdown" <option
> v-for="(option, key) in orderingOptions"
<option :key="key"
v-for="option in orderingOptions" :value="option[0]"
:key="option[0]" >
:value="option[0]" {{ sharedLabels.filters[option[1]] }}
> </option>
{{ sharedLabels.filters[option[1]] }} </select>
</option> <select
</select> :label="t('views.playlists.List.ordering.direction.label')"
</div> id="playlists-ordering-direction"
<div class="field"> v-model="orderingDirection"
<label for="playlists-ordering-direction">{{ t('views.playlists.List.ordering.direction.label') }}</label> class="ui dropdown"
<select >
id="playlists-ordering-direction" <option value="+">
v-model="orderingDirection" {{ t('views.playlists.List.ordering.direction.ascending') }}
class="ui dropdown" </option>
> <option value="-">
<option value="+"> {{ t('views.playlists.List.ordering.direction.descending') }}
{{ t('views.playlists.List.ordering.direction.ascending') }} </option>
</option> </select>
<option value="-"> <select
{{ t('views.playlists.List.ordering.direction.descending') }} :label="t('views.playlists.List.pagination.results')"
</option> id="playlist-results"
</select> v-model="paginateBy"
</div> class="ui dropdown"
<div class="field"> >
<label for="playlists-results">{{ t('views.playlists.List.pagination.results') }}</label> <option
<select v-for="opt in paginateOptions"
id="playlists-results" :key="opt"
v-model="paginateBy" :value="opt"
class="ui dropdown" >
> {{ opt }}
<option </option>
v-for="opt in paginateOptions" </select>
:key="opt" </Layout>
:value="opt" <Layout grid
> v-if="result && result.results.length > 0"
{{ opt }} style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
</option> >
</select> <div
</div> v-if="isLoading"
</div> class="ui inverted active dimmer"
</form> >
<div class="ui hidden divider" /> <div class="ui loader" />
</div>
<playlist-card-list <playlist-card-list
v-if="result && result.results.length > 0" v-if="result && result.results.length > 0"
:playlists="result.results" :playlists="result.results"
@ -217,14 +215,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ t('views.playlists.List.button.create') }} {{ t('views.playlists.List.button.create') }}
</Button> </Button>
</div> </div>
<div class="ui center aligned basic segment"> </Layout>
<pagination <Spacer grow />
v-if="result && result.results.length > 0" <Pagination
v-model:current="page" v-if="result && result.count > paginateBy"
:paginate-by="paginateBy" :page="page"
:total="result.count" :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
/> />
</div> </Layout>
</section>
</main>
</template> </template>