@7365admin1/layer-common 1.10.0 → 1.10.1

package/components/ScheduleTaskMain.vue

@@ -0,0 +1,345 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12">
+      <TableMain
+        :title="'Schedule Tasks'"
+        :items="items"
+        :headers="headers"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        :no-data-text="'No schedule tasks found'"
+        @refresh="getTaskRefresh"
+        :canCreate="canCreateScheduleTask"
+        createLabel="Create Schedule Task"
+        @create="openFormDialog"
+        @row-click="onRowClick"
+      >
+        <template #actions>
+          <v-row no-gutters align="center" class="w-100">
+            <v-col cols="auto" v-if="canCreateScheduleTask">
+              <v-btn
+                class="text-none"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+                @click="openFormDialog"
+              >
+                Create Schedule Task
+              </v-btn>
+            </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-text-field
+                v-model="searchInput"
+                density="compact"
+                placeholder="Search"
+                clearable
+                width="300"
+                append-inner-icon="mdi-magnify"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+        </template>
+
+        <!-- frequency removed: using explicit date range in details -->
+
+        <template #item.areas="{ value }">
+          <div v-if="value && value.length > 0">
+            <v-chip
+              v-for="(area, idx) in value.slice(0, 2)"
+              :key="idx"
+              size="small"
+              class="mr-1 mb-1"
+            >
+              {{ area.name }}
+            </v-chip>
+            <v-chip v-if="value.length > 2" size="small" class="mb-1">
+              +{{ value.length - 2 }} more
+            </v-chip>
+          </div>
+          <span v-else>N/A</span>
+        </template>
+
+        <template #item.status="{ value }">
+          <v-chip
+            :color="value === 'active' ? 'success' : 'default'"
+            class="text-capitalize"
+          >
+            {{ value || "N/A" }}
+          </v-chip>
+        </template>
+      </TableMain>
+
+      <ScheduleTaskForm
+        v-model:show="showForm"
+        :mode="formMode"
+        :taskData="selectedTask"
+        :site="props.site"
+        @refresh="getTaskRefresh"
+      />
+
+      <v-dialog v-model="dialogShowMoreActions" width="400" persistent>
+        <HygieneUpdateMoreAction
+          :title="selectedTask?.title || 'Schedule Task Actions'"
+          :canUpdate="canUpdateScheduleTask"
+          @close="dialogShowMoreActions = false"
+          :canDelete="false"
+          @edit="onEditFromMoreAction"
+          :editButtonLabel="'Edit Schedule Task'"
+        >
+          <template #content>
+            <v-row no-gutters>
+              <v-col v-if="selectedTask" cols="12" class="mb-2">
+                <v-row no-gutters class="mb-2">
+                  <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                    Title:
+                  </v-col>
+                  <v-col cols="7" class="text-subtitle-2">
+                    {{ selectedTask.title || "N/A" }}
+                  </v-col>
+                </v-row>
+
+                <v-row no-gutters class="mb-2">
+                  <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                    Date Range:
+                  </v-col>
+                  <v-col cols="7" class="text-subtitle-2">
+                    <div v-if="selectedTask.startDate || selectedTask.endDate">
+                      {{
+                        selectedTask.startDate
+                          ? formatDate(selectedTask.startDate)
+                          : "N/A"
+                      }}
+                      -
+                      {{
+                        selectedTask.endDate
+                          ? formatDate(selectedTask.endDate)
+                          : "N/A"
+                      }}
+                    </div>
+                    <div v-else>N/A</div>
+                  </v-col>
+                </v-row>
+
+                <v-row v-if="selectedTask.time" no-gutters class="mb-2">
+                  <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                    Time:
+                  </v-col>
+                  <v-col cols="7" class="text-subtitle-2">
+                    {{ selectedTask.time || "N/A" }}
+                  </v-col>
+                </v-row>
+
+                <v-row
+                  v-if="selectedTask.areas && selectedTask.areas.length > 0"
+                  no-gutters
+                  class="mb-2"
+                >
+                  <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                    Areas:
+                  </v-col>
+                  <v-col cols="7" class="text-subtitle-2">
+                    <div
+                      v-for="(area, idx) in selectedTask.areas"
+                      :key="idx"
+                      class="mb-1"
+                    >
+                      {{ area.name || area }}
+                    </div>
+                  </v-col>
+                </v-row>
+
+                <v-row v-if="selectedTask.description" no-gutters class="mb-2">
+                  <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                    Description:
+                  </v-col>
+                  <v-col cols="7" class="text-subtitle-2">
+                    {{ selectedTask.description || "N/A" }}
+                  </v-col>
+                </v-row>
+
+                <v-row v-if="selectedTask.status" no-gutters class="mb-2">
+                  <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                    Status:
+                  </v-col>
+                  <v-col cols="7" class="text-subtitle-2">
+                    <v-chip
+                      :color="
+                        selectedTask.status === 'active' ? 'success' : 'default'
+                      "
+                      size="small"
+                      class="text-capitalize"
+                    >
+                      {{ selectedTask.status || "N/A" }}
+                    </v-chip>
+                  </v-col>
+                </v-row>
+
+                <v-row v-if="selectedTask.createdAt" no-gutters class="mb-2">
+                  <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                    Created At:
+                  </v-col>
+                  <v-col cols="7" class="text-subtitle-2">
+                    {{ formatDate(selectedTask.createdAt) || "N/A" }}
+                  </v-col>
+                </v-row>
+              </v-col>
+
+              <v-col v-if="message" cols="12" class="my-2">
+                <span class="text-subtitle-2 text-error">{{ message }}</span>
+              </v-col>
+            </v-row>
+          </template>
+        </HygieneUpdateMoreAction>
+      </v-dialog>
+
+      <Snackbar
+        v-model="messageSnackbar"
+        :text="message"
+        :color="messageColor"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import useScheduleTask from "../composables/useScheduleTask";
+import useScheduleTaskPermission from "../composables/useScheduleTaskPermission";
+
+const props = defineProps({
+  orgId: { type: String, required: true },
+  site: { type: String, required: true },
+  type: { type: String, default: "toilet" },
+});
+
+const { formatDate, debounce } = useUtils();
+const { getScheduleTasks, getScheduleTaskById } = useScheduleTask();
+const {
+  canViewScheduleTasks,
+  canCreateScheduleTask,
+  canUpdateScheduleTask,
+  canDeleteScheduleTask,
+  canViewScheduleTaskDetails,
+} = useScheduleTaskPermission();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const searchInput = ref("");
+const showForm = ref(false);
+const selectedTask = ref<Record<string, any>>({});
+const formMode = ref<"add" | "edit">("add");
+const submitting = ref(false);
+const dialogShowMoreActions = ref(false);
+const dialogDeleteTask = ref(false);
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("success");
+
+const items = ref<any[]>([]);
+
+const headers = [
+  { title: "Title", value: "title" },
+  { title: "Areas", value: "areas" },
+  { title: "Status", value: "status" },
+];
+
+const showMessage = (text: string, color: string = "success") => {
+  message.value = text;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+};
+
+const mapShortToDay = (short: string) => {
+  const mapping: Record<string, string> = {
+    Mon: "Monday",
+    Tue: "Tuesday",
+    Wed: "Wednesday",
+    Thu: "Thursday",
+    Fri: "Friday",
+    Sat: "Saturday",
+    Sun: "Sunday",
+  };
+  return mapping[short] || short;
+};
+
+const formatTaskDays = (dayField: any) => {
+  if (!dayField) return "N/A";
+  if (Array.isArray(dayField))
+    return dayField.map((d) => mapShortToDay(d)).join(", ");
+  return String(dayField);
+};
+
+const {
+  data: getTaskReq,
+  refresh: getTaskRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  `get-schedule-tasks-${props.site}`,
+  () =>
+    getScheduleTasks({
+      page: page.value,
+      site: props.site,
+      search: searchInput.value,
+    }),
+  {
+    watch: [page, () => props.site],
+  }
+);
+
+watchEffect(() => {
+  if (getTaskReq.value) {
+    items.value = getTaskReq.value.items || getTaskReq.value || [];
+    pages.value = getTaskReq.value.pages || 0;
+    pageRange.value = getTaskReq.value.pageRange || "-- - -- of --";
+  }
+});
+
+const debounceSearch = debounce(getTaskRefresh, 500);
+
+watch(
+  [searchInput],
+  () => {
+    debounceSearch();
+  },
+  { immediate: false, deep: true }
+);
+
+function openFormDialog() {
+  formMode.value = "add";
+  selectedTask.value = {};
+  showForm.value = true;
+}
+
+async function onRowClick(data: any) {
+  const taskId = data?.item?._id || data?._id || data?.item?.id || data?.id;
+
+  if (taskId) {
+    try {
+      const fullTaskData = await getScheduleTaskById(taskId);
+      selectedTask.value = fullTaskData || data?.item || data;
+    } catch (error) {
+      selectedTask.value = data?.item || data;
+    }
+  } else {
+    selectedTask.value = data?.item || data;
+  }
+
+  dialogShowMoreActions.value = true;
+  message.value = "";
+}
+
+const onEditFromMoreAction = async () => {
+  dialogShowMoreActions.value = false;
+  formMode.value = "edit";
+  showForm.value = true;
+};
+</script>

package/components/ScheduleTastTicketMain.vue

@@ -0,0 +1,182 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12" lg="10">
+      <TableMain
+        :title="'Schedule Tasks'"
+        :items="items"
+        :headers="headers"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        :no-data-text="'No Schedule Tasks found'"
+        @row-click="onRowClick"
+      >
+        <template #item.task="{ item }">
+          {{ item.task || "N/A" }}
+        </template>
+
+        <template #item.createdAt="{ value }">
+          {{
+            formatDate
+              ? formatDate(value)
+              : value
+              ? new Date(value).toLocaleDateString()
+              : ""
+          }}
+        </template>
+
+        <template #item.area="{ value }">
+          {{ value || "N/A" }}
+        </template>
+
+        <template #item.createdBy="{ item }">
+          <v-avatar
+            size="32"
+            class="mr-2"
+            :color="getAvatarColor(item.createdBy)"
+          >
+            <span class="white--text">{{ getInitials(item.createdBy) }}</span>
+          </v-avatar>
+          {{ item.createdBy || "N/A" }}
+        </template>
+
+        <template #item.cleaners="{ value }">
+          {{ value || "N/A" }}
+        </template>
+
+        <template #item.status="{ value }">
+          <v-chip
+            :color="getStatusColor(value)"
+            class="font-weight-bold"
+            style="background: #ffe6c2; color: #ff9800"
+          >
+            {{ value || "To-Do" }}
+          </v-chip>
+        </template>
+        <!-- Completion Date/Time -->
+        <template #item.completionDate="{ value }">
+          {{ value ? formatDate(value) : "N/A" }}
+        </template>
+        <!-- Action (Accept button) -->
+        <template #item.action="{ item }">
+          <v-btn outlined class="accept-btn" @click.stop="acceptTask(item)">
+            Accept
+          </v-btn>
+        </template>
+      </TableMain>
+
+      <!-- Accept Confirmation Dialog -->
+      <AcceptDialog
+        :model-value="showAcceptDialog"
+        title="Accept Scheduled Task"
+        message="Are you sure you want to Accept this Scheduled Task?"
+        @confirm="confirmAccept"
+        @cancel="showAcceptDialog = false"
+      />
+
+      <!-- ScheduleTaskForm Dialog -->
+      <ScheduleTaskForm v-model:show="showForm" />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  orgId: { type: String, required: true },
+  site: { type: String, required: true },
+  type: { type: String, required: true },
+});
+const loading = ref(false);
+const page = ref(1);
+const pages = ref(1);
+const pageRange = ref("1-3 of 3");
+const showForm = ref(false);
+
+const showAcceptDialog = ref(false);
+const selectedTask = ref(null);
+
+const items = ref([
+  {
+    _id: "1",
+    task: "Clean Windows",
+    createdAt: "2025-10-28T10:00:00Z",
+    area: "",
+    createdBy: "Demo Smith",
+    cleaners: "N/A",
+    status: "To-Do",
+    completionDate: "2025-10-28T10:00:00Z",
+  },
+  {
+    _id: "2",
+    task: "Clean The 3",
+    createdAt: "2025-10-28T10:00:00Z",
+    area: "",
+    createdBy: "Hygiene SP",
+    cleaners: "N/A",
+    status: "To-Do",
+    completionDate: "2025-10-28T10:00:00Z",
+  },
+]);
+
+const headers = [
+  { title: "Task", value: "task" },
+  { title: "Date Created", value: "createdAt" },
+  { title: "Area", value: "area" },
+  { title: "Created By", value: "createdBy" },
+  { title: "Cleaners", value: "cleaners" },
+  { title: "Status", value: "status" },
+  { title: "Completion Date/Time", value: "completionDate" },
+  { title: "Action", value: "action" },
+];
+
+const { formatDate } = useUtils();
+
+function getInitials(name: string) {
+  if (!name) return "";
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase();
+}
+function getAvatarColor(name: string) {
+  if (name === "Demo Smith") return "purple";
+  if (name === "Hygiene SP") return "blue";
+  return "grey";
+}
+function getStatusColor(status: string) {
+  if (status === "To-Do") return "orange";
+  if (status === "Completed") return "green";
+  return "grey";
+}
+function acceptTask(item: any) {
+  selectedTask.value = item;
+  showAcceptDialog.value = true;
+}
+function confirmAccept() {
+  // Handle accept logic here (e.g., update status, API call)
+  showAcceptDialog.value = false;
+}
+function onRowClick(data: any) {
+  const item = data?.item ?? data;
+  const id = item?._id || item?.id;
+  if (id) {
+    const path = `/${props.orgId}/${props.site}/schedule-tasks-ticket/${id}`;
+    navigateTo(path);
+  } else {
+    console.warn("Row clicked but no id found to navigate:", item);
+  }
+}
+</script>
+
+<style scoped>
+.accept-btn {
+  border: 1px solid #333;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  min-width: 80px;
+}
+</style>