223 lines
10 KiB
PHP
223 lines
10 KiB
PHP
<?php /** @noinspection PhpUndefinedClassInspection
|
|
* @var string $mfLayoutPackage
|
|
* @var TYPE_NAME $git_merge_ts
|
|
*/
|
|
|
|
//additional css /css/views/RaspberryDisplay.css
|
|
|
|
$JSGlobals = ["BASE_URL" => self::getUrl("Domain"),
|
|
"DASHBOARD_URL" => self::getUrl("Dashboard"),
|
|
"MFAPPNAME" => MFAPPNAME_SLUG,
|
|
"PAGE_TITLE" => "Historische Tickets",
|
|
"PATH" => [
|
|
["text" => MFAPPNAME_SLUG, "href" => self::getUrl("Dashboard")],
|
|
["text" => "Historische Tickets", "href" => self::getUrl("HistoricTicket")]
|
|
],
|
|
"HISTORIC_TICKET_API_URL" => self::getUrl("HistoricTicket/api"),
|
|
];
|
|
|
|
$additionalJS = [
|
|
"plugins/vue/vue.js",
|
|
"plugins/axios/axios.min.js",
|
|
"plugins/moment/moment.min.js",
|
|
"plugins/daterangepicker/daterangepicker.js",
|
|
"plugins/xlsx/xlsx.min.js",
|
|
"plugins/vue/tt-components/tt-table.js",
|
|
"plugins/vue/tt-components/tt-page-title.js",
|
|
"plugins/vue/tt-components/tt-select.js",
|
|
"plugins/vue/tt-components/tt-datepicker.js",
|
|
"plugins/vue/tt-components/tt-input.js",
|
|
"plugins/vue/tt-components/tt-autocomplete.js",
|
|
"plugins/vue/tt-components/tt-icon-select.js",
|
|
"plugins/vue/tt-components/tt-number-range.js",
|
|
];
|
|
$additionalCSS = [
|
|
"plugins/daterangepicker/daterangepicker.css",
|
|
'plugins/vue/tt-components/css/tt-table.css',
|
|
];
|
|
|
|
include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
|
|
|
|
<div id="app">
|
|
<!-- start page title -->
|
|
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
|
|
|
|
<tt-table :fetch-url="window['TT_CONFIG']['HISTORIC_TICKET_API_URL'] + '?do=getHistoricTickets'"
|
|
:config="historicTicketTableConfig"
|
|
small ssr ref="table">
|
|
<template v-slot:top-buttons>
|
|
<!-- add input for global search with label and bootstrap class-->
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" placeholder="Globale Suche" v-model="globalSearch" @keydown.enter="doGlobalSearch">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-primary" type="button" @click="doGlobalSearch">Submit</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:first_name="{ row }">
|
|
{{ row.first_name }} {{ row.last_name }}
|
|
</template>
|
|
|
|
<template v-slot:ctime="{ row }">
|
|
{{ new Date(row.ctime * 1000).toLocaleString() }}
|
|
</template>
|
|
|
|
<template v-slot:ticket_number="{ row }">
|
|
<a href="#" @click="clickTicketNumber(row.ticket_number)">{{ row.ticket_number }}</a>
|
|
</template>
|
|
|
|
</tt-table>
|
|
|
|
|
|
<!-- Bootstrap Modal to show global search results -->
|
|
<div class="modal show d-block" tabindex="0" role="dialog" style="background: rgba(0, 0, 0, 0.5);" @click="globalSearchModal = false" @keydown.esc="globalSearchModal = false" ref="globalSearchModal"
|
|
v-if="globalSearchModal">
|
|
<div class="modal-dialog" role="document" @click.stop
|
|
style="width:fit-content;max-width: 80vw ; max-height: 80vh; overflow-y: auto;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Suchergebnisse</h5>
|
|
<button type="button" class="close" @click="globalSearchModal = false">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<tt-table
|
|
:fetch-url="`${window['TT_CONFIG']['HISTORIC_TICKET_API_URL']}?do=findHistoricTicket&query=${globalSearch}`"
|
|
:config="globalSearchModalTableConfig"
|
|
small ref="table">
|
|
|
|
<template v-slot:ctime="{ row }">
|
|
{{ window.moment(row.ctime * 1000).format('DD.MM.YYYY HH:mm') }}
|
|
</template>
|
|
|
|
<template v-slot:ticket_number="{ row }">
|
|
<a href="#" @click="clickTicketNumber(row.ticket_number)">{{ row.ticket_number }}</a>
|
|
</template>
|
|
</tt-table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" @click="globalSearchModal = false">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap Modal to show ticket messages -->
|
|
<div class="modal show d-block" tabindex="0" role="dialog" style="background: rgba(0, 0, 0, 0.5);" @click="selectedTicketNumber = null" @keydown.esc="selectedTicketNumber = null" ref="selectedTicketModal"
|
|
v-if="selectedTicketNumber">
|
|
<div class="modal-dialog" role="document" @click.stop
|
|
style="width:fit-content;max-width: 80vw ; max-height: 80vh; overflow-y: auto;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Ticket {{ selectedTicketNumber }}</h5>
|
|
<button type="button" class="close" @click="selectedTicketNumber = null">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div v-if="selectedTicketData">
|
|
<h5>{{ selectedTicketData.ticket.subject }}</h5>
|
|
<p>{{ selectedTicketData.ticket.message }}</p>
|
|
<div v-for="message in selectedTicketData.messages">
|
|
<hr>
|
|
<h6>{{ new Date(message.ctime * 1000).toLocaleString()}}</h6>
|
|
<p style="word-break: break-all;" v-html="message.content?.replaceAll('\n', '<br>')"></p>
|
|
</div>
|
|
</div>
|
|
<div v-else class="spinner-border text-primary" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
window: window,
|
|
selectedTicketNumber: null,
|
|
selectedTicketData: null,
|
|
globalSearch: '',
|
|
globalSearchModal: false,
|
|
globalSearchModalTableConfig: {
|
|
headers: [
|
|
{text: 'Ticket Number', key: 'ticket_number', filter: false, sortable: false},
|
|
{text: 'Erstellt', key: 'ctime', filter: false, sortable: false},
|
|
{text: 'Subject', key: 'ticket_subject', filter: false, sortable: false},
|
|
{text: 'Message', key: 'ticket_message', filter: false, sortable: false},
|
|
],
|
|
tableHeader: 'Suchergebnisse',
|
|
key: 'HistoricTicketGlobalSearch',
|
|
},
|
|
historicTicketTableConfig: {
|
|
headers: [
|
|
{text: 'Ticket Number', key: 'ticket_number', filter: 'search'},
|
|
{text: 'Erstellt', key: 'ctime', filter: false},
|
|
{text: 'Subject', key: 'subject', filter: 'search', sortable: false},
|
|
{text: 'Type', key: 'type', filter: 'select', filterOptions: [
|
|
{value: 'BACKOFFICE', text: 'BACKOFFICE'},
|
|
{value: 'KUNDENANFRAGEN', text: 'KUNDENANFRAGEN'},
|
|
{value: 'STÖRUNGEN', text: 'STÖRUNGEN'},
|
|
{value: 'ALLGEMEINES', text: 'ALLGEMEINES'},
|
|
{value: 'TERMIN VEREINBART', text: 'TERMIN VEREINBART'},
|
|
{value: 'VERRECHNEN AB DATUM', text: 'VERRECHNEN AB DATUM'},
|
|
{value: 'ONLINE-TICKETS', text: 'ONLINE-TICKETS'},
|
|
{value: 'KÜNDIGUNG', text: 'KÜNDIGUNG'},
|
|
{value: 'BESTELLUNGEN', text: 'BESTELLUNGEN'},
|
|
{value: 'PORTIERUNG', text: 'PORTIERUNG'},
|
|
{value: 'KABEL-TV', text: 'KABEL-TV'},
|
|
{value: 'TIEFBAU', text: 'TIEFBAU'},
|
|
{value: 'ENERGIE STEIERMARK', text: 'ENERGIE STEIERMARK'},
|
|
{value: 'INTERN', text: 'INTERN'},
|
|
{value: 'FELIX', text: 'FELIX'},
|
|
{value: '0', text: '0'},
|
|
{value: 'JETTEN', text: 'JETTEN'},
|
|
]},
|
|
{text: 'Status', key: 'status', filter: 'select', filterOptions: [
|
|
{value: 'Geschlossen', text: 'Geschlossen'},
|
|
{value: 'In Evidenz', text: 'In Evidenz'},
|
|
{value: 'In Bearbeitung', text: 'In Bearbeitung'},
|
|
{value: 'Business In Bearbeitung', text: 'Business In Bearbeitung'},
|
|
{value: 'Business Angebot gelegt', text: 'Business Angebot gelegt'},
|
|
]},
|
|
{text: 'Name', key: 'first_name', filter: 'search', sortable: false},
|
|
{text: 'Email', key: 'email', filter: 'search', sortable: false},
|
|
{text: 'Phone', key: 'phone', filter: 'search', sortable: false},
|
|
],
|
|
defaultPageSize: 25,
|
|
tableHeader: 'Historische Tickets',
|
|
key: 'HistoricTicket',
|
|
}
|
|
},
|
|
methods: {
|
|
async doGlobalSearch() {
|
|
if (this.globalSearch.length > 0) {
|
|
this.globalSearchModal = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.globalSearchModal.focus();
|
|
});
|
|
}
|
|
},
|
|
async clickTicketNumber(ticketNumber) {
|
|
this.globalSearchModal = false;
|
|
this.selectedTicketData = null;
|
|
|
|
this.selectedTicketNumber = ticketNumber;
|
|
const response = await axios.post(`${window['TT_CONFIG']['HISTORIC_TICKET_API_URL']}?do=getHistoricTicketMessages`, {ticketNumber});
|
|
this.selectedTicketData = response.data;
|
|
this.$nextTick(() => {
|
|
this.$refs.selectedTicketModal.focus();
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
|
|
|