mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-11-08 02:38:09 +00:00
108 lines
3.8 KiB
JavaScript
108 lines
3.8 KiB
JavaScript
/*
|
|
* GenericEditor.js
|
|
* Copyright (c) 2024 james@firefly-iii.org.
|
|
*
|
|
* This file is part of Firefly III (https://github.com/firefly-iii).
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see https://www.gnu.org/licenses/.
|
|
*/
|
|
|
|
export default class GenericEditor {
|
|
setElement(element) {
|
|
console.log('GenericEditor.setElement()', element);
|
|
this.element = element;
|
|
this.parent = element.parentElement;
|
|
this.options = {};
|
|
}
|
|
|
|
init() {
|
|
// grab some options from element itself:
|
|
this.options.type = this.element.dataset.type;
|
|
this.options.id = this.element.dataset.id;
|
|
this.options.value = this.element.dataset.value;
|
|
this.options.index = this.element.dataset.index;
|
|
this.options.model = this.element.dataset.model;
|
|
this.options.field = this.element.dataset.field;
|
|
//this.options.field = this.element.dataset.type;
|
|
console.log('GenericEditor['+this.options.index+'].init()');
|
|
}
|
|
|
|
replace() {
|
|
console.log('GenericEditor['+this.options.index+'].replace()');
|
|
// save old HTML in data field (does that work, is it safe?)
|
|
this.options.original = this.element.parentElement.innerHTML;
|
|
if (this.options.type === 'text') {
|
|
this.replaceText();
|
|
}
|
|
}
|
|
|
|
replaceText() {
|
|
console.log('GenericEditor['+this.options.index+'].replaceText()');
|
|
let html = this.formStart() + this.rowStart();
|
|
|
|
// input field:
|
|
html += this.columnStart('7') + this.label() + this.textField() + this.closeDiv();
|
|
|
|
// add submit button
|
|
html += this.columnStart('5') + this.buttonGroup() + this.closeDiv();
|
|
|
|
// close column and form:
|
|
html += this.closeDiv() + this.closeForm();
|
|
this.element.parentElement.innerHTML = html;
|
|
}
|
|
textField() {
|
|
return '<input data-index="' + this.options.index + 'input" autocomplete="off" type="text" class="form-control form-control-sm" id="input" name="name" value="' + this.options.value + '" placeholder="' + this.options.value + '" autofocus>';
|
|
}
|
|
closeDiv() {
|
|
return '</div>';
|
|
}
|
|
closeForm() {
|
|
return '</form>';
|
|
}
|
|
|
|
formStart() {
|
|
return '<form class="form-inline">';
|
|
}
|
|
|
|
rowStart() {
|
|
return '<div class="row">';
|
|
}
|
|
|
|
columnStart(param) {
|
|
if ('' === param) {
|
|
return '<div class="col">';
|
|
}
|
|
return '<div class="col-' + param + '">';
|
|
}
|
|
label() {
|
|
return '<label class="sr-only" for="input">Field value</label>';
|
|
}
|
|
|
|
buttonGroup() {
|
|
return '<div class="btn-group btn-group-sm" role="group" aria-label="Options">'+
|
|
'<button data-index="'+this.options.index+'" type="button" @click="cancelInlineEdit" class="btn btn-danger"><em class="fa-solid fa-xmark text-white"></em></button>'+
|
|
'<button data-index="'+this.options.index+'" type="submit" @click="submitInlineEdit" class="btn btn-success"><em class="fa-solid fa-check"></em></button>' +
|
|
'</div>';
|
|
}
|
|
cancel() {
|
|
console.log('GenericEditor['+this.options.index+'].cancel()');
|
|
console.log(this.element);
|
|
console.log(this.parent);
|
|
this.parent.innerHTML = this.options.original;
|
|
}
|
|
submitInlineEdit(e) {
|
|
console.log('Submit?');
|
|
}
|
|
}
|