@7365admin1/layer-common 1.10.3 → 1.10.5

package/components/ScheduleAreaMain.vue

@@ -181,7 +181,7 @@ const items = ref<Array<Record<string, any>>>([]);
 const statusFilter = ref<TScheduleAreaStatus>("All");
 const statusOptions = [
   { title: "All", value: "All" },
-  { title: "Ready", value: "Ready" },
+  { title: "Open", value: "Open" },
   { title: "Ongoing", value: "Ongoing" },
   { title: "Completed", value: "Completed" },
 ];
@@ -236,13 +236,16 @@ const getStatusColor = (status: unknown): string => {
   const normalized = String(status).toLowerCase();
 
   switch (normalized) {
-    case "ready":
+    case "open":
       return "grey";
     case "ongoing":
       return "primary";
     case "completed":
     case "accepted":
       return "success";
+    case "closed":
+    case "rejected":
+      return "error";
     default:
       return "secondary";
   }

package/components/ScheduleTaskForm.vue

@@ -37,57 +37,35 @@
             </v-col>
 
             <v-col cols="12">
-              <InputLabel for="date-range" title="Date Range" required />
+              <InputLabel for="date-range" title="Select Dates" 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"
-                  />
+                <v-date-picker
+                  v-model="pickerDates"
+                  multiple
+                  :show-current="false"
+                  color="primary"
+                  elevation="0"
+                  width="100%"
+                  class="ma-0"
+                />
+                <v-divider class="my-3" />
+                <div class="text-caption text-medium-emphasis mb-2">
+                  {{ selectedDates.length }} date(s) selected
+                </div>
+                <div v-if="selectedDates.length > 0" class="d-flex flex-wrap gap-1">
+                  <v-chip
+                    v-for="date in selectedDates"
+                    :key="date"
+                    size="small"
+                    closable
+                    @click:close="removeDate(date)"
+                  >
+                    {{ date }}
+                  </v-chip>
+                </div>
+                <div v-else class="text-caption text-disabled">
+                  No dates selected. Click on the calendar to select dates.
                 </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>
 
@@ -199,6 +177,9 @@
 </template>
 
 <script setup lang="ts">
+import useAreas from "../composables/useAreas";
+import useScheduleTask from "../composables/useScheduleTask";
+
 const props = defineProps({
   mode: {
     type: String as PropType<"add" | "edit">,
@@ -225,14 +206,16 @@ 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[]>([]);
+// Derived from pickerDates — single source of truth, always in sync
+const selectedDates = computed(() =>
+  pickerDates.value.map((d) => toLocalISO(d)).sort()
+);
+
 const selectedAreas = ref<any[]>([]);
 
 const message = ref("");
@@ -253,45 +236,19 @@ const generateDateRange = (start: Date, end: Date): Date[] => {
   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);
-    }
-  }
+// Helper: convert a Date to a local YYYY-MM-DD string (avoids UTC-shift issues)
+const toLocalISO = (d: Date): string => {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
 };
 
-// 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);
-  }
+// Remove a single date from the selection via chip close
+const removeDate = (dateISO: string) => {
+  pickerDates.value = pickerDates.value.filter(
+    (d) => toLocalISO(d) !== dateISO
+  );
 };
 
 const showMessage = (text: string, color: string = "success") => {
@@ -304,11 +261,8 @@ 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) => {
@@ -329,13 +283,13 @@ const setFormFromTask = (task: any) => {
     }
   };
 
-  if (task.startDate || task.endDate) {
+  // Handle dates array from task
+  if (task.dates && Array.isArray(task.dates) && task.dates.length > 0) {
+    pickerDates.value = task.dates.map((d: string) => new Date(d));
+  } else if (task.startDate || task.endDate) {
+    // Fallback for old format (startDate/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));
     }
@@ -343,9 +297,9 @@ const setFormFromTask = (task: any) => {
 
   selectedAreas.value = Array.isArray(task.areas)
     ? task.areas.map((area: any) => ({
-        _id: area.value,
+        _id: area.value || area._id,
         name: area.name,
-        value: area.value,
+        value: area.value || area._id,
       }))
     : [];
 };
@@ -356,7 +310,7 @@ const { data: getAreasReq, pending: loadingAreas } = await useLazyAsyncData(
   {
     watch: [show, () => props.site],
     immediate: false,
-  },
+  }
 );
 
 watchEffect(() => {
@@ -391,7 +345,7 @@ const loadTaskData = async () => {
     if ((props.taskData as any)?.title) setFormFromTask(props.taskData);
     showMessage(
       error?.data?.message || "Failed to load schedule task",
-      "error",
+      "error"
     );
   } finally {
     loadingTask.value = false;
@@ -404,8 +358,7 @@ const submitTask = async () => {
     const payload = {
       title: subject.value,
       time: scheduleTime.value,
-      startDate: startDateInput.value,
-      endDate: endDateInput.value,
+      dates: selectedDates.value, // Array of YYYY-MM-DD strings
       description: description.value?.trim() || "",
       areas: selectedAreas.value.map((area: any) => ({
         name: area.name || area.title || "",
@@ -413,14 +366,6 @@ const submitTask = async () => {
       })),
     };
 
-    if (startDateInput.value) {
-      payload.startDate = startDateInput.value;
-    }
-
-    if (endDateInput.value) {
-      payload.endDate = endDateInput.value;
-    }
-
     let response;
 
     if (props.mode === "edit" && props.taskData) {
@@ -436,7 +381,7 @@ const submitTask = async () => {
         `Schedule task ${
           props.mode === "edit" ? "updated" : "created"
         } successfully`,
-      "success",
+      "success"
     );
 
     emit("saved");
@@ -445,7 +390,7 @@ const submitTask = async () => {
   } catch (error: any) {
     showMessage(
       error?.data?.message || "Failed to submit schedule task",
-      "error",
+      "error"
     );
   } finally {
     submitting.value = false;
@@ -466,6 +411,6 @@ watch(
       resetForm();
     }
   },
-  { immediate: false },
+  { immediate: false }
 );
 </script>

package/components/ScheduleTaskMain.vue

@@ -47,8 +47,6 @@
           </v-row>
         </template>
 
-        <!-- frequency removed: using explicit date range in details -->
-
         <template #item.areas="{ value }">
           <div v-if="value && value.length > 0">
             <v-chip
@@ -107,21 +105,21 @@
 
                 <v-row no-gutters class="mb-2">
                   <v-col cols="5" class="text-subtitle-2 font-weight-bold">
-                    Date Range:
+                    Dates:
                   </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
+                      v-if="selectedTask.dates && selectedTask.dates.length > 0"
+                      class="d-flex flex-wrap gap-1"
+                    >
+                      <v-chip
+                        v-for="date in selectedTask.dates"
+                        :key="date"
+                        size="x-small"
+                        class="mr-1 mb-1"
+                      >
+                        {{ formatDateChip(date) }}
+                      </v-chip>
                     </div>
                     <div v-else>N/A</div>
                   </v-col>
@@ -258,6 +256,12 @@ const showMessage = (text: string, color: string = "success") => {
   messageSnackbar.value = true;
 };
 
+const formatDateChip = (dateStr: string) => {
+  const parts = dateStr?.split("-");
+  if (parts?.length === 3) return `${parts[2]}-${parts[1]}-${parts[0]}`;
+  return dateStr;
+};
+
 const mapShortToDay = (short: string) => {
   const mapping: Record<string, string> = {
     Mon: "Monday",

package/components/VehicleAddSelection.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          Add Vehicle
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
+      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Status</span>
+      <template v-for="item in selection" :key="item.value">
+        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
+      </template>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+});
+
+const emit = defineEmits(['cancel', 'select']);
+
+const selection = computed<{label: string, value: TVehicleType}[]>(() => {
+  return [
+    { label: "Whitelist", value: "whitelist" },
+    { label: "Season Pass", value: "seasonpass" },
+    { label: "Blocklist", value: "blocklist" },
+  ];
+})
+
+function cancel() {
+  emit("cancel");
+}
+
+function select(value: string) {
+  emit("select", value);
+}
+</script>