@7365admin1/layer-common 4.97.0 → 4.97.1-staging.501

package/CHANGELOG.md

@@ -2082,11 +2082,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/assets/css/primitives.css

@@ -775,6 +775,63 @@ select option {
   box-shadow: var(--shadow-menu);
 }
 
+/* The filter box of a `searchable` AppSelect. Sticky rather than scrolled
+   away with the options: the list it filters is long enough to need scrolling,
+   which is the only reason the box is there. */
+.app-select__search {
+  position: sticky;
+  top: -6px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: -6px -6px 4px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--card);
+  color: var(--muted);
+}
+
+.app-select__search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: none;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.app-select__search-input::placeholder {
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.app-select__empty {
+  margin: 0;
+  padding: 10px 8px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+  text-align: center;
+}
+
+/* The footer of a paging AppSelect. Same voice as the empty state - it is the
+   same kind of message about the list rather than an option in it - with a rule
+   above so it does not read as one more row to click. */
+.app-select__loading {
+  margin: 6px 0 0;
+  padding: 9px 8px;
+  border-top: 1px solid var(--border);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+}
+
 .app-select__option {
   display: flex;
   align-items: center;

package/assets/css/screens.css

@@ -809,10 +809,14 @@
   color: var(--muted);
 }
 
-/* The in-card variant: 34px, 10px radius, as drawn. */
-.table-card__search .v-field {
-  border-radius: var(--r-inner);
-  font-size: var(--fs-cell);
+/* The title-row search beside the primary button. `--search` alone is
+   `flex: 1`, written for a filter row; in the actions group that collapses it,
+   so it gets a fixed width here and never more than the row on a phone. */
+.table-card__search.app-field--search {
+  flex: 0 0 auto;
+  width: 260px;
+  max-width: 100%;
+  min-width: 0;
 }
 
 .table-card__primary {

package/components/AccessCardDetailsDialog.vue

@@ -47,22 +47,30 @@
           <div>
             <div class="card-details__label">User</div>
             <div class="card-details__value">
-              {{ details.userCred?.name ?? details.user?.name ?? "N/A" }}
-              <template v-if="details.user?.email">({{ details.user.email }})</template>
+              <template v-if="holderState === 'named'">
+                {{ holderName }}
+                <template v-if="details.user?.email">({{ details.user.email }})</template>
+              </template>
+              <!-- Assigned, but the server did not send the name back. Saying
+                   so beats "N/A", which reads as "nobody holds this card". -->
+              <template v-else-if="holderState === 'assigned'">
+                <span class="text-medium-emphasis">Assigned — name unavailable</span>
+              </template>
+              <template v-else>Unassigned</template>
             </div>
           </div>
 
-          <div v-if="details.userType">
+          <div v-if="holderType">
             <div class="card-details__label">User Type</div>
-            <div class="card-details__value">{{ details.userType }}</div>
+            <div class="card-details__value">{{ holderType }}</div>
           </div>
 
           <!-- Visitor / Resident Credentials -->
           <template v-if="details.userCred">
             <v-divider />
-            <div class="card-details__section">
+            <!-- <div class="card-details__section">
               {{ details.userType ?? "Visitor Information" }}
-            </div>
+            </div> -->
 
             <div v-if="details.userCred.email">
               <div class="card-details__label">Email</div>
@@ -216,6 +224,51 @@ const sortedHistory = computed(() =>
   )
 );
 
+/**
+ * WHO HOLDS THIS CARD.
+ *
+ * `userCred` is written by the visitor-pass flow and carries the person's
+ * details on the card itself. `user` is the resolved account - the card only
+ * stores `userId`, so the server has to join it.
+ *
+ * `card-details` does not do that join today (the lookup is commented out in
+ * core's `getCardDetailsRepo`), so this is empty for every card assigned
+ * through Assign to Person and the field falls through to `holderState`.
+ * Nothing here needs to change when the join is restored.
+ */
+const holderName = computed(
+  () => details.value?.userCred?.name ?? details.value?.user?.name ?? "",
+);
+
+/**
+ * A card with a `userId` IS assigned, whether or not the name came back.
+ *
+ * Printing "N/A" for both cases is the actual defect here: it reads as "nobody
+ * holds this card", which is the opposite of the truth for an assigned one and
+ * could have someone hand out a card that is already in use.
+ */
+const holderState = computed<"named" | "assigned" | "unassigned">(() => {
+  if (holderName.value) return "named";
+  return details.value?.userId ? "assigned" : "unassigned";
+});
+
+/**
+ * WHICH KIND OF PERSON HOLDS THIS CARD — Visitor/Resident, Management or
+ * Service Provider, matching the groups Assign to Person offers.
+ *
+ * `holderType` is what the server should send once it records the category the
+ * card was assigned under. `userType` is NOT that: it is the card's own pool,
+ * and `getCardDetailsRepo` filters on `EAccessCardUserTypes.DEFAULT`, so every
+ * card this dialog can load has the literal value "Visitor/Resident" whoever
+ * actually holds it. Preferring `holderType` means a card given to Management
+ * stops describing itself as a resident's the day the field arrives.
+ *
+ * Falls back to `userType` so nothing disappears in the meantime.
+ */
+const holderType = computed(
+  () => details.value?.holderType ?? details.value?.userType ?? "",
+);
+
 watch(
   () => props.modelValue,
   async (val) => {