From 0f5fdfa559b79a5bbf25beb86347b7ebe7bf4710 Mon Sep 17 00:00:00 2001
From: Luca Haid <luca.haid@xinon.eu>
Date: Tue, 12 Mar 2024 16:17:34 +0100
Subject: [PATCH] Add HistoricTickets to thetool

---
 Layout/default/HistoricTicket/Index.php | 163 ++++++++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 Layout/default/HistoricTicket/Index.php

diff --git a/Layout/default/HistoricTicket/Index.php b/Layout/default/HistoricTicket/Index.php
new file mode 100644
index 000000000..5fa77b806
--- /dev/null
+++ b/Layout/default/HistoricTicket/Index.php
@@ -0,0 +1,163 @@
+<?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/vue/tt-components/tt-page-title.js",
+    "plugins/vue/tt-components/tt-table.js",
+];
+$additionalCSS = [
+    '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'"
+              :table-config="historicTicketTableConfig"
+              small 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">
+                <div class="input-group-append">
+                    <button class="btn btn-primary" type="button" @click="doGlobalSearch">Submit</button>
+                </div>
+            </div>
+        </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="-1" role="dialog" style="background: rgba(0, 0, 0, 0.5);"
+         v-if="globalSearchModal">
+        <div class="modal-dialog" role="document"
+             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">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <tt-table
+                            :fetch-url="`${window['TT_CONFIG']['HISTORIC_TICKET_API_URL']}?do=findHistoricTicket&query=${globalSearch}`"
+                            :table-config="globalSearchModalTableConfig"
+                            small ref="table">
+                        <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="-1" role="dialog" style="background: rgba(0, 0, 0, 0.5);"
+         v-if="selectedTicketNumber">
+        <div class="modal-dialog" role="document"
+             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">&times;</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>
+                            <p style="word-break: break-all;">{{ message.content }}</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: 'search'},
+                    {text: 'Subject', key: 'ticket_subject', filter: 'search'},
+                    {text: 'Message', key: 'ticket_message', filter: 'search'},
+                ],
+                tableHeader: 'Suchergebnisse',
+            },
+            historicTicketTableConfig: {
+                headers: [
+                    {text: 'Ticket Number', key: 'ticket_number', filter: 'search'},
+                    {text: 'Subject', key: 'subject', filter: 'search'},
+                    {text: 'Type', key: 'type', filter: 'search'},
+                    {text: 'Status', key: 'status', filter: 'search'},
+                    {text: 'Name', key: 'first_name', filter: 'search'},
+                    {text: 'Email', key: 'email', filter: 'search'},
+                    {text: 'Phone', key: 'phone', filter: 'search'},
+                ],
+                defaultPageSize: 25,
+                tableHeader: 'Bestellungen',
+            }
+        },
+        methods: {
+            async doGlobalSearch() {
+                if (this.globalSearch.length > 3) {
+                    this.globalSearchModal = true;
+                }
+            },
+            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;
+            }
+        }
+    })
+</script>
+<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
+