@7365admin1/layer-common 4.90.2-staging.491 → 4.90.3

package/components/BuildingUnitManagement.vue

@@ -1,298 +0,0 @@
-<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>