#1862 - UX/UI for Ignore Restriction - Bypass List (Adjustment) (#3760)

- Included "Restriction status" to reflect the current status of any restriction in the table. - Included "Bypass status" column to reflect the status of the bypass: Active / Removed ![image](https://github.com/user-attachments/assets/0ecb5d19-47b1-4418-aa43-3af7cea8093f)
bcgov · Oct 3, 2024 · 6fe0170 · 6fe0170
1 parent d1d0ec4
commit 6fe0170
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
diff --git a/...ges/web/src/components/aest/students/bypassedRestrictions/HistoryBypassedRestrictions.vue b/...ges/web/src/components/aest/students/bypassedRestrictions/HistoryBypassedRestrictions.vue
@@ -20,11 +20,18 @@
           <template #[`item.restrictionCode`]="{ item }">
             {{ item.restrictionCode }}
           </template>
-          <template #[`item.isRestrictionActive`]="{ item }">
-            <status-chip-bypass
-              :is-restriction-active="item.isRestrictionActive"
+          <template #[`item.restrictionStatus`]="{ item }">
+            <status-chip-restriction
+              :status="
+                item.isRestrictionActive
+                  ? RestrictionStatus.Active
+                  : RestrictionStatus.Resolved
+              "
             />
           </template>
+          <template #[`item.bypassStatus`]="{ item }">
+            <status-chip-bypass :is-bypass-active="item.isBypassActive" />
+          </template>
           <template #[`item.id`]>
             <v-btn
               color="primary"
@@ -35,10 +42,15 @@
               View Details</v-btn
             >
           </template>
-          <template #[`item.isBypassActive`]="{ item }">
+          <template #[`item.removeBypassRule`]="{ item }">
             <v-btn
-              :color="getRemoveBypassColor(item.isBypassActive)"
-              :disabled="!item.isBypassActive"
+              :color="
+                getRemoveBypassColor(
+                  item.isBypassActive,
+                  item.isRestrictionActive,
+                )
+              "
+              :disabled="!item.isBypassActive || !item.isRestrictionActive"
             >
               {{ getRemoveBypassLabel(item.isBypassActive) }}</v-btn
             >
@@ -54,15 +66,18 @@ import {
   PAGINATION_LIST,
   ITEMS_PER_PAGE,
   ApplicationRestrictionManagementHeaders,
+  RestrictionStatus,
 } from "@/types";
 import { ref, onMounted, defineComponent } from "vue";
 import StatusChipBypass from "@/components/generic/StatusChipBypass.vue";
 import { ApplicationRestrictionBypassService } from "@/services/ApplicationRestrictionBypassService";
 import { ApplicationRestrictionBypassHistoryAPIOutDTO } from "@/services/http/dto";
+import StatusChipRestriction from "@/components/generic/StatusChipRestriction.vue";
 
 export default defineComponent({
   components: {
     StatusChipBypass,
+    StatusChipRestriction,
   },
   props: {
     applicationId: {
@@ -85,14 +100,18 @@ export default defineComponent({
       return isBypassActive ? "Remove Bypass" : "Bypass Removed";
     };
 
-    const getRemoveBypassColor = (isBypassActive: boolean): string => {
-      return isBypassActive ? "primary" : "secondary";
+    const getRemoveBypassColor = (
+      isBypassActive: boolean,
+      isRestrictionActive: boolean,
+    ): string => {
+      return !isBypassActive || !isRestrictionActive ? "secondary" : "primary";
     };
 
     return {
       DEFAULT_PAGE_LIMIT,
       ITEMS_PER_PAGE,
       PAGINATION_LIST,
+      RestrictionStatus,
       bypassedRestrictions,
       getRemoveBypassLabel,
       getRemoveBypassColor,

diff --git a/sources/packages/web/src/components/generic/StatusChipBypass.vue b/sources/packages/web/src/components/generic/StatusChipBypass.vue
@@ -10,21 +10,19 @@ import ChipStatus from "@/components/generic/ChipStatus.vue";
 export default defineComponent({
   components: { ChipStatus },
   props: {
-    isRestrictionActive: {
+    isBypassActive: {
       type: Boolean as PropType<boolean>,
       required: true,
     },
   },
   setup(props) {
     const { mapBypassStatus } = useRestrictionBypass();
     const bypassStatus = computed(() => {
-      return props.isRestrictionActive
+      return props.isBypassActive
         ? BypassStatusChipLabelTypes.Active
         : BypassStatusChipLabelTypes.Removed;
     });
-    const chipStatus = computed(() =>
-      mapBypassStatus(props.isRestrictionActive),
-    );
+    const chipStatus = computed(() => mapBypassStatus(props.isBypassActive));
     return { chipStatus, bypassStatus };
   },
 });

diff --git a/sources/packages/web/src/composables/useRestrictionBypass.ts b/sources/packages/web/src/composables/useRestrictionBypass.ts
@@ -1,10 +1,8 @@
 import { StatusChipTypes } from "@/types";
 
 export function useRestrictionBypass() {
-  const mapBypassStatus = (isRestrictionActive: boolean): StatusChipTypes => {
-    return isRestrictionActive
-      ? StatusChipTypes.Warning
-      : StatusChipTypes.Success;
+  const mapBypassStatus = (isBypassActive: boolean): StatusChipTypes => {
+    return isBypassActive ? StatusChipTypes.Warning : StatusChipTypes.Success;
   };
 
   return { mapBypassStatus };

diff --git a/sources/packages/web/src/types/contracts/DataTableContract.ts b/sources/packages/web/src/types/contracts/DataTableContract.ts
@@ -375,7 +375,12 @@ export const ApplicationRestrictionManagementHeaders = [
   {
     title: "Restriction Status",
     sortable: false,
-    key: "isRestrictionActive",
+    key: "restrictionStatus",
+  },
+  {
+    title: "Bypass Status",
+    sortable: false,
+    key: "bypassStatus",
   },
   {
     title: "View Details",
@@ -385,6 +390,6 @@ export const ApplicationRestrictionManagementHeaders = [
   {
     title: "Remove Bypass Rule?",
     sortable: false,
-    key: "isBypassActive",
+    key: "removeBypassRule",
   },
 ];