@7365admin1/layer-common 3.2.2-staging.83 → 3.2.2-staging.84

package/components/RolePermissionMain.vue

@@ -105,42 +105,90 @@
       />
     </v-dialog>
 
-    <ConfirmDialog
-      v-model="confirmDialog"
-      :loading="deleteLoading"
-      @submit="handleDeleteRole"
-    >
-      <template #title>
-        <span class="font-weight-medium text-h5">Delete Role</span>
-      </template>
-
-      <template #description>
-        <p class="text-subtitle-2">
-          Are you sure you want to delete this role? This action cannot be
-          undone.
-        </p>
-      </template>
-
-      <template #footer>
-        <div class="d-flex justify-center ga-3 w-100">
-          <v-btn
-            variant="text"
-            @click="confirmDialog = false"
-            :disabled="deleteLoading"
-          >
-            Close
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="flat"
-            @click="handleDeleteRole"
-            :loading="deleteLoading"
-          >
-            Delete Role
-          </v-btn>
-        </div>
-      </template>
-    </ConfirmDialog>
+    <v-dialog v-model="confirmDialog" max-width="450">
+      <v-card>
+        <v-toolbar>
+          <v-row no-gutters class="fill-height px-6" align="center">
+            <span class="font-weight-bold text-h6 text-capitalize">
+              Delete Role
+            </span>
+          </v-row>
+        </v-toolbar>
+
+        <v-card-text>
+          <span v-if="!hasAssignedMembers" class="text-subtitle-2">
+            Are you sure you want to delete this role? This action cannot be
+            undone.
+          </span>
+          <template v-else>
+            <p class="text-subtitle-2 mb-4">
+            There are currently
+            <span class="text-error font-weight-bold">
+              {{ deletionPreview.members.length }}
+              {{ deletionPreview.members.length === 1 ? "user" : "users" }}
+            </span>
+            assigned to this role. Reassign each user before deleting it so
+            they do not lose access.
+          </p>
+
+            <v-row
+              v-for="member in deletionPreview.members"
+              :key="member._id"
+              no-gutters
+              class="mb-3 pa-3 border rounded-lg"
+              align="center"
+            >
+              <v-col cols="12" sm="5" class="text-body-2 mb-2 mb-sm-0">
+                {{ member.name || member.user }}
+              </v-col>
+              <v-col cols="12" sm="7">
+                <v-select
+                  v-model="memberReassignments[member._id]"
+                  :items="deletionPreview.replacementRoles"
+                  item-title="name"
+                  item-value="_id"
+                  label="Reassign role"
+                  density="comfortable"
+                  hide-details
+                />
+              </v-col>
+            </v-row>
+          </template>
+        </v-card-text>
+
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="text"
+                class="text-none"
+                size="large"
+                height="48"
+                @click="closeDeleteDialog"
+                :disabled="deleteLoading"
+              >
+                Cancel
+              </v-btn>
+            </v-col>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none font-weight-bold rounded-0"
+                height="48"
+                @click="handleDeleteRole"
+                :loading="deleteLoading"
+                :disabled="hasAssignedMembers && !canConfirmDeletion"
+              >
+                {{ hasAssignedMembers ? "Confirm" : "Delete" }}
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -367,10 +415,49 @@ async function refreshRolesAfterUpdate(savedPermissions: string[]) {
 const confirmDialog = ref(false);
 const selectedRoleId = ref<string | null>(null);
 const deleteLoading = ref(false);
+const deletionPreview = ref({
+  members: [] as Array<Record<string, any>>,
+  replacementRoles: [] as Array<Record<string, any>>,
+});
+const memberReassignments = ref<Record<string, string>>({});
+
+const hasAssignedMembers = computed(
+  () => deletionPreview.value.members.length > 0
+);
+
+const canConfirmDeletion = computed(() =>
+  deletionPreview.value.members.every(
+    (member) => Boolean(memberReassignments.value[member._id])
+  )
+);
 
-function openDeleteDialog(id: string) {
+const { getDeletionPreview, deleteWithReassignments } = useRole();
+
+async function openDeleteDialog(id: string) {
   selectedRoleId.value = id;
-  confirmDialog.value = true;
+  deletionPreview.value = { members: [], replacementRoles: [] };
+  memberReassignments.value = {};
+  deleteLoading.value = true;
+
+  try {
+    const res = await getDeletionPreview(id);
+    deletionPreview.value = res.data;
+    confirmDialog.value = true;
+  } catch (error: any) {
+    const errorMessage =
+      error?.response?._data?.message || "Failed to load role assignments.";
+    showMessage(errorMessage, "error");
+    selectedRoleId.value = null;
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+
+function closeDeleteDialog() {
+  confirmDialog.value = false;
+  selectedRoleId.value = null;
+  deletionPreview.value = { members: [], replacementRoles: [] };
+  memberReassignments.value = {};
 }
 
 function showMessage(msg: string, color: string) {
@@ -383,17 +470,23 @@ async function handleDeleteRole() {
   if (!selectedRoleId.value) return;
   deleteLoading.value = true;
   try {
-    const res = await deleteRole(selectedRoleId.value);
-
-    confirmDialog.value = false;
+    const reassignments = deletionPreview.value.members.map((member) => ({
+      memberId: member._id,
+      roleId: memberReassignments.value[member._id],
+    }));
+    const res = hasAssignedMembers.value
+      ? await deleteWithReassignments(selectedRoleId.value, reassignments)
+      : await deleteRole(selectedRoleId.value);
+
+    closeDeleteDialog();
     showMessage(res.message, "success");
     getRoles();
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
+    const errorMessage =
+      error?.response?._data?.message || "Failed to delete role.";
     showMessage(errorMessage, "error");
   } finally {
     deleteLoading.value = false;
-    selectedRoleId.value = null;
   }
 }
 </script>

package/composables/useRole.ts

@@ -68,6 +68,26 @@ export default function useRole() {
     });
   }
 
+  function getDeletionPreview(_id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/deletion-preview`,
+      { method: "GET" }
+    );
+  }
+
+  function deleteWithReassignments(
+    _id: string,
+    reassignments: Array<{ memberId: string; roleId: string }>
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/delete-with-reassignments`,
+      {
+        method: "PUT",
+        body: { reassignments },
+      }
+    );
+  }
+
   const role = useState<TRole>("userRole", () => {
     return {
       _id: "",
@@ -103,6 +123,8 @@ export default function useRole() {
     updateRoleById,
     updateRoleFieldById,
     deleteRole,
+    getDeletionPreview,
+    deleteWithReassignments,
     updatePermissionById,
     getRoleByUserId,
   };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.83",
+  "version": "3.2.2-staging.84",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {