kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2026-05-05 21:53:41 +00:00
Code Issues Projects Releases Wiki Activity

Better inline editor.

Browse Source
This commit is contained in:
James Cole
2024-03-23 15:20:49 +01:00
parent 2f5c37048b
commit 4dcb38290e
8 changed files with 208 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
resources/assets/v2/support/editable/GenericEditor.js
View File

@@ -35,11 +35,11 @@ export default class GenericEditor {
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()');
console.log('GenericEditor[' + this.options.index + '].init()');
}
replace() {
console.log('GenericEditor['+this.options.index+'].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') {
@@ -48,25 +48,107 @@ export default class GenericEditor {
}
replaceText() {
console.log('GenericEditor['+this.options.index+'].replaceText()');
let html = this.formStart() + this.rowStart();
console.log('GenericEditor[' + this.options.index + '].replaceText()');
// create form
let form = document.createElement('form');
form.classList.add('form-inline');
// input field:
html += this.columnStart('7') + this.label() + this.textField() + this.closeDiv();
// create row
let row = document.createElement('div');
row.classList.add('row');
// add submit button
html += this.columnStart('5') + this.buttonGroup() + this.closeDiv();
// create column
let column = document.createElement('div');
column.classList.add('col-7');
// close column and form:
html += this.closeDiv() + this.closeForm();
this.element.parentElement.innerHTML = html;
// create label, add to column
let label = document.createElement('label');
label.classList.add('sr-only');
label.setAttribute('for', 'input');
label.innerText = 'Field value';
column.appendChild(label);
// creat text field, add to column
let input = document.createElement('input');
input.classList.add('form-control');
input.classList.add('form-control-sm');
input.dataset.index = this.options.index + 'index';
input.setAttribute('autocomplete', 'off');
input.setAttribute('type', 'text');
input.setAttribute('id', 'input');
input.setAttribute('name', 'name');
input.setAttribute('value', this.options.value);
input.setAttribute('placeholder', this.options.value);
input.setAttribute('autofocus', 'true');
column.appendChild(input);
// add column to row
row.appendChild(column);
// create column for buttons
let column2 = document.createElement('div');
column2.classList.add('col-5');
column2.classList.add('text-right');
// create button group
let buttonGroup = document.createElement('div');
buttonGroup.classList.add('btn-group');
buttonGroup.classList.add('btn-group-sm');
buttonGroup.setAttribute('role', 'group');
buttonGroup.setAttribute('aria-label', 'Options');
// add buttons
let cancelButton = document.createElement('button');
cancelButton.dataset.index = this.options.index;
cancelButton.setAttribute('type', 'button');
cancelButton.setAttribute('x-click', 'cancelInlineEdit');
cancelButton.classList.add('btn');
cancelButton.classList.add('btn-danger');
// add icon to cancel button
let icon = document.createElement('em');
icon.classList.add('fa-solid');
icon.classList.add('fa-xmark');
icon.classList.add('text-white');
cancelButton.appendChild(icon);
// '<button data-index="' + this.options.index + '" type="submit" @click="submitInlineEdit" class="btn btn-success"><em class="fa-solid fa-check"></em></button>' +
let submitButton = document.createElement('button');
submitButton.dataset.index = this.options.index;
submitButton.setAttribute('type', 'submit');
submitButton.setAttribute('x-click', 'submitInlineEdit');
submitButton.classList.add('btn');
submitButton.classList.add('btn-success');
// add icon to submit button
let icon2 = document.createElement('em');
icon2.classList.add('fa-solid');
icon2.classList.add('fa-check');
icon2.classList.add('text-white');
submitButton.appendChild(icon2);
// add to button group
buttonGroup.appendChild(cancelButton);
buttonGroup.appendChild(submitButton);
// add button group to column
column2.appendChild(buttonGroup);
// add column to row
row.appendChild(column2);
this.element.parentElement.innerHTML = row.outerHTML;
}
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>';
}
@@ -85,22 +167,25 @@ export default class GenericEditor {
}
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>' +
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('GenericEditor[' + this.options.index + '].cancel()');
console.log(this.element);
console.log(this.parent);
this.parent.innerHTML = this.options.original;
}
submitInlineEdit(e) {
console.log('Submit?');
}