mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-15 19:52:15 +01:00
add support for interval / duration format in frontend views
This commit is contained in:
Gregor Vostrak
committed by
Constantin Graf
Constantin Graf
parent
b8d9bc5b7e
commit
c1d43bcc67
@@ -6,14 +6,21 @@ import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
|
||||
import type { UpdateOrganizationBody } from '@/packages/api/src';
|
||||
import { useOrganizationStore } from '@/utils/useOrganization';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/Components/ui/select';
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query';
|
||||
|
||||
type NumberFormat = 'point-comma' | 'comma-point' | 'space-comma' | 'space-point' | 'apostrophe-point';
|
||||
type CurrencyFormat = 'iso-code-before-with-space' | 'iso-code-after-with-space' | 'symbol-before' | 'symbol-after' | 'symbol-before-with-space' | 'symbol-after-with-space';
|
||||
type DateFormat = 'point-separated-d-m-yyyy' | 'slash-separated-mm-dd-yyyy' | 'slash-separated-dd-mm-yyyy' | 'hyphen-separated-dd-mm-yyyy' | 'hyphen-separated-mm-dd-yyyy' | 'hyphen-separated-yyyy-mm-dd';
|
||||
type TimeFormat = '12-hours' | '24-hours';
|
||||
type IntervalFormat = 'decimal' | 'hours-minutes' | 'hours-minutes-colon-separated' | 'hours-minutes-seconds-colon-separated';
|
||||
import type {
|
||||
CurrencyFormat,
|
||||
DateFormat,
|
||||
TimeFormat,
|
||||
IntervalFormat,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import type { NumberFormat } from '@/packages/ui/src/utils/number';
|
||||
|
||||
interface FormValues {
|
||||
number_format: NumberFormat | undefined;
|
||||
@@ -37,7 +44,8 @@ const form = ref<FormValues>({
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (values: FormValues) => updateOrganization(values as UpdateOrganizationBody),
|
||||
mutationFn: (values: FormValues) =>
|
||||
updateOrganization(values as UpdateOrganizationBody),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['organization'] });
|
||||
},
|
||||
@@ -48,10 +56,12 @@ onMounted(async () => {
|
||||
if (organization.value) {
|
||||
form.value = {
|
||||
number_format: organization.value.number_format as NumberFormat,
|
||||
currency_format: organization.value.currency_format as CurrencyFormat,
|
||||
currency_format: organization.value
|
||||
.currency_format as CurrencyFormat,
|
||||
date_format: organization.value.date_format as DateFormat,
|
||||
time_format: organization.value.time_format as TimeFormat,
|
||||
interval_format: organization.value.interval_format as IntervalFormat,
|
||||
interval_format: organization?.value
|
||||
.interval_format as IntervalFormat,
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -73,17 +83,30 @@ async function submit() {
|
||||
<!-- Number Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="numberFormat" class="mb-2" value="Number Format" />
|
||||
<InputLabel
|
||||
for="numberFormat"
|
||||
class="mb-2"
|
||||
value="Number Format" />
|
||||
<Select v-model="form.number_format">
|
||||
<SelectTrigger id="numberFormat">
|
||||
<SelectValue placeholder="Select number format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="point-comma">1.111,11</SelectItem>
|
||||
<SelectItem value="comma-point">1,111.11</SelectItem>
|
||||
<SelectItem value="space-comma">1 111,11</SelectItem>
|
||||
<SelectItem value="space-point">1 111.11</SelectItem>
|
||||
<SelectItem value="apostrophe-point">1'111.11</SelectItem>
|
||||
<SelectItem value="point-comma"
|
||||
>1.111,11</SelectItem
|
||||
>
|
||||
<SelectItem value="comma-point"
|
||||
>1,111.11</SelectItem
|
||||
>
|
||||
<SelectItem value="space-comma"
|
||||
>1 111,11</SelectItem
|
||||
>
|
||||
<SelectItem value="space-point"
|
||||
>1 111.11</SelectItem
|
||||
>
|
||||
<SelectItem value="apostrophe-point"
|
||||
>1'111.11</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -92,18 +115,29 @@ async function submit() {
|
||||
<!-- Currency Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="currencyFormat" class="mb-2" value="Currency Format" />
|
||||
<InputLabel
|
||||
for="currencyFormat"
|
||||
class="mb-2"
|
||||
value="Currency Format" />
|
||||
<Select v-model="form.currency_format">
|
||||
<SelectTrigger id="currencyFormat">
|
||||
<SelectValue placeholder="Select currency format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="iso-code-before-with-space">EUR 111</SelectItem>
|
||||
<SelectItem value="iso-code-after-with-space">111 EUR</SelectItem>
|
||||
<SelectItem value="iso-code-before-with-space"
|
||||
>EUR 111</SelectItem
|
||||
>
|
||||
<SelectItem value="iso-code-after-with-space"
|
||||
>111 EUR</SelectItem
|
||||
>
|
||||
<SelectItem value="symbol-before">€111</SelectItem>
|
||||
<SelectItem value="symbol-after">111€</SelectItem>
|
||||
<SelectItem value="symbol-before-with-space">€ 111</SelectItem>
|
||||
<SelectItem value="symbol-after-with-space">111 €</SelectItem>
|
||||
<SelectItem value="symbol-before-with-space"
|
||||
>€ 111</SelectItem
|
||||
>
|
||||
<SelectItem value="symbol-after-with-space"
|
||||
>111 €</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -112,18 +146,33 @@ async function submit() {
|
||||
<!-- Date Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="dateFormat" class="mb-2" value="Date Format" />
|
||||
<InputLabel
|
||||
for="dateFormat"
|
||||
class="mb-2"
|
||||
value="Date Format" />
|
||||
<Select v-model="form.date_format">
|
||||
<SelectTrigger id="dateFormat">
|
||||
<SelectValue placeholder="Select date format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="point-separated-d-m-yyyy">D.M.YYYY</SelectItem>
|
||||
<SelectItem value="slash-separated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
|
||||
<SelectItem value="slash-separated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
|
||||
<SelectItem value="point-separated-d-m-yyyy"
|
||||
>D.M.YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="slash-separated-mm-dd-yyyy"
|
||||
>MM/DD/YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="slash-separated-dd-mm-yyyy"
|
||||
>DD/MM/YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-dd-mm-yyyy"
|
||||
>DD-MM-YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-mm-dd-yyyy"
|
||||
>MM-DD-YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-yyyy-mm-dd"
|
||||
>YYYY-MM-DD</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -132,14 +181,21 @@ async function submit() {
|
||||
<!-- Time Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="timeFormat" class="mb-2" value="Time Format" />
|
||||
<InputLabel
|
||||
for="timeFormat"
|
||||
class="mb-2"
|
||||
value="Time Format" />
|
||||
<Select v-model="form.time_format">
|
||||
<SelectTrigger id="timeFormat">
|
||||
<SelectValue placeholder="Select time format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="12-hours">12-hour clock</SelectItem>
|
||||
<SelectItem value="24-hours">24-hour clock</SelectItem>
|
||||
<SelectItem value="12-hours"
|
||||
>12-hour clock</SelectItem
|
||||
>
|
||||
<SelectItem value="24-hours"
|
||||
>24-hour clock</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -148,16 +204,26 @@ async function submit() {
|
||||
<!-- Interval Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="intervalFormat" class="mb-2" value="Time Duration Format" />
|
||||
<InputLabel
|
||||
for="intervalFormat"
|
||||
class="mb-2"
|
||||
value="Time Duration Format" />
|
||||
<Select v-model="form.interval_format">
|
||||
<SelectTrigger id="intervalFormat">
|
||||
<SelectValue placeholder="Select interval format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="decimal">Decimal</SelectItem>
|
||||
<SelectItem value="hours-minutes">12h 3m</SelectItem>
|
||||
<SelectItem value="hours-minutes-colon-separated">12:03</SelectItem>
|
||||
<SelectItem value="hours-minutes-seconds-colon-separated">12:03:45</SelectItem>
|
||||
<SelectItem value="hours-minutes"
|
||||
>12h 3m</SelectItem
|
||||
>
|
||||
<SelectItem value="hours-minutes-colon-separated"
|
||||
>12:03</SelectItem
|
||||
>
|
||||
<SelectItem
|
||||
value="hours-minutes-seconds-colon-separated"
|
||||
>12:03:45</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -165,9 +231,7 @@ async function submit() {
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<PrimaryButton
|
||||
:disabled="mutation.isPending.value"
|
||||
@click="submit">
|
||||
<PrimaryButton :disabled="mutation.isPending.value" @click="submit">
|
||||
{{ mutation.isPending.value ? 'Saving...' : 'Save' }}
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user