From 8aec877d2bc712b86f1de45ab85e6b98ba620a37 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 9 Nov 2023 10:08:24 +0700
Subject: [PATCH] Refactor input and dialog components

---
 src/assets/css/style.css                  |  39 ++++++
 src/components/Dialogs/DetailDialog.vue   |  76 ++++++++++++
 src/components/Input.vue                  |   4 +-
 src/components/Pages/Gangguan/Table_1.vue | 141 ++++++++++++++++++++++
 4 files changed, 258 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Dialogs/DetailDialog.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 30b0ad8..f44992a 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1095,6 +1095,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1158,6 +1162,10 @@ select {
   height: 1.5rem;
 }
 
+.h-7 {
+  height: 1.75rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -1195,6 +1203,10 @@ select {
   height: 80vh;
 }
 
+.h-\[56px\] {
+  height: 56px;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1219,6 +1231,10 @@ select {
   min-height: 100vh;
 }
 
+.min-h-\[56px\] {
+  min-height: 56px;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -1287,6 +1303,10 @@ select {
   width: 100%;
 }
 
+.w-\[170px\] {
+  width: 170px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1448,6 +1468,10 @@ select {
   place-items: center;
 }
 
+.content-start {
+  align-content: flex-start;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1542,6 +1566,12 @@ select {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2571,6 +2601,11 @@ select {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2664,6 +2699,10 @@ select {
   --tw-ring-offset-width: 2px;
 }
 
+.focus\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
diff --git a/src/components/Dialogs/DetailDialog.vue b/src/components/Dialogs/DetailDialog.vue
new file mode 100644
index 0000000..337fbf0
--- /dev/null
+++ b/src/components/Dialogs/DetailDialog.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+    Dialog,
+    DialogPanel,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot
+} from '@headlessui/vue'
+defineProps({
+    open: {
+        type: Boolean,
+        required: true,
+    },
+    title: {
+        type: String,
+        required: true,
+    },
+})
+const emit = defineEmits(['onClose'])
+const handleOnClose = () => {
+    emit('onClose')
+}
+</script>
+
+<template>
+    <TransitionRoot as="template" :show="open">
+        <Dialog as="div" class="relative z-20" @close="handleOnClose">
+            <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
+                leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 z-10 overflow-y-auto">
+                <div class="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
+                    <TransitionChild as="template" enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                        <DialogPanel
+                            :class="['sm:max-w-lg relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
+                            <!-- Body Section -->
+                            <div class="px-4 py-4 bg-gray-50">
+                                <div class="flex flex-col items-start">
+                                    <div class="flex items-start justify-between w-full">
+                                        <DialogTitle as="h3" class="flex-1 text-2xl font-semibold leading-6 text-gray-900">
+                                            {{ title }}
+                                        </DialogTitle>
+                                        <div class="flex items-center ml-3 h-7">
+                                            <button type="button"
+                                                class="rounded-full focus:outline-none focus:ring-0 focus:ring-offset-0"
+                                                @click="handleOnClose">
+                                                <span class="sr-only">Close panel</span>
+                                                <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
+                                                    xmlns="http://www.w3.org/2000/svg">
+                                                    <path
+                                                        d="M12 2.75C10.0716 2.75 8.18657 3.32183 6.58319 4.39317C4.97982 5.46451 3.73013 6.98726 2.99218 8.76884C2.25422 10.5504 2.06114 12.5108 2.43735 14.4021C2.81355 16.2934 3.74215 18.0307 5.10571 19.3943C6.46928 20.7579 8.20656 21.6865 10.0979 22.0627C11.9892 22.4389 13.9496 22.2458 15.7312 21.5078C17.5127 20.7699 19.0355 19.5202 20.1068 17.9168C21.1782 16.3134 21.75 14.4284 21.75 12.5C21.7473 9.91498 20.7192 7.43661 18.8913 5.60872C17.0634 3.78084 14.585 2.75273 12 2.75ZM15.5306 14.9694C15.6003 15.0391 15.6556 15.1218 15.6933 15.2128C15.731 15.3039 15.7504 15.4015 15.7504 15.5C15.7504 15.5985 15.731 15.6961 15.6933 15.7872C15.6556 15.8782 15.6003 15.9609 15.5306 16.0306C15.4609 16.1003 15.3782 16.1556 15.2872 16.1933C15.1961 16.231 15.0986 16.2504 15 16.2504C14.9015 16.2504 14.8039 16.231 14.7128 16.1933C14.6218 16.1556 14.5391 16.1003 14.4694 16.0306L12 13.5603L9.53063 16.0306C9.46095 16.1003 9.37822 16.1556 9.28718 16.1933C9.19613 16.231 9.09855 16.2504 9 16.2504C8.90146 16.2504 8.80388 16.231 8.71283 16.1933C8.62179 16.1556 8.53906 16.1003 8.46938 16.0306C8.3997 15.9609 8.34442 15.8782 8.30671 15.7872C8.269 15.6961 8.24959 15.5985 8.24959 15.5C8.24959 15.4015 8.269 15.3039 8.30671 15.2128C8.34442 15.1218 8.3997 15.0391 8.46938 14.9694L10.9397 12.5L8.46938 10.0306C8.32865 9.88989 8.24959 9.69902 8.24959 9.5C8.24959 9.30098 8.32865 9.11011 8.46938 8.96937C8.61011 8.82864 8.80098 8.74958 9 8.74958C9.19903 8.74958 9.3899 8.82864 9.53063 8.96937L12 11.4397L14.4694 8.96937C14.5391 8.89969 14.6218 8.84442 14.7128 8.8067C14.8039 8.76899 14.9015 8.74958 15 8.74958C15.0986 8.74958 15.1961 8.76899 15.2872 8.8067C15.3782 8.84442 15.4609 8.89969 15.5306 8.96937C15.6003 9.03906 15.6556 9.12178 15.6933 9.21283C15.731 9.30387 15.7504 9.40145 15.7504 9.5C15.7504 9.59855 15.731 9.69613 15.6933 9.78717C15.6556 9.87822 15.6003 9.96094 15.5306 10.0306L13.0603 12.5L15.5306 14.9694Z"
+                                                        fill="#343330" />
+                                                </svg>
+
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    <div class="w-full mt-6">
+                                        <slot></slot>
+                                    </div>
+                                </div>
+                            </div>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
\ No newline at end of file
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 68a87b9..6d9ed40 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -43,8 +43,8 @@ const switchInputType = () => {
 
 <template>
     <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
-        <input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value"
-            :disabled="disabled" :readonly="readonly"
+        <input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" :disabled="disabled"
+            :readonly="readonly"
             :class="['w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-50 focus:outline-0 focus:border-0 focus:ring-0']" />
         <span @click="switchInputType" v-if="type == 'password'"
             class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index e4848c8..e14adf7 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -58,6 +58,138 @@
             </template>
         </DxDataGrid>
     </div>
+
+    <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
+        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    No Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Pembuat Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Dialihkan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Respon:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Recovery:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Durasi Response Time:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Durasi Recovery Time:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Posko Awal:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Posko Tujuan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Status:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    IDPEL/NO METER:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Nama Pelapor:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Alamat Pelapor:
+                </h3>
+                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+                    class-name="flex-1 h-[56px]" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Pembuat Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Keterangan Pelapor:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Sumber Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Posko:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+            </div>
+        </div>
+
+    </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -73,9 +205,16 @@ import { Workbook } from 'exceljs'
 import { writeDataJson } from '@/utils/storage'
 import { useDialogStore } from '@/stores/dialog'
 import { useFiltersStore } from '@/stores/filters'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 
 const dialog = useDialogStore()
 const data = ref<Data1[]>([])
+const dataDetail = ref<Data1>()
+const showDetail = ref(false)
+const closeDetail = () => {
+    showDetail.value = false
+}
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -135,6 +274,8 @@ const createDummy = () => {
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
+    dataDetail.value = data
+    showDetail.value = true
     console.log(data)
 }