mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-17 20:52:14 +01:00
Add Field component system and migrate UI
This commit is contained in:
Gregor Vostrak
@@ -2,7 +2,7 @@
|
||||
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 { Field, FieldLabel } from '@/packages/ui/src/field';
|
||||
import type { UpdateOrganizationBody } from '@/packages/api/src';
|
||||
import { useOrganizationStore } from '@/utils/useOrganization';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -73,99 +73,89 @@ async function submit() {
|
||||
|
||||
<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>
|
||||
<Field class="col-span-6 sm:col-span-4">
|
||||
<FieldLabel for="numberFormat">Number Format</FieldLabel>
|
||||
<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>
|
||||
</Field>
|
||||
|
||||
<!-- 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>
|
||||
<Field class="col-span-6 sm:col-span-4">
|
||||
<FieldLabel for="currencyFormat">Currency Format</FieldLabel>
|
||||
<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>
|
||||
</Field>
|
||||
|
||||
<!-- 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-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>
|
||||
</div>
|
||||
<Field class="col-span-6 sm:col-span-4">
|
||||
<FieldLabel for="dateFormat">Date Format</FieldLabel>
|
||||
<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>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<!-- 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>
|
||||
<Field class="col-span-6 sm:col-span-4">
|
||||
<FieldLabel for="timeFormat">Time Format</FieldLabel>
|
||||
<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>
|
||||
</Field>
|
||||
|
||||
<!-- 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-separated">12:03</SelectItem>
|
||||
<SelectItem value="hours-minutes-seconds-colon-separated"
|
||||
>12:03:45</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Field class="col-span-6 sm:col-span-4">
|
||||
<FieldLabel for="intervalFormat">Time Duration Format</FieldLabel>
|
||||
<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
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
|
||||
Reference in New Issue
Block a user