524 lines
23 KiB
JavaScript
524 lines
23 KiB
JavaScript
Vue.component('tt-resolver', {
|
|
props: {
|
|
value: { type: [Number, String], required: true },
|
|
reference: { type: String, required: true },
|
|
autocomplete: { type: Boolean, default: false }
|
|
},
|
|
data: () => ({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 cacheKey = `${this.reference}_${this.value}_${this.autocomplete}`;
|
|
const cached = JSON.parse(localStorage.getItem(cacheKey) || 'null');
|
|
|
|
if (cached && Date.now() - cached.timestamp < 1800000) {
|
|
this.text = cached.text;
|
|
this.loading = false;
|
|
return;
|
|
}
|
|
|
|
const endpoint = this.autocomplete
|
|
? `${window.TT_CONFIG["BASE_PATH"]}${this.reference}?searchedID=${this.value}`
|
|
: `${window.TT_CONFIG["BASE_PATH"]}/${this.reference}/getById?id=${this.value}`;
|
|
|
|
const { data } = await axios.get(endpoint);
|
|
|
|
if (this.reference === 'WarehouseArticle') this.text = `${data.articleNumber} | ${data.title}`;
|
|
else this.text = this.autocomplete ? data[0]?.text : data.name ?? data.title ?? data.text ?? '[E] Key not found';
|
|
|
|
localStorage.setItem(cacheKey, JSON.stringify({ text: this.text, timestamp: Date.now() }));
|
|
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},
|
|
submitLoading: {type: Boolean, default: false}
|
|
},
|
|
data() {
|
|
return {
|
|
window: window,
|
|
positions: this.value,
|
|
formData: {},
|
|
groupName: '',
|
|
selectedIndex: null,
|
|
editingGroupName: null,
|
|
tempGroupName: '',
|
|
editingCell: {
|
|
groupName: null,
|
|
index: null,
|
|
key: null
|
|
},
|
|
// --- New properties for Drag and Drop ---
|
|
ctrlPressed: false, // Is the Ctrl key currently pressed?
|
|
draggingItem: null, // The actual position object being dragged
|
|
dragOverItem: null // The position object the mouse is currently over
|
|
}
|
|
},
|
|
template: `
|
|
<div class="positions-manager" :class="{'ctrl-pressed': ctrlPressed}">
|
|
<template v-if="config['header']">
|
|
<h4 class="text-center">{{ config["header"] }}</h4>
|
|
</template>
|
|
<div class="form-container" ref="formContainer">
|
|
<template v-for="(field, key) in config.fields">
|
|
<template v-if="typeof field.showCondition === 'function' ? field.showCondition(formData) : true">
|
|
<slot :name="key" v-bind:field="field" v-bind:value="formData[key]">
|
|
<div :style="field.style ?? {}" :key="key + field.label">
|
|
<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="$emit('updateField-' + key, $event)"
|
|
@displayValue="$emit('updateField-' + key + '_text', $event)"
|
|
:ref="'autocomplete-' + key"
|
|
:api-url="window.TT_CONFIG['BASE_PATH'] + field.apiUrl"
|
|
sm
|
|
/>
|
|
<tt-input-article
|
|
v-if="field.type === 'input-article'"
|
|
:label="field.label"
|
|
:emit-display-value="field.emitDisplayValue || false"
|
|
v-model="formData[key]"
|
|
@input="$emit('updateField-' + key, $event)"
|
|
@displayValue="$emit('updateField-' + key + '_text', $event)"
|
|
:ref="'article-' + key"
|
|
:api-url="field.apiUrl"
|
|
:field="field"
|
|
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 :name="key + '-prepend'" v-bind:field="field" v-bind:value="formData[key]"/>
|
|
</div>
|
|
|
|
</slot>
|
|
</template>
|
|
</template>
|
|
<div class="button-wrapper">
|
|
<tt-button @click="saveEntry"
|
|
sm
|
|
:loading="submitLoading"
|
|
:additional-class="selectedIndex === null ? 'btn-primary' : 'btn-success'"
|
|
:text="selectedIndex === null ? 'Hinzufügen' : 'Aktualisieren'"/>
|
|
</div>
|
|
|
|
<slot name="form-actions-append"></slot>
|
|
</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"
|
|
class="group-header-row"
|
|
@dragover.prevent="dragOverItem = groupName"
|
|
@dragleave="dragOverItem = null"
|
|
@drop="onDrop(groupName)"
|
|
:class="{'drop-indicator': dragOverItem === groupName}">
|
|
<td :colspan="Object.keys(config.fields).length + 1">
|
|
<div class="d-flex justify-content-center align-items-center">
|
|
<template v-if="editingGroupName === groupName">
|
|
<tt-input v-model="tempGroupName" sm style="max-width: 200px; margin-right: 10px;"/>
|
|
<tt-button @click="saveGroupName(groupName)" sm additional-class="btn-success" icon="fa fa-check" style="margin-right: 5px;"/>
|
|
<tt-button @click="cancelGroupEdit" sm additional-class="btn-secondary" icon="fa fa-times"/>
|
|
</template>
|
|
<template v-else>
|
|
<h4 style="margin: 0; margin-right: 10px;">{{ groupName }}</h4>
|
|
<template v-if="groupName !== 'Keine Gruppe'">
|
|
<tt-button @click="startGroupEdit(groupName)" sm additional-class="btn-primary" icon="fa fa-edit" style="margin-right: 5px;"/>
|
|
<tt-button @click="deleteGroup(groupName)" sm additional-class="btn-danger" icon="fa fa-trash"/>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-for="position in group"
|
|
:key="positions.indexOf(position)"
|
|
class="position-row"
|
|
:class="{
|
|
'dragging': draggingItem === position,
|
|
'drop-indicator': dragOverItem === position
|
|
}"
|
|
:draggable="ctrlPressed"
|
|
@dragstart="onDragStart(position, $event)"
|
|
@dragend="onDragEnd"
|
|
@dragover.prevent="dragOverItem = position"
|
|
@dragleave="dragOverItem = null"
|
|
@drop="onDrop(position)">
|
|
|
|
<td v-for="(field, key) in config.fields"
|
|
:class="{'editable-cell': field.editableInTable && (field.type === 'input' || field.type === 'textarea')}"
|
|
@click="startCellEdit(groupName, positions.indexOf(position), key, field)">
|
|
<template v-if="isCellEditing(groupName, positions.indexOf(position), key)">
|
|
<input
|
|
v-if="field.type === 'input'"
|
|
:type="field.inputType || 'text'"
|
|
v-model="position[key]"
|
|
@blur="saveCellEdit(position, key)"
|
|
@keyup.enter="saveCellEdit(position, key)"
|
|
class="form-control form-control-sm"
|
|
autofocus
|
|
/>
|
|
<textarea
|
|
v-else-if="field.type === 'textarea'"
|
|
v-model="position[key]"
|
|
@blur="saveCellEdit(position, key)"
|
|
@keyup.enter.prevent="saveCellEdit(position, key)"
|
|
class="form-control form-control-sm"
|
|
rows="1"
|
|
autofocus
|
|
></textarea>
|
|
</template>
|
|
<template v-else>
|
|
<tt-resolver
|
|
:key="positions.indexOf(position) + key + position[key]"
|
|
v-if="position[key] && (field.customFieldReference || field.type === 'autocomplete')"
|
|
:autocomplete="!field.customFieldReference && field.type === 'autocomplete'"
|
|
:reference="field.customFieldReference || field.apiUrl"
|
|
:value="position[key]"
|
|
/>
|
|
<span v-else-if="field.type === 'checkbox'">{{ position[key] ? 'Ja' : 'Nein' }}</span>
|
|
<span v-else>{{ formatFieldValue(position[key] ?? position[key + '_text'], field) }}</span>
|
|
</template>
|
|
</td>
|
|
<td class="d-flex justify-content-end">
|
|
<select v-if="groupMode" :value="position._group || 'Keine Gruppe'" @change="$set(position, '_group', $event.target.value)">
|
|
<option v-for="g in allGroups" :value="g">{{ g }}</option>
|
|
</select>
|
|
<tt-button @click="editEntry(position)" sm additional-class="btn-primary" icon="fa fa-edit"/>
|
|
<tt-button @click="deleteEntry(position)" sm additional-class="btn-danger" icon="fa fa-trash"/>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`,
|
|
methods: {
|
|
// --- NEW DRAG AND DROP METHODS ---
|
|
handleKeyDown(event) {
|
|
if (event.key === 'Control' || event.key === 'Meta') { // Meta is for MacOS Command key
|
|
this.ctrlPressed = true;
|
|
}
|
|
},
|
|
handleKeyUp(event) {
|
|
if (event.key === 'Control' || event.key === 'Meta') {
|
|
this.ctrlPressed = false;
|
|
}
|
|
},
|
|
onDragStart(position, event) {
|
|
this.draggingItem = position;
|
|
// Necessary for Firefox to enable drag
|
|
event.dataTransfer.setData('text/plain', '');
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
},
|
|
onDrop(targetItemOrGroup) {
|
|
if (!this.draggingItem) return;
|
|
|
|
const draggedIndex = this.positions.indexOf(this.draggingItem);
|
|
// Remove item from its original position
|
|
const itemToMove = this.positions.splice(draggedIndex, 1)[0];
|
|
|
|
let targetIndex;
|
|
let newGroup;
|
|
|
|
if (typeof targetItemOrGroup === 'string') {
|
|
// Dropped on a group header
|
|
newGroup = targetItemOrGroup;
|
|
const firstItemOfGroup = this.positions.find(p => (p._group || 'Keine Gruppe') === newGroup);
|
|
targetIndex = firstItemOfGroup ? this.positions.indexOf(firstItemOfGroup) : this.positions.length;
|
|
} else {
|
|
// Dropped on another position item
|
|
newGroup = targetItemOrGroup._group || 'Keine Gruppe';
|
|
targetIndex = this.positions.indexOf(targetItemOrGroup);
|
|
}
|
|
|
|
// Update group and insert at the new position
|
|
this.$set(itemToMove, '_group', newGroup);
|
|
this.positions.splice(targetIndex, 0, itemToMove);
|
|
|
|
this.$emit('input', this.positions);
|
|
this.cleanupDrag();
|
|
},
|
|
onDragEnd() {
|
|
this.cleanupDrag();
|
|
},
|
|
cleanupDrag() {
|
|
this.draggingItem = null;
|
|
this.dragOverItem = null;
|
|
},
|
|
|
|
// --- EXISTING METHODS (some are simplified) ---
|
|
updateField(key, value) {
|
|
this.$set(this.formData, key, value);
|
|
},
|
|
defaultValidateForm(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;
|
|
},
|
|
checkEmitDisplayValueAutocomplete() {
|
|
for (const [key, field] of Object.entries(this.config.fields)) {
|
|
if ((typeof field.showCondition === 'function' && field.showCondition(this.formData) === true || !field.showCondition) && field.type === 'autocomplete' && field.emitDisplayValue && (isNaN(this.formData[key]) || !this.formData[key]) && this.$refs['autocomplete-' + key][0]) {
|
|
this.$set(this.formData, key + '_text', this.$refs['autocomplete-' + key][0].displayValue);
|
|
this.$delete(this.formData, key);
|
|
}
|
|
|
|
if ((typeof field.showCondition === 'function' && field.showCondition(this.formData) === true || !field.showCondition) && field.type === 'input-article' && field.emitDisplayValue && (isNaN(this.formData[key]) || !this.formData[key]) && this.$refs['article-' + key][0]) {
|
|
console.log(this.$refs['article-' + key][0].$refs.autocomplete);
|
|
this.$set(this.formData, key + '_text', this.$refs['article-' + key][0].$refs.autocomplete.displayValue);
|
|
this.$delete(this.formData, key);
|
|
}
|
|
|
|
if (field.emitDisplayValue && this.formData[key] !== null && this.formData[key] !== undefined) {
|
|
this.$delete(this.formData, key + '_text');
|
|
}
|
|
|
|
}
|
|
},
|
|
async saveEntry() {
|
|
this.checkEmitDisplayValueAutocomplete();
|
|
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 = '';
|
|
},
|
|
startGroupEdit(groupName) {
|
|
this.editingGroupName = groupName;
|
|
this.tempGroupName = groupName;
|
|
},
|
|
saveGroupName(oldGroupName) {
|
|
if (this.tempGroupName.trim() === '') {
|
|
window.notify('error', 'Gruppenname darf nicht leer sein');
|
|
return;
|
|
}
|
|
|
|
if (this.tempGroupName !== oldGroupName) {
|
|
this.positions.forEach(position => {
|
|
if (position._group === oldGroupName) {
|
|
this.$set(position, '_group', this.tempGroupName);
|
|
}
|
|
});
|
|
this.$emit('input', this.positions);
|
|
}
|
|
|
|
this.editingGroupName = null;
|
|
this.tempGroupName = '';
|
|
},
|
|
cancelGroupEdit() {
|
|
this.editingGroupName = null;
|
|
this.tempGroupName = '';
|
|
},
|
|
deleteGroup(groupName) {
|
|
if (confirm(`Möchten Sie die Gruppe "${groupName}" wirklich löschen? Alle Einträge werden in "Keine Gruppe" verschoben.`)) {
|
|
this.positions = this.positions.filter(position => {
|
|
if (position._group === groupName) {
|
|
if (Object.keys(position).length === 1) {
|
|
return false;
|
|
}
|
|
this.$set(position, '_group', 'Keine Gruppe');
|
|
}
|
|
return true;
|
|
});
|
|
this.$emit('input', this.positions);
|
|
}
|
|
},
|
|
async editEntry(position) { // Simplified to take position object
|
|
const index = this.positions.indexOf(position);
|
|
if (index === -1) return;
|
|
|
|
this.selectedIndex = index;
|
|
for (const [key, field] of Object.entries(this.config.fields)) {
|
|
if (field.type === 'autocomplete' && field.emitDisplayValue) {
|
|
await this.$nextTick();
|
|
if (this.positions[index][key + '_text'] && this.$refs['autocomplete-' + key][0]) {
|
|
this.$refs['autocomplete-' + key][0].displayValue = this.positions[index][key + '_text'];
|
|
this.$set(this.formData, key, this.positions[index][key]);
|
|
}
|
|
}
|
|
}
|
|
this.formData = {...this.positions[index]};
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs.formContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
});
|
|
},
|
|
deleteEntry(position) { // Simplified to take position object
|
|
const index = this.positions.indexOf(position);
|
|
if (index > -1) {
|
|
this.positions.splice(index, 1);
|
|
this.$emit('input', this.positions);
|
|
}
|
|
},
|
|
resetForm() {
|
|
this.formData = {};
|
|
for (const [key, field] of Object.entries(this.config.fields)) {
|
|
if (
|
|
typeof field.showCondition === 'function' && field.showCondition(this.formData) === true &&
|
|
field.type === 'autocomplete' && field.emitDisplayValue && this.$refs['autocomplete-' + key][0]) {
|
|
this.$refs['autocomplete-' + key][0].displayValue = '';
|
|
}
|
|
if (field.inputType === 'date') {
|
|
this.$set(this.formData, key, moment().format('YYYY-MM-DD'));
|
|
}
|
|
}
|
|
this.selectedIndex = null;
|
|
},
|
|
formatFieldValue(value, field) {
|
|
if (field.formatter) return field.formatter(value);
|
|
if (field.inputType === 'date') return moment(value).format('DD.MM.YYYY');
|
|
return value;
|
|
},
|
|
startCellEdit(groupName, index, key, field) {
|
|
if (!field.editableInTable || !(field.type === 'input' || field.type === 'textarea')) return;
|
|
this.editingCell = { groupName, index, key };
|
|
this.$nextTick(() => {
|
|
const inputElement = this.$el.querySelector(`.editable-cell input[type="${field.type}"], .editable-cell textarea`);
|
|
if (inputElement) {
|
|
inputElement.focus();
|
|
}
|
|
});
|
|
},
|
|
saveCellEdit(position, key) {
|
|
this.editingCell = { groupName: null, index: null, key: null };
|
|
// Since `position` is an object from the array, it's already reactive.
|
|
// We just emit the change.
|
|
this.$emit('input', this.positions);
|
|
},
|
|
isCellEditing(groupName, index, key) {
|
|
const currentGroup = (this.positions[index] && this.positions[index]._group) || 'Keine Gruppe';
|
|
return this.editingCell.groupName === currentGroup &&
|
|
this.editingCell.index === index &&
|
|
this.editingCell.key === key;
|
|
}
|
|
},
|
|
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 = [];
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.resetForm();
|
|
// Add listeners for the Ctrl key
|
|
window.addEventListener('keydown', this.handleKeyDown);
|
|
window.addEventListener('keyup', this.handleKeyUp);
|
|
window.addEventListener('blur', () => { this.ctrlPressed = false; }); // Reset if window loses focus
|
|
},
|
|
beforeDestroy() {
|
|
// Important: remove listeners to prevent memory leaks
|
|
window.removeEventListener('keydown', this.handleKeyDown);
|
|
window.removeEventListener('keyup', this.handleKeyUp);
|
|
},
|
|
computed: {
|
|
groupedPositions() {
|
|
const groups = {};
|
|
// Ensure there's a default group for items without one
|
|
if (this.positions.some(p => !p._group && Object.keys(p).length > 1)) {
|
|
groups['Keine Gruppe'] = [];
|
|
}
|
|
|
|
// Get all unique group names first to preserve order
|
|
const groupNames = [...new Set(this.positions.map(p => p._group).filter(Boolean))];
|
|
groupNames.forEach(name => {
|
|
groups[name] = [];
|
|
});
|
|
|
|
for (const position of this.positions) {
|
|
// Ignore empty group placeholders
|
|
if (Object.keys(position).length === 1 && position._group) continue;
|
|
|
|
const groupName = position._group || 'Keine Gruppe';
|
|
if (!groups[groupName]) {
|
|
groups[groupName] = [];
|
|
}
|
|
groups[groupName].push(position);
|
|
}
|
|
return groups;
|
|
},
|
|
positionsToRender() {
|
|
return this.groupMode ? this.groupedPositions : {'': this.positions};
|
|
},
|
|
allGroups() {
|
|
return ['Keine Gruppe', ...Object.keys(this.groupedPositions).filter(g => g !== 'Keine Gruppe')];
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newValue) {
|
|
this.positions = newValue;
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
})
|