kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
Fix actions not being arrays in components using smart search
wvffle
Georg Krause
rodzic
15e62d62f6
commit
21e5d8ddf0
|
|
@ -34,7 +34,7 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
|||
]
|
||||
|
||||
const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
|
||||
const actions = () => []
|
||||
const actions = []
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
|
|
|
|||
|
|
@ -34,21 +34,18 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
|||
['name', 'name']
|
||||
]
|
||||
|
||||
const { $pgettext } = useGettext()
|
||||
const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
|
||||
const actions = () => {
|
||||
const deleteLabel = $pgettext('*/*/*/Verb', 'Delete')
|
||||
const confirmationMessage = $pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.')
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: deleteLabel,
|
||||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
const actions = [
|
||||
{
|
||||
name: 'delete',
|
||||
label: $pgettext('*/*/*/Verb', 'Delete'),
|
||||
confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.'),
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
|
|
@ -89,7 +86,6 @@ onOrderingUpdate(fetchData)
|
|||
fetchData()
|
||||
|
||||
const sharedLabels = useSharedLabels()
|
||||
const { $pgettext } = useGettext()
|
||||
const labels = computed(() => ({
|
||||
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, title, artist, MusicBrainz ID…'),
|
||||
openModeration: $pgettext('Content/Moderation/Verb', 'Open in moderation interface')
|
||||
|
|
|
|||
|
|
@ -34,20 +34,16 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
|||
]
|
||||
|
||||
const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
|
||||
const actions = () => {
|
||||
const deleteLabel = $pgettext('*/*/*/Verb', 'Delete')
|
||||
const confirmationMessage = $pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.')
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: deleteLabel,
|
||||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
const actions = () => [
|
||||
{
|
||||
name: 'delete',
|
||||
label: $pgettext('*/*/*/Verb', 'Delete'),
|
||||
confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.'),
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import axios from 'axios'
|
||||
import { uniq, merge } from 'lodash-es'
|
||||
import { uniq } from 'lodash-es'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import EditCard from '~/components/library/EditCard.vue'
|
||||
import { normalizeQuery, parseTokens } from '~/utils/search'
|
||||
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import useEditConfigs from '~/composables/moderation/useEditConfigs'
|
||||
import useEditConfigs, { EditObjectType } from '~/composables/moderation/useEditConfigs'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
|
||||
interface Props extends SmartSearchProps, OrderingProps {
|
||||
// TODO (wvffle): find object type
|
||||
|
|
@ -27,7 +26,10 @@ const configs = useEditConfigs()
|
|||
|
||||
// TODO (wvffle): Make sure everything is it's own type
|
||||
const page = ref(1)
|
||||
type ResponseType = { count: number, results: { target?: { type: string, id: number } }[] }
|
||||
|
||||
type StateTarget = { id: number, type: keyof typeof targets }
|
||||
type ResponseResult = { uuid: string, is_approved: boolean, target?: StateTarget }
|
||||
type ResponseType = { count: number, results: ResponseResult[] }
|
||||
const result = ref<null | ResponseType>(null)
|
||||
|
||||
const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
|
||||
|
|
@ -38,20 +40,27 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
|||
['applied_date', 'applied_date']
|
||||
]
|
||||
|
||||
interface TargetType {
|
||||
payload: ResponseResult
|
||||
currentState: Record<EditObjectType, { value: unknown }>
|
||||
}
|
||||
|
||||
const targets = reactive({
|
||||
track: {}
|
||||
track: {} as Record<string, TargetType>
|
||||
})
|
||||
|
||||
const fetchTargets = async () => {
|
||||
// we request target data via the API so we can display previous state
|
||||
// additionnal data next to the edit card
|
||||
const typesAndIds = {
|
||||
track: { url: 'tracks/', ids: [] as number[] }
|
||||
type Config = { url: string, ids: number[] }
|
||||
const typesAndIds: Record<keyof typeof targets, Config> = {
|
||||
track: { url: 'tracks/', ids: [] }
|
||||
}
|
||||
|
||||
for (const res of result.value?.results ?? []) {
|
||||
const typeAndId = typesAndIds[result.target?.type as keyof typeof typesAndIds]
|
||||
typeAndId?.ids.push(result.target.id)
|
||||
if (!res.target) continue
|
||||
const typeAndId = typesAndIds[res.target.type as keyof typeof typesAndIds]
|
||||
typeAndId?.ids.push(res.target.id)
|
||||
}
|
||||
|
||||
for (const [key, config] of Object.entries(typesAndIds)) {
|
||||
|
|
@ -68,13 +77,13 @@ const fetchTargets = async () => {
|
|||
// TODO (wvffle): Handle error
|
||||
})
|
||||
|
||||
for (const payload of response.data.results) {
|
||||
targets[key][payload.id] = {
|
||||
for (const payload of response?.data?.results ?? []) {
|
||||
targets[key as keyof typeof targets][payload.id] = {
|
||||
payload,
|
||||
currentState: configs[key].fields.reduce((state, field) => {
|
||||
currentState: configs[key as keyof typeof targets].fields.reduce((state, field) => {
|
||||
state[field.id] = { value: field.getValue(payload) }
|
||||
return state
|
||||
})
|
||||
}, {} as Record<EditObjectType, { value: unknown }>)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,33 +133,19 @@ const { $pgettext } = useGettext()
|
|||
const labels = computed(() => ({
|
||||
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by account, summary, domain…')
|
||||
}))
|
||||
export default {
|
||||
methods: {
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
},
|
||||
handle (type, id, value) {
|
||||
if (type === 'delete') {
|
||||
this.exclude.push(id)
|
||||
}
|
||||
|
||||
this.result.results.forEach((e) => {
|
||||
if (e.uuid === id) {
|
||||
e.is_approved = value
|
||||
}
|
||||
})
|
||||
},
|
||||
getCurrentState (target) {
|
||||
if (!target) {
|
||||
return {}
|
||||
}
|
||||
if (this.targets[target.type] && this.targets[target.type][String(target.id)]) {
|
||||
return this.targets[target.type][String(target.id)].currentState
|
||||
}
|
||||
return {}
|
||||
const handle = (type: 'delete' | 'approved', id: string, value: boolean) => {
|
||||
for (const entry of result.value?.results ?? []) {
|
||||
if (entry.uuid === id) {
|
||||
entry.is_approved = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getCurrentState = (target?: StateTarget): object => {
|
||||
if (!target) return {}
|
||||
return targets[target.type]?.[target.id]?.currentState ?? {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -160,13 +155,13 @@ export default {
|
|||
<div class="fields">
|
||||
<div class="ui field">
|
||||
<label for="search-edits"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
|
||||
<form @submit.prevent="search.query = $refs.search.value">
|
||||
<form @submit.prevent="query = $refs.search.value">
|
||||
<input
|
||||
id="search-edits"
|
||||
ref="search"
|
||||
name="search"
|
||||
type="text"
|
||||
:value="search.query"
|
||||
:value="query"
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</form>
|
||||
|
|
@ -177,7 +172,7 @@ export default {
|
|||
id="edit-status"
|
||||
class="ui dropdown"
|
||||
:value="getTokenValue('is_approved', '')"
|
||||
@change="addSearchToken('is_approved', $event.target.value)"
|
||||
@change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="">
|
||||
<translate translate-context="Content/*/Dropdown">
|
||||
|
|
@ -247,11 +242,11 @@ export default {
|
|||
</div>
|
||||
<div v-else-if="result?.count > 0">
|
||||
<edit-card
|
||||
v-for="obj in result.results"
|
||||
v-for="obj in result?.results ?? []"
|
||||
:key="obj.uuid"
|
||||
:obj="obj"
|
||||
:current-state="getCurrentState(obj.target)"
|
||||
@deleted="handle('delete', obj.uuid, null)"
|
||||
@deleted="handle('delete', obj.uuid, false)"
|
||||
@approved="handle('approved', obj.uuid, $event)"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -265,11 +260,10 @@ export default {
|
|||
<div>
|
||||
<pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:current="page"
|
||||
:compact="true"
|
||||
:current="page"
|
||||
:paginate-by="paginateBy"
|
||||
:total="result.count"
|
||||
@page-changed="selectPage"
|
||||
/>
|
||||
|
||||
<span v-if="result && result.results.length > 0">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,109 @@
|
|||
<script setup lang="ts">
|
||||
import axios from 'axios'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import ActionTable from '~/components/common/ActionTable.vue'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
|
||||
import useOrdering, { OrderingProps } from '~/composables/useOrdering'
|
||||
import { OrderingField } from '~/store/ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
|
||||
interface Props extends SmartSearchProps, OrderingProps {
|
||||
// TODO (wvffle): find object type
|
||||
filters?: object
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
defaultQuery: '',
|
||||
updateUrl: false,
|
||||
filters: () => ({})
|
||||
})
|
||||
|
||||
// TODO (wvffle): Make sure everything is it's own type
|
||||
const page = ref(1)
|
||||
type ResponseType = { count: number, results: any[] }
|
||||
const result = ref<null | ResponseType>(null)
|
||||
|
||||
const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
|
||||
const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
|
||||
|
||||
const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
|
||||
['creation_date', 'creation_date'],
|
||||
['followers_count', 'followers'],
|
||||
['uploads_count', 'uploads']
|
||||
]
|
||||
|
||||
const { $pgettext } = useGettext()
|
||||
const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
|
||||
const actions = [
|
||||
{
|
||||
name: 'delete',
|
||||
label: $pgettext('*/*/*/Verb', 'Delete'),
|
||||
confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected library will be removed, as well as associated uploads and follows. This action is irreversible.'),
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
|
||||
const isLoading = ref(false)
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
const params = {
|
||||
page: page.value,
|
||||
page_size: paginateBy.value,
|
||||
q: query.value,
|
||||
ordering: orderingString.value,
|
||||
...props.filters
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get('/manage/library/libraries/', {
|
||||
params
|
||||
// TODO (wvffle): Check if params should be serialized. In other similar components (Podcasts, Artists) they are
|
||||
// paramsSerializer: function (params) {
|
||||
// return qs.stringify(params, { indices: false })
|
||||
// }
|
||||
})
|
||||
|
||||
result.value = response.data
|
||||
} catch (error) {
|
||||
// TODO (wvffle): Handle error
|
||||
result.value = null
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onSearch(() => {
|
||||
page.value = 1
|
||||
fetchData()
|
||||
})
|
||||
|
||||
watch(page, fetchData)
|
||||
onOrderingUpdate(fetchData)
|
||||
fetchData()
|
||||
|
||||
const sharedLabels = useSharedLabels()
|
||||
const labels = computed(() => ({
|
||||
searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, actor, name, description…')
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui inline form">
|
||||
<div class="fields">
|
||||
<div class="ui six wide field">
|
||||
<label for="libraries-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
|
||||
<form @submit.prevent="search.query = $refs.search.value">
|
||||
<form @submit.prevent="query = $refs.search.value">
|
||||
<input
|
||||
id="libraries-search"
|
||||
ref="search"
|
||||
name="search"
|
||||
type="text"
|
||||
:value="search.query"
|
||||
:value="query"
|
||||
:placeholder="labels.searchPlaceholder"
|
||||
>
|
||||
</form>
|
||||
|
|
@ -21,7 +114,7 @@
|
|||
id="libraries-visibility"
|
||||
class="ui dropdown"
|
||||
:value="getTokenValue('privacy_level', '')"
|
||||
@change="addSearchToken('privacy_level', $event.target.value)"
|
||||
@change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="">
|
||||
<translate translate-context="Content/*/Dropdown">
|
||||
|
|
@ -194,11 +287,10 @@
|
|||
<div>
|
||||
<pagination
|
||||
v-if="result && result.count > paginateBy"
|
||||
v-model:current="page"
|
||||
:compact="true"
|
||||
:current="page"
|
||||
:paginate-by="paginateBy"
|
||||
:total="result.count"
|
||||
@page-changed="selectPage"
|
||||
/>
|
||||
|
||||
<span v-if="result && result.results.length > 0">
|
||||
|
|
@ -212,119 +304,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { merge } from 'lodash-es'
|
||||
import time from '~/utils/time'
|
||||
import { normalizeQuery, parseTokens } from '~/utils/search'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import ActionTable from '~/components/common/ActionTable.vue'
|
||||
import OrderingMixin from '~/components/mixins/Ordering.vue'
|
||||
import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
|
||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
ActionTable
|
||||
},
|
||||
mixins: [OrderingMixin, SmartSearchMixin],
|
||||
props: {
|
||||
filters: { type: Object, required: false, default: () => { return {} } }
|
||||
},
|
||||
setup () {
|
||||
const sharedLabels = useSharedLabels()
|
||||
return { sharedLabels }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
time,
|
||||
isLoading: false,
|
||||
result: null,
|
||||
page: 1,
|
||||
search: {
|
||||
query: this.defaultQuery,
|
||||
tokens: parseTokens(normalizeQuery(this.defaultQuery))
|
||||
},
|
||||
orderingOptions: [
|
||||
['creation_date', 'creation_date'],
|
||||
['followers_count', 'followers'],
|
||||
['uploads_count', 'uploads']
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, actor, name, description…')
|
||||
}
|
||||
},
|
||||
actionFilters () {
|
||||
const currentFilters = {
|
||||
q: this.search.query
|
||||
}
|
||||
if (this.filters) {
|
||||
return merge(currentFilters, this.filters)
|
||||
} else {
|
||||
return currentFilters
|
||||
}
|
||||
},
|
||||
actions () {
|
||||
const deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
|
||||
const confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected library will be removed, as well as associated uploads and follows. This action is irreversible.')
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: deleteLabel,
|
||||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
search (newValue) {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
page () {
|
||||
this.fetchData()
|
||||
},
|
||||
ordering () {
|
||||
this.fetchData()
|
||||
},
|
||||
orderingDirection () {
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
const params = merge({
|
||||
page: this.page,
|
||||
page_size: this.paginateBy,
|
||||
q: this.search.query,
|
||||
ordering: this.getOrderingAsString()
|
||||
}, this.filters)
|
||||
const self = this
|
||||
self.isLoading = true
|
||||
self.checked = []
|
||||
axios.get('/manage/library/libraries/', { params: params }).then((response) => {
|
||||
self.result = response.data
|
||||
self.isLoading = false
|
||||
}, error => {
|
||||
self.isLoading = false
|
||||
self.errors = error.backendErrors
|
||||
})
|
||||
},
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,13 @@ interface ConfigField {
|
|||
getValueRepr?: (obj: any) => string
|
||||
}
|
||||
|
||||
interface EditableConfigField extends ConfigField {
|
||||
id: EditObjectType
|
||||
}
|
||||
|
||||
export type EditObject = Artist | Album | Track
|
||||
export type EditObjectType = 'artist' | 'album' | 'track'
|
||||
type Configs = Record<EditObjectType, { fields: ConfigField[] }>
|
||||
type Configs = Record<EditObjectType, { fields: EditableConfigField[] }>
|
||||
|
||||
const { $pgettext } = gettext
|
||||
const getContentValueRepr = (val: Content) => val.text
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export type WebSocketEventName = 'inbox.item_added' | 'import.status_updated' |
|
|||
| 'report.created' | 'user_request.created' | 'Listen'
|
||||
|
||||
export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name' | 'release_date' | 'name'
|
||||
| 'applied_date'
|
||||
| 'applied_date' | 'followers_count' | 'uploads_count'
|
||||
|
||||
export type OrderingDirection = '-' | '+'
|
||||
interface RoutePreferences {
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue