add action button inside EmptyPage

src/assets/css/style.css

@@ -1292,6 +1292,10 @@ select {
   width: 3.5rem;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-2 {
   width: 0.5rem;
 }
@@ -1352,10 +1356,6 @@ select {
   width: 1px;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1910,6 +1910,10 @@ select {
   fill: #16a34a;
 }
 
+.fill-primary-300 {
+  fill: #689daa;
+}
+
 .fill-primary-500 {
   fill: #035b71;
 }
@@ -1922,10 +1926,6 @@ select {
   fill: #fff;
 }
 
-.fill-primary-300 {
-  fill: #689daa;
-}
-
 .stroke-white {
   stroke: #fff;
 }

src/components/Pages/EmptyPage.vue

@@ -7,6 +7,10 @@
         <dd class="text-sm text-center text-gray-800">
             {{ desc }}
         </dd>
+        <button v-if="props.type !== 'no_filter' && props.type !== 'not_found'"
+            class="px-3 py-2 mt-4 text-white rounded-lg bg-primary-500" @click="action">
+            {{ actionTitle }}
+        </button>
     </div>
 </template>
 
@@ -22,12 +26,18 @@ import {
     IconDatabase,
     IconSmileySad
 } from '@/utils/icons'
+import { useRouter } from 'vue-router';
 
+const router = useRouter()
 const props = defineProps({
     type: {
         type: String as () => "no_filter" | "not_found" | "disconnect" | "connection_change" | "error_404" | "error_403" | "error_500",
         default: 'error_404',
         required: true
+    },
+    action: {
+        type: Function as () => void,
+        default: () => { }
     }
 })
 
@@ -93,4 +103,50 @@ const icon = computed(() => {
             return IconSmileySad
     }
 })
+
+const actionTitle = computed(() => {
+    switch (props.type) {
+        case 'disconnect':
+            return 'Coba Lagi'
+        case 'connection_change':
+            return 'Muat Ulang'
+        case 'error_404':
+            return 'Kembali'
+        case 'error_403':
+            return 'Kembali'
+        case 'error_500':
+            return 'Kembali'
+        default:
+            return 'Kembali'
+    }
+})
+
+const action = () => {
+    switch (props.type) {
+        case 'disconnect':
+            return props.action
+        case 'connection_change':
+            return props.action
+        case 'error_404':
+            if (window.history.length > 1) {
+                return window.history.back()
+            } else {
+                return router.push('/home')
+            }
+        case 'error_403':
+            if (window.history.length > 1) {
+                return window.history.back()
+            } else {
+                return router.push('/home')
+            }
+        case 'error_500':
+            return props.action
+        default:
+            if (window.history.length > 1) {
+                return window.history.back()
+            } else {
+                return router.push('/home')
+            }
+    }
+}
 </script>