Merge branch 'development' of https://github.com/defuj/eis

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>