@7365admin1/layer-common 1.10.0 → 1.10.1

package/components/ScheduleTaskForm.vue

@@ -0,0 +1,471 @@
+<template>
+  <v-dialog v-model="show" max-width="680" persistent>
+    <v-card class="d-flex flex-column" max-height="90vh">
+      <v-toolbar flat color="grey-lighten-4">
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <v-toolbar-title class="text-h6 font-weight-bold">
+            {{
+              props.mode === "edit"
+                ? "Edit Schedule Task"
+                : "Create Schedule Task"
+            }}
+          </v-toolbar-title>
+          <v-spacer />
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            @click="close"
+            :disabled="submitting"
+          />
+        </v-row>
+      </v-toolbar>
+
+      <v-card-text class="pa-8 flex-grow-1" style="overflow-y: auto">
+        <v-form ref="formRef" v-model="valid">
+          <v-row dense>
+            <v-col cols="12">
+              <InputLabel for="title" title="Title" required />
+              <v-text-field
+                id="title"
+                v-model="subject"
+                variant="outlined"
+                density="comfortable"
+                placeholder="Enter task title"
+                hide-details="auto"
+                class="mb-4"
+              />
+            </v-col>
+
+            <v-col cols="12">
+              <InputLabel for="date-range" title="Date Range" required />
+              <v-sheet border rounded class="pa-4 mb-4" color="grey-lighten-5">
+                <div class="d-flex align-center gap-3 mb-3">
+                  <v-text-field
+                    v-model="startDateInput"
+                    type="date"
+                    variant="outlined"
+                    density="compact"
+                    label="Start Date"
+                    hide-details
+                    class="flex-grow-1"
+                    @update:model-value="handleStartDateChange"
+                  />
+                  <v-icon>mdi-arrow-right</v-icon>
+                  <v-text-field
+                    v-model="endDateInput"
+                    type="date"
+                    variant="outlined"
+                    density="compact"
+                    label="End Date"
+                    hide-details
+                    class="flex-grow-1"
+                    @update:model-value="handleEndDateChange"
+                  />
+                </div>
+
+                <v-expand-transition>
+                  <div v-if="showCalendar">
+                    <v-divider class="mb-3" />
+                    <v-date-picker
+                      v-model="pickerDates"
+                      multiple
+                      @update:model-value="handlePickerChange"
+                      :show-current="false"
+                      color="primary"
+                      elevation="0"
+                      width="100%"
+                      class="ma-0"
+                    />
+                  </div>
+                </v-expand-transition>
+
+                <v-btn
+                  variant="text"
+                  size="small"
+                  @click="showCalendar = !showCalendar"
+                  class="mt-2"
+                  prepend-icon="mdi-calendar"
+                >
+                  {{ showCalendar ? "Hide Calendar" : "Show Calendar" }}
+                </v-btn>
+              </v-sheet>
+            </v-col>
+
+            <v-col cols="12">
+              <InputLabel for="schedule-time" title="Time" required />
+              <v-text-field
+                id="schedule-time"
+                v-model="scheduleTime"
+                type="time"
+                variant="outlined"
+                density="comfortable"
+                hide-details="auto"
+                prepend-inner-icon="mdi-clock-outline"
+                class="mb-4"
+              />
+            </v-col>
+
+            <v-col cols="12">
+              <InputLabel for="selected-areas" title="Select Areas" required />
+              <v-select
+                id="selected-areas"
+                v-model="selectedAreas"
+                :items="areasList"
+                item-title="name"
+                item-value="value"
+                return-object
+                multiple
+                variant="outlined"
+                density="comfortable"
+                :loading="loadingAreas"
+                placeholder="Choose one or more areas"
+                hide-details="auto"
+                class="mb-4"
+                chips
+                closable-chips
+              >
+                <template v-slot:selection="{ item, index }">
+                  <v-chip
+                    v-if="index < 3"
+                    size="small"
+                    closable
+                    @click:close="selectedAreas.splice(index, 1)"
+                  >
+                    {{ item.title }}
+                  </v-chip>
+                  <span
+                    v-if="index === 3"
+                    class="text-grey text-caption align-self-center"
+                  >
+                    (+{{ selectedAreas.length - 3 }} others)
+                  </span>
+                </template>
+              </v-select>
+            </v-col>
+
+            <v-col cols="12">
+              <InputLabel for="description" title="Task Description" />
+              <v-textarea
+                id="description"
+                v-model="description"
+                variant="outlined"
+                density="comfortable"
+                rows="4"
+                placeholder="Add additional details about this task..."
+                hide-details="auto"
+                class="mb-2"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="pa-0">
+        <v-row no-gutters class="fill-width">
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none rounded-0"
+              size="x-large"
+              @click="close"
+              height="56"
+              :disabled="submitting"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="primary"
+              class="text-none font-weight-bold rounded-0"
+              height="56"
+              @click="submitTask"
+              :loading="submitting"
+            >
+              {{ props.mode === "edit" ? "Save Changes" : "Add Schedule Task" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  mode: {
+    type: String as PropType<"add" | "edit">,
+    default: "add",
+  },
+  taskData: {
+    type: Object,
+    default: null,
+  },
+  site: {
+    type: String,
+    required: true,
+  },
+});
+
+const show = defineModel("show", { type: Boolean, default: false });
+const emit = defineEmits(["saved", "close", "refresh"]);
+
+const { getAreas } = useAreas();
+const { createScheduleTask, updateScheduleTask, getScheduleTaskById } =
+  useScheduleTask();
+
+const formRef = ref<HTMLFormElement | null>(null);
+const valid = ref(false);
+const submitting = ref(false);
+const loadingTask = ref(false);
+const showCalendar = ref(false);
+
+const subject = ref("");
+const description = ref("");
+const scheduleTime = ref("08:00");
+const startDateInput = ref("");
+const endDateInput = ref("");
+const pickerDates = ref<Date[]>([]);
+const selectedAreas = ref<any[]>([]);
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("success");
+const areasList = ref<any[]>([]);
+
+// Helper function to generate all dates between start and end
+const generateDateRange = (start: Date, end: Date): Date[] => {
+  const dates: Date[] = [];
+  const current = new Date(start);
+
+  while (current <= end) {
+    dates.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+
+  return dates;
+};
+
+// Handle changes from the start date input
+const handleStartDateChange = (value: string) => {
+  if (value && endDateInput.value) {
+    const start = new Date(value);
+    const end = new Date(endDateInput.value);
+
+    if (start <= end) {
+      pickerDates.value = generateDateRange(start, end);
+    }
+  }
+};
+
+// Handle changes from the end date input
+const handleEndDateChange = (value: string) => {
+  if (startDateInput.value && value) {
+    const start = new Date(startDateInput.value);
+    const end = new Date(value);
+
+    if (start <= end) {
+      pickerDates.value = generateDateRange(start, end);
+    }
+  }
+};
+
+// Handle changes from the calendar picker
+const handlePickerChange = (dates: Date[]) => {
+  if (dates && dates.length > 0) {
+    // Sort dates to find earliest and latest
+    const sortedDates = [...dates].sort((a, b) => a.getTime() - b.getTime());
+    const start = sortedDates[0];
+    const end = sortedDates[sortedDates.length - 1];
+
+    // Update input fields
+    startDateInput.value = start.toISOString().slice(0, 10);
+    endDateInput.value = end.toISOString().slice(0, 10);
+
+    // Fill in all dates between start and end
+    pickerDates.value = generateDateRange(start, end);
+  }
+};
+
+const showMessage = (text: string, color: string = "success") => {
+  message.value = text;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+};
+
+const resetForm = () => {
+  subject.value = "";
+  description.value = "";
+  scheduleTime.value = "08:00";
+  startDateInput.value = "";
+  endDateInput.value = "";
+  pickerDates.value = [];
+  selectedAreas.value = [];
+  showCalendar.value = false;
+};
+
+const setFormFromTask = (task: any) => {
+  if (!task) return;
+
+  subject.value = task.title || "";
+  description.value = task.description || "";
+  scheduleTime.value = task.time || "08:00";
+
+  const toISODate = (d: any) => {
+    if (!d) return null;
+    try {
+      const dt = new Date(d);
+      if (isNaN(dt.getTime())) return null;
+      return dt.toISOString().slice(0, 10);
+    } catch (e) {
+      return null;
+    }
+  };
+
+  if (task.startDate || task.endDate) {
+    const start = toISODate(task.startDate || task.start);
+    const end = toISODate(task.endDate || task.end);
+
+    if (start) startDateInput.value = start;
+    if (end) endDateInput.value = end;
+
+    if (start && end) {
+      pickerDates.value = generateDateRange(new Date(start), new Date(end));
+    }
+  }
+
+  selectedAreas.value = Array.isArray(task.areas)
+    ? task.areas.map((area: any) => ({
+        _id: area.value,
+        name: area.name,
+        value: area.value,
+      }))
+    : [];
+};
+
+const { data: getAreasReq, pending: loadingAreas } = await useLazyAsyncData(
+  `get-areas-${props.site}`,
+  () => getAreas({ site: props.site, limit: 1000 }),
+  {
+    watch: [show, () => props.site],
+    immediate: false,
+  },
+);
+
+watchEffect(() => {
+  if (getAreasReq.value) {
+    areasList.value = (getAreasReq.value?.items || []).map((item: any) => ({
+      ...item,
+      value: item._id || item.value,
+    }));
+  }
+});
+
+const loadTaskData = async () => {
+  if (props.mode !== "edit") return;
+
+  const id = (props.taskData as any)?._id || (props.taskData as any)?.id;
+
+  if (!id) {
+    if ((props.taskData as any)?.title) setFormFromTask(props.taskData);
+    return;
+  }
+
+  loadingTask.value = true;
+  try {
+    const response = await getScheduleTaskById(id);
+
+    if (response) {
+      setFormFromTask(response as any);
+    } else if ((props.taskData as any)?.title) {
+      setFormFromTask(props.taskData);
+    }
+  } catch (error: any) {
+    if ((props.taskData as any)?.title) setFormFromTask(props.taskData);
+    showMessage(
+      error?.data?.message || "Failed to load schedule task",
+      "error",
+    );
+  } finally {
+    loadingTask.value = false;
+  }
+};
+
+const submitTask = async () => {
+  submitting.value = true;
+  try {
+    const payload = {
+      title: subject.value,
+      time: scheduleTime.value,
+      startDate: startDateInput.value,
+      endDate: endDateInput.value,
+      description: description.value?.trim() || "",
+      areas: selectedAreas.value.map((area: any) => ({
+        name: area.name || area.title || "",
+        value: area._id || area.value || area,
+      })),
+    };
+
+    if (startDateInput.value) {
+      payload.startDate = startDateInput.value;
+    }
+
+    if (endDateInput.value) {
+      payload.endDate = endDateInput.value;
+    }
+
+    let response;
+
+    if (props.mode === "edit" && props.taskData) {
+      const taskId =
+        (props.taskData as any)?._id || (props.taskData as any)?.id;
+      response = await updateScheduleTask(taskId, payload);
+    } else {
+      response = await createScheduleTask({ ...payload, site: props.site });
+    }
+
+    showMessage(
+      response?.message ||
+        `Schedule task ${
+          props.mode === "edit" ? "updated" : "created"
+        } successfully`,
+      "success",
+    );
+
+    emit("saved");
+    emit("refresh");
+    close();
+  } catch (error: any) {
+    showMessage(
+      error?.data?.message || "Failed to submit schedule task",
+      "error",
+    );
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const close = () => {
+  show.value = false;
+  emit("close");
+};
+
+watch(
+  [show, () => props.mode, () => props.taskData],
+  async ([isOpen, mode, taskData]) => {
+    if (isOpen && mode === "edit") {
+      await loadTaskData();
+    } else if (!isOpen) {
+      resetForm();
+    }
+  },
+  { immediate: false },
+);
+</script>