@7365admin1/layer-common 4.97.1-staging.577 → 4.97.1-staging.579

package/components/ScheduleGuide.vue

@@ -0,0 +1,132 @@
+<!--
+  THE ONE-LINE EXPLANATION + "BEFORE YOU START" BANNER, shared by every schedule
+  screen (Cleaning / Landscape / Pest / Pool / Technician). The intro says what
+  the screen is for; the banner appears only when the site is not set up yet
+  (no Areas, an Area without "visits per day", or an Area without Units), and
+  links straight to where that is fixed. It never blocks the screen and stays
+  silent if the check itself fails.
+-->
+<template>
+  <div class="schedule-guide">
+    <p v-if="text" class="schedule-guide__text">{{ text }}</p>
+    <v-alert
+      v-if="problems.length"
+      type="warning"
+      variant="tonal"
+      density="comfortable"
+      class="schedule-guide__banner"
+      title="Before you start"
+    >
+      <ul class="schedule-guide__list">
+        <li v-for="p in problems" :key="p">{{ p }}</li>
+      </ul>
+      <template #append>
+        <v-btn
+          :to="areaLink"
+          variant="outlined"
+          size="small"
+          class="text-none"
+        >
+          Set up Areas and Units
+        </v-btn>
+      </template>
+    </v-alert>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useAreas from "../composables/useAreas";
+import { scheduleNameFor } from "../utils/schedule-task";
+
+const props = defineProps({
+  orgId: { type: String, required: true },
+  site: { type: String, required: true },
+  serviceType: { type: String, default: "" },
+  scheduleRoute: { type: String, default: "" },
+  text: { type: String, default: "" },
+});
+
+const { getAreas, getAreaById } = useAreas();
+const problems = ref<string[]>([]);
+
+const areaLink = computed(
+  () =>
+    `/${props.orgId}/${props.site}/${
+      props.scheduleRoute || scheduleNameFor(props.serviceType).route
+    }/area`,
+);
+
+// How many areas get a units check: one request each, so capped.
+const MAX_UNIT_CHECKS = 30;
+const plural = (n: number, one: string, many: string) => (n === 1 ? one : many);
+
+async function check() {
+  try {
+    const res = await getAreas({
+      site: props.site,
+      limit: 200,
+      serviceType: props.serviceType,
+    });
+    const areas: any[] = res?.items || [];
+    const found: string[] = [];
+
+    if (!areas.length) {
+      problems.value = [
+        "There are no Areas yet. Add your Areas, then the Units in each one.",
+      ];
+      return;
+    }
+
+    const noVisits = areas.filter((a) => !(Number(a.set) >= 1));
+    if (noVisits.length) {
+      found.push(
+        `${noVisits.length} ${plural(noVisits.length, "area has", "areas have")} no visits per day set: ${noVisits
+          .slice(0, 3)
+          .map((a) => a.name)
+          .join(", ")}${noVisits.length > 3 ? "..." : ""}.`,
+      );
+    }
+
+    const noUnits: string[] = [];
+    await Promise.all(
+      areas.slice(0, MAX_UNIT_CHECKS).map(async (a) => {
+        try {
+          const full = await getAreaById(a._id);
+          if (!(full?.units || []).length) noUnits.push(a.name);
+        } catch {
+          // a failed lookup is not evidence of a missing unit
+        }
+      }),
+    );
+    if (noUnits.length) {
+      found.push(
+        `${noUnits.length} ${plural(noUnits.length, "area has", "areas have")} no Units, so ${plural(noUnits.length, "it is", "they are")} skipped: ${noUnits
+          .slice(0, 3)
+          .join(", ")}${noUnits.length > 3 ? "..." : ""}.`,
+      );
+    }
+    problems.value = found;
+  } catch {
+    problems.value = [];
+  }
+}
+
+onMounted(check);
+watch(() => [props.site, props.serviceType], check);
+</script>
+
+<style scoped>
+.schedule-guide {
+  margin-bottom: 12px;
+}
+.schedule-guide__text {
+  margin: 0 0 12px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+.schedule-guide__list {
+  margin: 0;
+  padding-left: 18px;
+}
+</style>