@7365admin1/layer-common 4.119.0 → 4.120.0

package/components/KeySettingsPanel.vue

@@ -0,0 +1,156 @@
+<template>
+  <!--
+    Passes & keys site switches (TLR B8 / D2). Saved as one value,
+    `metadata.keySettings`, through the shared one-switch save
+    (`useSiteFeatureSettings`).
+    Every switch starts off, so a site that never opens this behaves as before.
+  -->
+  <div class="key-settings" data-test="key-settings-panel">
+    <InputLabel title="Key presses" class="d-block mb-1" />
+    <p class="text-caption text-medium-emphasis mb-2">
+      Add one per key press, e.g. Management office and Guardhouse, so an unreturned key shows which press it came
+      from.
+    </p>
+    <div v-for="(row, i) in rows" :key="row.id || `new-${i}`" class="d-flex align-center ga-2 mb-2">
+      <v-text-field
+        v-model="row.name"
+        placeholder="Key press name"
+        density="compact"
+        hide-details
+        maxlength="60"
+        :readonly="readOnly"
+        :data-test="`key-press-name-${i}`"
+      />
+      <v-btn
+        v-if="!readOnly"
+        icon="mdi-delete-outline"
+        variant="text"
+        density="comfortable"
+        :aria-label="`Remove ${row.name || 'key press'}`"
+        @click="rows.splice(i, 1)"
+      />
+    </div>
+    <v-btn
+      v-if="!readOnly && rows.length < 20"
+      variant="text"
+      color="primary"
+      prepend-icon="mdi-plus"
+      class="mb-4"
+      data-test="key-press-add"
+      @click="rows.push({ name: '' })"
+    >
+      Add key press
+    </v-btn>
+
+    <v-divider class="my-3" />
+
+    <v-switch
+      v-model="dailyUnreturnedAlert"
+      label="Daily list of unreturned keys"
+      color="primary"
+      hide-details
+      :disabled="readOnly"
+      data-test="key-daily-alert-switch"
+    />
+    <p class="text-caption text-medium-emphasis mb-2">
+      Once a day, people who look after Passes &amp; Keys get a list of keys still out, by key press.
+    </p>
+    <v-text-field
+      v-if="dailyUnreturnedAlert"
+      v-model="alertTime"
+      type="time"
+      label="Send at (site time)"
+      density="compact"
+      hide-details
+      style="max-width: 200px"
+      :readonly="readOnly"
+      data-test="key-daily-alert-time"
+    />
+
+    <v-switch
+      v-model="blockCheckoutWithKeys"
+      label="Stop check-out while a key is still out"
+      color="primary"
+      hide-details
+      class="mt-3"
+      :disabled="readOnly"
+      data-test="key-block-checkout-switch"
+    />
+    <p class="text-caption text-medium-emphasis mb-4">
+      The guard cannot check a visitor out until their key is returned or marked lost/damaged.
+    </p>
+
+    <v-btn
+      v-if="!readOnly"
+      color="primary"
+      :loading="saving"
+      :disabled="!siteData || !alertTimeValid"
+      data-test="key-settings-save"
+      @click="save"
+    >
+      Save
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useSiteFeatureSettings from "../composables/useSiteFeatureSettings";
+import useKeyPresses from "../composables/useKeyPresses";
+import { cleanKeyPresses, readKeySettings } from "../utils/key-presses";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  siteData: { type: Object, default: null },
+  readOnly: { type: Boolean, default: false },
+});
+const emit = defineEmits<{
+  (e: "saved"): void;
+  (e: "message", text: string, color: string): void;
+}>();
+
+const { saveSiteFeature } = useSiteFeatureSettings();
+// Not `useKeyPresses(site)`: that would read the site again on open.
+const { forget } = useKeyPresses(() => "");
+
+const rows = ref<Array<{ id?: string; name: string }>>([]);
+const dailyUnreturnedAlert = ref(false);
+const alertTime = ref("18:00");
+const blockCheckoutWithKeys = ref(false);
+const saving = ref(false);
+
+watch(
+  () => props.siteData,
+  (site) => {
+    const s = readKeySettings(site);
+    rows.value = s.cabinets.map((c) => ({ ...c }));
+    dailyUnreturnedAlert.value = s.dailyUnreturnedAlert;
+    alertTime.value = s.alertTime;
+    blockCheckoutWithKeys.value = s.blockCheckoutWithKeys;
+  },
+  { immediate: true },
+);
+
+const alertTimeValid = computed(() => /^([01]\d|2[0-3]):[0-5]\d$/.test(alertTime.value || ""));
+
+async function save() {
+  if (!props.siteData) return;
+  saving.value = true;
+  try {
+    const cabinets = cleanKeyPresses(rows.value);
+    await saveSiteFeature(props.site, "keySettings", {
+      cabinets,
+      dailyUnreturnedAlert: dailyUnreturnedAlert.value,
+      alertTime: alertTime.value,
+      blockCheckoutWithKeys: blockCheckoutWithKeys.value,
+    });
+    rows.value = cabinets.map((c) => ({ ...c }));
+    forget(props.site);
+    emit("message", "Passes & keys settings saved", "success");
+    emit("saved");
+  } catch (e: any) {
+    emit("message", e?.data?.message || "Could not save Passes & keys settings", "error");
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/ListCsvExport.vue

@@ -0,0 +1,71 @@
+<template>
+  <!--
+    "Download CSV" for a list screen: the same list API and filters the screen
+    uses, every page, as one CSV file. Reads only what the list already shows.
+  -->
+  <v-btn
+    variant="text"
+    size="small"
+    class="text-none"
+    prepend-icon="mdi-download"
+    :loading="busy"
+    data-test="list-csv-export"
+    @click="download"
+  >
+    {{ label }}
+  </v-btn>
+  <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+</template>
+
+<script setup lang="ts">
+import { collectAllPages, EXPORT_MAX_ROWS, listCsv, type TExportColumn } from "../utils/list-export";
+
+const props = defineProps({
+  /** `(page, limit) => list API result` with the screen's current filters. */
+  fetchPage: {
+    type: Function as PropType<(page: number, limit: number) => Promise<any>>,
+    required: true,
+  },
+  columns: { type: Array as PropType<TExportColumn[]>, required: true },
+  /** File name without the date or extension, e.g. "feedback". */
+  fileName: { type: String, required: true },
+  label: { type: String, default: "Download CSV" },
+});
+
+const busy = ref(false);
+const toast = reactive({ show: false, message: "", color: "" });
+
+async function download() {
+  busy.value = true;
+  try {
+    const { rows, truncated } = await collectAllPages(props.fetchPage);
+    if (!rows.length) {
+      Object.assign(toast, { show: true, message: "Nothing to download for these filters.", color: "info" });
+      return;
+    }
+    const blob = new Blob([listCsv(props.columns, rows)], { type: "text/csv;charset=utf-8" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `${props.fileName}-${new Date().toISOString().slice(0, 10)}.csv`;
+    link.click();
+    // Revoked a moment later: some browsers start the download after click() returns.
+    const href = link.href;
+    setTimeout(() => URL.revokeObjectURL(href), 1000);
+    if (truncated) {
+      Object.assign(toast, {
+        show: true,
+        message: `Only the first ${EXPORT_MAX_ROWS} rows were downloaded. Narrow the dates to get the rest.`,
+        color: "warning",
+      });
+    }
+  } catch (error: any) {
+    Object.assign(toast, {
+      show: true,
+      message: error?.data?.message || "Could not download the list.",
+      color: "error",
+    });
+  } finally {
+    busy.value = false;
+  }
+}
+</script>

package/components/MaStaffRegistrationSettings.vue

@@ -0,0 +1,61 @@
+<template>
+  <div data-test="ma-staff-registration">
+    <v-switch v-model="enabled" :disabled="readOnly" label="Offer &quot;Managing agent staff&quot; at the guardhouse"
+      color="primary" hide-details />
+    <p class="text-caption text-medium-emphasis mt-1 mb-3">
+      The guardhouse can register your staff drawing keys as a contractor of type "Managing agent staff", with your company
+      name filled in.
+    </p>
+    <v-text-field v-if="enabled" v-model.trim="company" :readonly="readOnly" label="Company name to fill in"
+      placeholder="e.g. JLL" density="comfortable" variant="outlined" maxlength="120" />
+    <v-btn v-if="!readOnly" class="screen-btn-primary" color="primary-button" variant="flat" text="Save"
+      :loading="saving" :disabled="!loaded" @click="save" />
+    <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useSiteFeatureSettings from "../composables/useSiteFeatureSettings";
+
+/**
+ * Site setting `metadata.maStaffRegistration` (core site-feature-settings).
+ * Off = today: the contractor type list is unchanged.
+ */
+const props = defineProps({
+  siteId: { type: String, required: true },
+  saved: { type: Object as PropType<{ enabled?: boolean; company?: string } | null>, default: null },
+  readOnly: { type: Boolean, default: false },
+  /** The site has been read; Save stays off until then. */
+  loaded: { type: Boolean, default: false },
+});
+const emit = defineEmits(["saved"]);
+
+const enabled = ref(false);
+const company = ref("");
+watch(
+  () => props.saved,
+  (v) => {
+    enabled.value = v?.enabled === true;
+    company.value = v?.company ?? "";
+  },
+  { immediate: true },
+);
+
+const { saveSiteFeature } = useSiteFeatureSettings();
+const saving = ref(false);
+const toast = reactive({ show: false, message: "", color: "" });
+
+async function save() {
+  if (!props.loaded) return;
+  saving.value = true;
+  try {
+    await saveSiteFeature(props.siteId, "maStaffRegistration", { enabled: enabled.value, company: company.value });
+    Object.assign(toast, { show: true, message: "Saved.", color: "success" });
+    emit("saved");
+  } catch (e: any) {
+    Object.assign(toast, { show: true, message: e?.data?.message || "Could not save.", color: "error" });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/MemberInformation.vue

@@ -114,7 +114,7 @@
           <div class="nric-selected-person d-flex align-center justify-space-between ga-3 mb-5">
             <span>{{ memberSelectedSearchResult.name || "Unknown" }}</span>
             <span class="text-no-wrap">
-              NRIC: {{ memberSelectedSearchResult.nric || "N/A" }}
+              NRIC: {{ maskNRIC(memberSelectedSearchResult.nric) || "N/A" }}
             </span>
           </div>
 
@@ -214,7 +214,7 @@ const props = defineProps({
   },
 });
 
-const { requiredRule, debounce } = useUtils();
+const { requiredRule, debounce, maskNRIC } = useUtils();
 const { getPassKeysByPageSearch } = usePassKey();
 const {
   findPersonByNRICMultipleResult,

package/components/PassInformation.vue

@@ -48,6 +48,7 @@
             :rules="props.passRules"
             item-title="prefixAndName"
             item-value="_id"
+            :item-props="keyItemProps"
             label="Keys (Optional)"
             multiple
             variant="outlined"
@@ -97,6 +98,7 @@
 import type { PropType } from "vue";
 import type { ValidationRule } from "vuetify/lib/types.mjs";
 import usePassKey from "../composables/usePassKey";
+import useKeyPresses from "../composables/useKeyPresses";
 import { errorConverter } from "../utils/data";
 import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
 
@@ -125,6 +127,9 @@ const props = withDefaults(defineProps<PassInformationProps>(), {
 });
 
 const emit = defineEmits(["update:pass", "update:keys"]);
+// The key's press (if the site has any) under each key in the picker. Read
+// only when the key picker is shown.
+const { keyItemProps } = useKeyPresses(() => (props.hideKeys ? "" : props.site));
 const pass = ref<TPassKeyPayload[]>(props.pass);
 const keys = ref<TPassKeyPayload[]>(props.keys);
 const selectedPass = ref<string>("");

package/components/RolePermissionFormCreate.vue

@@ -79,6 +79,27 @@
             />
           </v-col>
 
+          <!--
+            Whole-role starting points (e.g. Guardhouse officer). Replaces the
+            ticks below; nothing is saved until Create. Only offered when this
+            catalogue has every permission the preset uses.
+          -->
+          <v-col v-if="rolePresets.length" cols="12" class="mt-3" data-test="role-presets">
+            <div class="text-caption font-weight-bold mb-1">Start from a ready-made role</div>
+            <div class="d-flex flex-wrap ga-2">
+              <v-tooltip v-for="p in rolePresets" :key="p.key" :text="p.description" location="top">
+                <template #activator="{ props: tip }">
+                  <v-chip v-bind="tip" size="small" variant="outlined" class="text-none" @click="applyRoleTemplate(p)">
+                    {{ p.label }}
+                  </v-chip>
+                </template>
+              </v-tooltip>
+            </div>
+            <div class="text-caption text-medium-emphasis mt-1">
+              Replaces the ticks below. Adjust them if needed, then create the role.
+            </div>
+          </v-col>
+
           <v-col cols="12" class="mt-3">
             <div class="role-create__list">
               <div
@@ -262,6 +283,7 @@ import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
 import useSite from "../composables/useSite";
 import { readApiError } from "../utils/subscription-form";
+import { applyRolePreset, ROLE_PRESETS, type TRolePreset } from "../utils/inventory-presets";
 
 /** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
 const SAVE_FALLBACK =
@@ -406,6 +428,17 @@ function toggleCategory(resource: string, value: boolean | null) {
   }
 }
 
+/** Whole-role presets this catalogue can express in full. */
+const rolePresets = computed(() =>
+  ROLE_PRESETS.filter((p) => applyRolePreset(safePermissions.value as any, p)),
+);
+
+function applyRoleTemplate(preset: TRolePreset) {
+  const state = applyRolePreset(safePermissions.value as any, preset);
+  // never an empty list: empty means "everything" on the server
+  if (state?.selected.length) permState.value = state;
+}
+
 /** A module preset replaced that module's ticks (see RolePermissionPresets). */
 function applyPreset(selected: string[]) {
   permState.value = { selected, enabled: permState.value.enabled };

package/components/SearchVehicleNumberUser.vue

@@ -19,6 +19,8 @@
             </span>
           </template>
 
+          <template #item.nric="{ value }">{{ maskNRIC(value) || "-" }}</template>
+
           <template #item.actions="{ item }">
             <AppButton variant="ghost" @click="handleSelectUser(item)">Select</AppButton>
           </template>
@@ -37,6 +39,7 @@
 </template>
 
 <script setup lang="ts">
+const { maskNRIC } = useUtils();
 
 const prop = defineProps({
   vehicleNumber: {