@7365admin1/layer-common 4.70.0 → 4.70.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.70.1
+
+### Patch Changes
+
+- ba6869d: Create Role / Edit Role: a refused or failed save now shows "Couldn't save: <reason>" above the buttons (it was printed below the whole module list, out of sight). Catalogue snapshot test ties the dialog catalogues to core's full-catalogue create test.
+
 ## 4.70.0
 
 ### Minor Changes
@@ -1849,11 +1855,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                  GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                  GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                  owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                  staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/RolePermissionFormCreate.vue

@@ -216,17 +216,21 @@
             </div>
           </v-col>
 
-          <v-col cols="12" class="my-2">
-            <v-row no-gutters>
-              <v-col cols="12" class="text-center">
-                <span class="role-create__error">{{ message }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-form>
     </div>
 
+    <!--
+      WHY A SAVE FAILED, where it can be seen (owner, 2026-09-29: Wing Tai pressed
+      Submit on a 35-module role and "nothing happened"). The server's answer
+      used to be printed at the END of the scrolling list, below every module,
+      so a refused save looked like an ignored click. It now sits above the
+      buttons, outside the scroll, and is read out by screen readers.
+    -->
+    <div v-if="message" class="role-create__save-error" role="alert">
+      Couldn't save: {{ message }}
+    </div>
+
     <div class="role-create__footer">
       <AppButton
         v-if="disabledModuleCount > 0 || !showDisabledModules"
@@ -257,6 +261,11 @@ import {
 import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
 import useSite from "../composables/useSite";
+import { readApiError } from "../utils/subscription-form";
+
+/** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
+const SAVE_FALLBACK =
+  "the server could not be reached. Please check your connection and try again.";
 
 const props = defineProps({
   permissions: {
@@ -487,6 +496,7 @@ watch(
 
 async function submit() {
   disable.value = true;
+  message.value = "";
   try {
     await createRole({
       name: name.value,
@@ -500,9 +510,7 @@ async function submit() {
     // Same unguarded chain as the preview dialog had: on a network or timeout
     // failure `error.response` is undefined and the catch threw inside itself,
     // leaving the user with no message at all.
-    message.value =
-      error?.response?._data?.message ??
-      "Could not create this role. Please check your connection and try again.";
+    message.value = readApiError(error, SAVE_FALLBACK);
   } finally {
     disable.value = false;
   }
@@ -703,10 +711,15 @@ const isAllSelected = computed(() => {
   color: var(--text2);
 }
 
-.role-create__error {
+.role-create__save-error {
+  margin: 0 16px;
+  padding: 8px 12px;
+  border-radius: 6px;
   font-size: var(--fs-cell);
   font-weight: 600;
   color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-border, transparent);
 }
 
 /* The design's dialog footer. Deliberately not the shared

package/components/RolePermissionFormPreviewUpdate.vue

@@ -216,22 +216,23 @@
             </div>
           </v-col>
 
-          <!--
-            One message, once. This block used to appear twice -- inside
-            `v-if="edit"` and again unconditionally -- so a refused save printed
-            the server's sentence back to back.
-          -->
-          <v-col v-if="message" cols="12" class="my-2">
-            <v-row no-gutters>
-              <v-col cols="12" class="text-center">
-                <span class="role-perm__error">{{ message }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-form>
     </div>
 
+    <!--
+      WHY A SAVE FAILED - or why Submit is switched off - where it can be seen:
+      above the buttons, outside the scrolling list (owner, 2026-09-29: a refused
+      save printed below 35 modules looked like an ignored click). One message,
+      once; read out by screen readers.
+    -->
+    <div v-if="message" class="role-perm__save-error" role="alert">
+      Couldn't save: {{ message }}
+    </div>
+    <div v-else-if="edit && errorMessages" class="role-perm__save-error" role="alert">
+      {{ errorMessages }}
+    </div>
+
     <div class="role-perm__footer">
       <AppButton
         v-if="disabledModuleCount > 0 || showDisabledModules"
@@ -266,6 +267,7 @@ import {
 } from "../utils/permission-labels";
 import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
+import { readApiError } from "../utils/subscription-form";
 import {
   holdsPermission,
   withoutPermission,
@@ -692,8 +694,13 @@ const errorMessages = computed(() => {
 
 const { updatePermissionById } = useRole();
 
+/** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
+const SAVE_FALLBACK =
+  "the server could not be reached. Please check your connection and try again.";
+
 async function submit() {
   disable.value = true;
+  message.value = "";
   try {
     await updatePermissionById(props.id, definedModel.value);
     emit("success");
@@ -701,9 +708,7 @@ async function submit() {
     // `error.response` is undefined on a network or timeout failure, so the old
     // unguarded chain threw inside its own catch: nothing was shown, the button
     // came back enabled, and the save looked like it had simply been ignored.
-    message.value =
-      error?.response?._data?.message ??
-      "Could not save this role. Please check your connection and try again.";
+    message.value = readApiError(error, SAVE_FALLBACK);
   } finally {
     disable.value = false;
   }
@@ -779,6 +784,17 @@ async function submit() {
   color: var(--err);
 }
 
+.role-perm__save-error {
+  margin: 0 16px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-border, transparent);
+}
+
 /* 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. */

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.70.0",
+  "version": "4.70.1",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",