@7365admin1/layer-common 4.84.0 → 4.84.1-staging.482

package/components/BuildingUnitManagement.vue

@@ -0,0 +1,298 @@
+<template>
+  <v-card width="100%">
+    <v-expansion-panels v-model="panels" variant="accordion" multiple>
+      <v-expansion-panel v-for="section in sections" :key="section.key" :value="section.key">
+        <v-expansion-panel-title class="bg-primary">
+          <span>{{ section.title }} ({{ section.items.length }})</span>
+          <v-spacer />
+          <!-- @click.stop: the button sits in the panel header, so a click must
+               not also open or close the panel. -->
+          <v-btn v-if="canUpdate" size="small" variant="tonal" class="text-none mr-4" prepend-icon="mdi-plus"
+            @click.stop="openAdd(section.key)">
+            Add
+          </v-btn>
+        </v-expansion-panel-title>
+
+        <v-expansion-panel-text>
+          <v-progress-linear v-if="section.loading" indeterminate color="primary" />
+          <v-list v-if="section.items.length" density="compact" class="bg-transparent">
+            <v-list-item v-for="item in section.items" :key="item._id" :title="item.name"
+              :subtitle="section.subtitle(item)">
+              <template v-if="canUpdate" #append>
+                <v-btn icon="mdi-close" size="small" variant="text" :loading="removing === item._id"
+                  :aria-label="`Remove ${item.name} from this unit`" @click="confirmRemove(section.key, item)" />
+              </template>
+            </v-list-item>
+          </v-list>
+          <p v-else-if="!section.loading" class="font-weight-semibold text-caption ml-2 mt-5">
+            **No {{ section.empty }} to display**
+          </p>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <p v-if="message" class="text-center text-subtitle-2 font-weight-medium text-error mt-4">
+      {{ message }}
+    </p>
+
+    <v-dialog v-model="removeDialog" width="450" persistent>
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">
+            Remove {{ pendingRemove?.section === "members" ? "Management" : "Service Provider" }}
+          </span>
+        </v-toolbar>
+
+        <v-card-text>
+          <p class="text-subtitle-2 text-center">
+            Are you sure you want to remove <strong>{{ pendingRemove?.name }}</strong> from this unit?
+          </p>
+        </v-card-text>
+
+        <v-toolbar density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn tile block size="48" variant="text" class="text-none" :disabled="!!removing"
+                @click="removeDialog = false">
+                Cancel
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn tile block size="48" color="primary-button" variant="flat" class="text-none"
+                :loading="!!removing" @click="remove">
+                Remove
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="addDialog" width="520" persistent>
+      <v-card>
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h6">Add {{ adding === "members" ? "Management" : "Service Providers" }}</span>
+        </v-toolbar>
+        <v-card-text>
+          <p class="text-caption mb-3">
+            Only active {{ adding === "members" ? "members" : "service provider people" }} that are not assigned to a
+            unit yet are listed.
+          </p>
+          <v-autocomplete v-model="selected" v-model:search="candidateSearch" :items="candidates"
+            :loading="candidatesLoading" item-title="name" item-value="_id" multiple chips closable-chips
+            no-filter density="comfortable" placeholder="Search by name"
+            :no-data-text="candidatesLoading ? 'Loading...' : 'No one available'">
+            <template #item="{ props: itemProps, item }">
+              <v-list-item v-bind="itemProps" :subtitle="subtitleOf(item.raw)" />
+            </template>
+          </v-autocomplete>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn class="text-none" :disabled="saving" @click="addDialog = false">Cancel</v-btn>
+          <v-btn class="text-none" color="primary" variant="flat" :loading="saving" :disabled="!selected.length"
+            @click="add">
+            Add
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+/**
+ * A building unit's Management tab: the management members and the service
+ * provider people (Members > Service Providers, not the provider companies)
+ * attached to this unit. Each can be on one unit at a time, and only while
+ * active - the server detaches them the moment they are suspended or deleted,
+ * so they simply drop off this list.
+ */
+type TSection = "members" | "providers";
+type TRow = {
+  _id: string;
+  name: string;
+  email?: string;
+  roleName?: string;
+  type?: string;
+  company?: string;
+  role?: string;
+  status?: string;
+};
+
+const props = defineProps({
+  unitId: {
+    type: String,
+    required: true,
+  },
+  /** The unit's site. The route's `site` is used when this is empty. */
+  siteId: {
+    type: String,
+    default: "",
+  },
+  /** The membership type whose members manage the site. */
+  managementType: {
+    type: String,
+    default: "property_management_agency",
+  },
+  canUpdate: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const org = computed(() => (route.params.org as string) ?? "");
+const site = computed(() => props.siteId || ((route.params.site as string) ?? ""));
+
+const { getAll: getMembers, updateMemberUnit } = useMember();
+const { getSiteMembers: getProviderPeople, updateSiteMemberUnit: updateProviderUnit } = useServiceProvider();
+const { debounce } = useUtils();
+
+const panels = ref<TSection[]>(["members", "providers"]);
+const message = ref("");
+const removing = ref("");
+
+function membersQuery(unit: string, search = "") {
+  return getMembers({ org: org.value, siteId: site.value, type: props.managementType, status: "active", unit, search, limit: 50 });
+}
+
+/**
+ * The site's provider people on `unit`, active only. The endpoint returns the
+ * whole list (no paging or search), so `search` is matched here.
+ */
+async function providersQuery(unit: string, search = "") {
+  const res = await getProviderPeople(site.value, unit);
+  const q = search.toLowerCase();
+  const items = (res?.items ?? []).filter(
+    (p) => p.status === "active" && (!q || [p.name, p.email, p.company].some((v) => v?.toLowerCase().includes(q))),
+  );
+  return { items };
+}
+
+const { data: memberRes, pending: membersLoading, refresh: refreshMembers } = useLazyAsyncData(
+  `unit-management-members-${props.unitId}`,
+  () => membersQuery(props.unitId),
+);
+const { data: providerRes, pending: providersLoading, refresh: refreshProviders } = useLazyAsyncData(
+  `unit-management-providers-${props.unitId}`,
+  () => providersQuery(props.unitId),
+);
+
+function subtitleOf(row: TRow) {
+  return [row.company, row.roleName || row.role || row.type?.replace(/_/g, " "), row.email]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+const sections = computed(() => [
+  {
+    key: "members" as TSection,
+    title: "Management",
+    empty: "management",
+    items: (memberRes.value?.items ?? []) as TRow[],
+    loading: membersLoading.value,
+    subtitle: subtitleOf,
+  },
+  {
+    key: "providers" as TSection,
+    title: "Service Providers",
+    empty: "service providers",
+    items: (providerRes.value?.items ?? []) as TRow[],
+    loading: providersLoading.value,
+    subtitle: subtitleOf,
+  },
+]);
+
+function refresh(section: TSection) {
+  return section === "members" ? refreshMembers() : refreshProviders();
+}
+
+function assign(section: TSection, id: string, unit: string) {
+  return section === "members" ? updateMemberUnit(id, unit) : updateProviderUnit(id, unit);
+}
+
+function errorOf(error: any, fallback: string) {
+  return error?.response?._data?.message || error?.data?.message || fallback;
+}
+
+// --- Remove: confirmed first ---
+const removeDialog = ref(false);
+const pendingRemove = ref<{ section: TSection; id: string; name: string } | null>(null);
+
+function confirmRemove(section: TSection, row: TRow) {
+  message.value = "";
+  pendingRemove.value = { section, id: row._id, name: row.name };
+  removeDialog.value = true;
+}
+
+async function remove() {
+  if (!pendingRemove.value) return;
+  const { section, id } = pendingRemove.value;
+  removing.value = id;
+  try {
+    await assign(section, id, "");
+    await refresh(section);
+  } catch (error: any) {
+    message.value = errorOf(error, "Failed to remove from unit.");
+  } finally {
+    removing.value = "";
+    removeDialog.value = false;
+    pendingRemove.value = null;
+  }
+}
+
+// --- Add dialog: active rows on no unit yet ---
+const addDialog = ref(false);
+const adding = ref<TSection>("members");
+const selected = ref<string[]>([]);
+const candidates = ref<TRow[]>([]);
+const candidateSearch = ref("");
+const candidatesLoading = ref(false);
+const saving = ref(false);
+
+async function loadCandidates() {
+  candidatesLoading.value = true;
+  try {
+    const search = candidateSearch.value?.trim() ?? "";
+    const res = adding.value === "members" ? await membersQuery("none", search) : await providersQuery("none", search);
+    // Keep what is already picked, so a new search does not drop the chips.
+    const picked = candidates.value.filter((c) => selected.value.includes(c._id));
+    const found = ((res?.items ?? []) as TRow[]).filter((c) => !selected.value.includes(c._id));
+    candidates.value = [...picked, ...found];
+  } catch (error: any) {
+    message.value = errorOf(error, "Failed to load the list.");
+  } finally {
+    candidatesLoading.value = false;
+  }
+}
+
+const debouncedLoad = debounce(loadCandidates, 400);
+watch(candidateSearch, () => {
+  if (addDialog.value) debouncedLoad();
+});
+
+function openAdd(section: TSection) {
+  message.value = "";
+  adding.value = section;
+  selected.value = [];
+  candidates.value = [];
+  candidateSearch.value = "";
+  addDialog.value = true;
+  loadCandidates();
+}
+
+async function add() {
+  saving.value = true;
+  message.value = "";
+  const section = adding.value;
+  const results = await Promise.allSettled(selected.value.map((id) => assign(section, id, props.unitId)));
+  const failed = results.filter((r): r is PromiseRejectedResult => r.status === "rejected");
+  if (failed.length) {
+    message.value = errorOf(failed[0].reason, `${failed.length} could not be added.`);
+  }
+  await refresh(section);
+  saving.value = false;
+  addDialog.value = false;
+}
+</script>

package/components/BulletinBoardView.vue

@@ -19,7 +19,7 @@
               <v-col class="font-weight-bold">{{ label }}:</v-col>
 
               <v-col cols="9" class="px-10">
-                <span v-if="key === 'content'" v-html="getFieldValue(key)" />
+                <span v-if="key === 'content'" v-html="sanitizeHtml(getFieldValue(key))" />
                 <span v-else-if="key === 'noExpiration'">
                   <BulletinExpirationChip
                     :value="getFieldValue(key) as boolean"

package/components/DashboardEmptyState.vue

@@ -60,4 +60,12 @@ defineProps({
   color: var(--text2);
   max-width: 34ch;
 }
+
+/* Phones (owner 2026-10-02, "big gap"): a fixed-height panel or empty state
+   left a tall blank block under one line of content; fit the content instead. */
+@media (max-width: 599.98px) {
+  .dashboard-empty {
+    min-height: 72px !important;
+  }
+}
 </style>

package/components/DashboardMain.vue

@@ -5149,4 +5149,18 @@ function formatDashboardTime(value?: string) {
   padding: 0;
   white-space: nowrap;
 }
+
+/* Phones (owner 2026-10-02, "big gap"): a fixed-height panel or empty state
+   left a tall blank block under one line of content; fit the content instead. */
+@media (max-width: 599.98px) {
+  .dashboard-panel {
+    height: auto;
+    min-height: 0;
+  }
+
+  .figma-panel {
+    min-height: 0;
+    padding: 18px 18px 16px;
+  }
+}
 </style>

package/components/DashboardPanel.vue

@@ -104,4 +104,14 @@ defineEmits(["action"]);
   margin-top: 20px;
   min-width: 0;
 }
+
+/* Phones (owner 2026-10-02, "big gap"): a fixed-height panel or empty state
+   left a tall blank block under one line of content; fit the content instead. */
+@media (max-width: 599.98px) {
+  .dashboard-panel {
+    height: auto;
+    min-height: 0;
+    padding: 18px 18px 16px;
+  }
+}
 </style>

package/components/Dialog/UpdateMoreAction.vue

@@ -23,7 +23,7 @@
         Close
       </v-btn>
 
-      <v-menu v-if="canUpdate || canDelete" contained>
+      <v-menu v-if="canUpdate || canDelete || $slots.actions" contained>
         <template #activator="{ props }">
           <v-btn
             variant="flat"
@@ -42,6 +42,16 @@
              render-verified either. Only the row type and the destructive ink
              change. -->
         <v-list class="pa-0 update-more__list">
+          <!--
+            Screen-specific rows, above Edit and the destructive one.
+
+            Additive: a screen that passes nothing gets the menu it always
+            had, and `$slots.actions` is undefined unless a caller actually
+            defines the slot - so the button does not appear over an empty
+            list when a screen has neither permission nor extra rows.
+          -->
+          <slot name="actions" />
+
           <v-list-item v-if="canUpdate" @click="emit('edit')">
             <v-list-item-title>
               {{ editButtonLabel }}