- save & load
- key navigation - ui improvements
This commit is contained in:
bkfox
parent
cfc0e45439
commit
61af53eecb
|
|
@ -9,7 +9,7 @@ from adminsortable2.admin import SortableAdminBase, SortableInlineAdminMixin
|
|||
from ..models import Sound, Track
|
||||
|
||||
|
||||
class TrackInline(SortableInlineAdminMixin, admin.TabularInline):
|
||||
class TrackInline(admin.TabularInline):
|
||||
template = 'admin/aircox/playlist_inline.html'
|
||||
model = Track
|
||||
extra = 0
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,21 +4,18 @@
|
|||
{# include "adminsortable2/edit_inline/tabular-django-4.1.html" #}
|
||||
{% with inline_admin_formset as admin_formset %}
|
||||
{% with admin_formset.formset as formset %}
|
||||
|
||||
<script id="{{ formset.prefix }}-init-data">
|
||||
{{ formset|inline_data|json }}
|
||||
</script>
|
||||
<div id="inline-tracks" class="box mb-5">
|
||||
<h5 class="title is-4">{% trans "Playlist" %}</h5>
|
||||
<script id="{{ formset.prefix }}-init-data">{
|
||||
"items": [
|
||||
{% for form in formset.forms %}
|
||||
{{ form.initial|json }}
|
||||
{% if not forloop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
{{ admin_formset.non_form_errors }}
|
||||
|
||||
|
||||
<a-playlist-editor>
|
||||
<a-playlist-editor data-el="{{ formset.prefix }}-init-data"
|
||||
data-prefix="{{ formset.prefix }}-">
|
||||
<template #title>
|
||||
<h5 class="title is-4">{% trans "Playlist" %}</h5>
|
||||
</template>
|
||||
<template v-slot:top="{items}">
|
||||
<input type="hidden" name="{{ formset.prefix }}-TOTAL_FORMS"
|
||||
:value="items.length || 0"/>
|
||||
|
|
@ -43,7 +40,7 @@
|
|||
<input type="hidden"
|
||||
:name="'{{ formset.prefix }}-' + row + '-position'"
|
||||
:value="row"/>
|
||||
<input t-if="item.data.id" type="hidden"
|
||||
<input t-if="item.id" type="hidden"
|
||||
:name="'{{ formset.prefix }}-' + row + '-id'"
|
||||
:value="item.data.id"/>
|
||||
|
||||
|
|
@ -59,11 +56,17 @@
|
|||
{% for field in admin_formset.fields %}
|
||||
{% if not field.widget.is_hidden and not field.is_readonly %}
|
||||
<template v-slot:row-{{ field.name }}="{item,col,row,value,attr,emit}">
|
||||
<div class="control">
|
||||
<input type="{{ widget.type }}" class="input half-field"
|
||||
:name="'{{ formset.prefix }}-' + row + '-{{ field.name }}'"
|
||||
v-model="item.data[attr]"
|
||||
@change="emit('change', col)"/>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="{{ widget.type }}"
|
||||
:class="['input', item.error(attr) ? 'is-danger' : 'half-field']"
|
||||
:name="'{{ formset.prefix }}-' + row + '-{{ field.name }}'"
|
||||
v-model="item.data[attr]"
|
||||
@change="emit('change', col)"/>
|
||||
</div>
|
||||
<p v-for="error in item.error(attr)" class="help is-danger">
|
||||
[[ error ]] !
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ The audio player
|
|||
</noscript>
|
||||
|
||||
<a-player ref="player"
|
||||
:live-args="{url: '{% url "api:live" %}', timeout:10, src: {{ audio_streams|json }} || []}"
|
||||
:live-args="{url: '{% url "api:live" %}', timeout:10, src: {{ audio_streams|json|force_escape }} || []}"
|
||||
button-title="{% translate "Play or pause audio" %}">
|
||||
<template v-slot:content="{ loaded, live, current }">
|
||||
<h4 v-if="loaded" class="title is-4">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ from django.contrib.admin.templatetags.admin_urls import admin_urlname
|
|||
from django.urls import reverse
|
||||
from django.utils.safestring import mark_safe
|
||||
|
||||
from aircox.models import Page, Diffusion, Log
|
||||
from aircox.models import Diffusion, Log
|
||||
|
||||
random.seed()
|
||||
register = template.Library()
|
||||
|
|
@ -17,7 +17,8 @@ def do_admin_url(obj, arg, pass_id=True):
|
|||
""" Reverse admin url for object """
|
||||
name = admin_urlname(obj._meta, arg)
|
||||
return reverse(name, args=(obj.id,)) if pass_id else reverse(name)
|
||||
|
||||
|
||||
|
||||
@register.filter(name='get_tracks')
|
||||
def do_get_tracks(obj):
|
||||
""" Get a list of track for the provided log, diffusion, or episode """
|
||||
|
|
@ -28,6 +29,7 @@ def do_get_tracks(obj):
|
|||
obj = obj.episode
|
||||
return obj.track_set.all()
|
||||
|
||||
|
||||
@register.simple_tag(name='has_perm', takes_context=True)
|
||||
def do_has_perm(context, obj, perm, user=None):
|
||||
""" Return True if ``user.has_perm('[APP].[perm]_[MODEL]')`` """
|
||||
|
|
@ -36,17 +38,21 @@ def do_has_perm(context, obj, perm, user=None):
|
|||
return user.has_perm('{}.{}_{}'.format(
|
||||
obj._meta.app_label, perm, obj._meta.model_name))
|
||||
|
||||
|
||||
@register.filter(name='is_diffusion')
|
||||
def do_is_diffusion(obj):
|
||||
""" Return True if object is a Diffusion. """
|
||||
return isinstance(obj, Diffusion)
|
||||
|
||||
|
||||
@register.filter(name='json')
|
||||
def do_json(obj,fields=""):
|
||||
def do_json(obj, fields=""):
|
||||
""" Return object as json """
|
||||
if fields:
|
||||
obj = { k: getattr(obj,k,None) for k in ','.split(fields) }
|
||||
return json.dumps(obj)
|
||||
obj = {k: getattr(obj, k, None)
|
||||
for k in ','.split(fields)}
|
||||
return mark_safe(json.dumps(obj))
|
||||
|
||||
|
||||
@register.simple_tag(name='nav_items', takes_context=True)
|
||||
def do_nav_items(context, menu, **kwargs):
|
||||
|
|
@ -55,6 +61,7 @@ def do_nav_items(context, menu, **kwargs):
|
|||
return [(item, item.render(request, **kwargs))
|
||||
for item in station.navitem_set.filter(menu=menu)]
|
||||
|
||||
|
||||
@register.simple_tag(name='update_query')
|
||||
def do_update_query(obj, **kwargs):
|
||||
""" Replace provided querydict's values with **kwargs. """
|
||||
|
|
@ -65,6 +72,7 @@ def do_update_query(obj, **kwargs):
|
|||
obj.pop(k)
|
||||
return obj
|
||||
|
||||
|
||||
@register.filter(name='verbose_name')
|
||||
def do_verbose_name(obj, plural=False):
|
||||
"""
|
||||
|
|
@ -72,6 +80,5 @@ def do_verbose_name(obj, plural=False):
|
|||
string (can act for default values).
|
||||
"""
|
||||
return obj if isinstance(obj, str) else \
|
||||
obj._meta.verbose_name_plural if plural else \
|
||||
obj._meta.verbose_name
|
||||
|
||||
obj._meta.verbose_name_plural if plural else \
|
||||
obj._meta.verbose_name
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
from django import template
|
||||
from django.contrib import admin
|
||||
|
||||
from ..serializers import AdminTrackSerializer
|
||||
|
||||
register = template.Library()
|
||||
|
||||
|
||||
@register.simple_tag(name='get_admin_tools')
|
||||
def do_get_admin_tools():
|
||||
return admin.site.get_tools()
|
||||
|
||||
|
||||
@register.filter(name='serialize_track')
|
||||
def do_serialize_track(instance):
|
||||
ser = AdminTrackSerializer(instance=instance)
|
||||
return ser.data
|
||||
@register.filter(name='inline_data')
|
||||
def do_inline_data(formset):
|
||||
items = []
|
||||
for form in formset.forms:
|
||||
item = {name: form[name].value()
|
||||
for name in form.fields.keys()}
|
||||
item['__errors__'] = form.errors
|
||||
|
||||
# hack for playlist editor
|
||||
tags = item.get('tags')
|
||||
if tags and not isinstance(tags, str):
|
||||
item['tags'] = ', '.join(tag.name for tag in tags)
|
||||
items.append(item)
|
||||
return {"items": items}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,35 @@
|
|||
<template>
|
||||
<div class="playlist-editor">
|
||||
<slot name="top" :set="set" :columns="columns" :items="items"/>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li :class="{'is-active': mode == Modes.Text}"
|
||||
@click="mode = Modes.Text">
|
||||
<a>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</span>
|
||||
Texte
|
||||
</a>
|
||||
</li>
|
||||
<li :class="{'is-active': mode == Modes.List}"
|
||||
@click="mode = Modes.List">
|
||||
<a>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-list"></i>
|
||||
</span>
|
||||
Liste
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
<div class="float-right field has-addons">
|
||||
<p class="control">
|
||||
<a :class="['button','p-2', mode == Modes.Text ? 'is-primary' : 'is-light']"
|
||||
@click="mode = Modes.Text">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</span>
|
||||
<span>Texte</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a :class="['button','p-2', mode == Modes.List ? 'is-primary' : 'is-light']"
|
||||
@click="mode = Modes.List">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-list"></i>
|
||||
</span>
|
||||
<span>Liste</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="top" :set="set" :columns="columns" :items="items"/>
|
||||
<section class="page" v-show="mode == Modes.Text">
|
||||
<textarea ref="textarea" class="is-fullwidth" style="height: 10em;"
|
||||
<textarea ref="textarea" class="is-fullwidth" rows="20"
|
||||
@change="updateList"
|
||||
/>
|
||||
|
||||
|
|
@ -36,7 +41,7 @@
|
|||
<table class="table is-bordered is-inline-block"
|
||||
style="vertical-align: middle">
|
||||
<tr>
|
||||
<a-row :columns="columns" :item="FormatLabels"
|
||||
<a-row :cell="{columns}" :item="FormatLabels"
|
||||
@move="formatMove" :orderable="true">
|
||||
</a-row>
|
||||
</tr>
|
||||
|
|
@ -93,22 +98,25 @@ const FormatLabels = {
|
|||
export default {
|
||||
components: { ARow, ARows },
|
||||
props: {
|
||||
dataEl: String,
|
||||
dataPrefix: String,
|
||||
listClass: String,
|
||||
itemClass: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
dataEl: String,
|
||||
Modes: Modes,
|
||||
FormatLabels: FormatLabels,
|
||||
mode: Modes.Text,
|
||||
set: new Set(Track),
|
||||
columns: ['artist', 'title', 'tags', 'album', 'year'],
|
||||
extraData: {},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
items() {
|
||||
return this.set.items
|
||||
},
|
||||
|
|
@ -194,23 +202,37 @@ export default {
|
|||
return lines.join('\n')
|
||||
},
|
||||
|
||||
|
||||
_data_key(key) {
|
||||
key = key.slice(this.dataPrefix.length)
|
||||
try {
|
||||
var [index, attr] = key.split('-', 1)
|
||||
return [Number(index), attr]
|
||||
}
|
||||
catch(err) {
|
||||
return [null, key]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load initial data
|
||||
*/
|
||||
loadData({items=[], errors, fieldErrors, ...data}) {
|
||||
for(var item of items)
|
||||
this.set.push(item)
|
||||
},
|
||||
loadData({items=[]}) {
|
||||
for(var index in items)
|
||||
this.set.push(items[index])
|
||||
this.updateInput()
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if(this.dataEl) {
|
||||
const el = document.getElementById(this.dataEl)
|
||||
if(el) {
|
||||
const data = JSON.parse(el.textContext)
|
||||
loadData(data)
|
||||
const data = JSON.parse(el.textContent)
|
||||
this.loadData(data)
|
||||
}
|
||||
}
|
||||
this.mode = (this.items) ? Modes.List : Modes.Text
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
<template>
|
||||
<tr>
|
||||
<slot name="head" :item="item" :row="index"/>
|
||||
<slot name="head" :item="item" :row="row"/>
|
||||
<template v-for="(attr,col) in columns" :key="col">
|
||||
<td :class="['cell', 'cell-' + attr]" :data-index="col"
|
||||
<td :class="['cell', 'cell-' + attr]" :data-col="col"
|
||||
:draggable="orderable"
|
||||
@dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop">
|
||||
<slot :name="attr" :item="item" :row="index" :col="col"
|
||||
<slot :name="attr" :item="item" :cell="cells[col]"
|
||||
:data="itemData" :attr="attr" :emit="cellEmit"
|
||||
:value="itemData && itemData[attr]">
|
||||
{{ itemData && itemData[attr] }}
|
||||
</slot>
|
||||
</td>
|
||||
</template>
|
||||
<slot name="tail" :item="item" :row="index"/>
|
||||
<slot name="tail" :item="item" :row="cell.row"/>
|
||||
</tr>
|
||||
</template>
|
||||
<script>
|
||||
import {isReactive, toRefs} from 'vue'
|
||||
import Model from '../model'
|
||||
|
||||
export default {
|
||||
|
|
@ -23,35 +24,48 @@ export default {
|
|||
|
||||
props: {
|
||||
item: Object,
|
||||
index: Number,
|
||||
columns: Array,
|
||||
cell: Object,
|
||||
orderable: {type: Boolean, default: false},
|
||||
},
|
||||
|
||||
computed: {
|
||||
row() { return this.cell.row || 0 },
|
||||
columns() { return this.cell.columns },
|
||||
|
||||
itemData() {
|
||||
return this.item instanceof Model ? this.item.data : this.item;
|
||||
},
|
||||
|
||||
cells() {
|
||||
const cell = isReactive(this.cell) && toRefs(this.cell) || this.cell
|
||||
const cells = []
|
||||
for(var col in this.columns)
|
||||
cells.push({...cell, col: Number(col)})
|
||||
return cells
|
||||
},
|
||||
|
||||
cellEls() {
|
||||
return [...this.$el.querySelectorAll('td')].filter(x => x.dataset.col)
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/// Emit a 'cell' event.
|
||||
/// Event data: `{index, name, data, item, attr}`
|
||||
/// Event data: `{name, data, item, attr}`
|
||||
///
|
||||
/// @param {Number} col: cell column's index
|
||||
/// @param {String} name: cell's event name
|
||||
/// @param {} data: cell's event data
|
||||
cellEmit(name, col, data) {
|
||||
cellEmit(name, cell, data) {
|
||||
this.$emit('cell', {
|
||||
name, col, data,
|
||||
name, cell, data,
|
||||
item: this.item,
|
||||
attr: this.columns[col],
|
||||
})
|
||||
},
|
||||
|
||||
onDragStart(ev) {
|
||||
const dataset = ev.target.dataset;
|
||||
const data = `cell:${dataset.index}`
|
||||
const data = `cell:${dataset.col}`
|
||||
ev.dataTransfer.setData("text/cell", data)
|
||||
ev.dataTransfer.dropEffect = 'move'
|
||||
},
|
||||
|
|
@ -69,9 +83,27 @@ export default {
|
|||
ev.preventDefault()
|
||||
this.$emit('move', {
|
||||
from: Number(data.slice(5)),
|
||||
to: Number(ev.target.dataset.index),
|
||||
to: Number(ev.target.dataset.col),
|
||||
})
|
||||
},
|
||||
|
||||
focus(col, from) {
|
||||
if(from)
|
||||
col += from.col
|
||||
|
||||
const target = this.cellEls[col]
|
||||
if(!target)
|
||||
return
|
||||
const control = target.querySelector('input') ||
|
||||
target.querySelector('button') ||
|
||||
target.querySelector('select') ||
|
||||
target.querySelector('a');
|
||||
control && control.focus()
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$el.__row = this
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,18 +10,26 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<slot name="head"/>
|
||||
<template v-for="(item,index) in items" :key="index">
|
||||
<a-row :item="item" :index="index" :columns="columns" :data-index="index"
|
||||
<template v-for="(item,row) in items" :key="row">
|
||||
<!-- data-index comes from AList component drag & drop -->
|
||||
<a-row :item="item" :cell="{row, columns}" :data-index="row"
|
||||
:draggable="orderable"
|
||||
@dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop"
|
||||
@cell="onCellEvent(index, $event)">
|
||||
<template v-for="[name,slot] of rowSlots" :key="slot" v-slot:[slot]="data">
|
||||
<slot :name="name" v-bind="data"/>
|
||||
<template v-if="slot == 'head' || slot == 'tail'">
|
||||
<slot :name="name" v-bind="data"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div @keydown.capture.ctrl="onControlKey($event, data.cell)">
|
||||
<slot :name="name" v-bind="data"/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-row>
|
||||
</template>
|
||||
<template v-if="allowCreate">
|
||||
<a-row :item="extraItem" :index="items.length" :columns="columns"
|
||||
<a-row :item="extraItem" :cell="{row:items.length, columns}"
|
||||
@keypress.enter.stop.prevent="validateExtraCell">
|
||||
<template v-for="[name,slot] of rowSlots" :key="slot" v-slot:[slot]="data">
|
||||
<slot :name="name" v-bind="data"/>
|
||||
|
|
@ -56,6 +64,17 @@ const Component = {
|
|||
},
|
||||
|
||||
computed: {
|
||||
rowCells() {
|
||||
const cells = []
|
||||
for(var row in this.items)
|
||||
cells.push({row, columns: this.columns,})
|
||||
},
|
||||
|
||||
rows() {
|
||||
return [...this.$el.querySelectorAll('tr')].filter(x => x.__row)
|
||||
.map(x => x.__row)
|
||||
},
|
||||
|
||||
rowSlots() {
|
||||
return Object.keys(this.$slots).filter(x => x.startsWith('row-'))
|
||||
.map(x => [x, x.slice(4)])
|
||||
|
|
@ -69,19 +88,61 @@ const Component = {
|
|||
this.set.push(this.extraItem)
|
||||
this.extraItem = new this.set.model()
|
||||
},
|
||||
|
||||
onControlKey(event, cell) {
|
||||
switch(event.key) {
|
||||
case "ArrowUp": this.focus(-1, 0, cell)
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
break;
|
||||
case "ArrowDown": this.focus(1, 0, cell)
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
break;
|
||||
case "ArrowLeft": this.focus(0, -1, cell)
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
break;
|
||||
case "ArrowRight": this.focus(0, 1, cell)
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/// React on 'cell' event, re-emitting it with additional values:
|
||||
/// - `set`: data set
|
||||
/// - `row`: row index
|
||||
///
|
||||
/// @param {Number} row: row index
|
||||
/// @param {} data: cell's event data
|
||||
/**
|
||||
* React on 'cell' event, re-emitting it with additional values:
|
||||
* - `set`: data set
|
||||
* - `row`: row index
|
||||
*
|
||||
* @param {Number} row: row index
|
||||
* @param {} data: cell's event data
|
||||
*/
|
||||
onCellEvent(row, event) {
|
||||
if(event.name == 'focus')
|
||||
this.cellFocus(event.data, event.cell)
|
||||
|
||||
this.$emit('cell', {
|
||||
...event, row,
|
||||
set: this.set
|
||||
})
|
||||
},
|
||||
|
||||
getCellNode(row, col) {
|
||||
const el = this.$refs[row]
|
||||
return el && el.cellEls(col)
|
||||
},
|
||||
|
||||
/**
|
||||
* Focus on a cell
|
||||
*/
|
||||
focus(row, col, from=null) {
|
||||
if(from)
|
||||
row += from.row
|
||||
|
||||
row = this.rows[row]
|
||||
row && row.focus(col, from)
|
||||
},
|
||||
},
|
||||
}
|
||||
Component.props.itemTag.default = 'tr'
|
||||
|
|
|
|||
|
|
@ -41,11 +41,15 @@ export default class Model {
|
|||
this.commit(data);
|
||||
}
|
||||
|
||||
get errors() {
|
||||
return this.data.__errors__
|
||||
}
|
||||
|
||||
/**
|
||||
* Get instance id from its data
|
||||
*/
|
||||
static getId(data) {
|
||||
return data.id;
|
||||
return 'id' in data ? data.id : data.pk;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -112,8 +116,16 @@ export default class Model {
|
|||
* Update instance's data with provided data. Return None
|
||||
*/
|
||||
commit(data) {
|
||||
this.id = this.constructor.getId(data);
|
||||
this.data = data;
|
||||
this.id = this.constructor.getId(this.data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update model data, without reset previous value
|
||||
*/
|
||||
update(data) {
|
||||
this.data = {...this.data, ...data}
|
||||
this.id = this.constructor.getId(this.data)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -130,6 +142,13 @@ export default class Model {
|
|||
let item = window.localStorage.getItem(key);
|
||||
return item === null ? item : new this(JSON.parse(item));
|
||||
}
|
||||
|
||||
/**
|
||||
* Return error for a specific attribute name if any
|
||||
*/
|
||||
error(attr=null) {
|
||||
return attr === null ? this.errors : this.errors && this.errors[attr]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user