rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

various fixes

Browse Source
This commit is contained in:
bkfox
2022-12-12 12:29:05 +01:00
parent a53a37021c
commit d2a65bd1fe
9 changed files with 282 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/src/components/APlaylistEditor.vue
View File

@ -59,6 +59,18 @@
</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">
@ -101,18 +113,6 @@
{{ labels.save_settings }}
</a-action-button>
</div>
<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>
<slot name="bottom" :set="set" :columns="columns" :items="items"/>
</div>
@ -181,7 +181,9 @@ export default {
value = cols.concat(left)
this.settings.playlist_editor_columns = value
},
get() { return this.settings.playlist_editor_columns }
get() {
return this.settings.playlist_editor_columns
}
},
items() {
@ -205,12 +207,12 @@ export default {
formatMove({from, to}) {
const value = this.columns[from]
this.columns.splice(from, 1)
this.columns.splice(to, 0, value)
this.settings.playlist_editor_columns.splice(from, 1)
this.settings.playlist_editor_columns.splice(to, 0, value)
if(this.page == Page.Text)
this.updateList()
else
this.updateText()
this.updateInput()
},
columnMove({from, to}) {

56
assets/src/components/ARow.vue
View File

@ -30,20 +30,34 @@ export default {
emit: ['move', 'cell'],
props: {
//! Item to display in row
item: Object,
//! Columns to display, as items' attributes
columns: Array,
//! Default cell's info
cell: {type: Object, default() { return {row: 0}}},
//! Cell component tag
cellTag: {type: String, default: 'td'},
//! If true, can reorder cell by drag & drop
orderable: {type: Boolean, default: false},
},
computed: {
row() { return this.cell && this.cell.row },
/**
* Row index
*/
row() { return this.cell && this.cell.row || 0 },
/**
* Item's data if model instance, otherwise item
*/
itemData() {
return this.item instanceof Model ? this.item.data : this.item;
},
/**
* Computed cell infos
*/
cells() {
const cell = isReactive(this.cell) && toRefs(this.cell) || this.cell || {}
const cells = []
@ -51,19 +65,16 @@ export default {
cells.push({...cell, col: Number(col)})
return cells
},
cellEls() {
return [...this.$el.querySelectorAll(self.cellTag)].filter(x => x.dataset.col)
},
},
methods: {
/// Emit a 'cell' event.
/// 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
/**
* Emit a 'cell' event.
* Event data: `{name, cell, data, item}`
* @param {Number} col: cell column's index
* @param {String} name: cell's event name
* @param {} data: cell's event data
*/
cellEmit(name, cell, data) {
this.$emit('cell', {
name, cell, data,
@ -83,6 +94,9 @@ export default {
ev.dataTransfer.dropEffect = 'move'
},
/**
* Handle drop event, emit `'move': { from, to }`.
*/
onDrop(ev) {
const data = ev.dataTransfer.getData("text/cell")
if(!data || !data.startsWith('cell:'))
@ -95,14 +109,28 @@ export default {
})
},
/**
* Return DOM node for cells at provided position `col`
*/
getCellEl(col) {
const els = this.$el.querySelectorAll(this.cellTag)
for(var el of els)
if(col == Number(el.dataset.col))
return el;
return null
},
/**
* Focus cell's form input. If from is provided, related focus
*/
focus(col, from) {
if(from)
col += from.col
const target = this.cellEls[col]
const target = this.getCellEl(col)
if(!target)
return
const control = target.querySelector('input') ||
const control = target.querySelector('input:not([type="hidden"])') ||
target.querySelector('button') ||
target.querySelector('select') ||
target.querySelector('a');

50
assets/src/components/ARows.vue
View File

@ -16,6 +16,7 @@
<template v-for="(item,row) in items" :key="row">
<!-- data-index comes from AList component drag & drop -->
<a-row :item="item" :cell="{row}" :columns="columns" :data-index="row"
:data-row="row"
:draggable="orderable"
@dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop"
@cell="onCellEvent(row, $event)">
@ -24,7 +25,7 @@
<slot :name="name" v-bind="data"/>
</template>
<template v-else>
<div @keydown.ctrl="onControlKey($event, data.cell)">
<div>
<slot :name="name" v-bind="data"/>
</div>
</template>
@ -64,12 +65,7 @@ const Component = {
for(var row in this.items)
cells.push({row})
},
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)])
@ -77,27 +73,6 @@ const Component = {
},
methods: {
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
@ -108,27 +83,30 @@ const Component = {
*/
onCellEvent(row, event) {
if(event.name == 'focus')
this.cellFocus(event.data, event.cell)
this.focus(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)
/**
* Return row component at provided index
*/
getRow(row) {
const els = this.$el.querySelectorAll('tr')
for(var el of els)
if(el.__row && row == Number(el.dataset.row))
return el.__row
},
/**
/**
* Focus on a cell
*/
focus(row, col, from=null) {
if(from)
row += from.row
row = this.rows[row]
row = this.getRow(row)
row && row.focus(col, from)
},
},