fix(front): [WIP] Tags; function type

This commit is contained in:
upsiflu 2025-04-01 10:06:54 +02:00
parent ea3caac74d
commit d9c1b70f83
5 changed files with 27 additions and 21 deletions

View File

@ -50,8 +50,6 @@ const page = usePage()
const tags = useRouteQuery<string[]>('tag', [], { transform: (param: string | string[] | null) => (param === null ? [] : Array.isArray(param) ? param : [param]).filter(p => p.trim() !== '') })
const tagList = useTags(tags)
const q = useRouteQuery('query', '')
const query = ref(q.value ?? '')
syncRef(q, query, { direction: 'ltr' })
@ -153,9 +151,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
autofocus
:placeholder="labels.searchPlaceholder"
/>
{{ tagList }}
<Pills
v-model="tagList"
:get="model => { tags = model.currents.map(({ label }) => label) }"
:set="model => ({
...model,
currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
})"
:label="t('components.library.Albums.label.tags')"
style="max-width: 150px;"
/>

View File

@ -48,11 +48,6 @@ const page = usePage()
const tags = useRouteQuery<string[]>('tag', [])
const tagList = computed(() => ({
currents: [].map(tag => ({ type: 'custom' as const, label: tag })),
others: tags.value.map(tag => ({ type: 'custom' as const, label: tag }))
}))
const q = useRouteQuery('query', '')
const query = ref(q.value)
syncRef(q, query, { direction: 'ltr' })
@ -155,7 +150,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:placeholder="labels.searchPlaceholder"
/>
<Pills
v-model="tagList"
:get="model => { tags = model.currents.map(({ label }) => label) }"
:set="model => ({
...model,
currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
})"
:label="t('components.library.Artists.label.tags')"
style="max-width: 150px;"
/>

View File

@ -294,7 +294,11 @@ const resetField = (fieldId: string) => {
<Pills
:id="fieldConfig.id"
ref="tags"
v-model="values[fieldConfig.id]"
:get="model => { values[fieldConfig.id] = model.currents.map(({ label }) => label) }"
:set="model => ({
...model,
currents: (values[fieldConfig.id] as string[]).map(tag => ({ type: 'custom' as const, label: tag })),
})"
:label="fieldConfig.label"
required="fieldConfig.required"
>

View File

@ -61,8 +61,6 @@ const submittable = ref(false)
const tags = useRouteQuery<string[]>('tag', [])
const tagList = useTags(tags)
computed(() => ({
currents: [].map(tag => ({ type: 'custom' as const, label: tag })),
others: tags.value.map(tag => ({ type: 'custom' as const, label: tag }))
@ -156,7 +154,7 @@ const { to: upload } = useModal('upload')
:h1="t('components.library.Podcasts.header.browse')"
:action="{
text: t('views.channels.SubscriptionsList.link.addNew'),
onClick: ()=> channelIsOpen = true,
onClick: () => { channelIsOpen = true },
icon: 'bi-plus',
primary: true
}"
@ -177,7 +175,11 @@ const { to: upload } = useModal('upload')
:placeholder="labels.searchPlaceholder"
/>
<Pills
v-model="tagList"
:get="model => { tags = model.currents.map(({ label }) => label) }"
:set="model => ({
...model,
currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
})"
:label="t('components.library.Podcasts.label.tags')"
style="max-width: 150px;"
/>

View File

@ -76,10 +76,6 @@ const modalContent = ref()
const createForm = ref()
const page = usePage()
const tags = useRouteQuery<string[]>('tag', [])
const tagList = computed(() => ({
currents: [].map(tag => ({ type: 'custom' as const, label: tag })),
others: tags.value.map(tag => ({ type: 'custom' as const, label: tag }))
}))
const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props)
@ -203,7 +199,7 @@ const showCreateModal = ref(false)
:h1="t('views.auth.ProfileOverview.header.channels')"
:action="{
text: t('views.channels.SubscriptionsList.link.addNew'),
onClick: ()=> showCreateModal = true,
onClick: () => { showCreateModal = true },
icon: 'bi-plus',
primary: true
}"
@ -226,7 +222,11 @@ const showCreateModal = ref(false)
:placeholder="labels.searchPlaceholder"
/>
<Pills
v-model="tagList"
:get="model => { tags = model.currents.map(({ label }) => label) }"
:set="model => ({
...model,
currents: tags.map(tag => ({ type: 'custom' as const, label: tag })),
})"
:label="t('components.library.Podcasts.label.tags')"
style="max-width: 150px;"
/>