work on episode form
This commit is contained in:
bkfox
@@ -3,7 +3,7 @@
|
||||
<span v-if="promise && runIcon">
|
||||
<i :class="runIcon"></i>
|
||||
</span>
|
||||
<span v-else-if="icon" class="icon">
|
||||
<span v-else-if="icon" class="icon is-small">
|
||||
<i :class="icon"></i>
|
||||
</span>
|
||||
<span v-if="$slots.default"><slot name="default"/></span>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="playlist-editor">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="a-playlist-editor">
|
||||
<div class="flex-row">
|
||||
<div class="flex-grow-1">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
<div class="float-right field has-addons">
|
||||
<div class="flex-row align-right">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<a :class="['button','p-2', page == Page.Text ? 'is-primary' : 'is-light']"
|
||||
@click="page = Page.Text">
|
||||
@@ -28,13 +28,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<slot name="top" :set="set" :columns="columns" :items="items"/>
|
||||
<section class="page" v-show="page == Page.Text">
|
||||
<section v-show="page == Page.Text" class="panel">
|
||||
<textarea ref="textarea" class="is-fullwidth is-size-6" rows="20"
|
||||
@change="updateList"
|
||||
/>
|
||||
|
||||
</section>
|
||||
<section class="page" v-show="page == Page.List">
|
||||
<section v-show="page == Page.List" class="panel">
|
||||
<a-rows :set="set" :columns="columns" :labels="labels"
|
||||
:allow-create="true"
|
||||
:orderable="true" @move="listItemMove" @colmove="columnMove"
|
||||
@@ -46,9 +46,9 @@
|
||||
|
||||
<template v-slot:row-tail="data">
|
||||
<slot v-if="$slots['row-tail']" :name="row-tail" v-bind="data"/>
|
||||
<td>
|
||||
<a class="button is-danger is-outlined p-3 is-size-6"
|
||||
@click="items.splice(data.row,1)"
|
||||
<td class="align-right pr-0">
|
||||
<a class="button square"
|
||||
@click.stop="items.splice(data.row,1)"
|
||||
:title="labels.remove_track"
|
||||
:aria-label="labels.remove_track">
|
||||
<span class="icon"><i class="fa fa-trash" /></span>
|
||||
@@ -58,62 +58,92 @@
|
||||
</a-rows>
|
||||
</section>
|
||||
|
||||
<div class="mt-2">
|
||||
<div class="float-right">
|
||||
<a class="button is-warning p-2 ml-2"
|
||||
@click="loadData({items: this.initData.items},true)">
|
||||
<span class="icon"><i class="fa fa-rotate" /></span>
|
||||
<span>{{ labels.discard_changes }}</span>
|
||||
</a>
|
||||
<a class="button is-primary p-2 ml-2" t-if="page == page.List"
|
||||
@click="this.set.push(new this.set.model())">
|
||||
<span class="icon"><i class="fa fa-plus"/></span>
|
||||
<span>{{ labels.add_track }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="field is-inline-block is-vcentered mr-3">
|
||||
<label class="label is-inline mr-2"
|
||||
style="vertical-align: middle">
|
||||
Séparateur</label>
|
||||
<div class="control is-inline-block"
|
||||
style="vertical-align: middle;">
|
||||
<input type="text" ref="sep" class="input is-inline is-text-centered is-small"
|
||||
style="max-width: 5em;"
|
||||
v-model="separator" @change="updateList()"/>
|
||||
<div class="flex-row">
|
||||
<div class="flex-grow-1 flex-row">
|
||||
<div class="field ml-3">
|
||||
<p class="control">
|
||||
<a class="button is-info"
|
||||
@click="$refs.settings.open()">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-cog"></i>
|
||||
</span>
|
||||
<span>Options</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-inline-block is-vcentered mr-3">
|
||||
<label class="label is-inline mr-2"
|
||||
style="vertical-align: middle">
|
||||
{{ labels.columns }}</label>
|
||||
<table class="table is-bordered is-inline-block"
|
||||
style="vertical-align: middle">
|
||||
<tr>
|
||||
<a-row :columns="columns" :item="labels"
|
||||
@move="formatMove" :orderable="true">
|
||||
<template v-slot:cell-after="{cell}">
|
||||
<td style="cursor:pointer;" v-if="cell.col < columns.length-1">
|
||||
<span class="icon" @click="formatMove({from: cell.col, to: cell.col+1})"
|
||||
><i class="fa fa-left-right"/>
|
||||
</span>
|
||||
</td>
|
||||
</template>
|
||||
</a-row>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="field is-vcentered is-inline-block"
|
||||
v-if="settingsChanged">
|
||||
<a-action-button icon="fa fa-floppy-disk"
|
||||
class="button control p-3 is-info" run-class="blink"
|
||||
:url="settingsUrl" method="POST"
|
||||
:data="settings"
|
||||
:aria-label="labels.save_settings"
|
||||
@done="settingsSaved()">
|
||||
{{ labels.save_settings }}
|
||||
</a-action-button>
|
||||
<div class="flex-grow-1 align-right">
|
||||
<a class="button square is-warning p-2"
|
||||
@click="loadData({items: this.initData.items},true)"
|
||||
:title="labels.discard_changes"
|
||||
:aria-label="labels.discard_changes"
|
||||
>
|
||||
<span class="icon"><i class="fa fa-rotate" /></span>
|
||||
</a>
|
||||
<a class="button square is-primary p-2" v-if="page == Page.List"
|
||||
@click="this.set.push(new this.set.model())"
|
||||
:title="labels.add_track"
|
||||
:aria-label="labels.add_track"
|
||||
>
|
||||
<span class="icon"><i class="fa fa-plus"/></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal ref="settings" title="Options">
|
||||
<template #default>
|
||||
<div class="field">
|
||||
<label class="label" style="vertical-align: middle">
|
||||
{{ labels.columns }}
|
||||
</label>
|
||||
<table class="table is-bordered"
|
||||
style="vertical-align: middle">
|
||||
<tr>
|
||||
<a-row :columns="columns" :item="labels"
|
||||
@move="formatMove" :orderable="true">
|
||||
<template v-slot:cell-after="{cell}">
|
||||
<td style="cursor:pointer;" v-if="cell.col < columns.length-1">
|
||||
<span class="icon" @click="formatMove({from: cell.col, to: cell.col+1})"
|
||||
><i class="fa fa-left-right"/>
|
||||
</span>
|
||||
</td>
|
||||
</template>
|
||||
</a-row>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="field is-inline-block is-vcentered flex-grow-1">
|
||||
<label class="label is-inline mr-2"
|
||||
style="vertical-align: middle">
|
||||
Séparateur</label>
|
||||
<div class="control is-inline-block"
|
||||
style="vertical-align: middle;">
|
||||
<input type="text" ref="sep" class="input is-inline is-text-centered is-small"
|
||||
style="max-width: 5em;"
|
||||
v-model="separator" @change="updateList()"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex-row align-right">
|
||||
<a-action-button icon="fa fa-floppy-disk"
|
||||
v-if="settingsChanged"
|
||||
class="button control p-2 mr-3 is-secondary" run-class="blink"
|
||||
:url="settingsUrl" method="POST"
|
||||
:data="settings"
|
||||
:aria-label="labels.save_settings"
|
||||
@done="settingsSaved()">
|
||||
{{ labels.save_settings }}
|
||||
</a-action-button>
|
||||
<button class="button" type="button" @click="$refs.settings.close()">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</a-modal>
|
||||
<slot name="bottom" :set="set" :columns="columns" :items="items"/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -123,8 +153,9 @@ import {Set} from '../model'
|
||||
import Track from '../track'
|
||||
|
||||
import AActionButton from './AActionButton'
|
||||
import ARow from './ARow.vue'
|
||||
import ARows from './ARows.vue'
|
||||
import ARow from './ARow'
|
||||
import ARows from './ARows'
|
||||
import AModal from "./AModal"
|
||||
|
||||
/// Page display
|
||||
export const Page = {
|
||||
@@ -132,7 +163,7 @@ export const Page = {
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { AActionButton, ARow, ARows },
|
||||
components: { AActionButton, ARow, ARows, AModal },
|
||||
props: {
|
||||
initData: Object,
|
||||
dataPrefix: String,
|
||||
@@ -297,6 +328,8 @@ export default {
|
||||
settingsSaved(settings=null) {
|
||||
if(settings !== null)
|
||||
this.settings = settings
|
||||
if(this.$refs.settings)
|
||||
this.$refs.settings.close()
|
||||
this.savedSettings = cloneDeep(this.settings)
|
||||
},
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="a-select-file">
|
||||
<div class="a-select-file-list" ref="list">
|
||||
<div class="flex-column file-preview">
|
||||
<div :class="['a-select-file-list', listClass]" ref="list">
|
||||
<div class="flex-column">
|
||||
<div class="field flex-grow-1" v-if="!uploadFile">
|
||||
<label class="label">{{ uploadLabel }}</label>
|
||||
<input type="file" @change="previewFile"/>
|
||||
@@ -51,6 +51,7 @@ import {getCsrf} from "../model"
|
||||
export default {
|
||||
props: {
|
||||
name: { type: String },
|
||||
listClass: {type: String, default: ""},
|
||||
prevLabel: { type: String, default: "Prev" },
|
||||
nextLabel: { type: String, default: "Next" },
|
||||
listUrl: { type: String },
|
||||
@@ -88,7 +89,7 @@ export default {
|
||||
formData.append('file', this.uploadFile.file)
|
||||
formData.append('original_filename', this.uploadFile.file.name)
|
||||
formData.append('csrfmiddlewaretoken', getCsrf())
|
||||
fetch(this.listUrl, {
|
||||
fetch(this.uploadUrl, {
|
||||
method: "POST",
|
||||
body: formData
|
||||
}).then(
|
||||
|
||||
Reference in New Issue
Block a user