fix(front): playlist modal
This commit is contained in:
ArneBo
parent
ebbdf31038
commit
863e8200e4
|
|
@ -7,7 +7,6 @@ import { useI18n } from 'vue-i18n'
|
||||||
import { useStore } from '~/store'
|
import { useStore } from '~/store'
|
||||||
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import $ from 'jquery'
|
|
||||||
|
|
||||||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||||
import useLogger from '~/composables/useLogger'
|
import useLogger from '~/composables/useLogger'
|
||||||
|
|
@ -59,10 +58,6 @@ const privacyLevelChoices = {
|
||||||
} as const satisfies Record<PrivacyLevel, string>;
|
} as const satisfies Record<PrivacyLevel, string>;
|
||||||
|
|
||||||
const el = useCurrentElement()
|
const el = useCurrentElement()
|
||||||
onMounted(async () => {
|
|
||||||
await nextTick()
|
|
||||||
$(el.value).find('.dropdown').dropdown()
|
|
||||||
})
|
|
||||||
|
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
|
|
@ -103,11 +98,11 @@ const submit = async () => {
|
||||||
<Layout form
|
<Layout form
|
||||||
@submit.prevent="submit()"
|
@submit.prevent="submit()"
|
||||||
>
|
>
|
||||||
<h4
|
<h3
|
||||||
v-if="title"
|
v-if="title"
|
||||||
>
|
>
|
||||||
{{ t('components.playlists.Form.header.createPlaylist') }}
|
{{ t('components.playlists.Form.header.createPlaylist') }}
|
||||||
</h4>
|
</h3>
|
||||||
<Alert
|
<Alert
|
||||||
v-if="success"
|
v-if="success"
|
||||||
green
|
green
|
||||||
|
|
@ -138,36 +133,34 @@ const submit = async () => {
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Alert>
|
</Alert>
|
||||||
<div class="three fields">
|
<div class="field">
|
||||||
<div class="field">
|
<label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
|
||||||
<label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
|
<Input
|
||||||
<Input
|
id="playlist-name"
|
||||||
id="playlist-name"
|
v-model="name"
|
||||||
v-model="name"
|
name="name"
|
||||||
name="name"
|
required
|
||||||
required
|
type="text"
|
||||||
type="text"
|
:placeholder="labels.placeholder"
|
||||||
:placeholder="labels.placeholder"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<div class="field">
|
||||||
<div class="field">
|
<Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
|
||||||
<Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
|
</div>
|
||||||
</div>
|
<div class="field">
|
||||||
<div class="field">
|
<span id="updatePlaylistLabel" />
|
||||||
<span id="updatePlaylistLabel" />
|
<Button
|
||||||
<Button
|
primary
|
||||||
primary
|
:class="['ui', 'fluid', {'loading': isLoading}, 'button']"
|
||||||
:class="['ui', 'fluid', {'loading': isLoading}, 'button']"
|
type="submit"
|
||||||
type="submit"
|
>
|
||||||
>
|
<template v-if="playlist">
|
||||||
<template v-if="playlist">
|
{{ t('components.playlists.Form.button.update') }}
|
||||||
{{ t('components.playlists.Form.button.update') }}
|
</template>
|
||||||
</template>
|
<template v-else>
|
||||||
<template v-else>
|
{{ t('components.playlists.Form.button.create') }}
|
||||||
{{ t('components.playlists.Form.button.create') }}
|
</template>
|
||||||
</template>
|
</Button>
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ import Button from '~/components/ui/Button.vue'
|
||||||
import Link from '~/components/ui/Link.vue'
|
import Link from '~/components/ui/Link.vue'
|
||||||
import Alert from '~/components/ui/Alert.vue'
|
import Alert from '~/components/ui/Alert.vue'
|
||||||
import Input from '~/components/ui/Input.vue'
|
import Input from '~/components/ui/Input.vue'
|
||||||
|
import Spacer from '~/components/ui/Spacer.vue'
|
||||||
|
|
||||||
const logger = useLogger()
|
const logger = useLogger()
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
|
|
@ -83,6 +84,9 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
store.dispatch('playlists/fetchOwn')
|
store.dispatch('playlists/fetchOwn')
|
||||||
|
watch(playlistNameFilter, () => console.log(playlistNameFilter.value))
|
||||||
|
watch(sortedPlaylists, () => console.log(sortedPlaylists.value))
|
||||||
|
watch(playlists, () => console.log(playlists.value))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -91,154 +95,142 @@ store.dispatch('playlists/fetchOwn')
|
||||||
:title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
|
:title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
|
||||||
:cancel="t('components.playlists.PlaylistModal.button.cancel')"
|
:cancel="t('components.playlists.PlaylistModal.button.cancel')"
|
||||||
>
|
>
|
||||||
<h4 class="header">
|
<template v-if="track">
|
||||||
<template v-if="track">
|
<h3 class="ui header">
|
||||||
// TODO: Check subheader
|
{{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
|
||||||
<h2 class="ui header">
|
<div class="ui sub header">
|
||||||
{{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
|
{{ t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
|
||||||
<div class="ui sub header">
|
|
||||||
{{ t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
|
|
||||||
</div>
|
|
||||||
</h2>
|
|
||||||
</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>
|
|
||||||
<i18n-t keypath="components.playlists.PlaylistModal.warning.duplicate">
|
|
||||||
<strong>{{ track?.title }}</strong>
|
|
||||||
<strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
|
|
||||||
</i18n-t>
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
primary
|
|
||||||
@click="addToPlaylist(lastSelectedPlaylist, true)"
|
|
||||||
>
|
|
||||||
{{ t('components.playlists.PlaylistModal.button.addDuplicate') }}
|
|
||||||
</Button>
|
|
||||||
</Alert>
|
|
||||||
<Alert
|
|
||||||
v-if="errors.length > 0"
|
|
||||||
role="alert"
|
|
||||||
red
|
|
||||||
>
|
|
||||||
<h4 class="header">
|
|
||||||
{{ t('components.playlists.PlaylistModal.header.addFailure') }}
|
|
||||||
</h4>
|
|
||||||
<ul class="list">
|
|
||||||
<li
|
|
||||||
v-for="(error, key) in errors"
|
|
||||||
:key="key"
|
|
||||||
>
|
|
||||||
{{ error }}
|
|
||||||
</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
|
|
||||||
id="playlist-name-filter"
|
|
||||||
v-model="playlistNameFilter"
|
|
||||||
:placeholder="labels.filterPlaylistField"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<table
|
</h3>
|
||||||
v-if="sortedPlaylists.length > 0"
|
</template>
|
||||||
class="ui unstackable very basic table"
|
<div v-if="playlists.length > 0">
|
||||||
>
|
<Alert
|
||||||
<thead>
|
v-if="showDuplicateTrackAddConfirmation"
|
||||||
<tr>
|
yellow
|
||||||
<th><span class="visually-hidden">{{ t('components.playlists.PlaylistModal.table.edit.header.edit') }}</span></th>
|
|
||||||
<th>
|
|
||||||
{{ t('components.playlists.PlaylistModal.table.edit.header.name') }}
|
|
||||||
</th>
|
|
||||||
<th class="sorted descending">
|
|
||||||
{{ t('components.playlists.PlaylistModal.table.edit.header.lastModification') }}
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
{{ t('components.playlists.PlaylistModal.table.edit.header.tracks') }}
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr
|
|
||||||
v-for="(playlist, key) in sortedPlaylists"
|
|
||||||
:key="key"
|
|
||||||
>
|
|
||||||
<td>
|
|
||||||
<Link
|
|
||||||
solid
|
|
||||||
secondary
|
|
||||||
square-small
|
|
||||||
:to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
|
|
||||||
icon="bi-pencil-fill"
|
|
||||||
>
|
|
||||||
<span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
|
|
||||||
</Link>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<router-link
|
|
||||||
:to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
|
|
||||||
@click="store.state.playlists.showModal = false"
|
|
||||||
>
|
|
||||||
{{ playlist.name }}
|
|
||||||
</router-link>
|
|
||||||
</td>
|
|
||||||
<td><human-date :date="playlist.modification_date" /></td>
|
|
||||||
<td>{{ playlist.tracks_count }}</td>
|
|
||||||
<td>
|
|
||||||
<Button
|
|
||||||
v-if="track"
|
|
||||||
low-height
|
|
||||||
secondary
|
|
||||||
:title="labels.addToPlaylist"
|
|
||||||
icon="bi-plus"
|
|
||||||
@click.prevent="addToPlaylist(playlist.id, false)"
|
|
||||||
>
|
|
||||||
{{ t('components.playlists.PlaylistModal.button.addTrack') }}
|
|
||||||
</Button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<template v-else>
|
|
||||||
<div class="ui small placeholder segment component-placeholder">
|
|
||||||
<h4 class="ui header">
|
|
||||||
{{ t('components.playlists.PlaylistModal.header.noResults') }}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="ui placeholder segment"
|
|
||||||
>
|
>
|
||||||
<div class="ui icon header">
|
<p>
|
||||||
<i class="bi bi-list" />
|
<i18n-t keypath="components.playlists.PlaylistModal.warning.duplicate">
|
||||||
{{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
|
<strong>{{ track?.title }}</strong>
|
||||||
</div>
|
<strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
|
||||||
|
</i18n-t>
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
primary
|
||||||
|
@click="addToPlaylist(lastSelectedPlaylist, true)"
|
||||||
|
>
|
||||||
|
{{ t('components.playlists.PlaylistModal.button.addDuplicate') }}
|
||||||
|
</Button>
|
||||||
|
</Alert>
|
||||||
|
<Alert
|
||||||
|
v-if="errors.length > 0"
|
||||||
|
role="alert"
|
||||||
|
red
|
||||||
|
>
|
||||||
|
<h4 class="header">
|
||||||
|
{{ t('components.playlists.PlaylistModal.header.addFailure') }}
|
||||||
|
</h4>
|
||||||
|
<ul class="list">
|
||||||
|
<li
|
||||||
|
v-for="(error, key) in errors"
|
||||||
|
:key="key"
|
||||||
|
>
|
||||||
|
{{ error }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<h4 class="ui header">
|
||||||
|
{{ t('components.playlists.PlaylistModal.header.available') }}
|
||||||
|
</h4>
|
||||||
|
<!-- <Input
|
||||||
|
id="playlist-name-filter"
|
||||||
|
v-model="playlistNameFilter"
|
||||||
|
:placeholder="labels.filterPlaylistField"
|
||||||
|
:label="t('components.playlists.PlaylistModal.label.filter')"
|
||||||
|
/> -->
|
||||||
|
<table
|
||||||
|
v-if="sortedPlaylists.length > 0"
|
||||||
|
class="ui unstackable very basic table"
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th><span class="visually-hidden">{{ t('components.playlists.PlaylistModal.table.edit.header.edit') }}</span></th>
|
||||||
|
<th>
|
||||||
|
{{ t('components.playlists.PlaylistModal.table.edit.header.name') }}
|
||||||
|
</th>
|
||||||
|
<th class="sorted descending">
|
||||||
|
{{ t('components.playlists.PlaylistModal.table.edit.header.lastModification') }}
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
{{ t('components.playlists.PlaylistModal.table.edit.header.tracks') }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="(playlist, key) in sortedPlaylists"
|
||||||
|
:key="key"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
<Link
|
||||||
|
solid
|
||||||
|
secondary
|
||||||
|
square-small
|
||||||
|
:to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
|
||||||
|
icon="bi-pencil-fill"
|
||||||
|
>
|
||||||
|
<span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<router-link
|
||||||
|
:to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
|
||||||
|
@click="store.state.playlists.showModal = false"
|
||||||
|
>
|
||||||
|
{{ playlist.name }}
|
||||||
|
</router-link>
|
||||||
|
</td>
|
||||||
|
<td><human-date :date="playlist.modification_date" /></td>
|
||||||
|
<td>{{ playlist.tracks_count }}</td>
|
||||||
|
<td>
|
||||||
|
<Button
|
||||||
|
v-if="track"
|
||||||
|
low-height
|
||||||
|
secondary
|
||||||
|
:title="labels.addToPlaylist"
|
||||||
|
icon="bi-plus"
|
||||||
|
@click.prevent="addToPlaylist(playlist.id, false)"
|
||||||
|
>
|
||||||
|
{{ t('components.playlists.PlaylistModal.button.addTrack') }}
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<template v-else>
|
||||||
|
<Spacer />
|
||||||
|
<Alert blue>
|
||||||
|
<span>
|
||||||
|
{{ t('components.playlists.PlaylistModal.header.noResults') }}
|
||||||
|
</span>
|
||||||
|
</Alert>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="ui placeholder segment"
|
||||||
|
>
|
||||||
|
<div class="ui icon header">
|
||||||
|
<i class="bi bi-list" />
|
||||||
|
{{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Spacer />
|
||||||
|
|
||||||
|
<playlist-form
|
||||||
|
:key="formKey"
|
||||||
|
:create="true"
|
||||||
|
/>
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue