@xy-planning-network/trees 0.6.8 → 0.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

package/src/lib-components/forms/DateRangePicker.vue

@@ -11,11 +11,13 @@ const props = withDefaults(
       minDate: number
       maxDate: number
     }
+    maxRange?: number
     startDate?: number
     label?: string
     help?: string
   }>(),
   {
+    maxRange: 0,
     startDate: 0,
     label: "",
     help: "",
@@ -31,7 +33,7 @@ const updateModelValue = (value: { minDate: number; maxDate: number }) => {
 }
 
 onMounted(() => {
-  flatpickr(`#${uuid}`, {
+  const opts: flatpickr.Options.Options = {
     dateFormat: "m-d-Y",
     mode: "range",
     maxDate: new Date(), // So far, we cannot have options past today for ranges
@@ -51,7 +53,38 @@ onMounted(() => {
         })
       }
     },
-  })
+  }
+
+  // Handle initial values if set
+  if (props.modelValue.minDate != 0 && props.modelValue.maxDate != 0) {
+    opts.defaultDate = [
+      props.modelValue.minDate * 1000,
+      props.modelValue.maxDate * 1000,
+    ]
+  }
+
+  if (props.maxRange) {
+    // Handle onChange to dynamically adjust maxDate to x days ahead of the selected start date
+    opts.onChange = (selectedDates, _, self) => {
+      if (selectedDates.length === 1) {
+        // Clone date so as to not change selectedDates[0] value
+        var daysAhead = new Date(selectedDates[0].getTime())
+        var daysBefore = new Date(selectedDates[0].getTime())
+        daysAhead.setDate(daysAhead.getDate() + props.maxRange)
+        daysBefore.setDate(daysBefore.getDate() - props.maxRange)
+        const now = new Date()
+
+        if (daysAhead > now) {
+          daysAhead = now
+        }
+
+        self.set("minDate", daysBefore)
+        self.set("maxDate", daysAhead)
+      }
+    }
+  }
+
+  flatpickr(`#${uuid}`, opts)
 })
 </script>
 <template>

package/src/lib-components/lists/DynamicTable.vue

@@ -12,6 +12,7 @@ import type {
 } from "@/composables/table"
 import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
+import { DateRangeProps } from "@/composables/date"
 import { useTable } from "@/composables/useTable"
 import TableActionButtons from "./TableActionButtons.vue"
 
@@ -66,6 +67,20 @@ const reloadTable = (): void => {
   loadAndRender()
 }
 
+const setDateRange = (): void => {
+  if (dateSearchProps.value.maxRange) {
+    const daysAgo = new Date()
+    const minDate = daysAgo.setDate(
+      daysAgo.getDate() - dateSearchProps.value.maxRange
+    )
+    const maxDate = new Date()
+    dateRange.value = {
+      minDate: Math.floor(minDate / 1000),
+      maxDate: Math.floor(maxDate.getTime() / 1000),
+    }
+  }
+}
+
 const tableData = ref<Record<string, any>[]>([])
 
 const publicMethods: DynamicTableAPI = {
@@ -121,6 +136,12 @@ const handleSort = (selectedSort: string): void => {
   loadAndRender()
 }
 
+const dateSearchProps = computed((): DateRangeProps => {
+  if (typeof props.tableOptions.dateSearch === "object")
+    return props.tableOptions.dateSearch
+  return {}
+})
+
 const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
@@ -145,6 +166,7 @@ defineExpose(publicMethods)
 
 // onCreated
 loadAndRender()
+setDateRange()
 </script>
 <template>
   <div>
@@ -181,6 +203,7 @@ loadAndRender()
       <div v-if="tableOptions.dateSearch" class="w-full max-w-lg lg:max-w-xs">
         <DateRangePicker
           v-model="dateRange"
+          v-bind="{ ...dateSearchProps }"
           @update:model-value="dateRangeChanged"
         />
       </div>

package/types/composables/date.d.ts

@@ -2,3 +2,9 @@ export interface DateRange {
     minDate: number;
     maxDate: number;
 }
+export interface DateRangeProps {
+    help?: string;
+    label?: string;
+    maxRange?: number;
+    startDate?: number;
+}

package/types/composables/table.d.ts

@@ -1,7 +1,8 @@
 import { VNodeChild } from "vue";
 import { ActionItem } from "../composables/nav";
+import { DateRangeProps } from "./date";
 export interface DynamicTableOptions {
-    dateSearch?: boolean;
+    dateSearch?: boolean | DateRangeProps;
     defaultSort?: string;
     defaultSortDirection?: string;
     refreshTrigger: number;

package/types/lib-components/forms/DateRangePicker.vue.d.ts

@@ -4,10 +4,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         minDate: number;
         maxDate: number;
     };
+    maxRange?: number | undefined;
     startDate?: number | undefined;
     label?: string | undefined;
     help?: string | undefined;
 }>, {
+    maxRange: number;
     startDate: number;
     label: string;
     help: string;
@@ -16,10 +18,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         minDate: number;
         maxDate: number;
     };
+    maxRange?: number | undefined;
     startDate?: number | undefined;
     label?: string | undefined;
     help?: string | undefined;
 }>, {
+    maxRange: number;
     startDate: number;
     label: string;
     help: string;
@@ -28,6 +32,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }, {
     label: string;
     help: string;
+    maxRange: number;
     startDate: number;
 }, {}>;
 export default _default;