adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-18 21:22:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

add Today option to Date Range Picker

Browse Source
This commit is contained in:
Gregor Vostrak
2024-12-03 16:21:59 +01:00
committed by Constantin Graf
parent e3f981aac2
commit ae7f5a98e7
5 changed files with 57 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -4,8 +4,8 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"lint": "eslint --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 .", "lint:fix": "eslint --fix --ext .js,.vue,.ts --ignore-path .gitignore resources/js",
"type-check": "vue-tsc --noEmit", "type-check": "vue-tsc --noEmit",
"test:e2e": "rm -rf test-results/.auth && npx playwright test", "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" "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"

2
resources/js/Pages/Reporting.vue
View File

@@ -198,7 +198,7 @@ async function downloadExport(format: ExportFormat) {
'Export successful', 'Export successful',
'Export failed' 'Export failed'
); );
window.open(response.download_url, '_self')?.focus(); window.open(response.download_url, '_blank')?.focus();
} }
} }
const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore(); const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();

54
resources/js/packages/ui/src/Input/DateRangePicker.vue
View File

@@ -2,7 +2,11 @@
import { CalendarIcon } from '@heroicons/vue/20/solid'; import { CalendarIcon } from '@heroicons/vue/20/solid';
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue'; import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import DatePicker from '@/packages/ui/src/Input/DatePicker.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'; import { ref } from 'vue';
const start = defineModel('start', { default: '' }); const start = defineModel('start', { default: '' });
@@ -12,39 +16,46 @@ const emit = defineEmits(['submit']);
const open = ref(false); 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() { function setThisWeek() {
start.value = getDayJsInstance()().startOf('week').format(); start.value = getLocalizedDayJs().startOf('week').format();
end.value = getDayJsInstance()().endOf('week').format(); end.value = getLocalizedDayJs().endOf('week').format();
emit('submit'); emit('submit');
open.value = false; open.value = false;
} }
function setLastWeek() { function setLastWeek() {
start.value = getDayJsInstance()() start.value = getLocalizedDayJs()
.subtract(1, 'week') .subtract(1, 'week')
.startOf('week') .startOf('week')
.format(); .format();
end.value = getDayJsInstance()().subtract(1, 'week').endOf('week').format(); end.value = getLocalizedDayJs().subtract(1, 'week').endOf('week').format();
emit('submit'); emit('submit');
open.value = false; open.value = false;
} }
function setLast14Days() { function setLast14Days() {
start.value = getDayJsInstance()().subtract(14, 'days').format(); start.value = getLocalizedDayJs().subtract(14, 'days').format();
end.value = getDayJsInstance()().format(); end.value = getLocalizedDayJs().format();
emit('submit'); emit('submit');
open.value = false; open.value = false;
} }
function setThisMonth() { function setThisMonth() {
start.value = getDayJsInstance()().startOf('month').format(); start.value = getLocalizedDayJs().startOf('month').format();
end.value = getDayJsInstance()().endOf('month').format(); end.value = getLocalizedDayJs().endOf('month').format();
emit('submit'); emit('submit');
open.value = false; open.value = false;
} }
function setLastMonth() { function setLastMonth() {
start.value = getDayJsInstance()() start.value = getLocalizedDayJs()
.subtract(1, 'month') .subtract(1, 'month')
.startOf('month') .startOf('month')
.format(); .format();
end.value = getDayJsInstance()() end.value = getLocalizedDayJs()
.subtract(1, 'month') .subtract(1, 'month')
.endOf('month') .endOf('month')
.format(); .format();
@@ -52,8 +63,8 @@ function setLastMonth() {
open.value = false; open.value = false;
} }
function setLast30Days() { function setLast30Days() {
start.value = getDayJsInstance()().subtract(30, 'days').format(); start.value = getLocalizedDayJs().subtract(30, 'days').format();
end.value = getDayJsInstance()().format(); end.value = getLocalizedDayJs().format();
emit('submit'); emit('submit');
open.value = false; open.value = false;
} }
@@ -64,23 +75,23 @@ function setLast90Days() {
open.value = false; open.value = false;
} }
function setLast12Months() { function setLast12Months() {
start.value = getDayJsInstance()().subtract(12, 'months').format(); start.value = getLocalizedDayJs().subtract(12, 'months').format();
end.value = getDayJsInstance()().format(); end.value = getLocalizedDayJs().format();
emit('submit'); emit('submit');
open.value = false; open.value = false;
} }
function setThisYear() { function setThisYear() {
start.value = getDayJsInstance()().startOf('year').format(); start.value = getLocalizedDayJs().startOf('year').format();
end.value = getDayJsInstance()().endOf('year').format(); end.value = getLocalizedDayJs().endOf('year').format();
emit('submit'); emit('submit');
open.value = false; open.value = false;
} }
function setLastYear() { function setLastYear() {
start.value = getDayJsInstance()() start.value = getLocalizedDayJs()
.subtract(1, 'year') .subtract(1, 'year')
.startOf('year') .startOf('year')
.format(); .format();
end.value = getDayJsInstance()().subtract(1, 'year').endOf('year').format(); end.value = getLocalizedDayJs().subtract(1, 'year').endOf('year').format();
emit('submit'); emit('submit');
open.value = false; 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"> 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> <CalendarIcon class="w-5"></CalendarIcon>
<div class="text-white"> <div class="text-white">
{{ formatDate(start) }} {{ formatDateLocalized(start) }}
<span class="px-1.5 text-muted">-</span> <span class="px-1.5 text-muted">-</span>
{{ formatDate(end) }} {{ formatDateLocalized(end) }}
</div> </div>
</button> </button>
</template> </template>
@@ -109,6 +120,7 @@ function setLastYear() {
class="flex divide-x divide-border-secondary justify-between"> class="flex divide-x divide-border-secondary justify-between">
<div <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"> 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="setThisWeek">This Week</button>
<button @click="setLastWeek">Last Week</button> <button @click="setLastWeek">Last Week</button>
<button @click="setLast14Days">Last 14 days</button> <button @click="setLast14Days">Last 14 days</button>

7
resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
View File

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

18
resources/js/packages/ui/src/utils/time.ts
View File

@@ -6,6 +6,7 @@ import isYesterday from 'dayjs/plugin/isYesterday';
import utc from 'dayjs/plugin/utc'; import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone'; import timezone from 'dayjs/plugin/timezone';
import weekOfYear from 'dayjs/plugin/weekOfYear'; import weekOfYear from 'dayjs/plugin/weekOfYear';
import { getUserTimezone, getWeekStart } from './settings'; import { getUserTimezone, getWeekStart } from './settings';
import updateLocale from 'dayjs/plugin/updateLocale'; import updateLocale from 'dayjs/plugin/updateLocale';
import { computed } from 'vue'; import { computed } from 'vue';
@@ -69,7 +70,7 @@ export function formatTime(date: string) {
return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm'); return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm');
} }
export function getLocalizedDayJs(timestamp: string | null) { export function getLocalizedDayJs(timestamp?: string | null) {
return dayjs.utc(timestamp).tz(getUserTimezone()); 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' * @param date - date in the format of 'YYYY-MM-DD'
*/ */
export function formatDate(date: string): string { 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 { export function formatWeek(date: string | null): string {