119 lines
4.9 KiB
JavaScript
119 lines
4.9 KiB
JavaScript
Vue.component('pipework-history', {
|
|
//language=Vue
|
|
template: `<tt-card>
|
|
|
|
|
|
<div class="filter-row">
|
|
<tt-input label="Addresse" v-model="address" placeholder="Adresse" row sm/>
|
|
<tt-autocomplete :items="window.TT_CONFIG.NETWORKS" v-model="selectedNetwork" label="Netzgebiet" row/>
|
|
<tt-date-picker date-range v-model="dateRange" label="Datum" row sm/>
|
|
|
|
<tt-button :disabled="checkParameters !== true" @click="getPipeworkHistory" text="Anzeigen" sm icon="fa-solid fa-magnifying-glass" additional-class="btn-primary"/>
|
|
<span v-if="checkParameters !== true" class="text-danger">{{ checkParameters }}</span>
|
|
</div>
|
|
|
|
<div>
|
|
<tt-table v-if="pipeworkHistory.length > 0" :config="pipeworkHistoryTableConfig" :data="pipeworkHistory" :key="pipeworkHistoryTableIndex">
|
|
<template #item_type="{ row }">
|
|
<span v-if="row.value_int !== null">{{ row.value_int }}</span>
|
|
<span v-else-if="row.value_string !== null">{{ row.value_string }}</span>
|
|
<span v-else-if="row.value_text !== null">{{ row.value_text }}</span>
|
|
<span v-else>Unbekannt</span>
|
|
</template>
|
|
|
|
<template #last_edited_at="{ row }">
|
|
<span v-if="row.last_edited_at">{{ window.moment.unix(row.last_edited_at).format('DD.MM.YYYY HH:mm') }}</span>
|
|
<span v-else>Unbekannt</span>
|
|
</template>
|
|
|
|
<template #last_edited_by_user_id="{ row }">
|
|
<span v-if="row.last_edited_by_user_id">{{ window.TT_CONFIG.USERS.find(user => user.value === row.last_edited_by_user_id)?.text }}</span>
|
|
<span v-else>Unbekannt</span>
|
|
</template>
|
|
|
|
<template #item_id="{ row }">
|
|
<tt-button @click="openPipework(row)" text="Zum Tiefbau" icon="fa-solid fa-pen-to-square" additional-class="btn-primary" sm/>
|
|
</template>
|
|
|
|
</tt-table>
|
|
</div>
|
|
|
|
|
|
</tt-card>`,
|
|
data() {
|
|
return {
|
|
window: window,
|
|
address: '',
|
|
dateRange: {
|
|
from: window.moment().subtract(4, 'weeks').unix(),
|
|
to: window.moment().unix()
|
|
},
|
|
selectedNetwork: null,
|
|
pipeworkHistory: [],
|
|
pipeworkHistoryLoading: true,
|
|
pipeworkHistoryError: false,
|
|
pipeworkHistoryTableIndex: 0,
|
|
pipeworkHistoryTableConfig: {
|
|
key: 'PipeworkHistoryTable',
|
|
tableHeader: 'Tiefbau Historie',
|
|
defaultPageSize: 50,
|
|
headers: [
|
|
{text: 'Straße', key: 'building_street'},
|
|
{text: 'Ort', key: 'building_city'},
|
|
{text: 'Feld', key: 'item_label'},
|
|
{text: 'Wert', key: 'item_type'},
|
|
{text: 'Editiert', key: 'last_edited_at'},
|
|
{text: 'Von', key: 'last_edited_by_user_id'},
|
|
{text: 'Actions', key: 'item_id'},
|
|
],
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
checkParameters() {
|
|
if (!this.selectedNetwork) {
|
|
return 'Bitte Netzgebiet auswählen';
|
|
} else if (this.dateRange.from && this.dateRange.to) {
|
|
const from = window.moment.unix(this.dateRange.from);
|
|
const to = window.moment.unix(this.dateRange.to);
|
|
const diff = to.diff(from, 'days');
|
|
if (diff > 28) {
|
|
return 'Bitte Zeitraum von maximal 4 Wochen auswählen';
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
},
|
|
methods: {
|
|
async getPipeworkHistory() {
|
|
this.pipeworkHistoryLoading = true;
|
|
this.pipeworkHistoryError = false;
|
|
|
|
try {
|
|
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Pipework/HistoryAPI`, {
|
|
params: {
|
|
network_id: this.selectedNetwork,
|
|
street_filter: this.address,
|
|
from: this.dateRange.from,
|
|
to: this.dateRange.to
|
|
}
|
|
})
|
|
this.pipeworkHistory = response.data.data;
|
|
this.pipeworkHistoryLoading = false;
|
|
this.pipeworkHistoryTableIndex++;
|
|
} catch (error) {
|
|
console.error(error);
|
|
this.pipeworkHistoryLoading = false;
|
|
this.pipeworkHistoryError = true;
|
|
this.window.notify('error', 'Fehler beim Abrufen der Daten');
|
|
}
|
|
},
|
|
openPipework(row) {
|
|
|
|
const networkId = this.selectedNetwork;
|
|
const street = row.building_street;
|
|
|
|
this.window.open(`${window.TT_CONFIG.BASE_PATH}/Pipework?filter[network_id]=${networkId}&filter[street]=${street}&filter[status_id]=`, '_blank');
|
|
}
|
|
}
|
|
}) |