migrate daterange picker to shadcn component

resources/js/packages/ui/src/Input/DateRangePicker.vue

@@ -1,157 +1,259 @@
 <script setup lang="ts">
-import { CalendarIcon } from '@heroicons/vue/20/solid';
-import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import {
-    formatDateLocalized,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/Components/ui/popover';
+import { RangeCalendar } from '@/Components/ui/range-calendar';
+import {
+    CalendarDate,
+    getLocalTimeZone,
+} from '@internationalized/date';
+import { CalendarIcon } from 'lucide-vue-next';
+import { computed, ref, inject, type ComputedRef, watch } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import {
     getDayJsInstance,
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
-import { ref, inject, type ComputedRef } from 'vue';
+import { formatDateLocalized } from '@/packages/ui/src/utils/time';
 import { type Organization } from '@/packages/api/src';
-const start = defineModel('start', { default: '' });
-const end = defineModel('end', { default: '' });
 
-const emit = defineEmits(['submit']);
+const props = defineProps<{
+    start: string;
+    end: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:start', value: string): void;
+    (e: 'update:end', value: string): void;
+    (e: 'submit'): void;
+}>();
+
+interface CalendarDateRange {
+    start: CalendarDate | undefined;
+    end: CalendarDate | undefined;
+}
+
+const today = computed(() => {
+    const now = getDayJsInstance()();
+    return new CalendarDate(now.year(), now.month() + 1, now.date());
+});
+
+const modelValue = computed<CalendarDateRange>({
+    get: () => ({
+        start: props.start
+            ? new CalendarDate(
+                  getLocalizedDayJs(props.start).year(),
+                  getLocalizedDayJs(props.start).month() + 1,
+                  getLocalizedDayJs(props.start).date()
+              )
+            : undefined,
+        end: props.end
+            ? new CalendarDate(
+                  getLocalizedDayJs(props.end).year(),
+                  getLocalizedDayJs(props.end).month() + 1,
+                  getLocalizedDayJs(props.end).date()
+              )
+            : undefined,
+    }),
+    set: (newValue) => {
+        if (newValue.start) {
+            const date = newValue.start.toDate(getLocalTimeZone());
+            emit('update:start', getDayJsInstance()(date).format('YYYY-MM-DD'));
+        }
+        if (newValue.end) {
+            const date = newValue.end.toDate(getLocalTimeZone());
+            emit('update:end', getDayJsInstance()(date).format('YYYY-MM-DD'));
+        }
+    },
+});
 
 const open = ref(false);
 
 function setToday() {
-    start.value = getLocalizedDayJs().startOf('day').format();
-    end.value = getLocalizedDayJs().endOf('day').format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs().startOf('day').format('YYYY-MM-DD')
+    );
+    emit('update:end', getLocalizedDayJs().endOf('day').format('YYYY-MM-DD'));
     open.value = false;
 }
 
 function setThisWeek() {
-    start.value = getLocalizedDayJs().startOf('week').format();
-    end.value = getLocalizedDayJs().endOf('week').format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs().startOf('week').format('YYYY-MM-DD')
+    );
+    emit('update:end', getLocalizedDayJs().endOf('week').format('YYYY-MM-DD'));
     open.value = false;
 }
+
 function setLastWeek() {
-    start.value = getLocalizedDayJs()
-        .subtract(1, 'week')
-        .startOf('week')
-        .format();
-    end.value = getLocalizedDayJs().subtract(1, 'week').endOf('week').format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs()
+            .subtract(1, 'week')
+            .startOf('week')
+            .format('YYYY-MM-DD')
+    );
+    emit(
+        'update:end',
+        getLocalizedDayJs()
+            .subtract(1, 'week')
+            .endOf('week')
+            .format('YYYY-MM-DD')
+    );
     open.value = false;
 }
+
 function setLast14Days() {
-    start.value = getLocalizedDayJs().subtract(14, 'days').format();
-    end.value = getLocalizedDayJs().format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs().subtract(14, 'days').format('YYYY-MM-DD')
+    );
+    emit('update:end', getLocalizedDayJs().format('YYYY-MM-DD'));
     open.value = false;
 }
+
 function setThisMonth() {
-    start.value = getLocalizedDayJs().startOf('month').format();
-    end.value = getLocalizedDayJs().endOf('month').format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs().startOf('month').format('YYYY-MM-DD')
+    );
+    emit('update:end', getLocalizedDayJs().endOf('month').format('YYYY-MM-DD'));
     open.value = false;
 }
+
 function setLastMonth() {
-    start.value = getLocalizedDayJs()
-        .subtract(1, 'month')
-        .startOf('month')
-        .format();
-    end.value = getLocalizedDayJs()
-        .subtract(1, 'month')
-        .endOf('month')
-        .format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs()
+            .subtract(1, 'month')
+            .startOf('month')
+            .format('YYYY-MM-DD')
+    );
+    emit(
+        'update:end',
+        getLocalizedDayJs()
+            .subtract(1, 'month')
+            .endOf('month')
+            .format('YYYY-MM-DD')
+    );
     open.value = false;
 }
+
 function setLast30Days() {
-    start.value = getLocalizedDayJs().subtract(30, 'days').format();
-    end.value = getLocalizedDayJs().format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs().subtract(30, 'days').format('YYYY-MM-DD')
+    );
+    emit('update:end', getLocalizedDayJs().format('YYYY-MM-DD'));
     open.value = false;
 }
+
 function setLast90Days() {
-    start.value = getDayJsInstance()().subtract(90, 'days').format();
-    end.value = getDayJsInstance()().format();
-    emit('submit');
+    emit(
+        'update:start',
+        getDayJsInstance()().subtract(90, 'days').format('YYYY-MM-DD')
+    );
+    emit('update:end', getDayJsInstance()().format('YYYY-MM-DD'));
     open.value = false;
 }
+
 function setLast12Months() {
-    start.value = getLocalizedDayJs().subtract(12, 'months').format();
-    end.value = getLocalizedDayJs().format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs().subtract(12, 'months').format('YYYY-MM-DD')
+    );
+    emit('update:end', getLocalizedDayJs().format('YYYY-MM-DD'));
     open.value = false;
 }
+
 function setThisYear() {
-    start.value = getLocalizedDayJs().startOf('year').format();
-    end.value = getLocalizedDayJs().endOf('year').format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs().startOf('year').format('YYYY-MM-DD')
+    );
+    emit('update:end', getLocalizedDayJs().endOf('year').format('YYYY-MM-DD'));
     open.value = false;
 }
+
 function setLastYear() {
-    start.value = getLocalizedDayJs()
-        .subtract(1, 'year')
-        .startOf('year')
-        .format();
-    end.value = getLocalizedDayJs().subtract(1, 'year').endOf('year').format();
-    emit('submit');
+    emit(
+        'update:start',
+        getLocalizedDayJs()
+            .subtract(1, 'year')
+            .startOf('year')
+            .format('YYYY-MM-DD')
+    );
+    emit(
+        'update:end',
+        getLocalizedDayJs()
+            .subtract(1, 'year')
+            .endOf('year')
+            .format('YYYY-MM-DD')
+    );
     open.value = false;
 }
 
 const organization = inject<ComputedRef<Organization>>('organization');
+
+watch(open, (value) => {
+    if (value === false) {
+        emit('submit');
+    }
+});
 </script>
 
 <template>
-    <Dropdown
-        v-model="open"
-        :close-on-content-click="false"
-        align="end"
-        @submit="emit('submit')">
-        <template #trigger>
+    <Popover v-model:open="open">
+        <PopoverTrigger as-child>
             <button
-                class="px-2 py-1 bg-input-background border border-input-border font-medium rounded-lg flex items-center space-x-2">
-                <CalendarIcon class="w-5"></CalendarIcon>
-                <div class="text-text-primary">
-                    {{ formatDateLocalized(start, organization?.date_format) }}
-                    <span class="px-1.5 text-text-secondary">-</span>
-                    {{ formatDateLocalized(end, organization?.date_format) }}
-                </div>
+                :class="
+                    twMerge(
+                        'flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input-border bg-input-background px-3 h-[34px] shadow-sm data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+                        !modelValue && 'text-muted-foreground'
+                    )
+                ">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="modelValue.start">
+                    <template v-if="modelValue.end">
+                        {{ formatDateLocalized(modelValue.start.toString(), organization?.date_format) }}
+                        -
+                        {{ formatDateLocalized(modelValue.end.toString(), organization?.date_format) }}
+                    </template>
+                    <template v-else>
+                        {{ formatDateLocalized(modelValue.start.toString(), organization?.date_format) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
             </button>
-        </template>
-        <template #content>
-            <div class="overflow-hidden w-[330px] px-3 py-1.5">
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+            <div class="flex divide-x divide-border-secondary">
                 <div
-                    class="flex divide-x divide-border-secondary justify-between">
-                    <div
-                        class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 [&_button:hover]:bg-tertiary [&_button]:rounded [&_button]:px-2 [&_button]:py-1">
-                        <button @click="setToday">Today</button>
-                        <button @click="setThisWeek">This Week</button>
-                        <button @click="setLastWeek">Last Week</button>
-                        <button @click="setLast14Days">Last 14 days</button>
-                        <button @click="setThisMonth">This Month</button>
-                        <button @click="setLastMonth">Last Month</button>
-                        <button @click="setLast30Days">Last 30 days</button>
-                        <button @click="setLast90Days">Last 90 days</button>
-                        <button @click="setLast12Months">Last 12 months</button>
-                        <button @click="setThisYear">This year</button>
-                        <button @click="setLastYear">Last year</button>
-                    </div>
-                    <div class="pl-5">
-                        <div class="space-y-1 flex-col flex items-start">
-                            <div class="text-xs font-semibold text-text-secondary">
-                                Start Date
-                            </div>
-                            <DatePicker v-model="start"></DatePicker>
-                        </div>
-                        <div class="mt-2 space-y-1 flex-col flex items-start">
-                            <div class="text-sm font-medium text-text-secondary">
-                                End Date
-                            </div>
-                            <DatePicker v-model="end"></DatePicker>
-                        </div>
-                    </div>
+                    class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 px-2 [&_button:hover]:bg-tertiary [&_button]:rounded [&_button]:px-2 [&_button]:py-1">
+                    <button @click="setToday">Today</button>
+                    <button @click="setThisWeek">This Week</button>
+                    <button @click="setLastWeek">Last Week</button>
+                    <button @click="setLast14Days">Last 14 days</button>
+                    <button @click="setThisMonth">This Month</button>
+                    <button @click="setLastMonth">Last Month</button>
+                    <button @click="setLast30Days">Last 30 days</button>
+                    <button @click="setLast90Days">Last 90 days</button>
+                    <button @click="setLast12Months">Last 12 months</button>
+                    <button @click="setThisYear">This year</button>
+                    <button @click="setLastYear">Last year</button>
+                </div>
+                <div class="pl-2">
+                    <RangeCalendar
+                        v-model="modelValue"
+                        initial-focus
+                        :number-of-months="2"
+                        :max-value="today" />
                 </div>
             </div>
-        </template>
-    </Dropdown>
+        </PopoverContent>
+    </Popover>
 </template>
-
-<style scoped></style>