mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-15 11:42:15 +01:00
add formating options to organization settings
This commit is contained in:
Gregor Vostrak
committed by
Constantin Graf
Constantin Graf
parent
49af3d4371
commit
f5b0f40b23
@@ -241,25 +241,6 @@ const page = usePage<{
|
|||||||
</select>
|
</select>
|
||||||
<InputError :message="form.errors.week_start" class="mt-2" />
|
<InputError :message="form.errors.week_start" class="mt-2" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<template #actions>
|
<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 type { Permissions, Role } from '@/types/jetstream';
|
||||||
import { canUpdateOrganization } from '@/utils/permissions';
|
import { canUpdateOrganization } from '@/utils/permissions';
|
||||||
import OrganizationBillableRate from '@/Pages/Teams/Partials/OrganizationBillableRate.vue';
|
import OrganizationBillableRate from '@/Pages/Teams/Partials/OrganizationBillableRate.vue';
|
||||||
|
import OrganizationFormatSettings from '@/Pages/Teams/Partials/OrganizationFormatSettings.vue';
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
team: Organization;
|
team: Organization;
|
||||||
@@ -33,6 +34,11 @@ defineProps<{
|
|||||||
:team="team" />
|
:team="team" />
|
||||||
<SectionBorder />
|
<SectionBorder />
|
||||||
|
|
||||||
|
<OrganizationFormatSettings
|
||||||
|
v-if="canUpdateOrganization()"
|
||||||
|
:team="team" />
|
||||||
|
<SectionBorder />
|
||||||
|
|
||||||
<template
|
<template
|
||||||
v-if="permissions.canDeleteTeam && !team.personal_team">
|
v-if="permissions.canDeleteTeam && !team.personal_team">
|
||||||
<DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
|
<DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
|
||||||
|
|||||||
Reference in New Issue
Block a user