ycysd
This commit is contained in:
@@ -61,7 +61,8 @@
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
placeholderSchemaStore.tables = Array.isArray(data?.tables) ? data.tables : [];
|
||||
const tbls = data && Array.isArray(data.tables) ? data.tables : [];
|
||||
placeholderSchemaStore.tables = tbls;
|
||||
return placeholderSchemaStore.tables;
|
||||
})
|
||||
.catch(err => {
|
||||
@@ -98,143 +99,143 @@
|
||||
const PlaceholderModel = BaseModel.extend({
|
||||
defaults: {
|
||||
name: 'Placeholder',
|
||||
tagName: 'span',
|
||||
droppable: false,
|
||||
attributes: {
|
||||
'data-placeholder-type': 'custom',
|
||||
'data-placeholder-key': 'UEBERSCHRIFT',
|
||||
tagName: 'span',
|
||||
droppable: false,
|
||||
attributes: {
|
||||
'data-placeholder-type': 'custom',
|
||||
'data-placeholder-key': 'UEBERSCHRIFT',
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'data-placeholder-type',
|
||||
label: 'Typ',
|
||||
options: [
|
||||
{ id: 'custom', label: 'Allgemein' },
|
||||
{ id: 'database', label: 'Datenbank' },
|
||||
],
|
||||
changeProp: true,
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'data-placeholder-type',
|
||||
label: 'Typ',
|
||||
options: [
|
||||
{ id: 'custom', label: 'Allgemein' },
|
||||
{ id: 'database', label: 'Datenbank' },
|
||||
],
|
||||
changeProp: true,
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'data-placeholder-key',
|
||||
label: 'Bezeichner',
|
||||
placeholder: 'UEBERSCHRIFT',
|
||||
changeProp: true,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'data-placeholder-table',
|
||||
label: 'Tabelle',
|
||||
options: [],
|
||||
changeProp: true,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'data-placeholder-column',
|
||||
label: 'Feld',
|
||||
options: [],
|
||||
changeProp: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
init() {
|
||||
this.listenTo(this, 'change:attributes', this.updatePlaceholderState);
|
||||
this.updatePlaceholderState();
|
||||
fetchPlaceholderSchema()
|
||||
.then(() => this.updateSchemaTraits())
|
||||
.catch(() => this.updateSchemaTraits([]));
|
||||
},
|
||||
|
||||
updatePlaceholderState() {
|
||||
const attrs = this.getAttributes();
|
||||
const type = attrs['data-placeholder-type'] || 'custom';
|
||||
if (type === 'database' && placeholderSchemaStore.tables.length === 0) {
|
||||
this.addAttributes({ 'data-placeholder-type': 'custom' });
|
||||
}
|
||||
this.updateTraitVisibility();
|
||||
this.updateSchemaTraits();
|
||||
this.updateLabel();
|
||||
},
|
||||
|
||||
updateTraitVisibility() {
|
||||
const attrs = this.getAttributes();
|
||||
const type = attrs['data-placeholder-type'] || 'custom';
|
||||
const isDb = type === 'database';
|
||||
const tableTrait = getTraitByName(this, 'data-placeholder-table');
|
||||
const columnTrait = getTraitByName(this, 'data-placeholder-column');
|
||||
const keyTrait = getTraitByName(this, 'data-placeholder-key');
|
||||
|
||||
if (tableTrait?.view?.el) {
|
||||
tableTrait.view.el.style.display = isDb ? '' : 'none';
|
||||
}
|
||||
if (columnTrait?.view?.el) {
|
||||
columnTrait.view.el.style.display = isDb ? '' : 'none';
|
||||
}
|
||||
if (keyTrait?.view?.el) {
|
||||
keyTrait.view.el.style.display = isDb ? 'none' : '';
|
||||
}
|
||||
},
|
||||
|
||||
updateSchemaTraits(tablesOverride) {
|
||||
const tables = Array.isArray(tablesOverride) ? tablesOverride : placeholderSchemaStore.tables;
|
||||
const tableTrait = getTraitByName(this, 'data-placeholder-table');
|
||||
const columnTrait = getTraitByName(this, 'data-placeholder-column');
|
||||
const loading = !tablesOverride && placeholderSchemaStore.promise && !tables.length;
|
||||
|
||||
if (tableTrait) {
|
||||
let opts;
|
||||
if (tables.length) {
|
||||
opts = tables.map(tbl => ({ id: tbl.name, label: tbl.name }));
|
||||
} else if (loading) {
|
||||
opts = [{ id: '', label: 'Tabellen werden geladen…', disabled: true }];
|
||||
} else {
|
||||
opts = [{ id: '', label: 'Keine Tabellen verfügbar', disabled: true }];
|
||||
}
|
||||
setTraitOptions(tableTrait, opts);
|
||||
}
|
||||
|
||||
if (columnTrait) {
|
||||
const attrs = this.getAttributes();
|
||||
const tableName = (attrs['data-placeholder-table'] || '').toLowerCase();
|
||||
const table = tables.find(tbl => tbl.name.toLowerCase() === tableName);
|
||||
const colOpts = table
|
||||
? table.columns.map(col => ({ id: col.name, label: `${col.name} (${col.type})` }))
|
||||
: [{ id: '', label: table ? 'Keine Felder' : 'Feld wählen', disabled: !table }];
|
||||
setTraitOptions(columnTrait, colOpts);
|
||||
}
|
||||
},
|
||||
|
||||
updateLabel() {
|
||||
const attrs = this.getAttributes();
|
||||
const type = attrs['data-placeholder-type'] || 'custom';
|
||||
let label;
|
||||
if (type === 'database') {
|
||||
const table = attrs['data-placeholder-table'] || 'TABELLE';
|
||||
const column = attrs['data-placeholder-column'] || 'FELD';
|
||||
label = `${table}.${column}`.toUpperCase();
|
||||
} else {
|
||||
label = (attrs['data-placeholder-key'] || 'PLATZHALTER').toUpperCase();
|
||||
}
|
||||
const text = `{{${label}}}`;
|
||||
const comps = this.components();
|
||||
if (comps.length === 1 && comps.at(0).is('textnode')) {
|
||||
comps.at(0).set('content', text);
|
||||
} else {
|
||||
comps.reset([{ type: 'textnode', content: text }]);
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'data-placeholder-key',
|
||||
label: 'Bezeichner',
|
||||
placeholder: 'UEBERSCHRIFT',
|
||||
changeProp: true,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'data-placeholder-table',
|
||||
label: 'Tabelle',
|
||||
options: [],
|
||||
changeProp: true,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'data-placeholder-column',
|
||||
label: 'Feld',
|
||||
options: [],
|
||||
changeProp: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
}, {
|
||||
isComponent(el) {
|
||||
if (el && el.hasAttribute && el.hasAttribute('data-placeholder-type')) {
|
||||
return { type: PLACEHOLDER_COMPONENT };
|
||||
|
||||
init() {
|
||||
this.listenTo(this, 'change:attributes', this.updatePlaceholderState);
|
||||
this.updatePlaceholderState();
|
||||
fetchPlaceholderSchema()
|
||||
.then(() => this.updateSchemaTraits())
|
||||
.catch(() => this.updateSchemaTraits([]));
|
||||
},
|
||||
|
||||
updatePlaceholderState() {
|
||||
const attrs = this.getAttributes();
|
||||
const type = attrs['data-placeholder-type'] || 'custom';
|
||||
if (type === 'database' && placeholderSchemaStore.tables.length === 0) {
|
||||
this.addAttributes({ 'data-placeholder-type': 'custom' });
|
||||
}
|
||||
return false;
|
||||
this.updateTraitVisibility();
|
||||
this.updateSchemaTraits();
|
||||
this.updateLabel();
|
||||
},
|
||||
|
||||
updateTraitVisibility() {
|
||||
const attrs = this.getAttributes();
|
||||
const type = attrs['data-placeholder-type'] || 'custom';
|
||||
const isDb = type === 'database';
|
||||
const tableTrait = getTraitByName(this, 'data-placeholder-table');
|
||||
const columnTrait = getTraitByName(this, 'data-placeholder-column');
|
||||
const keyTrait = getTraitByName(this, 'data-placeholder-key');
|
||||
|
||||
if (tableTrait && tableTrait.view && tableTrait.view.el) {
|
||||
tableTrait.view.el.style.display = isDb ? '' : 'none';
|
||||
}
|
||||
if (columnTrait && columnTrait.view && columnTrait.view.el) {
|
||||
columnTrait.view.el.style.display = isDb ? '' : 'none';
|
||||
}
|
||||
if (keyTrait && keyTrait.view && keyTrait.view.el) {
|
||||
keyTrait.view.el.style.display = isDb ? 'none' : '';
|
||||
}
|
||||
},
|
||||
|
||||
updateSchemaTraits(tablesOverride) {
|
||||
const tables = Array.isArray(tablesOverride) ? tablesOverride : placeholderSchemaStore.tables;
|
||||
const tableTrait = getTraitByName(this, 'data-placeholder-table');
|
||||
const columnTrait = getTraitByName(this, 'data-placeholder-column');
|
||||
const loading = !tablesOverride && placeholderSchemaStore.promise && !tables.length;
|
||||
|
||||
if (tableTrait) {
|
||||
let opts;
|
||||
if (tables.length) {
|
||||
opts = tables.map(function (tbl) { return { id: tbl.name, label: tbl.name }; });
|
||||
} else if (loading) {
|
||||
opts = [{ id: '', label: 'Tabellen werden geladen…', disabled: true }];
|
||||
} else {
|
||||
opts = [{ id: '', label: 'Keine Tabellen verfügbar', disabled: true }];
|
||||
}
|
||||
setTraitOptions(tableTrait, opts);
|
||||
}
|
||||
|
||||
if (columnTrait) {
|
||||
const attrs = this.getAttributes();
|
||||
const tableName = (attrs['data-placeholder-table'] || '').toLowerCase();
|
||||
const table = tables.find(function (tbl) { return tbl.name.toLowerCase() === tableName; });
|
||||
const colOpts = table
|
||||
? table.columns.map(function (col) { return { id: col.name, label: col.name + ' (' + col.type + ')' }; })
|
||||
: [{ id: '', label: table ? 'Keine Felder' : 'Feld wählen', disabled: !table }];
|
||||
setTraitOptions(columnTrait, colOpts);
|
||||
}
|
||||
},
|
||||
|
||||
updateLabel() {
|
||||
const attrs = this.getAttributes();
|
||||
const type = attrs['data-placeholder-type'] || 'custom';
|
||||
let label;
|
||||
if (type === 'database') {
|
||||
const table = attrs['data-placeholder-table'] || 'TABELLE';
|
||||
const column = attrs['data-placeholder-column'] || 'FELD';
|
||||
label = (table + '.' + column).toUpperCase();
|
||||
} else {
|
||||
label = (attrs['data-placeholder-key'] || 'PLATZHALTER').toUpperCase();
|
||||
}
|
||||
const text = '{{' + label + '}}';
|
||||
const comps = this.components();
|
||||
const onlyText = comps.length === 1 && comps.at(0).is('textnode');
|
||||
if (onlyText) {
|
||||
comps.at(0).set('content', text);
|
||||
} else {
|
||||
comps.reset([{ type: 'textnode', content: text }]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
PlaceholderModel.isComponent = function (el) {
|
||||
if (el && el.hasAttribute && el.hasAttribute('data-placeholder-type')) {
|
||||
return { type: PLACEHOLDER_COMPONENT };
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const PlaceholderView = BaseView.extend({
|
||||
render() {
|
||||
BaseView.prototype.render.apply(this, arguments);
|
||||
@@ -291,7 +292,7 @@
|
||||
const tableName = firstTable.name || 'tabelle';
|
||||
const columns = Array.isArray(firstTable.columns) ? firstTable.columns : [];
|
||||
const firstColumn = columns.length ? columns[0].name : 'feld';
|
||||
const placeholderLabel = `${tableName}.${firstColumn}`.toUpperCase();
|
||||
const placeholderLabel = (tableName + '.' + firstColumn).toUpperCase();
|
||||
addOnce(bm, 'cust-placeholder-db', {
|
||||
id: 'cust-placeholder-db',
|
||||
label: '🗄️ Placeholder (DB)',
|
||||
|
||||
Reference in New Issue
Block a user