Merge pull request #505 from devforth/feature/AdminForth/1323/show-beautiful-404-error-when-

fix: update error for wrong resource id

Author: SerVitasik

adminforth/spa/src/components/BreadcrumbsWithButtons.vue

@@ -6,17 +6,16 @@
         <slot></slot>
       </div>
     </div>
-    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2" v-if="coreStore.resourceColumnsError">
-      <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-        <span class="font-medium">{{ $t('Error!')}}</span> {{ coreStore.resourceColumnsError }}
-      </div>
+    <div v-if="coreStore.resourceColumnsError" >
+      <PageNotFound :errorMessage="coreStore.resourceColumnsError" />
     </div>
   </div>
 
 </template>
 
 <script setup>
-import Breadcrumbs from '@/components/Breadcrumbs.vue';
+import Breadcrumbs from '@/components/Breadcrumbs.vue'; 
+import PageNotFound from '@/views/PageNotFound.vue';
 
 import { useCoreStore } from '@/stores/core';
 

adminforth/spa/src/views/PageNotFound.vue

@@ -4,7 +4,7 @@
         <div class="mx-auto max-w-screen-sm text-center">
             <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-lightPrimary dark:text-darkPrimary">404</h1>
             <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">{{ $t("Something's missing.") }}</p>
-            <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">{{ $t("Sorry, we can't find that page. You'll find lots to explore on the home page.") }} </p>
+            <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">{{ props.errorMessage ? $t(props.errorMessage) : $t("Sorry, we can't find that page. You'll find lots to explore on the home page.") }} </p>
             <div class="flex justify-center">
              <LinkButton to="/">{{ $t('Go back home') }}</LinkButton>
             </div>
@@ -17,4 +17,8 @@
 
 import { LinkButton } from '@/afcl';
 
+const props = defineProps<{
+  errorMessage?: string
+}>();
+
 </script>