feat : mise en place de composant UI pour les select, checkbox, date, text
This commit is contained in:
@@ -3,181 +3,96 @@
|
||||
<div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
|
||||
<h1 class="font-bold text-5xl uppercase col-start-1 row-start-1">Réception</h1>
|
||||
<!-- Nom de l'utilisateur -->
|
||||
<div class="flex flex-col col-start-1 row-start-2">
|
||||
<label for="reception-user" class="font-bold uppercase text-xl mb-2">Nom de l'utilisateur</label>
|
||||
<select
|
||||
id="reception-user"
|
||||
v-model="form.userId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
|
||||
:class="[
|
||||
form.userId ? 'text-black' : 'text-neutral-400',
|
||||
isLoadingUsers ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
]"
|
||||
:disabled="isLoadingUsers"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
:value="String(user.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ user.username }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="reception-user"
|
||||
v-model="form.userId"
|
||||
label="Nom de l'utilisateur"
|
||||
:options="users.map((user) => ({
|
||||
value: String(user.id),
|
||||
label: user.username
|
||||
}))"
|
||||
:loading="isLoadingUsers"
|
||||
wrapper-class="col-start-1 row-start-2"
|
||||
/>
|
||||
<!-- Date de réception -->
|
||||
<div class="flex flex-col col-start-1 row-start-3">
|
||||
<label for="reception-date" class="font-bold uppercase text-xl mb-2">Date de réception</label>
|
||||
<input
|
||||
id="reception-date"
|
||||
v-model="form.receptionDate"
|
||||
type="date"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] uppercase cursor-pointer bg-transparent appearance-none h-[34px]"
|
||||
/>
|
||||
</div>
|
||||
<UiDateInput
|
||||
id="reception-date"
|
||||
v-model="form.receptionDate"
|
||||
label="Date de réception"
|
||||
wrapper-class="col-start-1 row-start-3"
|
||||
/>
|
||||
<!-- Type de réception -->
|
||||
<div class="flex flex-col col-start-1 row-start-4">
|
||||
<label for="reception-type" class="font-bold uppercase text-xl mb-2">Type de réception</label>
|
||||
<select
|
||||
id="reception-type"
|
||||
v-model="form.receptionTypeId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent cursor-pointer"
|
||||
:class="form.receptionTypeId ? 'text-black' : 'text-neutral-400'"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="type in receptionTypes"
|
||||
:key="type.id"
|
||||
:value="String(type.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ type.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="reception-type"
|
||||
v-model="form.receptionTypeId"
|
||||
label="Type de réception"
|
||||
:options="receptionTypes.map((type) => ({
|
||||
value: String(type.id),
|
||||
label: type.label
|
||||
}))"
|
||||
wrapper-class="col-start-1 row-start-4"
|
||||
/>
|
||||
<!-- Fournisseur -->
|
||||
<div class="flex flex-col col-start-1 row-start-5">
|
||||
<label for="reception-supplier" class="font-bold uppercase text-xl mb-2">Fournisseur</label>
|
||||
<select
|
||||
id="reception-supplier"
|
||||
v-model="form.supplierId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
|
||||
:class="[
|
||||
form.supplierId ? 'text-black' : 'text-neutral-400',
|
||||
isLoadingSuppliers ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
]"
|
||||
:disabled="isLoadingSuppliers"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="supplier in suppliers"
|
||||
:key="supplier.id"
|
||||
:value="String(supplier.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ supplier.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="reception-supplier"
|
||||
v-model="form.supplierId"
|
||||
label="Fournisseur"
|
||||
:options="suppliers.map((supplier) => ({
|
||||
value: String(supplier.id),
|
||||
label: supplier.name
|
||||
}))"
|
||||
:loading="isLoadingSuppliers"
|
||||
wrapper-class="col-start-1 row-start-5"
|
||||
/>
|
||||
<!-- Adresse fournisseur -->
|
||||
<div class="flex flex-col col-start-2 row-start-1">
|
||||
<label for="reception-address" class="font-bold uppercase text-xl mb-2">Adresse</label>
|
||||
<select
|
||||
id="reception-address"
|
||||
v-model="form.addressId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
|
||||
:class="[
|
||||
form.addressId ? 'text-black' : 'text-neutral-400',
|
||||
isLoadingSuppliers || supplierAddresses.length === 0
|
||||
? 'cursor-not-allowed'
|
||||
: 'cursor-pointer'
|
||||
]"
|
||||
:disabled="isLoadingSuppliers || supplierAddresses.length === 0"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="address in supplierAddresses"
|
||||
:key="address.id"
|
||||
:value="String(address.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ address.fullAddress }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="reception-address"
|
||||
v-model="form.addressId"
|
||||
label="Adresse"
|
||||
:options="supplierAddresses.map((address) => ({
|
||||
value: String(address.id),
|
||||
label: address.fullAddress
|
||||
}))"
|
||||
:disabled="isLoadingSuppliers || supplierAddresses.length === 0"
|
||||
wrapper-class="col-start-2 row-start-1"
|
||||
/>
|
||||
<!-- Camion -->
|
||||
<div class="flex flex-col col-start-2 row-start-2">
|
||||
<label for="reception-truck" class="font-bold uppercase text-xl mb-2">Camion</label>
|
||||
<select
|
||||
id="reception-truck"
|
||||
v-model="form.truckId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
|
||||
:class="[
|
||||
form.truckId ? 'text-black' : 'text-neutral-400',
|
||||
isLoadingTrucks ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
]"
|
||||
:disabled="isLoadingTrucks"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="truck in trucks"
|
||||
:key="truck.id"
|
||||
:value="String(truck.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ truck.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="reception-truck"
|
||||
v-model="form.truckId"
|
||||
label="Camion"
|
||||
:options="trucks.map((truck) => ({
|
||||
value: String(truck.id),
|
||||
label: truck.name
|
||||
}))"
|
||||
:loading="isLoadingTrucks"
|
||||
wrapper-class="col-start-2 row-start-2"
|
||||
/>
|
||||
<!-- Transporteur -->
|
||||
<div class="flex flex-col col-start-2 row-start-3">
|
||||
<label for="reception-carrier" class="font-bold uppercase text-xl mb-2">Transporteur</label>
|
||||
<select
|
||||
id="reception-carrier"
|
||||
v-model="form.carrierId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent h-[34px]"
|
||||
:class="[
|
||||
form.carrierId ? 'text-black' : 'text-neutral-400',
|
||||
isLoadingCarriers ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
]"
|
||||
:disabled="isLoadingCarriers"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="carrier in carriers"
|
||||
:key="carrier.id"
|
||||
:value="String(carrier.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ carrier.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="reception-carrier"
|
||||
v-model="form.carrierId"
|
||||
label="Transporteur"
|
||||
:options="carriers.map((carrier) => ({
|
||||
value: String(carrier.id),
|
||||
label: carrier.name
|
||||
}))"
|
||||
:loading="isLoadingCarriers"
|
||||
select-class="h-[34px]"
|
||||
wrapper-class="col-start-2 row-start-3"
|
||||
/>
|
||||
<!-- Chauffeur (LIOT) -->
|
||||
<div class="flex flex-col col-start-2 row-start-4">
|
||||
<label for="reception-driver" class="font-bold uppercase text-xl mb-2">Nom du chauffeur si LIOT</label>
|
||||
<select
|
||||
id="reception-driver"
|
||||
v-model="form.driverId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
|
||||
:class="[
|
||||
form.driverId ? 'text-black' : 'text-neutral-400',
|
||||
isLoadingDrivers ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
]"
|
||||
:disabled="isLoadingDrivers"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="driver in filteredDrivers"
|
||||
:key="driver.id"
|
||||
:value="String(driver.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ driver.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="reception-driver"
|
||||
v-model="form.driverId"
|
||||
label="Nom du chauffeur si LIOT"
|
||||
:options="filteredDrivers.map((driver) => ({
|
||||
value: String(driver.id),
|
||||
label: driver.name
|
||||
}))"
|
||||
:loading="isLoadingDrivers"
|
||||
wrapper-class="col-start-2 row-start-4"
|
||||
/>
|
||||
<!-- Plaque d'immatriculation -->
|
||||
<div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
|
||||
<UiLicensePlateInput
|
||||
@@ -186,29 +101,19 @@
|
||||
/>
|
||||
</div>
|
||||
<!-- Immatriculation (LIOT) -->
|
||||
<div v-if="isLiotCarrier" class="flex flex-col col-start-2 row-start-5">
|
||||
<label for="reception-vehicle" class="font-bold uppercase text-xl mb-2">Immatriculation</label>
|
||||
<select
|
||||
id="reception-vehicle"
|
||||
v-model="form.vehicleId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
|
||||
:class="[
|
||||
form.vehicleId ? 'text-black' : 'text-neutral-400',
|
||||
isLoadingVehicles ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
]"
|
||||
:disabled="isLoadingVehicles || filteredVehicles.length === 0"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="vehicle in filteredVehicles"
|
||||
:key="vehicle.id"
|
||||
:value="String(vehicle.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ vehicle.plate }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
v-if="isLiotCarrier"
|
||||
id="reception-vehicle"
|
||||
v-model="form.vehicleId"
|
||||
label="Immatriculation"
|
||||
:options="filteredVehicles.map((vehicle) => ({
|
||||
value: String(vehicle.id),
|
||||
label: vehicle.plate
|
||||
}))"
|
||||
:loading="isLoadingVehicles"
|
||||
:disabled="isLoadingVehicles || filteredVehicles.length === 0"
|
||||
wrapper-class="col-start-2 row-start-5"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
@@ -221,22 +126,22 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useReceptionStore } from '~/stores/reception'
|
||||
import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
|
||||
import { getReceptionTypeList } from '~/services/reception-type'
|
||||
import type { UserData } from '~/services/dto/user-data'
|
||||
import { getUsers } from '~/services/auth'
|
||||
import { useAuthStore } from '~/stores/auth'
|
||||
import type { SupplierData } from '~/services/dto/supplier-data'
|
||||
import { getSupplierList } from '~/services/supplier'
|
||||
import type { TruckData } from '~/services/dto/truck-data'
|
||||
import { getTruckList } from '~/services/truck'
|
||||
import type { CarrierData } from '~/services/dto/carrier-data'
|
||||
import { getCarrierList } from '~/services/carrier'
|
||||
import type { DriverData } from '~/services/dto/driver-data'
|
||||
import { getDriverList } from '~/services/driver'
|
||||
import type { VehicleData } from '~/services/dto/vehicle-data'
|
||||
import { getVehicleList } from '~/services/vehicle'
|
||||
import {useReceptionStore} from '~/stores/reception'
|
||||
import type {ReceptionTypeData} from '~/services/dto/reception-type-data'
|
||||
import {getReceptionTypeList} from '~/services/reception-type'
|
||||
import type {UserData} from '~/services/dto/user-data'
|
||||
import {getUsers} from '~/services/auth'
|
||||
import {useAuthStore} from '~/stores/auth'
|
||||
import type {SupplierData} from '~/services/dto/supplier-data'
|
||||
import {getSupplierList} from '~/services/supplier'
|
||||
import type {TruckData} from '~/services/dto/truck-data'
|
||||
import {getTruckList} from '~/services/truck'
|
||||
import type {CarrierData} from '~/services/dto/carrier-data'
|
||||
import {getCarrierList} from '~/services/carrier'
|
||||
import type {DriverData} from '~/services/dto/driver-data'
|
||||
import {getDriverList} from '~/services/driver'
|
||||
import type {VehicleData} from '~/services/dto/vehicle-data'
|
||||
import {getVehicleList} from '~/services/vehicle'
|
||||
|
||||
type ReceptionFormData = {
|
||||
licensePlate: string
|
||||
@@ -339,7 +244,7 @@ watch(
|
||||
: ''
|
||||
isHydrating.value = false
|
||||
},
|
||||
{ immediate: true }
|
||||
{immediate: true}
|
||||
)
|
||||
|
||||
const loadUsers = async () => {
|
||||
@@ -438,7 +343,7 @@ watch(
|
||||
form.addressId = ''
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{immediate: true}
|
||||
)
|
||||
|
||||
watch(
|
||||
@@ -464,7 +369,7 @@ watch(
|
||||
form.vehicleId = String(filteredVehicles.value[0].id)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{immediate: true}
|
||||
)
|
||||
|
||||
watch(
|
||||
@@ -487,7 +392,7 @@ watch(
|
||||
form.vehicleId = ''
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{immediate: true}
|
||||
)
|
||||
|
||||
watch(
|
||||
@@ -568,7 +473,7 @@ async function validate() {
|
||||
|
||||
const payload = {
|
||||
...basePayload,
|
||||
...(isLiotCarrier.value && driverIri ? { driver: driverIri } : {})
|
||||
...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
|
||||
}
|
||||
|
||||
if (!receptionStore.current) {
|
||||
|
||||
@@ -5,39 +5,25 @@
|
||||
v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"
|
||||
class="flex flex-col gap-8 items-center w-full">
|
||||
<h1 class="text-4xl uppercase font-bold">Sélectionner des marchandises réceptionnnées</h1>
|
||||
<div class="flex flex-col w-[550px]">
|
||||
<label for="merchandise-type" class="font-bold uppercase text-xl mb-2">Type de marchandises</label>
|
||||
<select
|
||||
id="merchandise-type"
|
||||
v-model="selectedMerchandiseTypeId"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent cursor-pointer"
|
||||
:class="selectedMerchandiseTypeId ? 'text-black' : 'text-neutral-400'"
|
||||
>
|
||||
<option value="" disabled class="text-neutral-400">Sélectionner</option>
|
||||
<option
|
||||
v-for="type in merchandiseTypes"
|
||||
:key="type.id"
|
||||
:value="String(type.id)"
|
||||
class="text-black"
|
||||
>
|
||||
{{ type.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiSelect
|
||||
id="merchandise-type"
|
||||
v-model="selectedMerchandiseTypeId"
|
||||
label="Type de marchandises"
|
||||
:options="merchandiseTypes.map((type) => ({ value: String(type.id), label: type.label }))"
|
||||
wrapper-class="w-[550px]"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="selectedMerchandiseTypeId && isAutres"
|
||||
class="flex flex-col w-full max-w-[550px]"
|
||||
>
|
||||
<label for="merchandise-detail" class="font-bold uppercase text-xl mb-2">Préciser</label>
|
||||
<input
|
||||
<UiTextInput
|
||||
id="merchandise-detail"
|
||||
v-model="merchandiseDetail"
|
||||
label="Préciser"
|
||||
placeholder="Précisions complémentaires"
|
||||
type="text"
|
||||
maxlength="255"
|
||||
class="border-b border-black text-xl pb-[6px] bg-transparent"
|
||||
>
|
||||
:maxlength="255"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -48,16 +34,12 @@
|
||||
v-for="building in buildings"
|
||||
:key="building.id"
|
||||
>
|
||||
<label
|
||||
class="flex items-center gap-2 text-xl"
|
||||
>
|
||||
<input
|
||||
v-model="selectedBuildingIds"
|
||||
type="checkbox"
|
||||
:value="String(building.id)"
|
||||
>
|
||||
<span>{{ building.label }}</span>
|
||||
</label>
|
||||
<UiCheckbox
|
||||
v-model="selectedBuildingIds"
|
||||
:value="String(building.id)"
|
||||
:label="building.label"
|
||||
label-class="text-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,18 +50,18 @@
|
||||
<div class="grid grid-cols-1 gap-10 md:grid-cols-4">
|
||||
<div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
|
||||
<p class="font-bold uppercase">{{ type.label }}</p>
|
||||
<label
|
||||
<div
|
||||
v-for="building in buildings"
|
||||
:key="building.id"
|
||||
class="flex items-center gap-2 text-lg"
|
||||
>
|
||||
<input
|
||||
<UiCheckbox
|
||||
v-model="selectedPelletBuildingIds[String(type.id)]"
|
||||
type="checkbox"
|
||||
:value="String(building.id)"
|
||||
>
|
||||
<span>{{ building.label }}</span>
|
||||
</label>
|
||||
:label="building.label"
|
||||
label-class="text-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user