Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

added new fields

Browse Source
This commit is contained in:
Luca
2025-08-29 12:30:14 +02:00
parent ebc6183779
commit 1a5f7bfa2d
6 changed files with 892 additions and 1086 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/pages/RMLWorkorderAdmin/RMLWorkorderAdmin.js
+243 -222
View File
@@ -23,23 +23,22 @@ Vue.component('r-m-l-workorder-admin', {
>
<template v-slot:preorderinfo="{ row }">
<div class="small">
<div>
<strong>Kunde:</strong> {{ row.customerCompany || row.customerName }}
</div>
<div><strong>Kunde:</strong> {{ row.customerCompany || row.customerName }}</div>
<div>
<strong>Anschluss:</strong>
{{ row.street }} {{ row.hausnummer }}<template v-if="row.stiege">/{{ row.stiege }}</template><template v-if="row.apartment"> / WE: {{ row.apartment }}</template>, {{ row.plz }} {{ row.city }}
{{ row.street }} {{ row.hausnummer }}
<template v-if="row.stiege">/{{ row.stiege }}</template>
<template v-if="row.apartment"> / WE: {{ row.apartment }}</template>
, {{ row.plz }} {{ row.city }}
</div>
<div>
<strong>OAID:</strong> <span class="text-pink">{{ row.oaid }}</span>
<tt-button
icon="fas fa-external-link-alt"
@click="window.open(window.TT_CONFIG.BASE_PATH + '/Preorder/Index?filter[ucode]=' + row.ucode, '_blank');"
additional-class="btn-link btn-sm p-0 m-0"
title="Zur Bestellung"
/>
</div>
</div>
</template>
@@ -55,91 +54,115 @@ Vue.component('r-m-l-workorder-admin', {
additional-class="btn-link btn-sm p-0"
title="Auftrag auf Problem behoben setzen"
/>
</template>
<template v-slot:companyname="{ row }">
<div class="d-flex justify-content-between align-items-center">
<div class="flex-grow-1">
<div v-if="editingWorkorderId === row.id">
<div v-if="companiesLoading" class="spinner-border spinner-border-sm"></div>
<tt-select v-else
:options="companiesByTenant[row.tenantId] || []"
:value="row.companyId"
@input="assignCompany(row, $event)"
@blur="editingWorkorderId = null"
@keydown.esc.native="editingWorkorderId = null"
placeholder="Firma zuweisen..."
sm
no-form-group
:options="companiesByTenant[row.tenantId] || []" :value="row.companyId"
@input="assignCompany(row, $event)" @blur="editingWorkorderId = null"
@keydown.esc.native="editingWorkorderId = null" placeholder="Firma zuweisen..."
sm no-form-group
/>
</div>
<div v-else-if="row.status === 'new'">
<div v-if="companiesLoading" class="spinner-border spinner-border-sm"></div>
<tt-select v-else
:options="companiesByTenant[row.tenantId] || []"
:value="row.companyId"
@input="assignCompany(row, $event)"
@focus="getCompaniesForWorkorder(row)"
placeholder="Firma zuweisen..."
sm
no-form-group
:options="companiesByTenant[row.tenantId] || []" :value="row.companyId"
@input="assignCompany(row, $event)" @focus="getCompaniesForWorkorder(row)"
placeholder="Firma zuweisen..." sm no-form-group
/>
</div>
<div v-else class="d-flex align-items-center">
<div v-else>
<span>{{ row.companyName || 'N/A' }}</span>
<tt-button
icon="fas fa-edit"
@click="startCompanyEdit(row)"
additional-class="btn-link btn-sm p-0 ml-2"
title="Zuweisung ändern"
/>
</div>
</div>
<div class="ml-3">
<div class="d-flex align-items-center">
<tt-button
v-if="!['completed', 'cancelled', 'new'].includes(row.status)"
icon="fas fa-edit"
@click="startCompanyEdit(row)"
additional-class="btn-link btn-sm p-0 ml-2"
title="Zuweisung ändern"
/>
<tt-button
v-if="!['completed', 'cancelled'].includes(row.status)"
icon="fas fa-ban"
@click="cancelWorkorder(row)"
additional-class="btn-link btn-sm p-0 ml-2 text-danger"
title="Auftrag stornieren"
/>
<tt-button v-if="!workordersToAssign.includes(row.id)"
icon="fas fa-plus-circle text-success"
@click="addToAssignList(row)"
additional-class="btn-link btn-sm p-0"
title="Zur Zuweisungsliste hinzufügen"
icon="fas fa-plus-circle text-success" @click="addToAssignList(row)"
additional-class="btn-link btn-sm p-0 ml-2" title="Zur Zuweisungsliste hinzufügen"
/>
<tt-button v-if="workordersToAssign.includes(row.id)"
icon="fas fa-minus-circle text-danger"
@click="removeFromAssignList(row)"
additional-class="btn-link btn-sm p-0"
title="Von Zuweisungsliste entfernen"
icon="fas fa-minus-circle text-danger" @click="removeFromAssignList(row)"
additional-class="btn-link btn-sm p-0 ml-2" title="Von Zuweisungsliste entfernen"
/>
</div>
</div>
</template>
<template v-slot:additionalinfo="{ row }">
<div v-if="editingAdditionalInfoId === row.id">
<tt-textarea
v-model="tempAdditionalInfo"
@keydown.esc.native="cancelEdit"
rows="3"
no-form-group
sm
ref="editTextarea"
/>
<div class="mt-2 d-flex justify-content-end">
<tt-button
text="Abbrechen"
@click="cancelEdit"
sm
additional-class="btn-secondary mr-2"
/>
<tt-button
text="Speichern"
@click="updateAdditionalInfo(row, tempAdditionalInfo)"
sm
additional-class="btn-success"
/>
</div>
</div>
<div v-else class="d-flex align-items-start">
<span
style="white-space: pre-wrap; max-width: 250px; display: inline-block;">{{ row.additionalInfo || '-' }}</span>
<tt-button
icon="fas fa-edit" @click="startAdditionalInfoEdit(row)"
additional-class="btn-link btn-sm p-0 ml-2" title="Zusatz-Info bearbeiten"
/>
</div>
</template>
<template v-slot:deadlinedate="{ row }">
<div v-if="editingDeadlineId === row.id">
<tt-date-picker
:value="row.deadlineDate"
:date-range="false"
@input="updateDeadline(row, $event)"
@blur="editingDeadlineId = null"
sm
no-form-group
:value="row.deadlineDate" :date-range="false"
@input="updateDeadline(row, $event)" @blur="editingDeadlineId = null"
sm no-form-group
/>
</div>
<div v-else class="d-flex align-items-center">
<span>{{ formatDate(row.deadlineDate) }}</span>
<span v-if="row.daysUntilDeadline !== null && row.daysUntilDeadline >= 0" class="ml-2 text-muted small">
übrig: {{ row.daysUntilDeadline }} Tag{{ row.daysUntilDeadline !== 1 ? 'e' : '' }}
</span>
<tt-button
icon="fas fa-edit"
@click="editingDeadlineId = row.id"
additional-class="btn-link btn-sm p-0 ml-2"
title="Deadline ändern"
<tt-button icon="fas fa-edit" @click="editingDeadlineId = row.id"
additional-class="btn-link btn-sm p-0 ml-2" title="Deadline ändern"
/>
</div>
</template>
<template v-slot:appointmentdate="{ row }">
{{ formatDate(row.appointmentDate) }}
{{ formatDate(row.appointmentDate, true) }}
</template>
<template v-slot:expandedRow="{ row }">
@@ -159,30 +182,23 @@ Vue.component('r-m-l-workorder-admin', {
workordersToAssign: [],
editingWorkorderId: null,
editingDeadlineId: null,
editingAdditionalInfoId: null,
tempAdditionalInfo: '',
companiesByTenant: {},
companiesLoading: false,
massAssignCompanyId: null,
massAssignLoading: false,
companiesForMassAssign: [],
crudConfig: {
...window.TT_CONFIG.CRUD_CONFIG,
selectable: false,
expandable: true,
...window.TT_CONFIG.CRUD_CONFIG, selectable: false, expandable: true,
customRowClass: (row) => {
if (['completed', 'new', 'cancelled'].includes(row.status)) return 'tt-rml-workorder-irrelevant';
if (['correction_requested', 'intervention_required'].includes(row.status)) return 'tt-rml-workorder-high';
const deadlineDate = moment.unix(row.deadlineDate);
if (['completed', 'new'].includes(row.status) || !deadlineDate.isValid()) {
return 'tt-rml-workorder-irrelevant';
}
if (['correction_requested', 'intervention_required'].includes(row.status)) {
return 'tt-rml-workorder-high';
}
if (!deadlineDate.isValid()) return 'tt-rml-workorder-irrelevant';
const daysLeft = deadlineDate.diff(moment(), 'days');
if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
if (daysLeft <= 21) return 'tt-rml-workorder-medium';
return 'tt-rml-workorder-ontrack';
},
additionalActions: []
@@ -191,9 +207,7 @@ Vue.component('r-m-l-workorder-admin', {
},
methods: {
addToAssignList(row) {
if (!this.workordersToAssign.includes(row.id)) {
this.workordersToAssign.push(row.id);
}
if (!this.workordersToAssign.includes(row.id)) this.workordersToAssign.push(row.id);
},
removeFromAssignList(row) {
this.workordersToAssign = this.workordersToAssign.filter(id => id !== row.id);
@@ -202,18 +216,16 @@ Vue.component('r-m-l-workorder-admin', {
const column = this.crudConfig.columns.find(c => c.key === 'status');
return column.table.filterOptions.find(opt => opt.value === status) || {};
},
formatDate(timestamp) {
formatDate(timestamp, withTime = false) {
if (!timestamp) return '–';
return window.moment.unix(timestamp).format('DD.MM.YYYY');
return window.moment.unix(timestamp).format(withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY');
},
async getCompaniesForWorkorder(workorder) {
if (!workorder.tenantId || this.companiesByTenant[workorder.tenantId]) {
return;
}
if (!workorder.tenantId || this.companiesByTenant[workorder.tenantId]) return;
this.companiesLoading = true;
try {
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getCompanies`, { params: { tenantId: workorder.tenantId } });
this.$set(this.companiesByTenant, workorder.tenantId, response.data);
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getCompanies`, {params: {tenantId: workorder.tenantId}});
this.$set(this.companiesByTenant, workorder.tenantId, data);
} catch (e) {
window.notify('error', 'Firmenliste konnte nicht geladen werden.');
} finally {
@@ -229,18 +241,15 @@ Vue.component('r-m-l-workorder-admin', {
this.editingWorkorderId = null;
return;
}
const payload = {
workorderId: workorder.id,
companyId: companyId
};
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/assignWorkorder`, payload);
if (response.data.success) {
window.notify('success', response.data.message);
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/assignWorkorder`, {
workorderId: workorder.id,
companyId: companyId
});
if (data.success) {
window.notify('success', data.message);
this.$refs.table.$refs.table.refreshTable();
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
} finally {
@@ -249,28 +258,21 @@ Vue.component('r-m-l-workorder-admin', {
},
async massAssignCompanies(companyId) {
if (!companyId) return;
if (!confirm(`${this.workordersToAssign.length} Workorder(s) der ausgewählten Firma zuweisen?`)) {
this.massAssignCompanyId = null; // Reset select on cancel
this.massAssignCompanyId = null;
return;
}
this.massAssignLoading = true;
const payload = {
companyId: companyId,
workorderIds: this.workordersToAssign
};
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/massAssignWorkorders`, payload);
if (response.data.success) {
window.notify('success', response.data.message);
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/massAssignWorkorders`, {
companyId: companyId,
workorderIds: this.workordersToAssign
});
if (data.success) {
window.notify('success', data.message);
this.workordersToAssign = [];
this.$refs.table.$refs.table.refreshTable();
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
} finally {
@@ -284,16 +286,14 @@ Vue.component('r-m-l-workorder-admin', {
return;
}
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/updateDeadline`, {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/updateDeadline`, {
workorderId: workorder.id,
deadlineDate: newDate
});
if (response.data.success) {
window.notify('success', response.data.message);
if (data.success) {
window.notify('success', data.message);
this.$refs.table.$refs.table.refreshTable();
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
} finally {
@@ -302,39 +302,79 @@ Vue.component('r-m-l-workorder-admin', {
},
async acceptDocumentation(workorderId) {
if (!confirm('Soll die Dokumentation für diesen Arbeitsauftrag wirklich akzeptiert und der Auftrag abgeschlossen werden?')) return;
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/acceptDocumentation`, { workorderId });
if (response.data.success) {
window.notify('success', response.data.message);
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/acceptDocumentation`, {workorderId});
if (data.success) {
window.notify('success', data.message);
this.$refs.table.$refs.table.refreshTable();
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
}
},
async setToProblemSolved(row) {
const text = prompt('Bitte geben Sie einen kurzen Text für den Journaleintrag ein:', '');
if (text === null) return; // User cancelled
if (text === null) return;
if (!text.trim()) {
window.notify('error', 'Bitte geben Sie einen Text ein.');
return;
}
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/setToProblemSolved`, {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/setToProblemSolved`, {
workorderId: row.id,
text: text
});
if (response.data.success) {
window.notify('success', response.data.message);
if (data.success) {
window.notify('success', data.message);
this.$refs.table.$refs.table.refreshTable();
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
}
},
startAdditionalInfoEdit(row) {
this.editingAdditionalInfoId = row.id;
this.tempAdditionalInfo = row.additionalInfo || '';
this.$nextTick(() => {
this.$refs.editTextarea?.$el.querySelector('textarea').focus();
});
},
cancelEdit() {
this.editingAdditionalInfoId = null;
this.tempAdditionalInfo = '';
},
async updateAdditionalInfo(row, newInfo) {
if (row.additionalInfo === newInfo) {
this.cancelEdit();
return;
}
try {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/updateAdditionalInfo`, {
workorderId: row.id,
additionalInfo: newInfo
});
if (data.success) {
window.notify('success', data.message);
row.additionalInfo = newInfo;
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
} catch (e) {
window.notify('error', 'Netzwerkfehler beim Update.');
} finally {
this.cancelEdit();
}
},
async cancelWorkorder(row) {
const reason = prompt('Bitte geben Sie einen Grund für die Stornierung an (optional):');
if (reason === null) return;
try {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/cancelWorkorder`, {
workorderId: row.id,
reason: reason
});
if (data.success) {
window.notify('success', data.message);
this.$refs.table.$refs.table.refreshTable();
} else window.notify('error', data.message || 'Stornierung fehlgeschlagen.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
}
@@ -347,23 +387,17 @@ Vue.component('r-m-l-workorder-admin', {
this.companiesForMassAssign = [];
return;
}
const firstWorkorderId = newVal[0];
const firstWorkorder = this.$refs.table.$refs.table.rows.find(r => r.id === firstWorkorderId);
const firstWorkorder = this.$refs.table.$refs.table.rows.find(r => r.id === newVal[0]);
if (!firstWorkorder) return;
const firstTenantId = firstWorkorder.tenantId;
const allSameTenant = newVal.every(id => {
if (!newVal.every(id => {
const wo = this.$refs.table.$refs.table.rows.find(r => r.id === id);
return wo && wo.tenantId === firstTenantId;
});
if (!allSameTenant) {
})) {
window.notify('error', 'Massen-Zuweisung nur für Aufträge des gleichen Mandanten möglich.');
this.workordersToAssign.pop(); // remove last added
this.workordersToAssign.pop();
return;
}
await this.getCompaniesForWorkorder(firstWorkorder);
this.companiesForMassAssign = this.companiesByTenant[firstTenantId] || [];
},
@@ -376,13 +410,14 @@ Vue.component('traffic-light', {
props: ['deadline', 'status'],
computed: {
lightInfo() {
if (['completed', 'new'].includes(this.status)) return {color: '#cccccc', title: 'Status irrelevant für Dringlichkeit'};
const now = moment();
if (['completed', 'new', 'cancelled'].includes(this.status)) return {
color: '#cccccc',
title: 'Status irrelevant für Dringlichkeit'
};
const deadlineDate = moment.unix(this.deadline);
if (!deadlineDate.isValid()) return {color: '#cccccc', title: 'Keine Deadline gesetzt'};
if (deadlineDate.isBefore(now)) return {color: '#dc3545', title: 'Deadline überschritten'};
const daysLeft = deadlineDate.diff(now, 'days');
if (deadlineDate.isBefore(moment())) return {color: '#dc3545', title: 'Deadline überschritten'};
const daysLeft = deadlineDate.diff(moment(), 'days');
if (daysLeft <= 7) return {color: '#dc3545', title: 'Dringend: Weniger als 1 Woche'};
if (daysLeft <= 21) return {color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen'};
return {color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen'};
@@ -398,38 +433,39 @@ Vue.component('rml-documentation-viewer-admin', {
<div v-if="loading" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
<div v-else class="row">
<div class="col-lg-6">
<tt-file-gallery :files="docs" @selection-changed="selectedDocs = $event" selectable />
<tt-file-gallery :files="docs" @selection-changed="selectedDocs = $event" selectable/>
</div>
<div class="col-lg-6">
<div class="card mb-3" v-if="selectedDocs.length > 0">
<div class="card-header"><h5><i class="fas fa-exclamation-triangle text-danger mr-2"></i>Korrektur anfordern</h5></div>
<div class="card-header"><h5><i class="fas fa-exclamation-triangle text-danger mr-2"></i>Korrektur
anfordern</h5></div>
<div class="card-body">
<p class="small text-muted">Wählen Sie die zu korrigierenden Dokumente aus der Galerie aus und geben Sie einen Grund an.</p>
<tt-textarea v-model="correctionText" label="Grund für die Korrektur" sm row />
<tt-button text="Korrektur anfordern" @click="requestCorrection" :loading="correctionLoading" additional-class="btn-danger float-right"/>
<p class="small text-muted">Wählen Sie die zu korrigierenden Dokumente aus der Galerie aus und geben Sie
einen Grund an.</p>
<tt-textarea v-model="correctionText" label="Grund für die Korrektur" sm row/>
<tt-button text="Korrektur anfordern" @click="requestCorrection" :loading="correctionLoading"
additional-class="btn-danger float-right"/>
</div>
</div>
<div class="card mb-3">
<div class="card-header"><h5><i class="fas fa-check-circle text-success mr-2"></i>Dokumentation akzeptieren</h5></div>
<div class="card-header"><h5><i class="fas fa-check-circle text-success mr-2"></i>Dokumentation
akzeptieren</h5></div>
<div class="card-body">
<p class="small text-muted">Prüfen Sie, ob alle erforderlichen Dokumente vorhanden und korrekt sind.</p>
<div v-if="loadingConfig" class="text-center"><i class="fas fa-spinner fa-spin"></i></div>
<ul v-else class="list-unstyled">
<li v-for="docType in requiredDocTypes" :key="docType.value" class="mb-2 d-flex align-items-center small">
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'" class="fa-fw mr-2"></i>
<li v-for="docType in requiredDocTypes" :key="docType.value"
class="mb-2 d-flex align-items-center small">
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'"
class="fa-fw mr-2"></i>
<span>{{ docType.text }}</span>
</li>
</ul>
<hr>
<tt-button text="Dokumentation akzeptieren"
@click="$emit('accept-documentation', workorderId)"
additional-class="btn-success float-right"
icon="fas fa-check"
/>
<tt-button text="Dokumentation akzeptieren" @click="$emit('accept-documentation', workorderId)"
additional-class="btn-success float-right" icon="fas fa-check"/>
</div>
</div>
<div class="card mt-3">
<div class="card-header"><h5><i class="fas fa-history mr-2"></i>Journal</h5></div>
<div class="card-body p-0" style="max-height: 200px; overflow-y: auto;">
@@ -442,51 +478,48 @@ Vue.component('rml-documentation-viewer-admin', {
<div v-else class="card-body text-muted text-center">Keine Journaleinträge.</div>
</div>
<div class="card-footer">
<tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2" />
<tt-button
text="Eintrag speichern"
@click="addJournalEntry"
:loading="addingJournalEntry"
additional-class="btn-info btn-sm w-100 mt-2"
icon="fas fa-paper-plane"
/>
<tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2"/>
<tt-button text="Eintrag speichern" @click="addJournalEntry" :loading="addingJournalEntry"
additional-class="btn-info btn-sm w-100 mt-2" icon="fas fa-paper-plane"/>
</div>
</div>
</div>
</div>
</div>
`,
data() {
return {
loading: true,
loadingConfig: true,
correctionLoading: false,
docs: [],
journals: [],
selectedDocs: [],
correctionText: '',
newJournalMessage: '',
addingJournalEntry: false,
tenantDocTypes: null,
}
},
</div>`,
data: () => ({
loading: true,
loadingConfig: true,
correctionLoading: false,
docs: [],
journals: [],
selectedDocs: [],
correctionText: '',
newJournalMessage: '',
addingJournalEntry: false,
tenantDocTypes: null
}),
computed: {
requiredDocTypes() {
if (this.tenantDocTypes) {
return this.tenantDocTypes;
}
// Fallback for RML default
return [
{ value: 'photo_hup_mounted', text: 'Foto vom montierten HÜP' },
{ value: 'photo_hup_open', text: 'Foto von dem offenen HÜP' },
{ value: 'photo_splice_cassette_hup', text: 'Foto der Spleißkassette – HÜP' },
{ value: 'photo_splice_cassette_fcp', text: 'Foto der Spleißkassette - FCP' },
{ value: 'photo_hup_closed_stickers', text: 'Foto vom geschlossenen HÜP mit allen Aufklebern' },
{ value: 'photo_fcp_labeled', text: 'Foto vom FCP beschriftet' },
{ value: 'photo_patch_position_osp', text: 'Foto der Patch-Position - OSP-Seite' },
{ value: 'photo_patch_position_anb', text: 'Foto der Patch-Position - ANB-Seite' },
{ value: 'measurement_protocol_otdr', text: 'ODTR – Messung (1310nm & 1550nm)' },
];
if (this.tenantDocTypes) return this.tenantDocTypes;
return [{value: 'photo_hup_mounted', text: 'Foto vom montierten HÜP'}, {
value: 'photo_hup_open',
text: 'Foto von dem offenen HÜP'
}, {
value: 'photo_splice_cassette_hup',
text: 'Foto der Spleißkassette – HÜP'
}, {
value: 'photo_splice_cassette_fcp',
text: 'Foto der Spleißkassette - FCP'
}, {
value: 'photo_hup_closed_stickers',
text: 'Foto vom geschlossenen HÜP mit allen Aufklebern'
}, {value: 'photo_fcp_labeled', text: 'Foto vom FCP beschriftet'}, {
value: 'photo_patch_position_osp',
text: 'Foto der Patch-Position - OSP-Seite'
}, {
value: 'photo_patch_position_anb',
text: 'Foto der Patch-Position - ANB-Seite'
}, {value: 'measurement_protocol_otdr', text: 'ODTR – Messung (1310nm & 1550nm)'}];
}
},
methods: {
@@ -496,10 +529,10 @@ Vue.component('rml-documentation-viewer-admin', {
async fetchData() {
this.loading = true;
try {
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getDocumentation`, { params: { workorderId: this.workorderId }});
this.docs = response.data.docs;
this.journals = response.data.journals;
} catch(e) {
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getDocumentation`, {params: {workorderId: this.workorderId}});
this.docs = data.docs;
this.journals = data.journals;
} catch (e) {
window.notify('error', 'Dokumentation konnte nicht geladen werden.');
} finally {
this.loading = false;
@@ -508,14 +541,10 @@ Vue.component('rml-documentation-viewer-admin', {
async loadTenantConfig() {
this.loadingConfig = true;
try {
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getTenantConfig`, {
params: { workorderId: this.workorderId }
});
if (response.data.success) {
this.tenantDocTypes = response.data.documentationTypes;
}
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getTenantConfig`, {params: {workorderId: this.workorderId}});
if (data.success) this.tenantDocTypes = data.documentationTypes;
} catch (e) {
console.error("Could not load tenant documentation config", e);
console.error("Konnte Mandantenkonfiguration nicht laden", e);
} finally {
this.loadingConfig = false;
}
@@ -523,46 +552,38 @@ Vue.component('rml-documentation-viewer-admin', {
async requestCorrection() {
if (!this.correctionText) return window.notify('error', 'Bitte geben Sie einen Grund für die Korrektur an.');
if (this.selectedDocs.length === 0) return window.notify('error', 'Bitte wählen Sie mindestens ein Dokument für die Korrektur aus.');
this.correctionLoading = true;
try {
const payload = {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/requestCorrection`, {
workorderId: this.workorderId,
text: this.correctionText,
fileIds: this.selectedDocs
};
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/requestCorrection`, payload);
if (response.data.success) {
window.notify('success', response.data.message);
});
if (data.success) {
window.notify('success', data.message);
this.correctionText = '';
this.selectedDocs = [];
await this.fetchData();
this.$emit('workorder-updated');
} else {
window.notify('error', response.data.message);
}
} else window.notify('error', data.message);
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
}
this.correctionLoading = false;
},
async addJournalEntry() {
if (!this.newJournalMessage.trim()) {
return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
}
if (!this.newJournalMessage.trim()) return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
this.addingJournalEntry = true;
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/addJournal`, {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/addJournal`, {
workorderId: this.workorderId,
text: this.newJournalMessage
});
if (response.data.success) {
window.notify('success', response.data.message || 'Journal-Eintrag hinzugefügt.');
if (data.success) {
window.notify('success', data.message || 'Journal-Eintrag hinzugefügt.');
this.newJournalMessage = '';
this.journals = response.data.journals;
} else {
window.notify('error', response.data.message || 'Eintrag konnte nicht gespeichert werden.');
}
this.journals = data.journals;
} else window.notify('error', data.message || 'Eintrag konnte nicht gespeichert werden.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
} finally {
public/js/pages/RMLWorkorderCompany/RMLWorkorderCompany.js
+258 -317
View File
@@ -17,28 +17,49 @@ Vue.component('r-m-l-workorder-company', {
<span class="ml-2">{{ getStatusColumn(row.status).text }}</span>
</template>
<template v-slot:additionalinfo="{ row }">
<div v-if="editingAdditionalInfoId === row.id">
<tt-textarea
v-model="tempAdditionalInfo"
@keydown.esc.native="cancelEdit"
rows="3" no-form-group sm ref="editTextarea"
/>
<div class="mt-2 d-flex justify-content-end">
<tt-button text="Abbrechen" @click="cancelEdit" sm additional-class="btn-secondary mr-2"/>
<tt-button text="Speichern" @click="updateAdditionalInfo(row, tempAdditionalInfo)" sm
additional-class="btn-success"/>
</div>
</div>
<div v-else class="d-flex align-items-start">
<span
style="white-space: pre-wrap; max-width: 250px; display: inline-block;">{{ row.additionalInfo || '-' }}</span>
<tt-button
v-if="!['completed', 'cancelled', 'documented'].includes(row.status)"
icon="fas fa-edit" @click="startAdditionalInfoEdit(row)"
additional-class="btn-link btn-sm p-0 ml-2" title="Zusatz-Info bearbeiten"
/>
</div>
</template>
<template v-slot:deadlinedate="{ row }">
{{ formatDate(row.deadlineDate) }}
</template>
<template v-slot:appointmentdate="{ row }">
<div v-if="!row.appointmentDate && ['assigned', 'correction_requested', 'problem_solved'].includes(row.status)">
<div
v-if="!row.appointmentDate && ['assigned', 'correction_requested', 'problem_solved'].includes(row.status)">
<tt-date-picker
placeholder="Termin festlegen..."
:date-range="false"
@input="setAppointment(row, $event)"
sm
no-form-group
placeholder="Termin festlegen..." :date-range="false"
@input="setAppointment(row, $event)" sm no-form-group
:additional-props="{ timePicker: true, timePicker24Hour: true, locale: { format: 'DD.MM.YYYY HH:mm' }, drops: 'up' }"
/>
</div>
<div v-else-if="row.appointmentDate">
<span>{{ formatDate(row.appointmentDate, true) }}</span>
<tt-button
icon="fas fa-edit"
@click="openRescheduleModal(row)"
additional-class="btn-link btn-sm p-0 ml-2"
title="Termin ändern"
v-if="!['completed', 'cancelled', 'documented'].includes(row.status)"
icon="fas fa-edit" @click="openRescheduleModal(row)"
additional-class="btn-link btn-sm p-0 ml-2" title="Termin ändern"
/>
</div>
<span v-else>–</span>
@@ -54,14 +75,12 @@ Vue.component('r-m-l-workorder-company', {
</tt-table-crud>
</tt-card>
<tt-modal v-if="rescheduleData" :show="true" :delete="false" title="Termin verschieben" @update:show="closeRescheduleModal" @submit="rescheduleAppointment">
<tt-modal v-if="rescheduleData" :show="true" :delete="false" title="Termin verschieben"
@update:show="closeRescheduleModal" @submit="rescheduleAppointment">
<p><strong>Auftrag:</strong> #{{ rescheduleData.workorder.id }}</p>
<tt-date-picker
label="Neuer Termin"
:date-range="false"
v-model="rescheduleData.newDate"
sm
row
label="Neuer Termin" :date-range="false" v-model="rescheduleData.newDate"
sm row
:additional-props="{ timePicker: true, timePicker24Hour: true, locale: { format: 'DD.MM.YYYY HH:mm' }, singleDatePicker: true }"
/>
<tt-textarea label="Grund" v-model="rescheduleData.reason" sm row required/>
@@ -70,26 +89,17 @@ Vue.component('r-m-l-workorder-company', {
`,
data() {
return {
rescheduleData: null,
rescheduleData: null, editingAdditionalInfoId: null, tempAdditionalInfo: '',
crudConfig: {
...window.TT_CONFIG.CRUD_CONFIG,
expandable: true,
...window.TT_CONFIG.CRUD_CONFIG, expandable: true,
customRowClass: (row) => {
if (['completed', 'new', 'cancelled'].includes(row.status)) return 'tt-rml-workorder-irrelevant';
if (['correction_requested', 'intervention_required'].includes(row.status)) return 'tt-rml-workorder-high';
const deadlineDate = moment.unix(row.deadlineDate);
if (['completed', 'new'].includes(row.status) || !deadlineDate.isValid()) {
return 'tt-rml-workorder-irrelevant';
}
if (['correction_requested', 'intervention_required'].includes(row.status)) {
return 'tt-rml-workorder-high';
}
if (!deadlineDate.isValid()) return 'tt-rml-workorder-irrelevant';
const daysLeft = deadlineDate.diff(moment(), 'days');
if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
if (daysLeft <= 21) return 'tt-rml-workorder-medium';
return 'tt-rml-workorder-ontrack';
},
additionalActions: []
@@ -103,70 +113,84 @@ Vue.component('r-m-l-workorder-company', {
},
formatDate(timestamp, withTime = false) {
if (!timestamp) return '–';
const format = withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY';
return window.moment.unix(timestamp).format(format);
return window.moment.unix(timestamp).format(withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY');
},
async setAppointment(workorder, date) {
if (!date) return;
const hour = moment.unix(date).hour();
if (hour >= 23 || hour < 1) {
this.$refs.table.$refs.table.refreshTable(); // Re-render to clear invalid date from picker
this.$refs.table.$refs.table.refreshTable();
return window.notify('error', 'Bitte Uhrzeit angeben!');
}
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/scheduleAppointment`, {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/scheduleAppointment`, {
workorderId: workorder.id,
appointmentDate: date
});
if (response.data.success) {
window.notify('success', response.data.message);
if (data.success) {
window.notify('success', data.message);
this.$refs.table.$refs.table.refreshTable();
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', e.response?.data?.message || 'Ein Netzwerkfehler ist aufgetreten.');
}
},
openRescheduleModal(row) {
this.rescheduleData = {
workorder: row,
newDate: row.appointmentDate,
reason: ''
};
this.rescheduleData = {workorder: row, newDate: row.appointmentDate, reason: ''};
},
closeRescheduleModal() {
this.rescheduleData = null;
},
async rescheduleAppointment() {
const { workorder, newDate, reason } = this.rescheduleData;
if (!newDate || !reason) {
return window.notify('error', 'Bitte geben Sie ein neues Datum und einen Grund an.');
}
const hour = moment.unix(newDate).hour();
if (hour >= 23 || hour < 1) {
return window.notify('error', 'Bitte Uhrzeit angeben!');
}
const {workorder, newDate, reason} = this.rescheduleData;
if (!newDate || !reason) return window.notify('error', 'Bitte geben Sie ein neues Datum und einen Grund an.');
if (moment.unix(newDate).hour() >= 23 || moment.unix(newDate).hour() < 1) return window.notify('error', 'Bitte Uhrzeit angeben!');
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/rescheduleAppointment`, {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/rescheduleAppointment`, {
workorderId: workorder.id,
appointmentDate: newDate,
reason: reason
});
if (response.data.success) {
window.notify('success', response.data.message);
if (data.success) {
window.notify('success', data.message);
this.$refs.table.$refs.table.refreshTable();
this.closeRescheduleModal();
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', e.response?.data?.message || 'Ein Netzwerkfehler ist aufgetreten.');
}
}
},
startAdditionalInfoEdit(row) {
this.editingAdditionalInfoId = row.id;
this.tempAdditionalInfo = row.additionalInfo || '';
this.$nextTick(() => {
this.$refs.editTextarea?.$el.querySelector('textarea').focus();
});
},
cancelEdit() {
this.editingAdditionalInfoId = null;
this.tempAdditionalInfo = '';
},
async updateAdditionalInfo(row, newInfo) {
if (row.additionalInfo === newInfo) {
this.cancelEdit();
return;
}
try {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/updateAdditionalInfo`, {
workorderId: row.id,
additionalInfo: newInfo
});
if (data.success) {
window.notify('success', data.message);
row.additionalInfo = newInfo;
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
} catch (e) {
window.notify('error', 'Netzwerkfehler beim Update.');
} finally {
this.cancelEdit();
}
},
}
});
@@ -174,16 +198,17 @@ Vue.component('traffic-light', {
props: ['deadline', 'status'],
computed: {
lightInfo() {
if (['completed', 'new'].includes(this.status)) return { color: '#cccccc', title: 'Status irrelevant für Dringlichkeit' };
const now = moment();
if (['completed', 'new', 'cancelled'].includes(this.status)) return {
color: '#cccccc',
title: 'Status irrelevant für Dringlichkeit'
};
const deadlineDate = moment.unix(this.deadline);
if (!deadlineDate.isValid()) return { color: '#cccccc', title: 'Keine Deadline gesetzt' };
if (deadlineDate.isBefore(now)) return { color: '#dc3545', title: 'Deadline überschritten' };
const daysLeft = deadlineDate.diff(now, 'days');
if (daysLeft <= 7) return { color: '#dc3545', title: 'Dringend: Weniger als 1 Woche' };
if (daysLeft <= 21) return { color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen' };
return { color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen' };
if (!deadlineDate.isValid()) return {color: '#cccccc', title: 'Keine Deadline gesetzt'};
if (deadlineDate.isBefore(moment())) return {color: '#dc3545', title: 'Deadline überschritten'};
const daysLeft = deadlineDate.diff(moment(), 'days');
if (daysLeft <= 7) return {color: '#dc3545', title: 'Dringend: Weniger als 1 Woche'};
if (daysLeft <= 21) return {color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen'};
return {color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen'};
}
},
template: `<span :style="{ color: lightInfo.color, fontSize: '1.2em' }" class="mr-2" :title="lightInfo.title">&#9679;</span>`
@@ -193,7 +218,8 @@ Vue.component('documentation-manager', {
props: ['workorderId'],
template: `
<div class="p-3 bg-light" style="width: 100%;">
<div v-if="loadingWorkorder || loadingConfig" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
<div v-if="loadingWorkorder || loadingConfig" class="text-center p-5"><i
class="fas fa-spinner fa-spin fa-2x"></i></div>
<div v-else class="row">
<div class="col-lg-4 mb-3 mb-lg-0">
<div>
@@ -202,205 +228,161 @@ Vue.component('documentation-manager', {
<h5 class="card-title">Benötigte Dokumente</h5>
<ul class="list-unstyled">
<li v-for="docType in requiredDocTypes" :key="docType.value" class="mb-2 d-flex align-items-center">
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'" class="fa-fw mr-2"></i>
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'"
class="fa-fw mr-2"></i>
<span>{{ docType.text }}</span>
</li>
</ul>
<hr>
<tt-button
text="Auftrag abschließen"
@click="completeWorkorder"
:disabled="!canComplete || workorder.status === 'documented' || workorder.status === 'completed'"
:loading="completing"
additional-class="btn-success w-100"
icon="fas fa-check-double"
<tt-button text="Auftrag abschließen" @click="completeWorkorder"
:disabled="!canComplete || ['documented', 'completed', 'cancelled'].includes(workorder.status)"
:loading="completing" additional-class="btn-success w-100" icon="fas fa-check-double"
/>
<small v-if="!canComplete && workorder.status !== 'documented' && workorder.status !== 'completed'" class="form-text text-muted text-center mt-2">
<small v-if="!canComplete && !['documented', 'completed', 'cancelled'].includes(workorder.status)"
class="form-text text-muted text-center mt-2">
Bitte laden Sie alle benötigten Dokumente hoch, um den Auftrag abzuschließen.
</small>
<div v-if="workorder.status === 'documented' || workorder.status === 'completed'" class="alert alert-secondary text-center mt-2 p-2">
Auftrag zur Prüfung eingereicht.
<div v-if="['documented', 'completed', 'cancelled'].includes(workorder.status)"
class="alert alert-secondary text-center mt-2 p-2">
Auftrag zur Prüfung eingereicht oder storniert.
</div>
</div>
</div>
<div class="card mt-3" v-if="['assigned', 'scheduled', 'correction_requested', 'problem_solved'].includes(workorder.status)">
<div class="card-header bg-danger text-white"><h5><i class="fas fa-hard-hat mr-2"></i>Eingriff benötigt</h5></div>
<div class="card mt-3"
v-if="['assigned', 'scheduled', 'correction_requested', 'problem_solved'].includes(workorder.status)">
<div class="card-header bg-danger text-white"><h5><i class="fas fa-hard-hat mr-2"></i>Eingriff benötigt
</h5></div>
<div class="card-body">
<p class="small text-muted">Falls ein Problem auftritt, das ein Eingreifen erfordert, melden Sie es hier.</p>
<tt-button
text="Problem melden"
@click="openInterventionModal"
additional-class="btn-danger w-100"
icon="fas fa-exclamation-triangle"
/>
<p class="small text-muted">Falls ein Problem auftritt, das ein Eingreifen erfordert, melden Sie es
hier.</p>
<tt-button text="Problem melden" @click="openInterventionModal" additional-class="btn-danger w-100"
icon="fas fa-exclamation-triangle"/>
</div>
</div>
<div class="card mt-3">
<div class="card-header"><h5><i class="fas fa-history mr-2"></i>Journal</h5></div>
<div class="card-body p-0" style="max-height: 200px; overflow-y: auto;">
<ul class="list-group list-group-flush">
<li v-if="journals.length === 0" class="list-group-item text-center text-muted">Keine Einträge vorhanden.</li>
<li v-for="log in journals" :key="log.id" class="list-group-item small" :class="{'list-group-item-danger': log.statusChange && (log.statusChange.includes('correction_requested') || log.statusChange.includes('intervention_required'))}">
<li v-if="!journals.length" class="list-group-item text-center text-muted">Keine Einträge
vorhanden.
</li>
<li v-for="log in journals" :key="log.id" class="list-group-item small"
:class="{'list-group-item-danger': log.statusChange && (log.statusChange.includes('correction_requested') || log.statusChange.includes('intervention_required'))}">
<strong>{{ formatDate(log.create) }} ({{ log.createByName }}):</strong>
<div class="text-muted" style="white-space: pre-wrap;">{{ log.text }}</div>
</li>
</ul>
</div>
<div class="card-footer" v-if="workorder.status !== 'completed' && workorder.status !== 'documented'">
<tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2" />
<tt-button
text="Eintrag speichern"
@click="addJournalEntry"
:loading="addingJournalEntry"
additional-class="btn-info btn-sm w-100 mt-2"
icon="fas fa-paper-plane"
/>
<div class="card-footer" v-if="!['completed', 'documented', 'cancelled'].includes(workorder.status)">
<tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2"/>
<tt-button text="Eintrag speichern" @click="addJournalEntry" :loading="addingJournalEntry"
additional-class="btn-info btn-sm w-100 mt-2" icon="fas fa-paper-plane"/>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card mb-3" v-if="workorder.status !== 'documented' && workorder.status !== 'completed'">
<div class="card mb-3" v-if="!['documented', 'completed', 'cancelled'].includes(workorder.status)">
<div class="card-body">
<h5 class="card-title">Neues Dokument hochladen</h5>
<tt-select label="Dokumententyp" :options="allDocTypes" v-model="uploadData.documentType" sm row />
<tt-select label="Dokumententyp" :options="allDocTypes" v-model="uploadData.documentType" sm row/>
<tt-input label="Beschreibung" v-model="uploadData.description" sm row placeholder="Optional"/>
<div class="form-group row">
<label class="col-form-label col-sm-4 col-form-label-sm">Dateien</label>
<div class="col-sm-8 p-0">
<input type="file" class="form-control-file form-control-sm p-0" @change="handleFileUpload" ref="fileInput" multiple accept="image/*,.pdf,.doc,.docx" />
<input type="file" class="form-control-file form-control-sm p-0" @change="handleFileUpload"
ref="fileInput" multiple accept="image/*,.pdf,.doc,.docx"/>
</div>
</div>
<tt-button text="Hochladen" @click="uploadFiles" :loading="uploading" additional-class="btn-primary float-right" icon="fas fa-upload" />
<tt-button text="Hochladen" @click="uploadFiles" :loading="uploading"
additional-class="btn-primary float-right" icon="fas fa-upload"/>
</div>
</div>
<tt-file-gallery
:files="filesWithStatus"
:edit-mode="workorder.status !== 'completed' && workorder.status !== 'documented'"
:delete-mode="workorder.status !== 'completed' && workorder.status !== 'documented'"
@delete-file="deleteDocumentation"
@update-file="updateDocumentation"
>
:edit-mode="!['completed', 'documented', 'cancelled'].includes(workorder.status)"
:delete-mode="!['completed', 'documented', 'cancelled'].includes(workorder.status)"
@delete-file="deleteDocumentation" @update-file="updateDocumentation">
<template v-slot:file-edit="{ file }">
<tt-select
label="Dokumententyp"
:options="allDocTypes"
v-model="file.documentType"
sm
/>
<tt-select label="Dokumententyp" :options="allDocTypes" v-model="file.documentType" sm/>
</template>
</tt-file-gallery>
</div>
</div>
<tt-modal v-if="interventionData" :show="true" :delete="false" title="Eingriff anfordern" @update:show="interventionData = null" @submit="requestIntervention">
<tt-select
label="Art des Problems"
:options="interventionTypes"
v-model="interventionData.types"
sm
row
multiple
/>
<tt-modal v-if="interventionData" :show="true" :delete="false" title="Eingriff anfordern"
@update:show="interventionData = null" @submit="requestIntervention">
<tt-select label="Art des Problems" :options="interventionTypes" v-model="interventionData.types" sm row
multiple/>
<div v-for="type in interventionData.types" :key="type">
<tt-input
v-if="['stuck', 'stuck_fcp', 'stuck_hup'].includes(type)"
:label="'Distanz (m) für \\'' + getInterventionLabel(type) + '\\''"
type="number"
v-model="interventionData.details[type].distance"
sm row required
/>
<tt-textarea
v-if="type === 'other'"
label="Grund für 'Sonstiges'"
v-model="interventionData.details.other.reason"
sm row required
/>
<tt-input v-if="['stuck', 'stuck_fcp', 'stuck_hup'].includes(type)"
:label="'Distanz (m) für \\'' + getInterventionLabel(type) + '\\''" type="number"
v-model="interventionData.details[type].distance" sm row required/>
<tt-textarea v-if="type === 'other'" label="Grund für 'Sonstiges'"
v-model="interventionData.details.other.reason" sm row required/>
</div>
</tt-modal>
</div>
`,
data() {
return {
loadingWorkorder: true,
loadingConfig: true,
tenantDocTypes: null,
workorder: null,
uploading: false,
completing: false,
uploadedFiles: [],
journals: [],
newJournalMessage: '',
addingJournalEntry: false,
interventionData: null,
interventionTypes: [
{value: 'stuck', text: 'Ab X Laufmeter stecken geblieben'},
{value: 'stuck_fcp', text: 'Vom FCP nach HÜP nach X Laufmetern stecken geblieben'},
{value: 'stuck_hup', text: 'Vom HÜP nach FCP nach X Laufmetern stecken geblieben'},
{value: 'no_air', text: 'Keine Luftverbindung'},
{value: 'other', text: 'Sonstiges'}
],
uploadData: {
files: [],
documentType: 'photo_hup_mounted',
description: ''
}
}
},
</div>`,
data: () => ({
loadingWorkorder: true,
loadingConfig: true,
tenantDocTypes: null,
workorder: null,
uploading: false,
completing: false,
uploadedFiles: [],
journals: [],
newJournalMessage: '',
addingJournalEntry: false,
interventionData: null,
interventionTypes: [{value: 'stuck', text: 'Ab X Laufmeter stecken geblieben'}, {
value: 'stuck_fcp',
text: 'Vom FCP nach HÜP nach X Laufmetern stecken geblieben'
}, {value: 'stuck_hup', text: 'Vom HÜP nach FCP nach X Laufmetern stecken geblieben'}, {
value: 'no_air',
text: 'Keine Luftverbindung'
}, {value: 'other', text: 'Sonstiges'}],
uploadData: {files: [], documentType: 'photo_hup_mounted', description: ''}
}),
computed: {
requiredDocTypes() {
if (this.tenantDocTypes) {
return this.tenantDocTypes;
}
// Fallback for RML default
return [
{ value: 'photo_hup_mounted', text: 'Foto vom montierten HÜP' },
{ value: 'photo_hup_open', text: 'Foto von dem offenen HÜP' },
{ value: 'photo_splice_cassette_hup', text: 'Foto der Spleißkassette – HÜP' },
{ value: 'photo_splice_cassette_fcp', text: 'Foto der Spleißkassette - FCP' },
{ value: 'photo_hup_closed_stickers', text: 'Foto vom geschlossenen HÜP mit allen Aufklebern' },
{ value: 'photo_fcp_labeled', text: 'Foto vom FCP beschriftet' },
{ value: 'photo_patch_position_osp', text: 'Foto der Patch-Position - OSP-Seite' },
{ value: 'photo_patch_position_anb', text: 'Foto der Patch-Position - ANB-Seite' },
{ value: 'measurement_protocol_otdr', text: 'ODTR – Messung (1310nm & 1550nm)' },
];
if (this.tenantDocTypes) return this.tenantDocTypes;
return [{value: 'photo_hup_mounted', text: 'Foto vom montierten HÜP'}, {
value: 'photo_hup_open',
text: 'Foto von dem offenen HÜP'
}, {
value: 'photo_splice_cassette_hup',
text: 'Foto der Spleißkassette – HÜP'
}, {
value: 'photo_splice_cassette_fcp',
text: 'Foto der Spleißkassette - FCP'
}, {
value: 'photo_hup_closed_stickers',
text: 'Foto vom geschlossenen HÜP mit allen Aufklebern'
}, {value: 'photo_fcp_labeled', text: 'Foto vom FCP beschriftet'}, {
value: 'photo_patch_position_osp',
text: 'Foto der Patch-Position - OSP-Seite'
}, {
value: 'photo_patch_position_anb',
text: 'Foto der Patch-Position - ANB-Seite'
}, {value: 'measurement_protocol_otdr', text: 'ODTR – Messung (1310nm & 1550nm)'}];
},
allDocTypes() {
return [
...this.requiredDocTypes,
{ value: 'other', text: 'Sonstiges Dokument (optional)' }
];
return [...this.requiredDocTypes, {value: 'other', text: 'Sonstiges Dokument (optional)'}];
},
canComplete() {
return this.requiredDocTypes.every(docType => this.isUploaded(docType.value));
},
filesWithStatus() {
if (!this.journals || this.journals.length === 0) {
return this.uploadedFiles;
}
const correctionJournal = [...this.journals]
.sort((a, b) => b.create - a.create)
.find(j => j.statusChange && j.statusChange.includes('correction_requested'));
if (!correctionJournal || !correctionJournal.fileIds) {
return this.uploadedFiles;
}
if (!this.journals?.length) return this.uploadedFiles;
const correctionJournal = [...this.journals].sort((a, b) => b.create - a.create).find(j => j.statusChange?.includes('correction_requested'));
if (!correctionJournal?.fileIds) return this.uploadedFiles;
try {
const incorrectFileIds = JSON.parse(correctionJournal.fileIds);
if (!Array.isArray(incorrectFileIds)) return this.uploadedFiles;
return this.uploadedFiles.map(file => {
if (incorrectFileIds.includes(file.id)) {
return { ...file, class: 'border border-danger' };
}
return file;
});
return this.uploadedFiles.map(file => incorrectFileIds.includes(file.id) ? {
...file,
class: 'border border-danger'
} : file);
} catch (e) {
return this.uploadedFiles;
}
@@ -408,20 +390,15 @@ Vue.component('documentation-manager', {
},
methods: {
formatDate(timestamp) {
if (!timestamp) return '–';
return window.moment.unix(timestamp).format('DD.MM.YYYY HH:mm');
return timestamp ? window.moment.unix(timestamp).format('DD.MM.YYYY HH:mm') : '–';
},
async loadTenantConfig() {
this.loadingConfig = true;
try {
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getTenantConfig`, {
params: { workorderId: this.workorderId }
});
if (response.data.success) {
this.tenantDocTypes = response.data.documentationTypes;
}
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getTenantConfig`, {params: {workorderId: this.workorderId}});
if (data.success) this.tenantDocTypes = data.documentationTypes;
} catch (e) {
console.error("Could not load tenant documentation config", e);
console.error("Konnte Mandantenkonfiguration nicht laden", e);
} finally {
this.loadingConfig = false;
}
@@ -429,9 +406,9 @@ Vue.component('documentation-manager', {
async loadWorkorder() {
this.loadingWorkorder = true;
try {
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getWorkorderById`, { params: { id: this.workorderId }});
this.workorder = response.data;
} catch(e) {
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getWorkorderById`, {params: {id: this.workorderId}});
this.workorder = data;
} catch (e) {
window.notify('error', 'Arbeitsauftragsdetails konnten nicht geladen werden.');
}
this.loadingWorkorder = false;
@@ -441,10 +418,10 @@ Vue.component('documentation-manager', {
},
async fetchDocs() {
try {
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getDocumentation`, { params: { workorderId: this.workorderId }});
this.uploadedFiles = response.data.docs;
this.journals = response.data.journals;
} catch(e) {
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getDocumentation`, {params: {workorderId: this.workorderId}});
this.uploadedFiles = data.docs;
this.journals = data.journals;
} catch (e) {
window.notify('error', 'Dokumente konnten nicht geladen werden.');
}
},
@@ -452,95 +429,80 @@ Vue.component('documentation-manager', {
this.uploadData.files = event.target.files;
},
async uploadFiles() {
if(!this.uploadData.files || this.uploadData.files.length === 0) return window.notify('error', 'Bitte eine oder mehrere Dateien auswählen.');
if (!this.uploadData.files?.length) return window.notify('error', 'Bitte eine oder mehrere Dateien auswählen.');
this.uploading = true;
const formData = new FormData();
formData.append('workorderId', this.workorder.id);
formData.append('documentType', this.uploadData.documentType);
formData.append('description', this.uploadData.description);
for (const file of this.uploadData.files) {
formData.append('files[]', file);
}
for (const file of this.uploadData.files) formData.append('files[]', file);
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/uploadDocumentation`, formData);
if(response.data.success) {
window.notify('success', response.data.message);
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/uploadDocumentation`, formData);
if (data.success) {
window.notify('success', data.message);
this.$refs.fileInput.value = '';
this.uploadData.files = [];
this.uploadData.description = '';
this.uploadedFiles = response.data.docs;
this.workorder = response.data.workorder;
} else {
window.notify('error', response.data.error || 'Upload fehlgeschlagen.');
}
} catch(e) {
this.uploadedFiles = data.docs;
this.workorder = data.workorder;
} else window.notify('error', data.error || 'Upload fehlgeschlagen.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist beim Upload aufgetreten.');
}
this.uploading = false;
},
async completeWorkorder() {
if(!confirm('Möchten Sie diesen Auftrag wirklich abschließen und zur Prüfung einreichen?')) return;
if (!confirm('Möchten Sie diesen Auftrag wirklich abschließen und zur Prüfung einreichen?')) return;
this.completing = true;
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/completeWorkorder`, { workorderId: this.workorder.id });
if(response.data.success) {
window.notify('success', response.data.message);
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/completeWorkorder`, {workorderId: this.workorder.id});
if (data.success) {
window.notify('success', data.message);
this.$emit('workorder-completed');
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
} catch(e) {
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
}
this.completing = false;
},
async deleteDocumentation(file) {
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/deleteDocumentation`, { id: file.id });
if (response.data.success) {
window.notify('success', response.data.message);
this.uploadedFiles = response.data.docs;
} else {
window.notify('error', response.data.message || 'Löschen fehlgeschlagen.');
}
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/deleteDocumentation`, {id: file.id});
if (data.success) {
window.notify('success', data.message);
this.uploadedFiles = data.docs;
} else window.notify('error', data.message || 'Löschen fehlgeschlagen.');
} catch (e) {
window.notify('error', 'Netzwerkfehler beim Löschen.');
}
},
async updateDocumentation(file) {
try {
const payload = { id: file.id, documentType: file.documentType };
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/updateDocumentation`, payload);
if (response.data.success) {
window.notify('success', response.data.message);
this.uploadedFiles = response.data.docs;
} else {
window.notify('error', response.data.message || 'Update fehlgeschlagen.');
}
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/updateDocumentation`, {
id: file.id,
documentType: file.documentType
});
if (data.success) {
window.notify('success', data.message);
this.uploadedFiles = data.docs;
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
} catch (e) {
window.notify('error', 'Netzwerkfehler beim Aktualisieren.');
}
},
async addJournalEntry() {
if (!this.newJournalMessage.trim()) {
return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
}
if (!this.newJournalMessage.trim()) return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
this.addingJournalEntry = true;
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/addJournal`, {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/addJournal`, {
workorderId: this.workorderId,
text: this.newJournalMessage
});
if (response.data.success) {
window.notify('success', response.data.message || 'Journal-Eintrag hinzugefügt.');
if (data.success) {
window.notify('success', data.message || 'Journal-Eintrag hinzugefügt.');
this.newJournalMessage = '';
this.journals = response.data.journals;
} else {
window.notify('error', response.data.message || 'Eintrag konnte nicht gespeichert werden.');
}
this.journals = data.journals;
} else window.notify('error', data.message || 'Eintrag konnte nicht gespeichert werden.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
} finally {
@@ -554,66 +516,45 @@ Vue.component('documentation-manager', {
this.interventionData = {
types: [],
details: {
stuck: { distance: '' },
stuck_fcp: { distance: '' },
stuck_hup: { distance: '' },
other: { reason: '' }
stuck: {distance: ''},
stuck_fcp: {distance: ''},
stuck_hup: {distance: ''},
other: {reason: ''}
}
};
},
async requestIntervention() {
const { types, details } = this.interventionData;
if (types.length === 0) {
return window.notify('error', 'Bitte wählen Sie mindestens ein Problem aus.');
}
const {types, details} = this.interventionData;
if (types.length === 0) return window.notify('error', 'Bitte wählen Sie mindestens ein Problem aus.');
let journalParts = [];
types.sort();
for (const type of types) {
let text = '';
const problemOption = this.interventionTypes.find(o => o.value === type);
const problemText = problemOption ? problemOption.text : 'Unbekanntes Problem';
const problemText = this.interventionTypes.find(o => o.value === type)?.text || 'Unbekanntes Problem';
if (['stuck', 'stuck_fcp', 'stuck_hup'].includes(type)) {
const distance = details[type]?.distance;
if (!distance || isNaN(distance) || distance <= 0) {
return window.notify('error', `Bitte eine gültige Distanz für "${problemText}" eingeben.`);
}
if (!distance || isNaN(distance) || distance <= 0) return window.notify('error', `Bitte eine gültige Distanz für "${problemText}" eingeben.`);
text = problemText.replace('X', distance);
} else if (type === 'no_air') {
text = problemText;
} else if (type === 'other') {
} else if (type === 'no_air') text = problemText;
else if (type === 'other') {
const reason = details.other?.reason;
if (!reason || !reason.trim()) {
return window.notify('error', 'Bitte geben Sie einen Grund für "Sonstiges" an.');
}
if (!reason?.trim()) return window.notify('error', 'Bitte geben Sie einen Grund für "Sonstiges" an.');
text = `Sonstiges: ${reason.trim()}`;
}
if (text) {
journalParts.push(text);
}
if (text) journalParts.push(text);
}
const journalText = journalParts.join('\\n');
if (!journalText) {
return window.notify('error', 'Keine gültigen Problemdetails zum Senden gefunden.');
}
if (!journalText) return window.notify('error', 'Keine gültigen Problemdetails zum Senden gefunden.');
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/requestIntervention`, {
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/requestIntervention`, {
workorderId: this.workorderId,
journalText: journalText
journalText
});
if (response.data.success) {
window.notify('success', response.data.message);
if (data.success) {
window.notify('success', data.message);
this.interventionData = null;
this.$emit('workorder-completed'); // This just refreshes the table
} else {
window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
}
this.$emit('workorder-completed');
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
} catch (e) {
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
}