[WIP] refactor(front): Playlist Editor
This commit is contained in:
ArneBo
parent
e2bb166707
commit
2021330eca
|
|
@ -14,6 +14,9 @@ import draggable from 'vuedraggable'
|
|||
import axios from 'axios'
|
||||
|
||||
import PlaylistForm from '~/components/playlists/Form.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
|
||||
interface Events {
|
||||
(e: 'update:playlistTracks', value: PlaylistTrack[]): void
|
||||
|
|
@ -163,7 +166,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ui text container component-playlist-editor">
|
||||
<Layout stack>
|
||||
<playlist-form
|
||||
v-model:playlist="playlist"
|
||||
:title="undefined"
|
||||
|
|
@ -171,7 +174,6 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
<h3 class="ui top attached header">
|
||||
{{ t('components.playlists.Editor.header.editor') }}
|
||||
</h3>
|
||||
<div class="ui attached segment">
|
||||
<template v-if="status === 'loading'">
|
||||
<div class="ui active tiny inline loader" />
|
||||
{{ t('components.playlists.Editor.loading.sync') }}
|
||||
|
|
@ -179,10 +181,10 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
<template v-else-if="status === 'errored'">
|
||||
<i class="dangerclose icon" />
|
||||
{{ t('components.playlists.Editor.error.sync') }}
|
||||
<div
|
||||
<Alert
|
||||
red
|
||||
v-if="errors.length > 0"
|
||||
role="alert"
|
||||
class="ui negative message"
|
||||
>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -192,12 +194,12 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Alert>
|
||||
</template>
|
||||
<div
|
||||
<Alert
|
||||
red
|
||||
v-else-if="status === 'confirmDuplicateAdd'"
|
||||
role="alert"
|
||||
class="ui warning message"
|
||||
>
|
||||
<p>
|
||||
{{ t('components.playlists.Editor.warning.duplicate') }}
|
||||
|
|
@ -211,28 +213,27 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
{{ track }}
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
class="ui small success button"
|
||||
<Button
|
||||
primary
|
||||
@click="insertMany(queueTracks, true)"
|
||||
>
|
||||
{{ t('components.playlists.Editor.button.addDuplicate') }}
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</Alert>
|
||||
<template v-else-if="status === 'saved'">
|
||||
<i class="success check icon" />
|
||||
<i class="success bi- bi-check" />
|
||||
{{ t('components.playlists.Editor.message.sync') }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="ui bottom attached segment">
|
||||
<button
|
||||
<Button
|
||||
:disabled="queueTracks.length === 0"
|
||||
primary
|
||||
:class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
|
||||
:title="labels.copyTitle"
|
||||
icon="bi-plus"
|
||||
@click="insertMany(queueTracks, false)"
|
||||
>
|
||||
<i class="plus icon" />
|
||||
{{ t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<dangerous-button
|
||||
:disabled="tracks.length === 0"
|
||||
|
|
@ -263,6 +264,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
{{ t('components.playlists.Editor.help.reorder') }}
|
||||
</p>
|
||||
<div class="table-wrapper">
|
||||
<!-- TODO: Use activity.vue -->
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<draggable
|
||||
v-model="tracks"
|
||||
|
|
@ -309,6 +311,5 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ import $ from 'jquery'
|
|||
import useSharedLabels from '~/composables/locale/useSharedLabels'
|
||||
import useLogger from '~/composables/useLogger'
|
||||
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Input from '~/components/ui/Input.vue'
|
||||
|
||||
interface Events {
|
||||
(e: 'update:playlist', value: Playlist): void
|
||||
}
|
||||
|
|
@ -103,19 +108,17 @@ const submit = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
class="ui form"
|
||||
<Layout form
|
||||
@submit.prevent="submit()"
|
||||
>
|
||||
<h4
|
||||
v-if="title"
|
||||
class="ui header"
|
||||
>
|
||||
{{ t('components.playlists.Form.header.createPlaylist') }}
|
||||
</h4>
|
||||
<div
|
||||
<Alert
|
||||
v-if="success"
|
||||
class="ui positive message"
|
||||
green
|
||||
>
|
||||
<h4 class="header">
|
||||
<template v-if="playlist">
|
||||
|
|
@ -125,11 +128,11 @@ const submit = async () => {
|
|||
{{ t('components.playlists.Form.header.createSuccess') }}
|
||||
</template>
|
||||
</h4>
|
||||
</div>
|
||||
<div
|
||||
</Alert>
|
||||
<Alert
|
||||
v-if="errors.length > 0"
|
||||
red
|
||||
role="alert"
|
||||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ t('components.playlists.Form.header.createFailure') }}
|
||||
|
|
@ -142,18 +145,18 @@ const submit = async () => {
|
|||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Alert>
|
||||
<div class="three fields">
|
||||
<div class="field">
|
||||
<label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
|
||||
<input
|
||||
<Input
|
||||
id="playlist-name"
|
||||
v-model="name"
|
||||
name="name"
|
||||
required
|
||||
type="text"
|
||||
:placeholder="labels.placeholder"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="playlist-visibility">{{ t('components.playlists.Form.label.visibility') }}</label>
|
||||
|
|
@ -173,7 +176,8 @@ const submit = async () => {
|
|||
</div>
|
||||
<div class="field">
|
||||
<span id="updatePlaylistLabel" />
|
||||
<button
|
||||
<Button
|
||||
primary
|
||||
:class="['ui', 'fluid', {'loading': isLoading}, 'button']"
|
||||
type="submit"
|
||||
>
|
||||
|
|
@ -183,8 +187,8 @@ const submit = async () => {
|
|||
<template v-else>
|
||||
{{ t('components.playlists.Form.button.create') }}
|
||||
</template>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue