add Today option to Date Range Picker

solidtime-io · Dec 3, 2024 · a043e5c · a043e5c
1 parent 440f236
commit a043e5c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore .",
-        "lint:fix": "eslint --fix --ext .js,.vue,.ts --ignore-path .gitignore .",
+        "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore resources/js",
+        "lint:fix": "eslint --fix --ext .js,.vue,.ts --ignore-path .gitignore resources/js",
         "type-check": "vue-tsc --noEmit",
         "test:e2e": "rm -rf test-results/.auth && npx playwright test",
         "zod:generate": "npx openapi-zod-client http://localhost:80/docs/api.json --output resources/js/packages/api/src/openapi.json.client.ts --base-url /api"

diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
@@ -8,6 +8,7 @@ import {
     UserGroupIcon,
     CheckCircleIcon,
     TagIcon,
+    XMarkIcon
 } from '@heroicons/vue/20/solid';
 import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
 import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
@@ -198,7 +199,7 @@ async function downloadExport(format: ExportFormat) {
             'Export successful',
             'Export failed'
         );
-        window.open(response.download_url, '_self')?.focus();
+        window.open(response.download_url, '_blank')?.focus();
     }
 }
 const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();

diff --git a/resources/js/packages/ui/src/Input/DateRangePicker.vue b/resources/js/packages/ui/src/Input/DateRangePicker.vue
@@ -2,7 +2,11 @@
 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, getDayJsInstance } from '@/packages/ui/src/utils/time';
+import {
+    formatDateLocalized,
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
 import { ref } from 'vue';
 
 const start = defineModel('start', { default: '' });
@@ -12,48 +16,55 @@ const emit = defineEmits(['submit']);
 
 const open = ref(false);
 
+function setToday() {
+    start.value = getLocalizedDayJs().startOf('day').format();
+    end.value = getLocalizedDayJs().endOf('day').format();
+    emit('submit');
+    open.value = false;
+}
+
 function setThisWeek() {
-    start.value = getDayJsInstance()().startOf('week').format();
-    end.value = getDayJsInstance()().endOf('week').format();
+    start.value = getLocalizedDayJs().startOf('week').format();
+    end.value = getLocalizedDayJs().endOf('week').format();
     emit('submit');
     open.value = false;
 }
 function setLastWeek() {
-    start.value = getDayJsInstance()()
+    start.value = getLocalizedDayJs()
         .subtract(1, 'week')
         .startOf('week')
         .format();
-    end.value = getDayJsInstance()().subtract(1, 'week').endOf('week').format();
+    end.value = getLocalizedDayJs().subtract(1, 'week').endOf('week').format();
     emit('submit');
     open.value = false;
 }
 function setLast14Days() {
-    start.value = getDayJsInstance()().subtract(14, 'days').format();
-    end.value = getDayJsInstance()().format();
+    start.value = getLocalizedDayJs().subtract(14, 'days').format();
+    end.value = getLocalizedDayJs().format();
     emit('submit');
     open.value = false;
 }
 function setThisMonth() {
-    start.value = getDayJsInstance()().startOf('month').format();
-    end.value = getDayJsInstance()().endOf('month').format();
+    start.value = getLocalizedDayJs().startOf('month').format();
+    end.value = getLocalizedDayJs().endOf('month').format();
     emit('submit');
     open.value = false;
 }
 function setLastMonth() {
-    start.value = getDayJsInstance()()
+    start.value = getLocalizedDayJs()
         .subtract(1, 'month')
         .startOf('month')
         .format();
-    end.value = getDayJsInstance()()
+    end.value = getLocalizedDayJs()
         .subtract(1, 'month')
         .endOf('month')
         .format();
     emit('submit');
     open.value = false;
 }
 function setLast30Days() {
-    start.value = getDayJsInstance()().subtract(30, 'days').format();
-    end.value = getDayJsInstance()().format();
+    start.value = getLocalizedDayJs().subtract(30, 'days').format();
+    end.value = getLocalizedDayJs().format();
     emit('submit');
     open.value = false;
 }
@@ -64,23 +75,23 @@ function setLast90Days() {
     open.value = false;
 }
 function setLast12Months() {
-    start.value = getDayJsInstance()().subtract(12, 'months').format();
-    end.value = getDayJsInstance()().format();
+    start.value = getLocalizedDayJs().subtract(12, 'months').format();
+    end.value = getLocalizedDayJs().format();
     emit('submit');
     open.value = false;
 }
 function setThisYear() {
-    start.value = getDayJsInstance()().startOf('year').format();
-    end.value = getDayJsInstance()().endOf('year').format();
+    start.value = getLocalizedDayJs().startOf('year').format();
+    end.value = getLocalizedDayJs().endOf('year').format();
     emit('submit');
     open.value = false;
 }
 function setLastYear() {
-    start.value = getDayJsInstance()()
+    start.value = getLocalizedDayJs()
         .subtract(1, 'year')
         .startOf('year')
         .format();
-    end.value = getDayJsInstance()().subtract(1, 'year').endOf('year').format();
+    end.value = getLocalizedDayJs().subtract(1, 'year').endOf('year').format();
     emit('submit');
     open.value = false;
 }
@@ -97,9 +108,9 @@ function setLastYear() {
                 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-white">
-                    {{ formatDate(start) }}
+                    {{ formatDateLocalized(start) }}
                     <span class="px-1.5 text-muted">-</span>
-                    {{ formatDate(end) }}
+                    {{ formatDateLocalized(end) }}
                 </div>
             </button>
         </template>
@@ -109,6 +120,7 @@ function setLastYear() {
                     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="setToday">Today</button>
                         <button @click="setThisWeek">This Week</button>
                         <button @click="setLastWeek">Last Week</button>
                         <button @click="setLast14Days">Last 14 days</button>

diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import { defineProps, ref } from 'vue';
-import { formatDate, formatStartEnd } from '@/packages/ui/src/utils/time';
+import {
+    formatDateLocalized,
+    formatStartEnd,
+} from '@/packages/ui/src/utils/time';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
 import { twMerge } from 'tailwind-merge';
 
@@ -39,7 +42,7 @@ const open = ref(false);
                     ">
                     {{ formatStartEnd(start, end) }}
                     <span v-if="showDate" class="text-text-tertiary font-medium"
-                        >{{ formatDate(start) }}
+                        >{{ formatDateLocalized(start) }}
                     </span>
                 </button>
             </template>

diff --git a/resources/js/packages/ui/src/utils/time.ts b/resources/js/packages/ui/src/utils/time.ts
@@ -6,6 +6,7 @@ import isYesterday from 'dayjs/plugin/isYesterday';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
+
 import { getUserTimezone, getWeekStart } from './settings';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import { computed } from 'vue';
@@ -69,7 +70,7 @@ export function formatTime(date: string) {
     return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm');
 }
 
-export function getLocalizedDayJs(timestamp: string | null) {
+export function getLocalizedDayJs(timestamp?: string) {
     return dayjs.utc(timestamp).tz(getUserTimezone());
 }
 
@@ -82,7 +83,20 @@ export function getLocalizedDateFromTimestamp(timestamp: string) {
  * @param date - date in the format of 'YYYY-MM-DD'
  */
 export function formatDate(date: string): string {
-    return dayjs(date).format('DD.MM.YYYY');
+    if (date.includes('+')) {
+        console.warn(
+            'Date contains timezone information, use formatDateLocalized instead'
+        );
+    }
+    return getDayJsInstance()(date).format('DD.MM.YYYY');
+}
+
+/*
+ * Returns a formatted date.
+ * @param date - date in the format of 'YYYY-MM-DD'
+ */
+export function formatDateLocalized(date: string): string {
+    return getLocalizedDayJs(date).format('DD.MM.YYYY');
 }
 
 export function formatWeek(date: string | null): string {