Wrap components with NotFoundFallBackPageWrapper for validation.

Added NotFoundFallBackPageWrapper across various department-related components to handle scenarios where the department ID is missing or inaccessible. Also updated getDepartmentIdFromUrl to ensure valid department IDs are returned.
2025-03-04 11:52:54 +01:00
parent a1cafbcd2f
commit af61ead3b1
6 changed files with 64 additions and 48 deletions
@@ -271,7 +271,7 @@ export const SessionUser = {
    getDepartmentIdFromUrl: () => {
      // Check if the department id is in the route
      const router = useRouter();
-      return parseInt(router.currentRoute.value.params.departmentId);
+      return parseInt(router.currentRoute.value.params.departmentId) > 0 ? parseInt(router.currentRoute.value.params.departmentId) : undefined;
    },
    /** Redirect to */
    redirectTo: {
@@ -8,6 +8,7 @@ import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrap
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
+import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 </script>

 <template>
@@ -17,9 +18,11 @@ import PageTitle from "@/components/global/PageTitle.vue";
  >
    <template #default>
      <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
-        <!-- <DepartmentDashboardHero /> -->
-        <!-- <DepartmentPosNavigation /> -->
-        <PosDepartmentMVP />
+        <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
+          <!-- <DepartmentDashboardHero /> -->
+          <!-- <DepartmentPosNavigation /> -->
+          <PosDepartmentMVP />
+        </NotFoundFallBackPageWrapper>
      </RestrictedPageWrapper>
    </template>
  </DepartmentDashboardPageWrapper>
@@ -148,7 +148,7 @@ const isBookedWithEconomic = () => {
      title="Kassesystem"
      subtitle="Transaktion"
      >
-    <notFoundFallBackPageWrapper :exists="(customer_name || isLoading)" error="Denne handel findes ikke, eller du har ikke adgang til at se den.">
+    <notFoundFallBackPageWrapper :exists="(customer_name || isLoading) && (SessionUser.functions.getDepartmentIdFromUrl() > 1 && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl()))" error="Denne handel findes ikke, eller du har ikke adgang til at se den.">
    <div class="columns">
      <div class="column is-8-desktop" v-if="AddOrderItemsVisible">
        <SelectProductsFormPOS class="mt-3" category="products" />
@@ -6,16 +6,19 @@ import OrdersPagination from "@/components/displays/pagination/models/Department
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";

 </script>

 <template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
    <DepartmentDashboardPageWrapper title="Kassesystem" subtitle="Point of Sale">
-      <template #default>
-        <DepartmentDashboardHero />
-        <OrdersPagination />
-      </template>
+      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
+        <template #default>
+          <DepartmentDashboardHero />
+          <OrdersPagination />
+        </template>
+      </NotFoundFallBackPageWrapper>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
 </template>
@@ -7,6 +7,7 @@ import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrap
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 </script>

 <template>
@@ -15,7 +16,9 @@ import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboa
        title="Bookinger"
        subtitle="Oversigt over bookinger"
    >
-      <BookingsPagination />
+      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
+        <BookingsPagination />
+      </NotFoundFallBackPageWrapper>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
 </template>
@@ -15,6 +15,7 @@ import DepartmentDashboardDailyReportProductSales
 import DepartmentDashboardDailyReportTodayForm
  from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportTodayForm.vue";
 import { Colors } from "@/ThemeConfig.vue";
+import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";

 /**
 * Get the current date
@@ -39,6 +40,10 @@ const products_sold = ref(null);

 // Get the transactions for the current day
 const getTransactions = async () => {
+  // If the department ID is not set, return
+  if (!department_id.value) {
+    return;
+  }
  await SessionUser.objects.department_daily_reports.functions.getTransactionCount(department_id.value, getDate())
    .then(response => {
      transactions.value = response.data.data.quantity;
@@ -100,46 +105,48 @@ const product_ids = ref([
        title="Dagsopgørelse"
        subtitle="Få et overblik over dagens omsætning, forbrug og bookinger"
    >
-      <!-- Create daily report button -->
-      <div class="columns is-flex-wrap-wrap">
-        <div class="column is-12 has-text-right">
-          <button class="button is-primary"
-                  @click="SessionUser.objects.department_daily_reports.functions.showCreateObjectFormDepartment(department_id)">
-            <span class="icon">
-              <i class="fas fa-plus"></i>
-            </span>
-            <span>Opret ny dagsopgørelse</span>
-          </button>
+      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
+        <!-- Create daily report button -->
+        <div class="columns is-flex-wrap-wrap">
+          <div class="column is-12 has-text-right">
+            <button class="button is-primary"
+                    @click="SessionUser.objects.department_daily_reports.functions.showCreateObjectFormDepartment(department_id)">
+              <span class="icon">
+                <i class="fas fa-plus"></i>
+              </span>
+              <span>Opret ny dagsopgørelse</span>
+            </button>
+          </div>
        </div>
-      </div>
-      <!-- At the top of the page, we want to have a button that allows the user to create a new daily report -->
-      <div class="columns is-multiline">
-        <!-- Display the daily report product sales -->
-        <div class="column is-4" v-for="product in product_ids" :key="product.id">
-          <DepartmentDashboardDailyReportProductSales
-              :product_id="product.id"
-              :date="getDate()"
-              :department_id="department_id"
-              :color="Colors.global.primaryColor"
-          />
+        <!-- At the top of the page, we want to have a button that allows the user to create a new daily report -->
+        <div class="columns is-multiline">
+          <!-- Display the daily report product sales -->
+          <div class="column is-4" v-for="product in product_ids" :key="product.id">
+            <DepartmentDashboardDailyReportProductSales
+                :product_id="product.id"
+                :date="getDate()"
+                :department_id="department_id"
+                :color="Colors.global.primaryColor"
+            />
+          </div>
+          <!-- Display the daily report counts -->
+          <div class="column is-4" v-for="report in reports" :key="report.title">
+            <DepartmentDashboardDailyReportCount
+                :title="report.title"
+                :subtitle="report.subtitle"
+                :count="report.count"
+                :icon="report.icon"
+                :color="report.color"
+                :buttons="report.buttons"
+            />
+          </div>
        </div>
-        <!-- Display the daily report counts -->
-        <div class="column is-4" v-for="report in reports" :key="report.title">
-          <DepartmentDashboardDailyReportCount
-              :title="report.title"
-              :subtitle="report.subtitle"
-              :count="report.count"
-              :icon="report.icon"
-              :color="report.color"
-              :buttons="report.buttons"
-          />
-        </div>
-      </div>
-      <!-- Form to create a new daily report -->
-      <DepartmentDashboardDailyReportTodayForm
-          :department_id="department_id"
-          :date="getDate()"
-      />
+        <!-- Form to create a new daily report -->
+        <DepartmentDashboardDailyReportTodayForm
+            :department_id="department_id"
+            :date="getDate()"
+        />
+      </NotFoundFallBackPageWrapper>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
 </template>