refactor(front): playlist modal
This commit is contained in:
ArneBo
parent
600a404a70
commit
bf563626ba
|
|
@ -160,6 +160,7 @@ const submit = async () => {
|
|||
</div>
|
||||
<div class="field">
|
||||
<label for="playlist-visibility">{{ t('components.playlists.Form.label.visibility') }}</label>
|
||||
<!-- TODO: Replace with Slider.vue -->
|
||||
<select
|
||||
id="playlist-visibility"
|
||||
v-model="privacyLevel"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ import { ref, computed, watch } from 'vue'
|
|||
import { useRouter } from 'vue-router'
|
||||
import { generateTrackCreditString } from '~/utils/utils'
|
||||
|
||||
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'
|
||||
|
||||
const logger = useLogger()
|
||||
const store = useStore()
|
||||
|
||||
|
|
@ -84,6 +89,7 @@ store.dispatch('playlists/fetchOwn')
|
|||
<Modal
|
||||
v-model="store.state.playlists.showModal"
|
||||
:title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
|
||||
:cancel="t('components.playlists.PlaylistModal.button.cancel')"
|
||||
>
|
||||
<h4 class="header">
|
||||
<template v-if="track">
|
||||
|
|
@ -106,10 +112,10 @@ store.dispatch('playlists/fetchOwn')
|
|||
/>
|
||||
<div class="ui divider" />
|
||||
<div v-if="playlists.length > 0">
|
||||
<div
|
||||
<Alert
|
||||
v-if="showDuplicateTrackAddConfirmation"
|
||||
role="alert"
|
||||
class="ui warning message"
|
||||
yellow
|
||||
>
|
||||
<p>
|
||||
<i18n-t keypath="components.playlists.PlaylistModal.warning.duplicate">
|
||||
|
|
@ -117,23 +123,17 @@ store.dispatch('playlists/fetchOwn')
|
|||
<strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
|
||||
</i18n-t>
|
||||
</p>
|
||||
<button
|
||||
class="ui small basic cancel button"
|
||||
@click="showDuplicateTrackAddConfirmation = false"
|
||||
>
|
||||
{{ t('components.playlists.PlaylistModal.button.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="ui small success button"
|
||||
<Button
|
||||
primary
|
||||
@click="addToPlaylist(lastSelectedPlaylist, true)"
|
||||
>
|
||||
{{ t('components.playlists.PlaylistModal.button.addDuplicate') }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
</Button>
|
||||
</Alert>
|
||||
<Alert
|
||||
v-if="errors.length > 0"
|
||||
role="alert"
|
||||
class="ui negative message"
|
||||
red
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ t('components.playlists.PlaylistModal.header.addFailure') }}
|
||||
|
|
@ -146,7 +146,7 @@ store.dispatch('playlists/fetchOwn')
|
|||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Alert>
|
||||
<h4 class="ui header">
|
||||
{{ t('components.playlists.PlaylistModal.header.available') }}
|
||||
</h4>
|
||||
|
|
@ -154,13 +154,12 @@ store.dispatch('playlists/fetchOwn')
|
|||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="playlist-name-filter">{{ t('components.playlists.PlaylistModal.label.filter') }}</label>
|
||||
<input
|
||||
<Input
|
||||
search
|
||||
id="playlist-name-filter"
|
||||
v-model="playlistNameFilter"
|
||||
type="text"
|
||||
class="inline"
|
||||
:placeholder="labels.filterPlaylistField"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -188,13 +187,15 @@ store.dispatch('playlists/fetchOwn')
|
|||
:key="key"
|
||||
>
|
||||
<td>
|
||||
<router-link
|
||||
class="ui icon basic small button"
|
||||
<Link
|
||||
solid
|
||||
secondary
|
||||
square-small
|
||||
:to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
|
||||
icon="bi-pencil-fill"
|
||||
>
|
||||
<i class="ui pencil icon" />
|
||||
<span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
|
||||
</router-link>
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<router-link
|
||||
|
|
@ -207,15 +208,16 @@ store.dispatch('playlists/fetchOwn')
|
|||
<td><human-date :date="playlist.modification_date" /></td>
|
||||
<td>{{ playlist.tracks_count }}</td>
|
||||
<td>
|
||||
<button
|
||||
<Button
|
||||
v-if="track"
|
||||
class="ui success icon basic small right floated button"
|
||||
low-height
|
||||
secondary
|
||||
:title="labels.addToPlaylist"
|
||||
icon="bi-plus"
|
||||
@click.prevent="addToPlaylist(playlist.id, false)"
|
||||
>
|
||||
<i class="plus icon" />
|
||||
{{ t('components.playlists.PlaylistModal.button.addTrack') }}
|
||||
</button>
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -233,15 +235,10 @@ store.dispatch('playlists/fetchOwn')
|
|||
class="ui placeholder segment"
|
||||
>
|
||||
<div class="ui icon header">
|
||||
<i class="list icon" />
|
||||
<i class="bi bi-list" />
|
||||
{{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui basic cancel button">
|
||||
{{ t('components.playlists.PlaylistModal.button.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue