233 lines
10 KiB
JavaScript
233 lines
10 KiB
JavaScript
Vue.component('tt-resolver', {
|
|
props: {
|
|
value: {type: Number, required: true},
|
|
reference: {type: String, required: true},
|
|
},
|
|
data() {
|
|
return {
|
|
window: window,
|
|
loading: true,
|
|
text: '',
|
|
}
|
|
},
|
|
template: `
|
|
<div v-if="loading" class="d-flex justify-content-center align-items-center">
|
|
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<span v-else>{{ text }}</span>
|
|
`,
|
|
async created() {
|
|
const entry = await axios.get(window.TT_CONFIG['BASE_PATH'] + '/' + this.reference + '/getById?id=' + this.value);
|
|
this.text = entry.data.name ?? entry.data.title ?? entry.data.text ?? '[E] Key not found';
|
|
this.loading = false;
|
|
}
|
|
})
|
|
|
|
Vue.component('tt-positions-manager',
|
|
{
|
|
props: {
|
|
value: {type: [Array, String], required: false},
|
|
config: {type: Object, required: true},
|
|
groupMode: {type: Boolean, default: false},
|
|
},
|
|
data() {
|
|
return {
|
|
window: window,
|
|
positions: this.value,
|
|
formData: {},
|
|
groupName: '',
|
|
selectedIndex: null,
|
|
}
|
|
},
|
|
template: `
|
|
<div class="positions-manager">
|
|
<template v-if="config['header']">
|
|
<h4 class="text-center">{{ config["header"] }}</h4>
|
|
</template>
|
|
<div class="form-container">
|
|
<template v-for="(field, key) in config.fields">
|
|
<slot :name="key" v-bind:field="field" v-bind:value="formData[key]">
|
|
<tt-input
|
|
v-if="field.type === 'input'"
|
|
:label="field.label"
|
|
v-model="formData[key]"
|
|
@input="$emit('updateField-' + key, $event)"
|
|
sm
|
|
:type="field.inputType || 'text'"
|
|
/>
|
|
<tt-autocomplete
|
|
v-else-if="field.type === 'autocomplete'"
|
|
:label="field.label"
|
|
:emit-display-value="field.emitDisplayValue || false"
|
|
v-model="formData[key]"
|
|
@input="delete formData[key + '_text']; $emit('updateField-' + key, $event)"
|
|
@displayValue="delete formData[key];formData[key + '_text'] = $event"
|
|
:api-url="window.TT_CONFIG['BASE_PATH'] + field.apiUrl"
|
|
sm
|
|
/>
|
|
<tt-textarea
|
|
v-else-if="field.type === 'textarea'"
|
|
:label="field.label"
|
|
v-model="formData[key]"
|
|
@input="$emit('updateField-' + key, $event)"
|
|
sm
|
|
/>
|
|
<tt-checkbox
|
|
v-else-if="field.type === 'checkbox'"
|
|
:label="field.label"
|
|
@input="$emit('updateField-' + key, $event)"
|
|
sm
|
|
v-model="formData[key]"
|
|
/>
|
|
<tt-select
|
|
v-else-if="field.type === 'select'"
|
|
:label="field.label"
|
|
@input="$emit('updateField-' + key, $event)"
|
|
sm
|
|
v-model="formData[key]"
|
|
:options="field.options"
|
|
/>
|
|
</slot>
|
|
</template>
|
|
<div class="button-wrapper">
|
|
<tt-button @click="saveEntry" sm :additional-class="selectedIndex === null ? 'btn-primary' : 'btn-success'"
|
|
:text="selectedIndex === null ? 'Hinzufügen' : 'Aktualisieren'"/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-container" v-if="groupMode">
|
|
<tt-input label="Gruppenname" v-model="groupName" sm/>
|
|
<tt-button @click="addGroup" sm text="Gruppe hinzufügen" additional-class="btn-primary"/>
|
|
</div>
|
|
|
|
<table class="table table-striped table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th v-for="field in config['fields']">{{ field.label }}</th>
|
|
<th style="text-align: right;padding-right: 24px">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<template v-for="(group, groupName) in positionsToRender">
|
|
<tr v-if="groupMode">
|
|
<td colspan="100%">
|
|
<h4 style="text-align: center;">{{ groupName }}</h4>
|
|
</td>
|
|
</tr>
|
|
<tr v-for="(position, index) in group" :key="groupMode ? groupName + index : index">
|
|
<td v-for="(field, key) in config.fields">
|
|
<tt-resolver
|
|
v-if="field.customFieldReference && position[key]"
|
|
:reference="field.customFieldReference"
|
|
:value="position[key]"
|
|
/>
|
|
<span v-else>{{ formatFieldValue(position[key] ?? position[key + '_text'], field) }}</span>
|
|
</td>
|
|
<td class="d-flex justify-content-end">
|
|
<select v-if="groupMode" v-model="position._group" @change="$set(position, '_group', $event.target.value)">
|
|
<option v-for="group in allGroups" :value="group">{{ group }}</option>
|
|
</select>
|
|
<tt-button @click="editEntry(index)" sm additional-class="btn-primary" icon="fa fa-edit"/>
|
|
<tt-button @click="deleteEntry(index)" sm additional-class="btn-danger" icon="fa fa-trash"/>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`,
|
|
methods: {
|
|
updateField(key, value) {
|
|
this.$set(this.formData, key, value);
|
|
},
|
|
defaultValidateForm(formData) {
|
|
console.log(this.config["validateFormOptions"], formData);
|
|
for (const field of this.config["validateFormOptions"]) {
|
|
if (!(formData[field.key] || formData[field.key + '_text'])) {
|
|
window.notify('error', field.message);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
async saveEntry() {
|
|
if (this.config.hasOwnProperty('validateFormOptions') && !this.defaultValidateForm(this.formData)) return;
|
|
else if (this.config.validateForm && !await this.config.validateForm(this.formData)) return;
|
|
|
|
if (this.selectedIndex === null) this.positions.push(this.formData);
|
|
else this.$set(this.positions, this.selectedIndex, this.formData);
|
|
|
|
if (this.config.customOrdering) {
|
|
this.positions.sort((a, b) => a[this.config.customOrdering] - b[this.config.customOrdering]);
|
|
}
|
|
|
|
this.$emit('input', this.positions);
|
|
this.resetForm();
|
|
},
|
|
addGroup() {
|
|
this.positions.push({_group: this.groupName});
|
|
this.groupName = '';
|
|
},
|
|
editEntry(index) {
|
|
this.selectedIndex = index;
|
|
this.formData = {...this.positions[index]};
|
|
},
|
|
deleteEntry(index) {
|
|
this.positions.splice(index, 1);
|
|
this.$emit('input', this.positions);
|
|
},
|
|
resetForm() {
|
|
this.formData = {};
|
|
this.selectedIndex = null;
|
|
},
|
|
formatFieldValue(value, field) {
|
|
if (field.formatter) return field.formatter(value);
|
|
return value;
|
|
},
|
|
},
|
|
//TODO: cleanup
|
|
created() {
|
|
if (this.config["customMethods"]) Object.assign(this, this.config.customMethods);
|
|
if (!this.positions) this.positions = [];
|
|
if (typeof this.positions === 'string') {
|
|
try {
|
|
this.positions = JSON.parse(this.positions);
|
|
} catch (e) {
|
|
console.error(e);
|
|
this.positions = [];
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
groupedPositions() {
|
|
const groups = {};
|
|
for (const position of this.positions) {
|
|
const group = position._group ?? 'Keine Gruppe';
|
|
if (!groups[group]) groups[group] = [];
|
|
if (Object.keys(position).length !== 1) groups[group].push(position);
|
|
}
|
|
return groups;
|
|
},
|
|
positionsToRender() {
|
|
return this.groupMode ? this.groupedPositions : { '': this.positions };
|
|
},
|
|
allGroups() {
|
|
return Object.keys(this.groupedPositions);
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler() {
|
|
this.positions = this.value;
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}); |