@7365admin1/layer-common 1.9.0 → 1.10.1

package/components/ScheduleAreaMain.vue

@@ -0,0 +1,313 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12" lg="12">
+      <TableMain
+        :title="'Cleaner Checklist'"
+        :headers="headers"
+        :items="items"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        @update:items="items = $event"
+        @row-click="onRowClick"
+        @refresh="getScheduleAreasRefresh"
+      >
+        <template #item.type="{ item }">
+          <span class="text-capitalize">{{ item.type }}</span>
+        </template>
+
+        <template #extension>
+          <v-row no-gutters class="w-100 d-flex flex-column">
+            <v-card
+              class="w-100 px-3 d-flex align-center ga-5 py-2"
+              flat
+              :height="60"
+            >
+              <v-select
+                v-model="statusFilter"
+                :items="statusOptions"
+                density="compact"
+                hide-details
+                class="mx-2"
+                style="max-width: 160px"
+                item-title="title"
+                item-value="value"
+                label="Status"
+              />
+
+              <v-select
+                v-model="areaTypeFilter"
+                :items="typeOptions"
+                density="compact"
+                hide-details
+                class="mx-2"
+                style="max-width: 160px"
+                item-title="title"
+                item-value="value"
+                label="Type"
+              />
+            </v-card>
+          </v-row>
+        </template>
+        <template #actions>
+          <v-row class="w-100" align="center" no-gutters>
+            <v-col cols="auto">
+              <v-btn
+                variant="text"
+                color="primary"
+                class="text-none"
+                @click="back"
+              >
+                <v-icon left>mdi-arrow-left</v-icon>
+                Back
+              </v-btn>
+            </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-btn
+                v-if="canViewHistory"
+                class="text-none mr-2"
+                size="large"
+                color="primary"
+                aria-label="History"
+                @click="openHistory"
+              >
+                History
+              </v-btn>
+              <v-btn
+                v-if="canGenerateChecklist"
+                class="text-none"
+                size="large"
+                color="primary"
+                aria-label="Generate"
+                @click="_generateChecklist"
+                :loading="submitting"
+              >
+                Generate List
+              </v-btn>
+            </v-col>
+          </v-row>
+        </template>
+        <template #item.acceptedBy="{ item }">
+          <div
+            v-if="
+              item.acceptedByName ||
+              (item.status && String(item.status).toLowerCase() === 'accepted')
+            "
+          >
+            <span class="text-capitalize" color="success" variant="tonal">
+              {{ item.acceptedByName || item.acceptedBy || "Accepted" }}
+            </span>
+          </div>
+          <div v-else>
+            <v-btn
+              v-if="canManageScheduleTasks"
+              variant="outlined"
+              size="medium"
+              class="text-capitalize px-4 py-2"
+              @click.stop="() => _acceptAreaChecklist(item._id)"
+            >
+              Accept
+            </v-btn>
+          </div>
+        </template>
+
+        <template #item.createdAt="{ value }">
+          {{
+            formatDate
+              ? formatDate(value)
+              : value
+              ? new Date(value).toLocaleString()
+              : ""
+          }}
+        </template>
+
+        <template #item.status="{ value }">
+          <v-chip
+            class="text-capitalize"
+            :color="getStatusColor(value)"
+            variant="flat"
+            pill
+          >
+            {{ value || "No Status" }}
+          </v-chip>
+        </template>
+      </TableMain></v-col
+    >
+  </v-row>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
+import useCleaningSchedules from "../composables/useCleaningSchedules";
+
+const props = defineProps({
+  orgId: { type: String, required: true, default: "" },
+  site: { type: String, required: true, default: "" },
+  scheduleAreaId: { type: String, required: true, default: "" },
+  type: { type: String, required: true, default: "cleaner" },
+});
+
+const submitting = ref(false);
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+const areaName = ref<string>("");
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const headers = [
+  { title: "Area", value: "name" },
+  { title: "Status", value: "status" },
+  { title: "Type", value: "type" },
+  { title: "No. of Visits", value: "set" },
+  { title: "Created By", value: "createdByName" },
+];
+
+const { formatDate, back } = useUtils();
+
+const { canGenerateChecklist, canViewHistory, canManageScheduleTasks } =
+  useCleaningSchedulePermission();
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const statusFilter = ref<TScheduleAreaStatus>("All");
+const statusOptions = [
+  { title: "All", value: "All" },
+  { title: "Ready", value: "Ready" },
+  { title: "Ongoing", value: "Ongoing" },
+  { title: "Completed", value: "Completed" },
+];
+const areaTypeFilter = ref<TAreaType>("all");
+const typeOptions = [
+  { title: "All", value: "all" },
+  { title: "Common", value: "common" },
+  { title: "Toilet", value: "toilet" },
+];
+
+const { getScheduleAreas, acceptAreaChecklist, generateChecklist } =
+  useCleaningSchedules();
+
+const {
+  data: getScheduleAreasReq,
+  refresh: getScheduleAreasRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  "get-all-area-cleaner-checklists",
+  () =>
+    getScheduleAreas({
+      page: page.value,
+
+      scheduleAreaId: props.scheduleAreaId,
+      status: statusFilter.value === "All" ? undefined : statusFilter.value,
+      type: areaTypeFilter.value === "all" ? undefined : areaTypeFilter.value,
+    }),
+  {
+    watch: [
+      page,
+      () => props.orgId,
+      () => props.site,
+      () => props.scheduleAreaId,
+      statusFilter,
+      areaTypeFilter,
+    ],
+  }
+);
+
+watchEffect(() => {
+  if (getScheduleAreasReq.value) {
+    items.value = getScheduleAreasReq.value.items;
+    pages.value = getScheduleAreasReq.value.pages;
+    pageRange.value = getScheduleAreasReq.value.pageRange;
+    areaName.value = getScheduleAreasReq.value.areaName;
+  }
+});
+
+const getStatusColor = (status: unknown): string => {
+  if (!status) return "grey";
+
+  const normalized = String(status).toLowerCase();
+
+  switch (normalized) {
+    case "ready":
+      return "grey";
+    case "ongoing":
+      return "primary";
+    case "completed":
+    case "accepted":
+      return "success";
+    default:
+      return "secondary";
+  }
+};
+
+function showMessage(msg: string, color: string = "error") {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function onRowClick(data: any) {
+  const item = data?.item;
+  const id = item?._id || item?.id || item?.areaId;
+  if (id) {
+    const checklistType =
+      props.type === "cleaner"
+        ? "cleaning-schedule"
+        : `${props.type}-checklist`;
+    const path = `/${props.orgId}/${props.site}/${checklistType}/${props.scheduleAreaId}/${id}`;
+    navigateTo(path);
+  } else {
+    console.warn("Row clicked but no id found to navigate:", item);
+  }
+}
+
+function openHistory() {
+  const path = `/${props.orgId}/${props.site}/cleaning-schedule/${props.scheduleAreaId}/history`;
+  navigateTo(path);
+}
+
+async function _acceptAreaChecklist(id?: string) {
+  if (!id) {
+    showMessage("No checklist id provided to accept.", "error");
+    return;
+  }
+
+  try {
+    submitting.value = true;
+    await acceptAreaChecklist(id);
+    showMessage("Area checklist accepted successfully.", "success");
+
+    if (typeof getScheduleAreasRefresh === "function") {
+      getScheduleAreasRefresh();
+    }
+  } catch (error: any) {
+    showMessage(error?.message || "Failed to accept area checklist.", "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function _generateChecklist() {
+  try {
+    submitting.value = true;
+    await generateChecklist(props.site, props.scheduleAreaId);
+    showMessage("Checklist generated successfully.", "success");
+
+    if (typeof getScheduleAreasRefresh === "function") {
+      getScheduleAreasRefresh();
+    }
+  } catch (error: any) {
+    showMessage(error?.message || "Failed to generate checklist.", "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>

package/components/ScheduleTaskAreaFormDialog.vue

@@ -0,0 +1,144 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+    max-width="450"
+  >
+    <v-card>
+      <v-toolbar>
+        <template v-if="$slots.header">
+          <slot
+            name="header"
+            :title="
+              mode === 'edit' ? `Edit ${entityType}` : `Add New ${entityType}`
+            "
+            :onClose="onClose"
+          />
+        </template>
+        <template v-else>
+          <v-row no-gutters class="fill-height px-6" align="center">
+            <span class="font-weight-bold text-h6 text-capitalize">{{
+              mode === "edit" ? `Edit ${entityType}` : `Add New ${entityType}`
+            }}</span>
+          </v-row>
+        </template>
+      </v-toolbar>
+
+      <v-card-text>
+        <v-form ref="formRef" v-model="valid">
+          <v-row>
+            <v-col cols="12">
+              <InputLabel for="name" :title="label" required />
+              <v-text-field v-model="nameValue" :rules="[requiredRule]" />
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-toolbar class="pa-0" density="compact">
+        <v-row no-gutters>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              @click="close"
+              height="48"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none font-weight-bold rounded-0"
+              height="48"
+              :loading="submitting"
+              @click="submit"
+            >
+              {{ mode === "edit" ? "Save" : "Create" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  mode: { type: String as PropType<"add" | "edit">, default: "add" },
+  area: { type: Object as PropType<Record<string, any> | null>, default: null },
+  label: { type: String, default: "Name" },
+  nameModel: { type: String as PropType<string | null>, default: null },
+  entityType: { type: String, default: "Area" }, // values: "Area", "Unit"
+});
+
+const emit = defineEmits([
+  "update:modelValue",
+  "saved",
+  "update:nameModel",
+] as const);
+
+const formRef = ref(null);
+const valid = ref(false);
+const submitting = ref(false);
+
+const form = reactive({ name: "", description: "", status: "active" });
+
+watchEffect(() => {
+  if (props.area) {
+    form.name = props.area.name || "";
+    form.description = props.area.description || "";
+    form.status = props.area.status || "active";
+  } else {
+    form.name = "";
+    form.description = "";
+    form.status = "active";
+  }
+});
+
+const { requiredRule } = useUtils();
+
+const nameValue = computed({
+  get: () => {
+    return props.nameModel !== null ? props.nameModel : form.name;
+  },
+  set: (v: string) => {
+    if (props.nameModel !== null) {
+      emit("update:nameModel", v);
+    } else {
+      form.name = v;
+    }
+  },
+});
+
+function close() {
+  emit("update:modelValue", false);
+}
+
+const onClose = () => close();
+
+async function submit() {
+  if (!valid.value) return;
+  submitting.value = true;
+  try {
+    await new Promise((r) => setTimeout(r, 500));
+    emit("saved", { ...form, _id: props.area?._id || Date.now().toString() });
+
+    form.name = "";
+    form.description = "";
+    form.status = "active";
+
+    emit("update:modelValue", false);
+  } catch (e) {
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>

package/components/ScheduleTaskAreaUpdateMoreAction.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <template v-if="$slots.header">
+        <slot name="header" :title="title" :onClose="onClose" />
+      </template>
+      <template v-else>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h5 text-capitalize">{{
+            title
+          }}</span>
+        </v-row>
+      </template>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+      <slot name="content" />
+    </v-card-text>
+
+    <v-toolbar class="pa-0" density="compact">
+      <v-row no-gutters>
+        <v-col cols="6" class="pa-0">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="emit('close')"
+            height="48"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6" class="pa-0">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item v-if="canUpdate" @click="emit('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  {{ editButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canDelete"
+                @click="emit('delete')"
+                class="text-red"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ deleteButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  editButtonLabel: {
+    type: String,
+    default: "Edit Area",
+  },
+  deleteButtonLabel: {
+    type: String,
+    default: "Delete Area",
+  },
+  title: {
+    type: String,
+    default: "Area Actions",
+  },
+});
+
+const emit = defineEmits(["close", "manage", "edit", "delete"]);
+const {
+  canUpdate,
+  editButtonLabel,
+  deleteButtonLabel,
+  manageButtonLabel,
+  title,
+} = prop;
+</script>
+
+<style scoped></style>