rmlworkorder major upgrade
This commit is contained in:
Luca Haid
@@ -0,0 +1,176 @@
|
||||
// WorkorderCompany.js
|
||||
Vue.component('workorder-company', {
|
||||
template: `
|
||||
<div>
|
||||
<tt-card>
|
||||
<tt-table-crud
|
||||
ref="table"
|
||||
:crud-config="crudConfig"
|
||||
>
|
||||
<template v-slot:preorderinfo="{ row }">
|
||||
<div class="small">
|
||||
<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 }}
|
||||
</div>
|
||||
<div><strong>Kontakt:</strong> {{ row.phone }} / {{ row.email }}</div>
|
||||
<div><strong>OAID:</strong> <span class="text-pink">{{ row.oaid }}</span></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:status="{ row }">
|
||||
<traffic-light :deadline="row.deadlineDate" :status="row.status"/>
|
||||
<i :class="getStatusColumn(row.status).icon" :title="getStatusColumn(row.status).text"></i>
|
||||
<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)" 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)">
|
||||
<tt-date-picker 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 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>
|
||||
</template>
|
||||
|
||||
<template v-slot:expandedRow="{ row }">
|
||||
<civil-engineering-manager
|
||||
v-if="row.status === 'civil_engineering_required'"
|
||||
@workorder-completed="$refs.table.$refs.table.refreshTable()"
|
||||
:is-admin="false"
|
||||
:workorder-id="row.id"
|
||||
/>
|
||||
<workorder-details-manager
|
||||
v-else
|
||||
@workorder-completed="$refs.table.$refs.table.refreshTable()"
|
||||
:workorder-id="row.id"
|
||||
:is-admin="false"
|
||||
/>
|
||||
</template>
|
||||
</tt-table-crud>
|
||||
</tt-card>
|
||||
|
||||
<tt-modal v-if="rescheduleModalData" :show.sync="rescheduleModalData" title="Termin verschieben" @submit="rescheduleAppointment">
|
||||
<p><strong>Auftrag:</strong> #{{ rescheduleModalData.workorder.id }}</p>
|
||||
<tt-date-picker label="Neuer Termin" :date-range="false" v-model="rescheduleModalData.newDate"
|
||||
:additional-props="{ timePicker: true, timePicker24Hour: true, locale: { format: 'DD.MM.YYYY HH:mm' }, singleDatePicker: true }" sm row/>
|
||||
<tt-textarea label="Grund" v-model="rescheduleModalData.reason" sm row required/>
|
||||
</tt-modal>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
window,
|
||||
rescheduleModalData: null,
|
||||
editingAdditionalInfoId: null,
|
||||
tempAdditionalInfo: '',
|
||||
crudConfig: {
|
||||
...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 (!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: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStatusColumn(status) {
|
||||
const column = this.crudConfig.columns.find(c => c.key === 'status');
|
||||
return column.table.filterOptions.find(opt => opt.value === status) || {};
|
||||
},
|
||||
formatDate(timestamp, withTime = false) {
|
||||
if (!timestamp) return '–';
|
||||
return window.moment.unix(timestamp).format(withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY');
|
||||
},
|
||||
async setAppointment(workorder, date) {
|
||||
if (!date) return;
|
||||
if (moment.unix(date).hour() >= 23 || moment.unix(date).hour() < 1) {
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
return window.notify('error', 'Bitte Uhrzeit angeben!');
|
||||
}
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/scheduleAppointment`, {
|
||||
workorderId: workorder.id, appointmentDate: date
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
},
|
||||
openRescheduleModal(row) {
|
||||
this.rescheduleModalData = { workorder: row, newDate: row.appointmentDate, reason: '' };
|
||||
},
|
||||
async rescheduleAppointment() {
|
||||
const { workorder, newDate, reason } = this.rescheduleModalData;
|
||||
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!');
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/rescheduleAppointment`, {
|
||||
workorderId: workorder.id, appointmentDate: newDate, reason: reason
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
this.rescheduleModalData = null;
|
||||
} else window.notify('error', data.message || 'Ein Fehler 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) {
|
||||
if (row.additionalInfo === this.tempAdditionalInfo) {
|
||||
this.cancelEdit();
|
||||
return;
|
||||
}
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/updateAdditionalInfo`, {
|
||||
workorderId: row.id, additionalInfo: this.tempAdditionalInfo
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
row.additionalInfo = data.newInfo;
|
||||
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
|
||||
this.cancelEdit();
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user