@7365admin1/layer-common 4.35.1-staging.448 → 4.35.1-staging.450

package/components/AccessCardPreviewDialog.vue

@@ -18,50 +18,98 @@
 
       <v-card-text class="pa-4">
         <div class="text-caption text-fontgray mb-4">
-          Card: <strong class="text-body-2">{{ selectedCardInUnit?.cardNo }}</strong>
+          <!-- The card number is the one fact this dialog is about, so it is
+               not greyed out with the "Card:" label around it. `text-high-emphasis`
+               rather than a literal black: every app has a light/dark toggle
+               (plugins/vuetify.ts), and #000 here would be black text on a dark
+               panel. It resolves to black in the light theme. -->
+          Card:
+          <strong class="text-body-2 font-weight-bold text-high-emphasis">{{
+            selectedCardInUnit?.cardNo
+          }}</strong>
         </div>
 
-        <!-- Person Type Filter -->
-        <!-- <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">Person Type</div>
-        <v-btn-toggle
-          v-model="assignPersonType"
-          color="primary"
+        <!--
+          WHO the card is being given to. The dialog only ever offered the
+          unit's residents and tenants; Management and Service Providers are
+          the other two groups of people who hold cards on a site. A select
+          rather than a button toggle: three labels this long overflow a 420px
+          dialog, and this stays legible at phone width.
+        -->
+        <InputLabel title="Assign to" required class="mb-1" />
+        <v-select
+          v-model="assignCategory"
+          :items="assignCategories"
           density="compact"
-          variant="outlined"
-          rounded="pill"
+          item-title="label"
+          item-value="value"
+          hide-details
           class="mb-4"
-        >
-          <v-btn value="" size="small" class="text-none px-3">All</v-btn>
-          <v-btn value="owner" size="small" class="text-none px-3">Unit Owner</v-btn>
-          <v-btn value="resident" size="small" class="text-none px-3">Resident</v-btn>
-          <v-btn value="tenant" size="small" class="text-none px-3">Tenant</v-btn>
-        </v-btn-toggle> -->
+          @update:model-value="onAssignCategoryChange"
+        />
 
         <!-- Person Selector -->
         <InputLabel title="Person" required class="mb-1" />
         <v-select
           v-model="assignPerson"
-          :items="filteredPeopleItems"
+          :items="assignPeopleItems"
           density="compact"
           item-title="name"
-          item-value="_id"
+          item-value="assigneeId"
           hide-details="auto"
           placeholder="Select person..."
           persistent-placeholder
           :loading="peopleLoading"
+          :disabled="peopleLoading"
           return-object
-          no-data-text="No residents or tenants found for this unit"
+          :no-data-text="assignNoDataText"
         >
+          <!--
+            Three lines: who they are, their email, and what they are here -
+            the member's role, or the provider's line of business. `title` is
+            bound rather than left to `itemProps` so the subtitle slot can add
+            the third line under it.
+          -->
           <template #item="{ props: itemProps, item }">
-            <v-list-item v-bind="itemProps" :subtitle="personTypeLabel(item.raw)" />
+            <v-list-item v-bind="itemProps" :title="item.raw.name">
+              <template v-if="item.raw.subtitle || item.raw.meta" #subtitle>
+                <div v-if="item.raw.subtitle" class="text-truncate">
+                  {{ item.raw.subtitle }}
+                </div>
+                <div v-if="item.raw.meta" class="text-caption text-medium-emphasis">
+                  {{ item.raw.meta }}
+                </div>
+              </template>
+            </v-list-item>
           </template>
+          <!--
+            The same two lines once a person is chosen. A member's name is
+            often their email, so a selection showing the name alone would drop
+            the one thing that tells two of them apart - their role.
+          -->
           <template #selection="{ item }">
-            <span>{{ item.raw.name }}</span>
-            <v-chip size="x-small" class="ml-2" variant="tonal">
-              {{ personTypeLabel(item.raw) }}
-            </v-chip>
+            <div class="assign-selection">
+              <div class="text-truncate">{{ item.raw.name }}</div>
+              <div
+                v-if="item.raw.subtitle || item.raw.meta"
+                class="text-caption text-medium-emphasis text-truncate"
+              >
+                {{ [item.raw.subtitle, item.raw.meta].filter(Boolean).join(" · ") }}
+              </div>
+            </div>
           </template>
         </v-select>
+
+        <!--
+          A card is assigned by writing the person's USER id onto it, so a row
+          the list cannot give one for must not be sent - the server stores
+          whatever id it is handed without checking, which would silently bind
+          the card to nobody. Data-driven rather than per-group, so this
+          disappears by itself once the endpoint carries the id.
+        -->
+        <p v-if="assignPerson && !assignPerson.assigneeId" class="text-warning text-caption mt-2">
+          {{ assignUnassignableText }}
+        </p>
         <p v-if="assignError" class="text-error text-caption mt-2">{{ assignError }}</p>
       </v-card-text>
 
@@ -76,7 +124,7 @@
         <v-btn
           variant="flat"
           class="text-none screen-btn-primary"
-          :disabled="!assignPerson || assignLoading"
+          :disabled="!assignPerson?.assigneeId || assignLoading"
           :loading="assignLoading"
           @click="confirmAssign"
         >
@@ -404,12 +452,54 @@ const emit = defineEmits<{
 
 const { getResidents, assignUser } = useAccessManagement();
 const { getEncryptedAcmUrl } = useSiteEntryPassSettings();
+const { getAll: getMembers } = useMember();
+const { getAll: getServiceProviders } = useServiceProvider();
 
 const historyDialog = ref(false);
 const showAssignForm = ref(false);
-const assignPersonType = ref<string>("");
 const assignPerson = ref<Record<string, any> | null>(null);
-const peopleItems = ref<Record<string, any>[]>([]);
+
+/**
+ * WHO A CARD CAN BE GIVEN TO.
+ *
+ * The dialog only ever listed the unit's residents and tenants. Management
+ * (the site's own members) and Service Providers hold cards on a site too, so
+ * the operator picks the group first and then the person.
+ *
+ * `value` is only ever read here; nothing is sent to the server, which takes a
+ * flat list of user ids and does not know about these groups.
+ */
+type AssignCategory = "residents" | "management" | "providers";
+
+const assignCategories: { value: AssignCategory; label: string }[] = [
+  { value: "residents", label: "Resident / Tenant" },
+  { value: "management", label: "Management" },
+  { value: "providers", label: "Service Provider" },
+];
+
+const assignCategory = ref<AssignCategory>("residents");
+
+/**
+ * One row shape for all three groups, so the picker does not care which it is
+ * showing.
+ *
+ * `assigneeId` is the person's USER id - the id `assignUser` sends and the
+ * server writes onto the card. Residents already come from the users
+ * collection, and a member row carries its `user`. A row that cannot supply
+ * one keeps `assigneeId: ""`, which is what disables Assign for it rather than
+ * sending an id that binds the card to nobody.
+ */
+type AssignRow = {
+  assigneeId: string;
+  name: string;
+  /** Second line - the email, or what kind of resident this is. */
+  subtitle: string;
+  /** Third line, under the subtitle - the member's role or the provider's service. */
+  meta?: string;
+  raw: Record<string, any>;
+};
+
+const assignPeopleItems = ref<AssignRow[]>([]);
 const peopleLoading = ref(false);
 const assignLoading = ref(false);
 const assignError = ref("");
@@ -452,12 +542,6 @@ const isSelectedCardDeletable = computed(() => {
   ].some((c) => c._id === id);
 });
 
-const filteredPeopleItems = computed(() => {
-  if (!assignPersonType.value) return peopleItems.value;
-  if (assignPersonType.value === "owner") return peopleItems.value.filter((p) => p.isOwner);
-  return peopleItems.value.filter((p) => p.type === assignPersonType.value && !p.isOwner);
-});
-
 const personTypeLabel = (person: Record<string, any>) => {
   if (person.isOwner) return "Unit Owner";
   if (person.type === "resident") return "Resident";
@@ -465,34 +549,168 @@ const personTypeLabel = (person: Record<string, any>) => {
   return person.type ?? "";
 };
 
+const assignNoDataText = computed(() => {
+  if (peopleLoading.value) return "Loading...";
+  if (assignCategory.value === "management") return "No management members assigned to this unit";
+  if (assignCategory.value === "providers") return "No service providers assigned to this unit";
+  return "No residents or tenants found for this unit";
+});
+
+const assignUnassignableText = computed(() =>
+  assignCategory.value === "providers"
+    ? "A card is held by a person, and this is the provider company. Assigning to service providers needs the server to say which account the card belongs to."
+    : "This person has no user account, so a card cannot be assigned to them.",
+);
+
+/** Residents and tenants of THIS UNIT - the list the dialog has always shown. */
+async function loadResidentRows(): Promise<AssignRow[]> {
+  if (!props.unit?._id || !props.orgId || !props.siteId) return [];
+  const res = await getResidents({
+    orgId: props.orgId,
+    siteId: props.siteId,
+    unitId: props.unit._id,
+  });
+  const rows = res?.data ?? [];
+  return rows.map((person: Record<string, any>) => ({
+    // Already the users collection's own `_id` - see core's residents repo.
+    assigneeId: String(person._id ?? ""),
+    name: person.name ?? "",
+    subtitle: person.email ?? "",
+    meta: personTypeLabel(person),
+    raw: person,
+  }));
+}
+
+/**
+ * Management - the site's own members ATTACHED TO THIS UNIT.
+ *
+ * `unit` comes from core #2515 (Unit Management tab), which gave members a
+ * `unit`/`unitName` and taught `GET /api/members` to filter on it. Narrowing
+ * to the unit matches what the card is: it belongs to a unit, so the people
+ * offered are the ones that unit has.
+ *
+ * `type` is the member type of whichever app this layer is running in
+ * (`property_management_agency`, `security_agency`, ...) - the endpoint
+ * requires it and rejects an empty string, and `limit` is capped at 50 there.
+ */
+async function loadManagementRows(): Promise<AssignRow[]> {
+  if (!props.orgId || !props.siteId || !props.unit?._id) return [];
+  const res: any = await getMembers({
+    org: props.orgId,
+    siteId: props.siteId,
+    unit: props.unit._id,
+    type: String(useRuntimeConfig().public.APP ?? ""),
+    status: "active",
+    page: 1,
+    limit: 50,
+  });
+  const rows: Record<string, any>[] = res?.items ?? res?.data ?? [];
+  return rows.map((member) => ({
+    // `user` is the account; `_id` is the membership record and is NOT it.
+    assigneeId: String(member.user ?? ""),
+    name: member.name ?? member.email ?? "",
+    // One line under the name: "Access Mgmt Only · towefa4573@aghism.com".
+    // The role first, because that is what distinguishes two members of the
+    // same unit from each other. Either half is dropped if the row lacks it,
+    // so the separator never dangles.
+    subtitle: [member.roleName, member.email].filter(Boolean).join(" · "),
+    raw: member,
+  }));
+}
+
+/**
+ * Service Providers ATTACHED TO THIS UNIT.
+ *
+ * `GET /api/service-providers?siteId&status=active&unit=<id>` - the same list
+ * and the same unit filter the Unit Management tab uses (core #2515), so the
+ * providers offered are the ones this unit actually has.
+ *
+ * These rows are COMPANIES, not people: the list has `name`, `email` and the
+ * service `type`, and there is no user account behind a company. See
+ * `assigneeId` below.
+ */
+async function loadProviderRows(): Promise<AssignRow[]> {
+  if (!props.siteId || !props.unit?._id) return [];
+  const res: any = await getServiceProviders({
+    siteId: props.siteId,
+    unit: props.unit._id,
+    status: "active",
+    page: 1,
+    limit: 50,
+  });
+  const rows: Record<string, any>[] = res?.items ?? [];
+  return rows.map((provider) => ({
+    /*
+     * Empty on purpose, and not a missing field: a card is assigned by writing
+     * a USER id onto it, and a provider company has no user account. Which id a
+     * company-held card should carry - the `service-providers` row, the
+     * provider `orgId`, or a person from that company - is a backend decision
+     * that has not been made. Sending one anyway would write an id the server
+     * stores without checking and that matches no user.
+     */
+    assigneeId: "",
+    name: provider.name ?? "",
+    subtitle: provider.email ?? "",
+    // The service code is a database value; show what people call it.
+    meta: serviceTypeLabel(provider.type),
+    raw: provider,
+  }));
+}
+
+/** Load the chosen group, dropping a response that a later switch superseded. */
+let assignLoadSeq = 0;
+async function loadAssignPeople() {
+  const seq = ++assignLoadSeq;
+  const category = assignCategory.value;
+  peopleLoading.value = true;
+  assignPeopleItems.value = [];
+  try {
+    const rows =
+      category === "management"
+        ? await loadManagementRows()
+        : category === "providers"
+          ? await loadProviderRows()
+          : await loadResidentRows();
+    if (seq !== assignLoadSeq) return;
+    assignPeopleItems.value = rows;
+  } catch {
+    if (seq !== assignLoadSeq) return;
+    assignPeopleItems.value = [];
+  } finally {
+    if (seq === assignLoadSeq) peopleLoading.value = false;
+  }
+}
+
+function onAssignCategoryChange() {
+  assignPerson.value = null;
+  assignError.value = "";
+  loadAssignPeople();
+}
+
 async function openAssignForm() {
   showAssignForm.value = true;
   assignPerson.value = null;
-  assignPersonType.value = "";
+  assignCategory.value = "residents";
   assignError.value = "";
-  peopleItems.value = [];
+  assignPeopleItems.value = [];
   encryptedAcmUrl.value = "";
 
   if (!props.unit?._id || !props.orgId || !props.siteId) return;
-  peopleLoading.value = true;
-  try {
-    const [residentsRes, acmUrl] = await Promise.all([
-      getResidents({ orgId: props.orgId, siteId: props.siteId, unitId: props.unit._id }),
-      getEncryptedAcmUrl(props.siteId),
-    ]);
-    peopleItems.value = residentsRes?.data ?? [];
-    encryptedAcmUrl.value = acmUrl ?? "";
-  } catch {
-    peopleItems.value = [];
-  } finally {
-    peopleLoading.value = false;
-  }
+
+  // The ACM URL is needed whichever group the card goes to, so it is fetched
+  // once here rather than with each list.
+  getEncryptedAcmUrl(props.siteId)
+    .then((url) => { encryptedAcmUrl.value = url ?? ""; })
+    .catch(() => { encryptedAcmUrl.value = ""; });
+
+  await loadAssignPeople();
 }
 
 function cancelAssign() {
   showAssignForm.value = false;
   assignPerson.value = null;
-  assignPersonType.value = "";
+  assignCategory.value = "residents";
+  assignPeopleItems.value = [];
   assignError.value = "";
 }
 
@@ -507,12 +725,16 @@ const selectedCardType = computed(() => {
 });
 
 async function confirmAssign() {
-  if (!assignPerson.value || !props.unit?._id) return;
+  // `assigneeId` rather than `_id`: the rows now come from three different
+  // lists and only this field is the user account the card is written to. The
+  // Assign button is already disabled without one; this is the guard behind it.
+  const assigneeId = assignPerson.value?.assigneeId;
+  if (!assigneeId || !props.unit?._id) return;
   assignLoading.value = true;
   assignError.value = "";
   try {
     await assignUser({
-      assignees: [assignPerson.value._id],
+      assignees: [assigneeId],
       unit: props.unit._id,
       type: selectedCardType.value,
       acm_url: encryptedAcmUrl.value,
@@ -520,7 +742,9 @@ async function confirmAssign() {
     });
     emit("assign-to-person", {
       card: props.selectedCardInUnit,
-      person: assignPerson.value,
+      // The original record, not the picker's row, so listeners see the same
+      // shape they always have.
+      person: assignPerson.value?.raw ?? assignPerson.value,
     });
     showToast("Card assigned successfully.", "success");
     cancelAssign();
@@ -544,3 +768,15 @@ function toggleCard(card: Record<string, any>) {
   );
 }
 </script>
+
+<style scoped>
+/* The chosen person, two lines inside the field. `min-width: 0` is what lets
+   `text-truncate` work at all here - the selection sits in a flex row, and a
+   flex child will not shrink below its content without it, so a long email
+   would push the field wide instead of ellipsing. */
+.assign-selection {
+  min-width: 0;
+  line-height: 1.25;
+  padding-block: 2px;
+}
+</style>

package/components/InventoryHistoryDialog.vue

@@ -0,0 +1,205 @@
+<template>
+  <v-dialog v-model="show" max-width="1100" scrollable>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        {{ title }}
+        <v-spacer />
+        <v-btn icon="mdi-close" variant="text" class="screen-modal__close" aria-label="Close" @click="show = false" />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
+        <p class="text-body-2 text-medium-emphasis mb-3">{{ intro }}</p>
+
+        <!-- A supervisor opening a person: what they hold now, then everything that happened to their stock. -->
+        <template v-if="holder && holder !== 'me' && holder !== selfId && (store.access.canApprove || store.access.canHandle)">
+          <div class="text-subtitle-2 mb-1">Holding now</div>
+          <v-table density="compact" class="mb-4 border rounded">
+            <thead>
+              <tr>
+                <th>Item</th>
+                <th class="text-right">In hand</th>
+                <th class="text-right">In drafts</th>
+                <th class="text-right">Used this month</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="h in holdings" :key="h._id">
+                <td>{{ h.itemName }}</td>
+                <td class="text-right">{{ h.qty }} {{ h.unit }}</td>
+                <td class="text-right">{{ h.inDrafts || "—" }}</td>
+                <td class="text-right">{{ h.usedThisMonth ?? 0 }}</td>
+              </tr>
+              <tr v-if="!holdings.length">
+                <td colspan="4" class="text-center text-medium-emphasis py-3">Not holding any stock now.</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </template>
+
+        <div class="d-flex flex-wrap ga-2 mb-2">
+          <v-text-field v-model="from" type="date" label="From" density="compact" hide-details style="max-width: 170px" />
+          <v-text-field v-model="to" type="date" label="To" density="compact" hide-details style="max-width: 170px" />
+          <v-select v-model="type" :items="typeChoices" label="What" density="compact" hide-details style="max-width: 200px" />
+          <v-select v-if="!item" v-model="itemPick" :items="[{ value: '', title: 'All items' }, ...itemChoices]" label="Item" density="compact" hide-details style="max-width: 240px" />
+          <v-text-field v-model="location" label="Where (unit, tenant or area)" density="compact" hide-details clearable style="max-width: 240px" />
+        </div>
+
+        <v-data-table-server
+          :headers="headers"
+          :items="rows"
+          :items-length="total"
+          :loading="loading"
+          :items-per-page="limit"
+          :page="page"
+          density="compact"
+          class="border rounded"
+          :no-data-text="emptyText"
+          @update:page="(p: number) => ((page = p), load())"
+        >
+          <template #item.date="{ value }">{{ standardFormatDateTime(value) }}</template>
+          <template #item.what="{ item }">{{ historyText(item) }}</template>
+          <template #item.person="{ item }">{{ item.holderLabel || item.holderName || "—" }}</template>
+          <template #item.qty="{ item }">{{ item.qty }} {{ item.unit }}</template>
+          <template #item.where="{ item }">{{ whereText(item.location) || (item.type === "handover" ? item.remarks : "") || "—" }}</template>
+          <template #item.reference="{ item }">{{ item.type === "handover" ? "—" : item.reference || "—" }}</template>
+          <template #item.photos="{ item }">
+            <InventoryPhotoThumbs :photos="item.photos" :before-at="item.photosBeforeAt" :after-at="item.photosAfterAt" />
+          </template>
+          <template #item.by="{ item }">{{ item.createdByLabel || item.createdByName }}</template>
+          <template #item.holderBalance="{ value }">{{ value ?? "—" }}</template>
+        </v-data-table-server>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useInventory from "../composables/useInventory";
+import useUtils from "../composables/useUtils";
+import useLocalAuth from "../composables/useLocalAuth";
+import { historyText, whereText } from "../utils/inventory-usage";
+
+/**
+ * History of stock (owner 2026-09-29, "where they used their stock"): one person's (`holder`, "me" =
+ * the signed-in person), one item's (`item`: its whole chain across people), or both. Received from the
+ * store, hand-overs in and out, usage with where + work order + photos, and returns. Drafts are not history.
+ */
+const show = defineModel<boolean>({ default: false });
+const props = defineProps({
+  store: { type: Object as PropType<TInventoryStore>, required: true },
+  holder: { type: String, default: "" },
+  item: { type: String, default: "" },
+  title: { type: String, default: "History" },
+  /** Open on "Used" only (My usage). */
+  usageOnly: { type: Boolean, default: false },
+});
+
+const api = useInventory();
+const { standardFormatDateTime } = useUtils();
+const { currentUser } = useLocalAuth();
+const selfId = computed(() => String(currentUser.value?._id ?? ""));
+const rows = ref<TInventoryTransaction[]>([]);
+const holdings = ref<TInventoryHolding[]>([]);
+const total = ref(0);
+const page = ref(1);
+const limit = 50;
+const loading = ref(false);
+const from = ref("");
+const to = ref("");
+const type = ref("");
+const location = ref("");
+const itemPick = ref("");
+const itemChoices = ref<{ value: string; title: string }[]>([]);
+
+const typeChoices = [
+  { value: "", title: "Everything" },
+  { value: "use", title: "Used" },
+  { value: "issue", title: "Taken from store" },
+  { value: "handover", title: "Hand-overs" },
+  { value: "return", title: "Given back" },
+];
+
+const intro = computed(() =>
+  props.usageOnly
+    ? "Where the stock was used: date, place, work order and the before / after photos. Filter by date, item or place."
+    : props.item && !props.holder
+    ? "Every movement of this item: into the store, to each person, between colleagues, where it was used and what came back."
+    : "Everything that happened to this stock: taken from the store, hand-overs, where it was used (with the work order and photos) and returns.",
+);
+const emptyText = computed(() => (from.value || to.value || type.value || location.value || itemPick.value ? "Nothing matches these filters." : "Nothing recorded yet."));
+const headers = computed(() => [
+  { title: "Date", key: "date", sortable: false },
+  { title: "What happened", key: "what", sortable: false },
+  ...(props.item ? [] : [{ title: "Item", key: "itemName", sortable: false }]),
+  ...(props.holder ? [] : [{ title: "Person", key: "person", sortable: false }]),
+  { title: "Qty", key: "qty", sortable: false },
+  { title: "Where", key: "where", sortable: false },
+  { title: "Work order / ref", key: "reference", sortable: false },
+  { title: "Photos", key: "photos", sortable: false },
+  { title: "Recorded by", key: "by", sortable: false },
+  ...(props.holder ? [{ title: "In hand after", key: "holderBalance", sortable: false }] : []),
+]);
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await api.getTransactions(props.store._id, {
+      page: page.value,
+      limit,
+      ...(props.holder ? { holder: props.holder } : {}),
+      ...(props.item || itemPick.value ? { item: props.item || itemPick.value } : {}),
+      ...(type.value ? { type: type.value } : {}),
+      ...(location.value ? { location: location.value } : {}),
+      ...(from.value ? { from: new Date(`${from.value}T00:00:00`).toISOString() } : {}),
+      ...(to.value ? { to: new Date(`${to.value}T23:59:59.999`).toISOString() } : {}),
+    });
+    rows.value = res.items;
+    total.value = res.total;
+  } catch (error: any) {
+    rows.value = [];
+    total.value = 0;
+    notify(error?.data?.message || "Could not load the history.", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
+
+async function loadHoldings() {
+  holdings.value = [];
+  // The API gives another person's holdings to the store's approvers / storekeepers only.
+  if (!props.holder || props.holder === "me" || props.holder === selfId.value || !(props.store.access.canApprove || props.store.access.canHandle)) return;
+  try {
+    holdings.value = await api.getHoldings(props.store._id, props.holder);
+  } catch {
+    holdings.value = [];
+  }
+}
+
+let resetting = false;
+watch([from, to, type, location, itemPick], () => {
+  if (resetting) return;
+  page.value = 1;
+  load();
+});
+watch(show, async (open) => {
+  if (!open) return;
+  resetting = true;
+  page.value = 1;
+  from.value = "";
+  to.value = "";
+  location.value = "";
+  itemPick.value = "";
+  type.value = props.usageOnly ? "use" : "";
+  await nextTick();
+  resetting = false;
+  load();
+  loadHoldings();
+  if (!props.item) {
+    try {
+      itemChoices.value = (await api.getItems(props.store._id, { limit: 200 })).items.map((i) => ({ value: i._id, title: i.name }));
+    } catch {
+      itemChoices.value = [];
+    }
+  }
+});
+</script>