fix : malio UI
This commit is contained in:
@@ -2,13 +2,12 @@
|
||||
<div class="h-full flex flex-col overflow-hidden">
|
||||
<div class="flex items-center justify-between pb-6">
|
||||
<h1 class="text-4xl font-bold text-primary-500">Types de statut</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
||||
<MalioButton
|
||||
label="Ajouter un type"
|
||||
icon-name="mdi:plus"
|
||||
icon-position="left"
|
||||
@click="openCreate"
|
||||
>
|
||||
+ Ajouter un type
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -56,60 +55,40 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
|
||||
<MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
|
||||
<form class="space-y-4" @submit.prevent="handleSubmit">
|
||||
<div>
|
||||
<label class="text-md font-semibold text-neutral-700" for="code">
|
||||
Code <span class="text-red-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="code"
|
||||
v-model="form.code"
|
||||
type="text"
|
||||
maxlength="10"
|
||||
:class="codeFieldClass"
|
||||
/>
|
||||
<p v-if="showCodeError" class="mt-1 text-sm text-red-600">
|
||||
Le code est obligatoire.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-md font-semibold text-neutral-700" for="label">
|
||||
Libellé <span class="text-red-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="label"
|
||||
v-model="form.label"
|
||||
type="text"
|
||||
:class="labelFieldClass"
|
||||
/>
|
||||
<p v-if="showLabelError" class="mt-1 text-sm text-red-600">
|
||||
Le libellé est obligatoire.
|
||||
</p>
|
||||
</div>
|
||||
<MalioInputText
|
||||
v-model="form.code"
|
||||
label="Code *"
|
||||
group-class="mt-2"
|
||||
:max-length="10"
|
||||
:error="showCodeError ? 'Le code est obligatoire.' : ''"
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="form.label"
|
||||
label="Libellé *"
|
||||
group-class="mt-2"
|
||||
:error="showLabelError ? 'Le libellé est obligatoire.' : ''"
|
||||
/>
|
||||
<div>
|
||||
<label class="text-md font-semibold text-neutral-700">
|
||||
Compté comme travaillé
|
||||
</label>
|
||||
<div class="mt-2 flex items-center gap-6">
|
||||
<label class="inline-flex items-center gap-2 text-md text-neutral-800">
|
||||
<input
|
||||
v-model="form.countAsWorkedHours"
|
||||
type="radio"
|
||||
class="h-4 w-4"
|
||||
:value="true"
|
||||
/>
|
||||
Oui
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-2 text-md text-neutral-800">
|
||||
<input
|
||||
v-model="form.countAsWorkedHours"
|
||||
type="radio"
|
||||
class="h-4 w-4"
|
||||
:value="false"
|
||||
/>
|
||||
Non
|
||||
</label>
|
||||
<MalioRadioButton
|
||||
v-model="form.countAsWorkedHours"
|
||||
name="countAsWorkedHours"
|
||||
:value="true"
|
||||
label="Oui"
|
||||
group-class="w-auto mt-0"
|
||||
/>
|
||||
<MalioRadioButton
|
||||
v-model="form.countAsWorkedHours"
|
||||
name="countAsWorkedHours"
|
||||
:value="false"
|
||||
label="Non"
|
||||
group-class="w-auto mt-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -130,32 +109,29 @@
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="editingType" class="grid grid-cols-2 gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
|
||||
<MalioButton
|
||||
label="Supprimer"
|
||||
variant="danger"
|
||||
button-class="w-full"
|
||||
@click="confirmDelete(editingType)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<MalioButton
|
||||
type="submit"
|
||||
class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
||||
:class="submitButtonClass"
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
label="Modifier"
|
||||
button-class="w-full"
|
||||
:disabled="isSubmitting || !isFormValid"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex justify-center pt-2">
|
||||
<button
|
||||
<MalioButton
|
||||
type="submit"
|
||||
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
||||
:class="submitButtonClass"
|
||||
>
|
||||
+ Ajouter
|
||||
</button>
|
||||
label="Valider"
|
||||
button-class="w-[200px]"
|
||||
:disabled="isSubmitting || !isFormValid"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</AppDrawer>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -202,20 +178,6 @@ const showCodeError = computed(() => validationTouched.code && !isCodeValid.valu
|
||||
const showLabelError = computed(() => validationTouched.label && !isLabelValid.value)
|
||||
const showColorError = computed(() => validationTouched.color && !isColorValid.value)
|
||||
|
||||
const baseInputClass =
|
||||
'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
|
||||
const codeFieldClass = computed(() => {
|
||||
if (showCodeError.value) {
|
||||
return `${baseInputClass} border-red-500`
|
||||
}
|
||||
return `${baseInputClass} border-neutral-300`
|
||||
})
|
||||
const labelFieldClass = computed(() => {
|
||||
if (showLabelError.value) {
|
||||
return `${baseInputClass} border-red-500`
|
||||
}
|
||||
return `${baseInputClass} border-neutral-300`
|
||||
})
|
||||
const colorFieldClass = computed(() => {
|
||||
const baseColorClass = 'h-10 w-16 cursor-pointer rounded-md border bg-white p-1'
|
||||
if (showColorError.value) {
|
||||
@@ -224,13 +186,6 @@ const colorFieldClass = computed(() => {
|
||||
return `${baseColorClass} border-neutral-300`
|
||||
})
|
||||
|
||||
const submitButtonClass = computed(() => {
|
||||
if (isSubmitting.value || !isFormValid.value) {
|
||||
return 'opacity-50 cursor-not-allowed'
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const loadAbsenceTypes = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user