From c11d286a7e0f2b8ed3dbd8238e473f47afcb4ed8 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 30 Oct 2023 10:30:49 +0700
Subject: [PATCH] update empty page

---
 src/assets/css/style.css                      |  8 ++
 src/components/Pages/EmptyPage.vue            | 90 ++++++++++++++++++-
 .../Pages/Gangguan/Daftar/Daftar_2.vue        |  6 +-
 .../Pages/Gangguan/Daftar/Daftar_3.vue        |  6 +-
 src/components/Pages/MenuProvider.vue         |  9 +-
 src/utils/icons.ts                            |  8 ++
 6 files changed, 115 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 273fce5..f7d53e2 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1352,6 +1352,10 @@ select {
   width: 1px;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1918,6 +1922,10 @@ select {
   fill: #fff;
 }
 
+.fill-primary-300 {
+  fill: #689daa;
+}
+
 .stroke-white {
   stroke: #fff;
 }
diff --git a/src/components/Pages/EmptyPage.vue b/src/components/Pages/EmptyPage.vue
index 36f5785..8e8e187 100644
--- a/src/components/Pages/EmptyPage.vue
+++ b/src/components/Pages/EmptyPage.vue
@@ -1,14 +1,96 @@
 <template>
-    <div>
-
+    <div class="flex flex-col items-center justify-center w-full min-h-full">
+        <component :is="icon" class="w-16 h-16 mb-3 fill-primary-300" />
+        <dt class="text-lg font-medium text-center text-gray-800">
+            {{ title }}
+        </dt>
+        <dd class="text-sm text-center text-gray-800">
+            {{ desc }}
+        </dd>
     </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { computed } from 'vue'
+import {
+    IconFilter,
+    IconFileX,
+    IconNetworkDisconnected,
+    IconNetworkChange,
+    IconLinkBreak,
+    IconLockKey,
+    IconDatabase,
+    IconSmileySad
+} from '@/utils/icons'
+
+const props = defineProps({
     type: {
         type: String as () => "no_filter" | "not_found" | "disconnect" | "connection_change" | "error_404" | "error_403" | "error_500",
-        default: 'not_found',
+        default: 'error_404',
+        required: true
+    }
+})
+
+const title = computed(() => {
+    switch (props.type) {
+        case 'no_filter':
+            return 'Pilih Filter'
+        case 'not_found':
+            return 'Tidak ditemukan'
+        case 'disconnect':
+            return 'Koneksi Terputus'
+        case 'connection_change':
+            return 'Perubahan Koneksi'
+        case 'error_404':
+            return 'Error 404'
+        case 'error_403':
+            return 'Error 403'
+        case 'error_500':
+            return 'Error 500'
+        default:
+            return 'Tidak ditemukan'
+    }
+})
+
+const desc = computed(() => {
+    switch (props.type) {
+        case 'no_filter':
+            return 'Silahkan terapkan filter di atas untuk mulai menampilkan data'
+        case 'not_found':
+            return 'Data yang kamu cari tidak ditemukan'
+        case 'disconnect':
+            return 'Harap hubungkan perangkat ke jaringan internet'
+        case 'connection_change':
+            return 'Terjadinya perubahan koneksi, harap muat ulang halaman'
+        case 'error_404':
+            return 'Halaman yang kamu tuju tidak ditemukan'
+        case 'error_403':
+            return 'Kamu tidak punya akses ke halaman ini'
+        case 'error_500':
+            return 'Terjadi kesalahan, silahkan coba beberapa saat lagi'
+        default:
+            return 'Terjadi kesalahan, silahkan coba beberapa saat lagi'
+    }
+})
+
+const icon = computed(() => {
+    switch (props.type) {
+        case 'no_filter':
+            return IconFilter
+        case 'not_found':
+            return IconFileX
+        case 'disconnect':
+            return IconNetworkDisconnected
+        case 'connection_change':
+            return IconNetworkChange
+        case 'error_404':
+            return IconLinkBreak
+        case 'error_403':
+            return IconLockKey
+        case 'error_500':
+            return IconDatabase
+        default:
+            return IconSmileySad
     }
 })
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_2.vue b/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
index 5dee180..c8c954c 100644
--- a/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
@@ -1,5 +1,6 @@
 <template>
-    <div>
+    <EmptyPage />
+    <!-- <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -29,7 +30,7 @@
             <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
-    </div>
+    </div> -->
 </template>
 
 <script setup lang="ts">
@@ -42,6 +43,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import type { Data2 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import EmptyPage from '@/components/Pages/EmptyPage.vue'
 
 const data = ref<Data2[]>([])
 
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_3.vue b/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
index a213274..e422f5b 100644
--- a/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <!-- <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -28,7 +28,8 @@
             <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
-    </div>
+    </div> -->
+    <EmptyPage />
 </template>
 
 <script setup lang="ts">
@@ -41,6 +42,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import type { Data3 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import EmptyPage from '@/components/Pages/EmptyPage.vue'
 
 const data = ref<Data3[]>([])
 
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 0e0a02c..0a88c8f 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -1,13 +1,14 @@
 <template>
-    <main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
+    <main
+        class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
         <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
             <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageMetaData[0] }}</h1>
-        </div>        
-        <div class="mt-2 sm:mt-4 dx-viewport">
+        </div>
+        <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
             <Filters :report-button="typeof pageMetaData[2] !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
                 <Type1 v-if="pageMetaData[1] == 'type-1'" />
             </Filters>
-            
+
             <slot></slot>
         </div>
     </main>
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index b2c5aa8..41574ee 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -12,3 +12,11 @@ export { default as IconBox } from '@/components/icons/IconBox.vue'
 export { default as IconFileSearch } from '@/components/icons/IconFileSearch.vue'
 export { default as IconWallet } from '@/components/icons/IconWallet.vue'
 export { default as IconBars3 } from '@/components/icons/IconBars3.vue'
+export { default as IconFilter } from '@/components/icons/IconFilter.vue'
+export { default as IconFileX } from '@/components/icons/IconFileX.vue'
+export { default as IconNetworkDisconnected } from '@/components/icons/IconNetworkDisconnected.vue'
+export { default as IconNetworkChange } from '@/components/icons/IconNetworkChange.vue'
+export { default as IconLinkBreak } from '@/components/icons/IconLinkBreak.vue'
+export { default as IconLockKey } from '@/components/icons/IconLockKey.vue'
+export { default as IconDatabase } from '@/components/icons/IconDatabase.vue'
+