mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-06-15 13:32:43 +01:00
add formating options to organization settings
This commit is contained in:
Gregor Vostrak
@@ -241,25 +241,6 @@ const page = usePage<{
|
||||
</select>
|
||||
<InputError :message="form.errors.week_start" class="mt-2" />
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="week_start" value="Start of the week" />
|
||||
<select
|
||||
id="week_start"
|
||||
v-model="form.week_start"
|
||||
name="week_start"
|
||||
required
|
||||
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
|
||||
<option value="" disabled>Select a week day</option>
|
||||
<option
|
||||
v-for="(weekdayTranslated, weekdayKey) in $page.props
|
||||
.weekdays"
|
||||
:key="weekdayKey"
|
||||
:value="weekdayKey">
|
||||
{{ weekdayTranslated }}
|
||||
</option>
|
||||
</select>
|
||||
<InputError :message="form.errors.week_start" class="mt-2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
|
||||
175
resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue
Normal file
175
resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<script setup lang="ts">
|
||||
import FormSection from '@/Components/FormSection.vue';
|
||||
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
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 { 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-seperated-d-m-yyyy' | 'slash-seperated-mm-dd-yyyy' | 'slash-seperated-dd-mm-yyyy' | 'hyphen-seperated-dd-mm-yyyy' | 'hyphen-seperated-mm-dd-yyyy' | 'hyphen-seperated-yyyy-mm-dd';
|
||||
type TimeFormat = '12-hours' | '24-hours';
|
||||
type IntervalFormat = 'decimal' | 'hours-minutes' | 'hours-minutes-colon-seperated' | 'hours-minutes-seconds-colon-seperated';
|
||||
|
||||
interface FormValues {
|
||||
number_format: NumberFormat | undefined;
|
||||
currency_format: CurrencyFormat | undefined;
|
||||
date_format: DateFormat | undefined;
|
||||
time_format: TimeFormat | undefined;
|
||||
interval_format: IntervalFormat | undefined;
|
||||
}
|
||||
|
||||
const store = useOrganizationStore();
|
||||
const { fetchOrganization, updateOrganization } = store;
|
||||
const { organization } = storeToRefs(store);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const form = ref<FormValues>({
|
||||
number_format: undefined,
|
||||
currency_format: undefined,
|
||||
date_format: undefined,
|
||||
time_format: undefined,
|
||||
interval_format: undefined,
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (values: FormValues) => updateOrganization(values as UpdateOrganizationBody),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['organization'] });
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchOrganization();
|
||||
if (organization.value) {
|
||||
form.value = {
|
||||
number_format: organization.value.number_format as NumberFormat,
|
||||
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,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
async function submit() {
|
||||
mutation.mutate(form.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormSection>
|
||||
<template #title>Format Settings</template>
|
||||
|
||||
<template #description>
|
||||
Configure the default format settings for the organization.
|
||||
</template>
|
||||
|
||||
<template #form>
|
||||
<!-- 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" />
|
||||
<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>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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" />
|
||||
<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="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>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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" />
|
||||
<Select v-model="form.date_format">
|
||||
<SelectTrigger id="dateFormat">
|
||||
<SelectValue placeholder="Select date format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="point-seperated-d-m-yyyy">D.M.YYYY</SelectItem>
|
||||
<SelectItem value="slash-seperated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
|
||||
<SelectItem value="slash-seperated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-seperated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-seperated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-seperated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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" />
|
||||
<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>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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" />
|
||||
<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-seperated">12:03</SelectItem>
|
||||
<SelectItem value="hours-minutes-seconds-colon-seperated">12:03:45</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<PrimaryButton
|
||||
:disabled="mutation.isPending.value"
|
||||
@click="submit">
|
||||
{{ mutation.isPending.value ? 'Saving...' : 'Save' }}
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
</FormSection>
|
||||
</template>
|
||||
@@ -7,6 +7,7 @@ import type { Organization } from '@/types/models';
|
||||
import type { Permissions, Role } from '@/types/jetstream';
|
||||
import { canUpdateOrganization } from '@/utils/permissions';
|
||||
import OrganizationBillableRate from '@/Pages/Teams/Partials/OrganizationBillableRate.vue';
|
||||
import OrganizationFormatSettings from '@/Pages/Teams/Partials/OrganizationFormatSettings.vue';
|
||||
|
||||
defineProps<{
|
||||
team: Organization;
|
||||
@@ -33,6 +34,11 @@ defineProps<{
|
||||
:team="team" />
|
||||
<SectionBorder />
|
||||
|
||||
<OrganizationFormatSettings
|
||||
v-if="canUpdateOrganization()"
|
||||
:team="team" />
|
||||
<SectionBorder />
|
||||
|
||||
<template
|
||||
v-if="permissions.canDeleteTeam && !team.personal_team">
|
||||
<DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
|
||||
|
||||
Reference in New Issue
Block a user