add presets for date rage picker in reporting

solidtime-io · Sep 17, 2024 · 7e5374d · 7e5374d
1 parent 36cdae5
commit 7e5374d
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 12 deletions.
diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
@@ -37,10 +37,12 @@ import { useTagsStore } from '@/utils/useTags';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { useStorage } from '@vueuse/core';
 
-const startDate = ref<string>(
+const startDate = useStorage<string>(
+    'reporting-start-date',
     getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
 );
-const endDate = ref<string>(
+const endDate = useStorage<string>(
+    'reporting-end-date',
     getLocalizedDayJs(getDayJsInstance()().format()).format()
 );
 const selectedTags = ref<string[]>([]);

diff --git a/resources/js/packages/ui/src/Input/DateRangePicker.vue b/resources/js/packages/ui/src/Input/DateRangePicker.vue
@@ -2,14 +2,92 @@
 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 { formatDate } from '@/packages/ui/src/utils/time';
+import { formatDate, getDayJsInstance } from '@/packages/ui/src/utils/time';
+import { ref } from 'vue';
 
 const start = defineModel('start', { default: '' });
 const end = defineModel('end', { default: '' });
+
+const emit = defineEmits(['submit']);
+
+const open = ref(false);
+
+function setThisWeek() {
+    start.value = getDayJsInstance()().startOf('week').format();
+    end.value = getDayJsInstance()().endOf('week').format();
+    emit('submit');
+    open.value = false;
+}
+function setLastWeek() {
+    start.value = getDayJsInstance()()
+        .subtract(1, 'week')
+        .startOf('week')
+        .format();
+    end.value = getDayJsInstance()().subtract(1, 'week').endOf('week').format();
+    emit('submit');
+    open.value = false;
+}
+function setLast14Days() {
+    start.value = getDayJsInstance()().subtract(14, 'days').format();
+    end.value = getDayJsInstance()().format();
+    emit('submit');
+    open.value = false;
+}
+function setThisMonth() {
+    start.value = getDayJsInstance()().startOf('month').format();
+    end.value = getDayJsInstance()().endOf('month').format();
+    emit('submit');
+    open.value = false;
+}
+function setLastMonth() {
+    start.value = getDayJsInstance()()
+        .subtract(1, 'month')
+        .startOf('month')
+        .format();
+    end.value = getDayJsInstance()()
+        .subtract(1, 'month')
+        .endOf('month')
+        .format();
+    emit('submit');
+    open.value = false;
+}
+function setLast30Days() {
+    start.value = getDayJsInstance()().subtract(30, 'days').format();
+    end.value = getDayJsInstance()().format();
+    emit('submit');
+    open.value = false;
+}
+function setLast90Days() {
+    start.value = getDayJsInstance()().subtract(90, 'days').format();
+    end.value = getDayJsInstance()().format();
+    emit('submit');
+    open.value = false;
+}
+function setLast12Months() {
+    start.value = getDayJsInstance()().subtract(12, 'months').format();
+    end.value = getDayJsInstance()().format();
+    emit('submit');
+    open.value = false;
+}
+function setThisYear() {
+    start.value = getDayJsInstance()().startOf('year').format();
+    end.value = getDayJsInstance()().endOf('year').format();
+    emit('submit');
+    open.value = false;
+}
+function setLastYear() {
+    start.value = getDayJsInstance()()
+        .subtract(1, 'year')
+        .startOf('year')
+        .format();
+    end.value = getDayJsInstance()().subtract(1, 'year').endOf('year').format();
+    emit('submit');
+    open.value = false;
+}
 </script>
 
 <template>
-    <Dropdown :close-on-content-click="false" align="bottom-end">
+    <Dropdown v-model="open" :close-on-content-click="false" align="bottom-end">
         <template #trigger>
             <button
                 class="px-3 py-1.5 bg-input-background border border-input-border font-medium rounded-lg flex items-center space-x-2">
@@ -22,14 +100,36 @@ const end = defineModel('end', { default: '' });
             </button>
         </template>
         <template #content>
-            <div class="overflow-hidden w-[280px] px-3 py-1.5">
-                <div class="flex space-x-3 items-center justify-between">
-                    <div class="text-sm font-medium text-muted">Start Date</div>
-                    <DatePicker v-model="start"></DatePicker>
-                </div>
-                <div class="mt-2 flex space-x-3 items-center justify-between">
-                    <div class="text-sm font-medium text-muted">End Date</div>
-                    <DatePicker v-model="end"></DatePicker>
+            <div class="overflow-hidden w-[330px] px-3 py-1.5">
+                <div
+                    class="flex divide-x divide-border-secondary justify-between">
+                    <div
+                        class="text-white 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="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-muted">
+                                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-muted">
+                                End Date
+                            </div>
+                            <DatePicker v-model="end"></DatePicker>
+                        </div>
+                    </div>
                 </div>
             </div>
         </template>