refactor: handle role can canceled

src/pages/08_request-list/MainPage.vue

@@ -23,6 +23,7 @@ import { useRequestList } from 'src/stores/request-list';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 import { dialogWarningClose } from 'src/stores/utils';
 import { CancelButton, SaveButton } from 'src/components/button';
+import { getRole } from 'src/services/keycloak';
 
 const $q = useQuasar();
 const navigatorStore = useNavigator();
@@ -92,6 +93,19 @@ function triggerCancel(id: string) {
   });
 }
 
+const hideAction = computed(() => {
+  const role = getRole();
+  const allowedRoles = [
+    'head_of_admin',
+    'head_of_sale',
+    'admin',
+    'sale',
+    'system',
+  ];
+
+  return !role || !role.some((r) => allowedRoles.includes(r));
+});
+
 function triggerView(opts: { requestData: RequestData }) {
   const url = new URL(
     `/request-list/${opts.requestData.id}`,
@@ -379,6 +393,7 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () => {
               :rows="data"
               :grid="pageState.gridView"
               :visible-columns="pageState.fieldSelected"
+              :hide-action
               @view="(data) => triggerView({ requestData: data })"
               @delete="(data) => triggerCancel(data.id)"
               @reject-cancel="

src/pages/08_request-list/ProductExpansion.vue

@@ -4,6 +4,8 @@ import { baseUrl } from 'src/stores/utils';
 import { ProductRelation, PayCondition } from 'src/stores/quotations/types';
 import { Step, RequestWorkStatus } from 'src/stores/request-list/types';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
+import { computed } from 'vue';
+import { getRole } from 'src/services/keycloak';
 
 defineEmits<{
   (
@@ -34,6 +36,19 @@ const props = defineProps<{
   orderAble?: boolean;
 }>();
 
+const canCanceled = computed(() => {
+  const role = getRole();
+  const allowedRoles = [
+    'head_of_admin',
+    'head_of_sale',
+    'admin',
+    'sale',
+    'system',
+  ];
+
+  return !role || role.some((r) => allowedRoles.includes(r));
+});
+
 function changeableStatus(currentStatus?: RequestWorkStatus) {
   switch (currentStatus) {
     case RequestWorkStatus.Ready:
@@ -53,7 +68,7 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
         RequestWorkStatus.Ready,
         RequestWorkStatus.Ended,
         RequestWorkStatus.Canceled,
-      ];
+      ].filter((v) => canCanceled.value || v !== RequestWorkStatus.Canceled);
       if (props.orderAble) {
         return props.requestCancel && !props.rejectRequestCancel
           ? [...statuses, RequestWorkStatus.RejectCancel]

src/pages/08_request-list/TableRequestList.vue

@@ -20,6 +20,7 @@ const props = withDefaults(
     columns: QTableProps['columns'];
     grid?: boolean;
     visibleColumns?: string[];
+    hideAction?: boolean;
   }>(),
   {
     row: () => [],
@@ -224,6 +225,7 @@ function getEmployeeName(
           />
 
           <KebabAction
+            v-if="!hideAction"
             :id-name="`btn-kebab-${props.row.code}`"
             hide-edit
             hide-toggle
@@ -255,7 +257,7 @@ function getEmployeeName(
           hide-kebab-view
           hide-kebab-edit
           hide-kebab-delete
-          use-cancel
+          :use-cancel="!hideAction"
           class="full-height"
           :use-reject-cancel="
             props.row.customerRequestCancel && !props.row.rejectRequestCancel