@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/RolePermissionFormPreviewUpdate.vue

@@ -1,36 +1,31 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ props.name }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+  <v-card width="100%" class="screen-modal role-perm">
+    <div class="role-perm__head">
+      <v-card-title>{{ props.name }}</v-card-title>
+    </div>
+    <div class="screen-modal__body role-perm__body">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-4">
-            <div class="d-flex align-center ga-4 text-caption mb-3">
+            <div class="role-perm__legend">
               <span class="d-flex align-center ga-2">
-                <v-icon color="amber-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-perm__dot--both" size="14">mdi-circle</v-icon>
                 Web and Mobile
               </span>
               <span class="d-flex align-center ga-2">
-                <v-icon color="blue-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-perm__dot--web" size="14">mdi-circle</v-icon>
                 Web only
               </span>
             </div>
-            <v-btn
+            <AppButton
               v-if="edit"
-              size="small"
-              variant="tonal"
-              class="text-none mb-2"
+              variant="ghost"
+              class="mb-2"
               @click="toggleSelectAll(!isAllSelected)"
             >
               {{ isAllSelected ? "Unselect All" : "Select All" }}
-            </v-btn>
-            <v-card variant="outlined" border="thin" rounded="lg">
+            </AppButton>
+            <div class="role-perm__list">
               <template
                 v-for="(actions, resourceKey, resourceIndex) in safePermissions"
                 :key="resourceKey"
@@ -38,28 +33,23 @@
                 <v-divider v-if="resourceIndex > 0" />
                 <v-list-item density="compact" :ripple="false">
                   <template #prepend>
-                    <v-chip
+                    <StatusChip
                       class="mr-3"
-                      size="small"
-                      label
-                      :color="resourceColor(String(resourceKey))"
-                    >
-                      {{ selectedActionCount(String(resourceKey)) }}
-                    </v-chip>
+                      :dot="false"
+                      :tone="isWebOnly(String(resourceKey)) ? 'info' : 'warn'"
+                      :label="String(selectedActionCount(String(resourceKey)))"
+                    />
                   </template>
-                  <v-list-item-title
-                    class="text-capitalize text-subtitle-2 font-weight-medium"
-                  >
+                  <v-list-item-title class="text-capitalize role-perm__row-title">
                     {{ formatResourceLabel(String(resourceKey)) }}
                   </v-list-item-title>
                   <template #append>
                     <v-switch
                       :model-value="isCategoryEnabled(String(resourceKey))"
                       :disabled="!edit"
-                      color="green"
+                      class="app-switch"
                       density="compact"
                       hide-details
-                      inset
                       @update:model-value="
                         toggleCategory(String(resourceKey), $event)
                       "
@@ -81,7 +71,7 @@
                             )
                           "
                           :disabled="!edit"
-                          color="primary"
+                          color="accent"
                           density="compact"
                           class="mr-2"
                           @update:model-value="
@@ -93,20 +83,18 @@
                           "
                         />
                       </template>
-                      <v-list-item-title
-                        class="text-subtitle-2 font-weight-medium text-capitalize"
-                      >
+                      <v-list-item-title class="text-capitalize role-perm__row-title">
                         {{ String(actionKey).replace(/-/g, " ") }}
                       </v-list-item-title>
-                      <v-list-item-subtitle class="text-caption">
+                      <v-list-item-subtitle class="role-perm__row-sub">
                         {{ action.description }}
                       </v-list-item-subtitle>
                     </v-list-item>
                   </template>
                 </template>
               </template>
-            </v-card>
-            <div v-if="errorMessages" class="text-caption text-error mt-2">
+            </div>
+            <div v-if="errorMessages" class="role-perm__error mt-2">
               {{ errorMessages }}
             </div>
           </v-col>
@@ -114,11 +102,7 @@
           <v-col v-if="edit" cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
-                  {{ message }}
-                </span>
+                <span class="role-perm__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
@@ -126,74 +110,23 @@
           <v-col cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
-                  {{ message }}
-                </span>
+                <span class="role-perm__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
         </v-row>
       </v-form>
-    </v-card-text>
-
-    <v-toolbar>
-      <v-row class="px-6">
-        <v-col v-if="!edit" cols="6">
-          <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="emit('cancel')"
-          >
-            Close
-          </v-btn>
-        </v-col>
-
-        <v-col v-else cols="6">
-          <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="edit = false"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-
-        <v-col v-if="!edit" cols="6">
-          <v-btn
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="large"
-            :disabled="disable"
-            @click="edit = true"
-          >
-            Edit
-          </v-btn>
-        </v-col>
-
-        <v-col v-else cols="6">
-          <v-btn
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="large"
-            :disabled="Boolean(errorMessages) || disable"
-            :loading="disable"
-            @click="submit()"
-          >
-            Submit
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    </div>
+
+    <div class="role-perm__footer">
+      <AppButton v-if="!edit" variant="ghost" @click="emit('cancel')">Close</AppButton>
+      <AppButton v-else variant="ghost" @click="edit = false">Cancel</AppButton>
+
+      <AppButton v-if="!edit" :disabled="disable" @click="edit = true">Edit</AppButton>
+      <AppButton v-else :disabled="Boolean(errorMessages) || disable" @click="submit()">
+        Submit
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -242,10 +175,8 @@ function formatResourceLabel(key: string) {
   return props.webOnlyResources.includes(key) ? `${label} (Web Only)` : label;
 }
 
-function resourceColor(resource: string) {
-  return props.webOnlyResources.includes(resource)
-    ? "blue-darken-2"
-    : "amber-darken-2";
+function isWebOnly(resource: string) {
+  return props.webOnlyResources.includes(resource);
 }
 
 function selectedActionCount(resource: string) {
@@ -357,3 +288,74 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+.role-perm__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.role-perm__body {
+  padding: 0 20px;
+  max-height: calc(100vh - 160px);
+}
+
+.role-perm__legend {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+/* The two legend dots carried `amber-darken-2` and `blue-darken-2` - fixed
+   Vuetify hues that do not follow the theme, and the same two hues the count
+   chip beside each row used. Both are the design's tones now, and the chip and
+   the dot stay in step because they read the same `isWebOnly`. */
+.role-perm__dot--both {
+  color: var(--warn);
+}
+
+.role-perm__dot--web {
+  color: var(--info);
+}
+
+/* Was a `variant="outlined"` v-card, i.e. a card inside a card. It is the list
+   frame, so it takes the design's card border and radius without laying a
+   second surface over the first. */
+.role-perm__list {
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+
+.role-perm__row-title {
+  font-size: var(--fs-cell) !important;
+  font-weight: var(--fw-cell) !important;
+  color: var(--text);
+}
+
+.role-perm__row-sub {
+  font-size: var(--fs-breadcrumb) !important;
+  color: var(--text2);
+}
+
+.role-perm__error {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--err);
+}
+
+/* The design's dialog footer. Deliberately not the shared
+   `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
+   on this base, and a second copy in `screens.css` would collide with it. */
+.role-perm__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/RolePermissionMain.vue

@@ -1,49 +1,46 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          @click="createDialog = true"
-          size="large"
-          v-if="canCreateRole"
-        >
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD (same shape as Service Providers).
+
+      `Create role` moves from a bare row above the card onto the title line,
+      on the right, where the design puts a screen's primary action. It is the
+      same button under the same `canCreateRole` permission opening the same
+      dialog. The refresh, the range, the pager and the table are unchanged.
+    -->
+    <PageHeader title="Roles and Permissions">
+      <template #actions>
+        <AppButton v-if="canCreateRole" @click="createDialog = true">
           Create role
-        </v-btn>
-      </v-row>
-    </v-col>
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getRoles()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getRoles()"
-              />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <!-- `v-card`'s `:loading` bar, drawn explicitly: a loading screen must
+           still say so now that the card is not a `v-card`. -->
+      <v-progress-linear v-if="loading" indeterminate height="2" />
+
+      <CardToolbar :count="pageRange">
+        <template #left>
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="getRoles()"
+          />
+        </template>
+
+        <template #right>
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getRoles()"
+          />
+        </template>
+      </CardToolbar>
+
+      <v-data-table
           :headers="props.headers"
           :items="items"
           item-value="_id"
@@ -58,7 +55,11 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ getPermissionCount(value) }}</v-chip>
+            <StatusChip
+              :dot="false"
+              tone="info"
+              :label="String(getPermissionCount(value))"
+            />
           </template>
 
           <template #item.action-table="{ item }" v-if="canDeleteRole">
@@ -73,9 +74,8 @@
               </v-list>
             </v-menu>
           </template>
-        </v-data-table>
-      </v-card>
-    </v-col>
+      </v-data-table>
+    </AppCard>
 
     <!-- dialogs -->
     <v-dialog v-model="createDialog" width="500" persistent>
@@ -84,6 +84,7 @@
         :permissions="props.permissions"
         :org="props.orgId"
         :site-id="props.siteId"
+        :site-state="siteFieldShown"
         :web-only-resources="props.webOnlyResources"
         @success="success()"
         :type="props.type"
@@ -105,48 +106,88 @@
       />
     </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>
+    <!--
+      Was a `v-toolbar` title bar over a toolbar footer of two block buttons,
+      the confirm one on `color="black"` - not a token, so it drew a
+      light-theme fill on the dark theme. The shared confirmation shape now.
+      Same question, same reassignment rows, same disabled rule.
+    -->
+    <v-dialog v-model="confirmDialog" max-width="520">
+      <v-card class="screen-modal">
+        <v-card-title>Delete Role</v-card-title>
+
+        <v-card-text class="screen-modal__body">
+          <span v-if="!hasAssignedMembers">
+            Are you sure you want to delete this role? This action cannot be
+            undone.
+          </span>
+          <template v-else>
+            <p class="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="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
+                  class="filter-field"
+                />
+              </v-col>
+            </v-row>
+          </template>
+        </v-card-text>
 
-      <template #footer>
-        <div class="d-flex justify-center ga-3 w-100">
+        <div class="screen-modal__footer">
           <v-btn
-            variant="text"
-            @click="confirmDialog = false"
+            class="screen-btn-ghost"
+            variant="outlined"
             :disabled="deleteLoading"
+            @click="closeDeleteDialog"
           >
-            Close
+            Cancel
           </v-btn>
           <v-btn
-            color="primary"
+            class="screen-btn-primary"
             variant="flat"
-            @click="handleDeleteRole"
             :loading="deleteLoading"
+            :disabled="hasAssignedMembers && !canConfirmDeletion"
+            @click="handleDeleteRole"
           >
-            Delete Role
+            {{ hasAssignedMembers ? "Confirm" : "Delete" }}
           </v-btn>
         </div>
-      </template>
-    </ConfirmDialog>
+      </v-card>
+    </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
-  </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
+// Relative import: this layer's `utils/` is not auto-imported into consumers.
+import { showSiteField } from "../utils/role";
+
 const props = defineProps({
   orgId: {
     type: String,
@@ -160,6 +201,18 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /*
+   * Whether the Create-role dialog shows its (read-only) Site field.
+   * The dialog defaulted this to `true` but this component never declared or
+   * forwarded it, and its root is a `<div>`, so a fallthrough `site-state`
+   * attribute landed on that div instead of the dialog - no consuming app
+   * could switch the field off. Admin roles are never site-scoped, so the
+   * field drew permanently disabled and empty there (QA, admin PR #18).
+   */
+  siteState: {
+    type: Boolean,
+    default: true,
+  },
   type: {
     type: String,
     required: true,
@@ -259,6 +312,10 @@ function tableRowClickHandler(_: any, data: any) {
 
 const createDialog = ref(false);
 
+const siteFieldShown = computed(() =>
+  showSiteField(props.siteState, props.type)
+);
+
 function success() {
   createDialog.value = false;
   getRoles();
@@ -367,10 +424,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>>({});
 
-function openDeleteDialog(id: string) {
+const hasAssignedMembers = computed(
+  () => deletionPreview.value.members.length > 0
+);
+
+const canConfirmDeletion = computed(() =>
+  deletionPreview.value.members.every(
+    (member) => Boolean(memberReassignments.value[member._id])
+  )
+);
+
+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 +479,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>