feat : finalisation de l'étape 1 "Réception" (formulaire)
This commit is contained in:
@@ -1,21 +1,213 @@
|
||||
<template>
|
||||
<form @submit.prevent="validate">
|
||||
<div class="grid grid-cols-1 items-start gap-8 mb-16">
|
||||
<h1 class="font-bold text-5xl uppercase">Réception</h1>
|
||||
<div>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- Plaque d'immatriculation -->
|
||||
<div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
|
||||
<UiLicensePlateInput
|
||||
v-model="form.licensePlate"
|
||||
v-model:allowAny="allowAnyLicensePlate"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="reception-date" class="font-bold uppercase text-xl mb-4">Date de reception</label>
|
||||
<input
|
||||
id="reception-date"
|
||||
v-model="form.receptionDate"
|
||||
type="date"
|
||||
class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
|
||||
/>
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
@@ -30,38 +222,359 @@
|
||||
|
||||
<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'
|
||||
|
||||
type ReceptionFormData = {
|
||||
licensePlate: string
|
||||
receptionDate: string
|
||||
receptionTypeId: string
|
||||
userId: string
|
||||
supplierId: string
|
||||
addressId: string
|
||||
truckId: string
|
||||
carrierId: string
|
||||
driverId: string
|
||||
vehicleId: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const receptionStore = useReceptionStore()
|
||||
const form = reactive<ReceptionFormData>({
|
||||
licensePlate: '',
|
||||
receptionDate: new Date().toISOString().slice(0, 10)
|
||||
receptionDate: new Date().toISOString().slice(0, 10),
|
||||
receptionTypeId: '',
|
||||
userId: '',
|
||||
supplierId: '',
|
||||
addressId: '',
|
||||
truckId: '',
|
||||
carrierId: '',
|
||||
driverId: '',
|
||||
vehicleId: ''
|
||||
})
|
||||
const allowAnyLicensePlate = ref(false)
|
||||
const receptionTypes = ref<ReceptionTypeData[]>([])
|
||||
const users = ref<UserData[]>([])
|
||||
const isLoadingUsers = ref(false)
|
||||
const suppliers = ref<SupplierData[]>([])
|
||||
const isLoadingSuppliers = ref(false)
|
||||
const trucks = ref<TruckData[]>([])
|
||||
const isLoadingTrucks = ref(false)
|
||||
const carriers = ref<CarrierData[]>([])
|
||||
const isLoadingCarriers = ref(false)
|
||||
const drivers = ref<DriverData[]>([])
|
||||
const isLoadingDrivers = ref(false)
|
||||
const vehicles = ref<VehicleData[]>([])
|
||||
const isLoadingVehicles = ref(false)
|
||||
const authStore = useAuthStore()
|
||||
const isHydrating = ref(false)
|
||||
const liotCode = 'LIOT'
|
||||
const selectedCarrier = computed(() =>
|
||||
carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
|
||||
)
|
||||
const isLiotCarrier = computed(() => selectedCarrier.value?.code === liotCode)
|
||||
const supplierAddresses = computed(() => {
|
||||
const supplierId = Number(form.supplierId)
|
||||
if (!Number.isFinite(supplierId)) {
|
||||
return []
|
||||
}
|
||||
return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
|
||||
})
|
||||
const filteredDrivers = computed(() => {
|
||||
if (!form.carrierId) {
|
||||
return []
|
||||
}
|
||||
return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
|
||||
})
|
||||
const filteredVehicles = computed(() => {
|
||||
if (!form.carrierId) {
|
||||
return []
|
||||
}
|
||||
return vehicles.value.filter(
|
||||
(vehicle) =>
|
||||
String(vehicle.carrier?.id) === form.carrierId &&
|
||||
(!form.truckId || String(vehicle.truck?.id) === form.truckId)
|
||||
)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => receptionStore.current,
|
||||
(reception) => {
|
||||
isHydrating.value = true
|
||||
form.licensePlate = reception?.licensePlate ?? ''
|
||||
form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
|
||||
form.receptionTypeId = reception?.receptionType?.id
|
||||
? String(reception.receptionType.id)
|
||||
: ''
|
||||
form.userId = reception?.user?.id
|
||||
? String(reception.user.id)
|
||||
: form.userId
|
||||
form.supplierId = reception?.supplier?.id
|
||||
? String(reception.supplier.id)
|
||||
: ''
|
||||
form.addressId = reception?.address?.id
|
||||
? String(reception.address.id)
|
||||
: ''
|
||||
form.truckId = reception?.truck?.id
|
||||
? String(reception.truck.id)
|
||||
: ''
|
||||
form.carrierId = reception?.carrier?.id
|
||||
? String(reception.carrier.id)
|
||||
: ''
|
||||
form.driverId = reception?.driver?.id
|
||||
? String(reception.driver.id)
|
||||
: ''
|
||||
isHydrating.value = false
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const loadUsers = async () => {
|
||||
isLoadingUsers.value = true
|
||||
try {
|
||||
users.value = await getUsers()
|
||||
} finally {
|
||||
isLoadingUsers.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadSuppliers = async () => {
|
||||
isLoadingSuppliers.value = true
|
||||
try {
|
||||
suppliers.value = await getSupplierList()
|
||||
} finally {
|
||||
isLoadingSuppliers.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadTrucks = async () => {
|
||||
isLoadingTrucks.value = true
|
||||
try {
|
||||
trucks.value = await getTruckList()
|
||||
} finally {
|
||||
isLoadingTrucks.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadCarriers = async () => {
|
||||
isLoadingCarriers.value = true
|
||||
try {
|
||||
carriers.value = await getCarrierList()
|
||||
} finally {
|
||||
isLoadingCarriers.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadDrivers = async () => {
|
||||
isLoadingDrivers.value = true
|
||||
try {
|
||||
drivers.value = await getDriverList()
|
||||
} finally {
|
||||
isLoadingDrivers.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadVehicles = async () => {
|
||||
isLoadingVehicles.value = true
|
||||
try {
|
||||
vehicles.value = await getVehicleList()
|
||||
} finally {
|
||||
isLoadingVehicles.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const setDefaultUser = () => {
|
||||
if (form.userId) {
|
||||
return
|
||||
}
|
||||
if (authStore.user?.id) {
|
||||
form.userId = String(authStore.user.id)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
receptionTypes.value = await getReceptionTypeList()
|
||||
await loadUsers()
|
||||
await loadSuppliers()
|
||||
await loadTrucks()
|
||||
await loadCarriers()
|
||||
await loadDrivers()
|
||||
await loadVehicles()
|
||||
await authStore.ensureSession()
|
||||
setDefaultUser()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => [form.supplierId, suppliers.value],
|
||||
() => {
|
||||
if (!form.supplierId) {
|
||||
form.addressId = ''
|
||||
return
|
||||
}
|
||||
if (!form.addressId && supplierAddresses.value.length === 1) {
|
||||
form.addressId = String(supplierAddresses.value[0].id)
|
||||
return
|
||||
}
|
||||
if (!form.addressId) {
|
||||
return
|
||||
}
|
||||
const matches = supplierAddresses.value.some(
|
||||
(address) => String(address.id) === form.addressId
|
||||
)
|
||||
if (!matches) {
|
||||
form.addressId = ''
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => form.carrierId,
|
||||
() => {
|
||||
if (isHydrating.value) {
|
||||
return
|
||||
}
|
||||
if (!form.carrierId) {
|
||||
form.driverId = ''
|
||||
form.vehicleId = ''
|
||||
return
|
||||
}
|
||||
if (!isLiotCarrier.value) {
|
||||
form.driverId = ''
|
||||
form.vehicleId = ''
|
||||
return
|
||||
}
|
||||
if (filteredDrivers.value.length === 1) {
|
||||
form.driverId = String(filteredDrivers.value[0].id)
|
||||
}
|
||||
if (filteredVehicles.value.length === 1) {
|
||||
form.vehicleId = String(filteredVehicles.value[0].id)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => [form.truckId, form.carrierId, vehicles.value],
|
||||
() => {
|
||||
if (!isLiotCarrier.value) {
|
||||
return
|
||||
}
|
||||
if (filteredVehicles.value.length === 1) {
|
||||
form.vehicleId = String(filteredVehicles.value[0].id)
|
||||
return
|
||||
}
|
||||
if (!form.vehicleId) {
|
||||
return
|
||||
}
|
||||
const matches = filteredVehicles.value.some(
|
||||
(vehicle) => String(vehicle.id) === form.vehicleId
|
||||
)
|
||||
if (!matches) {
|
||||
form.vehicleId = ''
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => [form.vehicleId, form.carrierId, vehicles.value],
|
||||
() => {
|
||||
if (!isLiotCarrier.value) {
|
||||
return
|
||||
}
|
||||
const selected = filteredVehicles.value.find(
|
||||
(vehicle) => String(vehicle.id) === form.vehicleId
|
||||
)
|
||||
if (selected) {
|
||||
form.licensePlate = selected.plate
|
||||
allowAnyLicensePlate.value = false
|
||||
} else if (form.vehicleId === '') {
|
||||
form.licensePlate = ''
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => [form.licensePlate, form.carrierId, vehicles.value],
|
||||
() => {
|
||||
if (!isLiotCarrier.value || form.vehicleId) {
|
||||
return
|
||||
}
|
||||
const match = filteredVehicles.value.find(
|
||||
(vehicle) => vehicle.plate === form.licensePlate
|
||||
)
|
||||
if (match) {
|
||||
form.vehicleId = String(match.id)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
async function validate() {
|
||||
const normalizedLicensePlate = form.licensePlate.trim()
|
||||
const normalizedReceptionDate = form.receptionDate.trim()
|
||||
const normalizedReceptionTypeId = form.receptionTypeId.trim()
|
||||
const normalizedUserId = form.userId.trim()
|
||||
const normalizedSupplierId = form.supplierId.trim()
|
||||
const normalizedAddressId = form.addressId.trim()
|
||||
const normalizedTruckId = form.truckId.trim()
|
||||
const normalizedCarrierId = form.carrierId.trim()
|
||||
const normalizedDriverId = form.driverId.trim()
|
||||
const receptionTypeIri = normalizedReceptionTypeId
|
||||
? `/api/reception_types/${normalizedReceptionTypeId}`
|
||||
: null
|
||||
const userIri = normalizedUserId
|
||||
? `/api/users/${normalizedUserId}`
|
||||
: null
|
||||
const supplierIri = normalizedSupplierId
|
||||
? `/api/suppliers/${normalizedSupplierId}`
|
||||
: null
|
||||
const addressIri = normalizedAddressId
|
||||
? `/api/addresses/${normalizedAddressId}`
|
||||
: null
|
||||
const truckIri = normalizedTruckId
|
||||
? `/api/trucks/${normalizedTruckId}`
|
||||
: null
|
||||
const carrierIri = normalizedCarrierId
|
||||
? `/api/carriers/${normalizedCarrierId}`
|
||||
: null
|
||||
const driverIri = normalizedDriverId
|
||||
? `/api/drivers/${normalizedDriverId}`
|
||||
: null
|
||||
|
||||
const basePayload = {
|
||||
licensePlate: normalizedLicensePlate,
|
||||
receptionDate: normalizedReceptionDate,
|
||||
receptionType: receptionTypeIri,
|
||||
user: userIri,
|
||||
supplier: supplierIri,
|
||||
address: addressIri,
|
||||
truck: truckIri,
|
||||
carrier: carrierIri
|
||||
}
|
||||
|
||||
const payload = {
|
||||
...basePayload,
|
||||
...(isLiotCarrier.value && driverIri ? { driver: driverIri } : {})
|
||||
}
|
||||
|
||||
if (!receptionStore.current) {
|
||||
const created = await receptionStore.createReception({
|
||||
currentStep: 1,
|
||||
licensePlate: normalizedLicensePlate,
|
||||
receptionDate: normalizedReceptionDate
|
||||
...payload
|
||||
})
|
||||
if (created) {
|
||||
await router.push(`/reception/${created.id}`)
|
||||
@@ -72,8 +585,7 @@ async function validate() {
|
||||
const nextStep = receptionStore.current.currentStep + 1
|
||||
await receptionStore.updateReception(receptionStore.current.id, {
|
||||
currentStep: nextStep,
|
||||
licensePlate: normalizedLicensePlate,
|
||||
receptionDate: normalizedReceptionDate
|
||||
...payload
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -14,10 +14,6 @@
|
||||
class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl">
|
||||
{{ displayWeight }} kg
|
||||
</div>
|
||||
<!-- <div class="grid grid-cols-2 border border-black text-center">-->
|
||||
<!-- <p class="border-r border-black py-3 text-4xl font-bold">DSD</p>-->
|
||||
<!-- <p class="py-3 text-4xl">{{ displayDsd }}</p>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user