sroy
2d2b38eae4
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | #355 | modification front de la page admin transporteur | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/36 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: sroy <sebastien@yuno.malio.fr> Co-committed-by: sroy <sebastien@yuno.malio.fr>
102 lines
3.1 KiB
Vue
102 lines
3.1 KiB
Vue
<template>
|
|
<form @submit.prevent="validateForm">
|
|
<div class="flex items-center mb-11 justify-between relative">
|
|
<div class="flex flex-row absolute -left-[60px] ">
|
|
<Icon @click="goBack" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
|
|
</div>
|
|
<h1 class="text-3xl text-primary-500 font-bold uppercase">
|
|
{{ props.address ? "Modification d'une adresse" : "Ajout d'une adresse" }}
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-y-16 gap-x-[200px] mb-16">
|
|
<UiTextInput id="address-label" v-model="form.label" label="Libellé" />
|
|
<UiTextInput id="address-street" v-model="form.street" label="Rue" />
|
|
<UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
|
|
<UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" />
|
|
<UiTextInput id="address-city" v-model="form.city" label="Ville" />
|
|
<UiTextInput id="address-country" v-model="form.countryCode" label="Pays (code)" />
|
|
</div>
|
|
<div class="flex justify-center items-center">
|
|
<UiButton
|
|
class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
|
|
type="submit"
|
|
:disabled="isLoading"
|
|
>
|
|
Valider
|
|
</UiButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { AddressPayload } from "~/services/address"
|
|
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const props = defineProps<{
|
|
type?: "supplier" | "customer",
|
|
address?: AddressPayload | null
|
|
}>()
|
|
|
|
const isLoading = ref(false)
|
|
|
|
const emptyForm = (): AddressPayload => ({
|
|
label: "",
|
|
street: "",
|
|
street2: null,
|
|
postalCode: "",
|
|
city: "",
|
|
countryCode: "",
|
|
})
|
|
|
|
const form = reactive<AddressPayload>(emptyForm())
|
|
|
|
const backPath = computed(() => {
|
|
if (props.type === "customer") {
|
|
const customerId = Number(route.query.customerId)
|
|
return Number.isFinite(customerId) && customerId > 0
|
|
? `/admin/customer/${customerId}`
|
|
: "/admin/customer/customer-list"
|
|
}
|
|
|
|
const supplierId = Number(route.query.supplierId)
|
|
return Number.isFinite(supplierId) && supplierId > 0
|
|
? `/admin/supplier/${supplierId}`
|
|
: "/admin/supplier/supplier-list"
|
|
})
|
|
|
|
const hydrateForm = (address?: AddressPayload | null) => {
|
|
const data = address ?? emptyForm()
|
|
form.label = data.label ?? ""
|
|
form.street = data.street ?? ""
|
|
form.street2 = data.street2 ?? null
|
|
form.postalCode = data.postalCode ?? ""
|
|
form.city = data.city ?? ""
|
|
form.countryCode = data.countryCode ?? ""
|
|
}
|
|
|
|
watch(
|
|
() => props.address,
|
|
(addr) => {
|
|
hydrateForm(addr)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
const validateForm = () => {
|
|
if (isLoading.value) return
|
|
emit("validate", {...form})
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.push(backPath.value)
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'validate', form: AddressPayload): void
|
|
}>()
|
|
</script>
|