fix(front): playlist modal

This commit is contained in:
ArneBo 2025-02-12 11:39:28 +01:00
parent ebbdf31038
commit 863e8200e4
2 changed files with 167 additions and 182 deletions

View File

@ -7,7 +7,6 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
import axios from 'axios'
import $ from 'jquery'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useLogger from '~/composables/useLogger'
@ -59,10 +58,6 @@ const privacyLevelChoices = {
} as const satisfies Record<PrivacyLevel, string>;
const el = useCurrentElement()
onMounted(async () => {
await nextTick()
$(el.value).find('.dropdown').dropdown()
})
const isLoading = ref(false)
const submit = async () => {
@ -103,11 +98,11 @@ const submit = async () => {
<Layout form
@submit.prevent="submit()"
>
<h4
<h3
v-if="title"
>
{{ t('components.playlists.Form.header.createPlaylist') }}
</h4>
</h3>
<Alert
v-if="success"
green
@ -138,7 +133,6 @@ const submit = async () => {
</li>
</ul>
</Alert>
<div class="three fields">
<div class="field">
<label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
<Input
@ -168,6 +162,5 @@ const submit = async () => {
</template>
</Button>
</div>
</div>
</Layout>
</template>

View File

@ -16,6 +16,7 @@ import Button from '~/components/ui/Button.vue'
import Link from '~/components/ui/Link.vue'
import Alert from '~/components/ui/Alert.vue'
import Input from '~/components/ui/Input.vue'
import Spacer from '~/components/ui/Spacer.vue'
const logger = useLogger()
const store = useStore()
@ -83,6 +84,9 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
}
store.dispatch('playlists/fetchOwn')
watch(playlistNameFilter, () => console.log(playlistNameFilter.value))
watch(sortedPlaylists, () => console.log(sortedPlaylists.value))
watch(playlists, () => console.log(playlists.value))
</script>
<template>
@ -91,30 +95,17 @@ store.dispatch('playlists/fetchOwn')
:title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
:cancel="t('components.playlists.PlaylistModal.button.cancel')"
>
<h4 class="header">
<template v-if="track">
// TODO: Check subheader
<h2 class="ui header">
<h3 class="ui header">
{{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
<div class="ui sub header">
{{ t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
</div>
</h2>
</h3>
</template>
<span v-else>
{{ t('components.playlists.PlaylistModal.header.manage') }}
</span>
</h4>
<div class="scrolling content">
<playlist-form
:key="formKey"
:create="true"
/>
<div class="ui divider" />
<div v-if="playlists.length > 0">
<Alert
v-if="showDuplicateTrackAddConfirmation"
role="alert"
yellow
>
<p>
@ -147,22 +138,16 @@ store.dispatch('playlists/fetchOwn')
</li>
</ul>
</Alert>
<h4 class="ui header">
{{ t('components.playlists.PlaylistModal.header.available') }}
</h4>
<div class="ui form">
<div class="fields">
<div class="field">
<label for="playlist-name-filter">{{ t('components.playlists.PlaylistModal.label.filter') }}</label>
<Input
search
<!-- <Input
id="playlist-name-filter"
v-model="playlistNameFilter"
:placeholder="labels.filterPlaylistField"
/>
</div>
</div>
</div>
:label="t('components.playlists.PlaylistModal.label.filter')"
/> -->
<table
v-if="sortedPlaylists.length > 0"
class="ui unstackable very basic table"
@ -223,11 +208,12 @@ store.dispatch('playlists/fetchOwn')
</tbody>
</table>
<template v-else>
<div class="ui small placeholder segment component-placeholder">
<h4 class="ui header">
<Spacer />
<Alert blue>
<span>
{{ t('components.playlists.PlaylistModal.header.noResults') }}
</h4>
</div>
</span>
</Alert>
</template>
</div>
<div
@ -239,6 +225,12 @@ store.dispatch('playlists/fetchOwn')
{{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
</div>
</div>
</div>
<Spacer />
<playlist-form
:key="formKey"
:create="true"
/>
</Modal>
</template>