@7365admin1/layer-common 4.102.0 → 4.103.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.103.0
+
+### Minor Changes
+
+- 2ca1c40: Online forms review screen: read-only answers stay legible (readonly instead of greyed disabled); a short how-to line; "Request resubmission" and remarks labels that match iMA365 and say the resident sees them; Confirm reads Confirm approval / Confirm rejection / Send back to resident; the page can clear the Confirm spinner when a save fails.
+
 ## 4.102.0
 
 ### Minor Changes

package/components/OnlineFormFill.vue

@@ -107,7 +107,7 @@
                 v-if="field.fieldType === 'text'"
                 v-model="values[field.key]"
                 density="comfortable"
-                :disabled="readonly"
+                :readonly="readonly"
                 :rules="!readonly && field.required ? [requiredRule] : []"
               />
               <v-text-field
@@ -115,7 +115,7 @@
                 v-model.number="values[field.key]"
                 type="number"
                 density="comfortable"
-                :disabled="readonly"
+                :readonly="readonly"
                 :rules="!readonly && field.required ? [requiredRule] : []"
               />
               <v-text-field
@@ -123,7 +123,7 @@
                 v-model="values[field.key]"
                 type="date"
                 density="comfortable"
-                :disabled="readonly"
+                :readonly="readonly"
                 :rules="!readonly && field.required ? [requiredRule] : []"
               />
               <v-select
@@ -131,7 +131,7 @@
                 v-model="values[field.key]"
                 :items="field.options || []"
                 density="comfortable"
-                :disabled="readonly"
+                :readonly="readonly"
                 :rules="!readonly && field.required ? [requiredRule] : []"
               />
               <v-textarea
@@ -140,7 +140,7 @@
                 density="comfortable"
                 rows="3"
                 auto-grow
-                :disabled="readonly"
+                :readonly="readonly"
                 :rules="!readonly && field.required ? [requiredRule] : []"
               />
             </v-col>
@@ -153,7 +153,7 @@
               v-if="block.field.fieldType === 'text'"
               v-model="values[block.field.key]"
               density="comfortable"
-              :disabled="readonly"
+              :readonly="readonly"
               :rules="!readonly && block.field.required ? [requiredRule] : []"
             />
             <v-text-field
@@ -161,7 +161,7 @@
               v-model.number="values[block.field.key]"
               type="number"
               density="comfortable"
-              :disabled="readonly"
+              :readonly="readonly"
               :rules="!readonly && block.field.required ? [requiredRule] : []"
             />
             <v-text-field
@@ -169,7 +169,7 @@
               v-model="values[block.field.key]"
               type="date"
               density="comfortable"
-              :disabled="readonly"
+              :readonly="readonly"
               :rules="!readonly && block.field.required ? [requiredRule] : []"
             />
             <v-select
@@ -177,7 +177,7 @@
               v-model="values[block.field.key]"
               :items="block.field.options || []"
               density="comfortable"
-              :disabled="readonly"
+              :readonly="readonly"
               :rules="!readonly && block.field.required ? [requiredRule] : []"
             />
             <v-textarea
@@ -186,7 +186,7 @@
               density="comfortable"
               rows="3"
               auto-grow
-              :disabled="readonly"
+              :readonly="readonly"
               :rules="!readonly && block.field.required ? [requiredRule] : []"
             />
           </div>
@@ -227,7 +227,7 @@
                 density="compact"
                 hide-details
                 class="mt-0 pt-0 flex-shrink-0"
-                :disabled="readonly"
+                :readonly="readonly"
               />
               <div class="flex-grow-1">
                 <span class="text-body-2" style="line-height: 1.4">{{ item.label }}</span>
@@ -392,14 +392,17 @@
       v-if="readonly && approvalMode"
       class="online-form-fill__approve"
     >
+      <p class="text-caption text-medium-emphasis mb-2" data-test="online-form-review-hint">
+        {{ reviewHint }}
+      </p>
       <v-text-field
         v-model="adminRemarks"
-        label="Remarks"
+        :label="remarksLabel"
         density="compact"
         variant="outlined"
         :hide-details="adminRemarks.trim().length > 0"
         :error="remarksRequired && adminRemarks.trim().length === 0"
-        :error-messages="remarksRequired && adminRemarks.trim().length === 0 ? 'Remarks are required' : ''"
+        :error-messages="remarksRequired && adminRemarks.trim().length === 0 ? 'Please add remarks - the resident sees them' : ''"
       />
       <!-- The three verdicts keep their colour coding - it is what tells them
            apart - but on the theme's own status colours rather than fixed
@@ -413,7 +416,7 @@
           color="warning"
           class="text-none"
           @click="selectAction('resubmission')"
-        >Resubmit</v-btn>
+        >Request resubmission</v-btn>
         <v-btn
           :variant="selectedAction === 'rejected' ? 'flat' : 'tonal'"
           color="error"
@@ -433,7 +436,7 @@
           :disabled="!canConfirm"
           :loading="updatingStatus"
           @click="confirmStatusUpdate"
-        >Confirm</v-btn>
+        >{{ confirmLabel }}</v-btn>
       </div>
     </div>
 
@@ -592,6 +595,20 @@ watch(() => props.initialManagementValues, (saved) => {
 
 const remarksRequired = computed(() => !!selectedAction.value);
 
+// Same wording as the iMA365 review screen, so office and phone read alike.
+const REVIEW_TEXT: Record<string, { remarks: string; confirm: string }> = {
+  approved: { remarks: "Remarks (the resident sees this)", confirm: "Confirm approval" },
+  rejected: { remarks: "Reason for rejection (the resident sees this)", confirm: "Confirm rejection" },
+  resubmission: { remarks: "Reason for resubmission (the resident sees this)", confirm: "Send back to resident" },
+};
+const remarksLabel = computed(() => REVIEW_TEXT[selectedAction.value]?.remarks ?? "Remarks (the resident sees this)");
+const confirmLabel = computed(() => REVIEW_TEXT[selectedAction.value]?.confirm ?? "Confirm");
+const reviewHint = computed(() =>
+  selectedAction.value === "approved" && managementUseItems.value.length
+    ? "Fill in the For Management Use Only box and your remarks, then confirm."
+    : "Choose Approve, Request resubmission or Reject, add your remarks, then confirm.",
+);
+
 const managementComplete = computed(() => {
   if (selectedAction.value !== "approved") return true;
   return managementUseItems.value.every(item => (managementValues.value[item] ?? "").trim().length > 0);
@@ -629,6 +646,8 @@ function confirmStatusUpdate() {
     status: selectedAction.value,
     remarks: adminRemarks.value,
     managementValues: managementValues.value,
+    // The page calls this when the save finished or failed, so Confirm never stays spinning.
+    done: () => (updatingStatus.value = false),
   });
 }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.102.0",
+  "version": "4.103.0",
   "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.",