Amount (Bht)
@@ -650,6 +864,9 @@ interface GenerationErrorDescription {
technicalDetails: string[]
}
+type FieldErrorMap = Record
+type ChargeFieldName = 'description' | 'room-type' | 'quantity' | 'rate' | 'nights'
+
const recipientCompanies: RecipientCompanySeed[] = [
{
company_code: 'LIAN_TAI',
@@ -772,6 +989,7 @@ const downloadMessageKey = ref('')
const alertTone = ref<'error' | 'success'>('error')
const generationResult = ref(null)
const documentDatesEdited = ref(false)
+const validationAttempted = ref(false)
const recipientContacts = computed(() => {
return recipientCompanies.find((company) => company.company_code === form.recipient.company_code)?.contacts ?? []
@@ -781,6 +999,7 @@ const primaryCharge = computed(() => form.charges[0] as ChargeForm)
const sourceGroupName = computed(() => form.booking.group_name.trim() || '未填写')
const downloadMessage = computed(() => (downloadMessageKey.value ? t(downloadMessageKey.value) : ''))
+const fieldErrors = computed(() => (validationAttempted.value ? collectFieldErrors() : {}))
const previewTotals = computed(() => {
const total = form.charges.reduce((sum, charge) => sum + lineAmount(charge), 0)
@@ -881,6 +1100,7 @@ function lineAmount(charge: ChargeForm): number {
async function submitInvoice(): Promise {
technicalDetails.value = []
downloadMessageKey.value = ''
+ validationAttempted.value = true
messages.value = validateForm()
alertTone.value = 'error'
if (messages.value.length > 0) {
@@ -1007,7 +1227,7 @@ function validateForm(): string[] {
) {
errors.push(t('manualInvoice.errors.departureBeforeArrival'))
}
- if (extraBedRate !== null && extraBedRate < 0) {
+ if (form.booking.extra_bed_rate.trim() && (extraBedRate === null || extraBedRate < 0)) {
errors.push(t('manualInvoice.errors.extraBedNegative'))
}
if (charges.some((charge) => charge.quantity <= 0 || charge.rate <= 0 || charge.nights <= 0)) {
@@ -1016,6 +1236,112 @@ function validateForm(): string[] {
return [...new Set(errors)]
}
+function collectFieldErrors(): FieldErrorMap {
+ const errors: FieldErrorMap = {}
+ const positiveNumber = t('manualInvoice.fieldErrors.positiveNumber')
+
+ setRequiredError(errors, 'company', form.recipient.company)
+ setRequiredError(errors, 'attention', form.recipient.attention)
+ setRequiredError(errors, 'address', form.recipient.address)
+ setRequiredError(errors, 'telephone', form.recipient.telephone)
+ setRequiredError(errors, 'email', form.recipient.email)
+ if (form.recipient.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.recipient.email)) {
+ errors.email = t('manualInvoice.fieldErrors.invalidEmail')
+ }
+
+ setRequiredError(errors, 'booking-date', form.document.booking_date)
+ setRequiredError(errors, 'due-date', form.document.due_date)
+ if (form.document.booking_date && form.document.due_date && form.document.due_date < form.document.booking_date) {
+ errors['due-date'] = t('manualInvoice.fieldErrors.dateOrder')
+ }
+
+ setRequiredError(errors, 'group-name', form.booking.group_name)
+ setRequiredError(errors, 'arrival-date', form.booking.arrival_date)
+ setRequiredError(errors, 'departure-date', form.booking.departure_date)
+ if (
+ form.booking.arrival_date &&
+ form.booking.departure_date &&
+ form.booking.departure_date <= form.booking.arrival_date
+ ) {
+ errors['departure-date'] = t('manualInvoice.fieldErrors.dateOrder')
+ }
+
+ const extraBedRate = optionalNumberValue(form.booking.extra_bed_rate)
+ if (form.booking.extra_bed_rate.trim() && (extraBedRate === null || extraBedRate < 0)) {
+ errors['extra-bed-rate'] = t('manualInvoice.fieldErrors.nonNegativeNumber')
+ }
+
+ form.charges.forEach((charge, index) => {
+ setRequiredError(errors, chargeFieldKey(index, 'description'), charge.description)
+ setRequiredError(errors, chargeFieldKey(index, 'room-type'), charge.room_type)
+ if (numberValue(charge.quantity) <= 0) {
+ errors[chargeFieldKey(index, 'quantity')] = positiveNumber
+ }
+ if (numberValue(charge.rate) <= 0) {
+ errors[chargeFieldKey(index, 'rate')] = positiveNumber
+ }
+ if (numberValue(charge.nights) <= 0) {
+ errors[chargeFieldKey(index, 'nights')] = positiveNumber
+ }
+ })
+
+ const firstQuantityError = errors[chargeFieldKey(0, 'quantity')]
+ if (firstQuantityError) {
+ errors['primary-quantity'] = firstQuantityError
+ }
+ const firstRateError = errors[chargeFieldKey(0, 'rate')]
+ if (firstRateError) {
+ errors['primary-rate'] = firstRateError
+ }
+ const firstNightsError = errors[chargeFieldKey(0, 'nights')]
+ if (firstNightsError) {
+ errors['primary-nights'] = firstNightsError
+ }
+
+ return errors
+}
+
+function setRequiredError(errors: FieldErrorMap, fieldKey: string, value: string): void {
+ if (!value.trim()) {
+ errors[fieldKey] = t('manualInvoice.fieldErrors.required')
+ }
+}
+
+function fieldError(fieldKey: string): string {
+ return fieldErrors.value[fieldKey] ?? ''
+}
+
+function fieldErrorId(fieldKey: string): string {
+ return `manual-invoice-error-${fieldKey}`
+}
+
+function fieldErrorTestId(fieldKey: string): string {
+ return `manual-invoice-field-error-${fieldKey}`
+}
+
+function validationClass(fieldKey: string): Record {
+ return {
+ 'is-invalid': Boolean(fieldError(fieldKey)),
+ }
+}
+
+function validationAria(fieldKey: string): Record {
+ if (!fieldError(fieldKey)) {
+ return {
+ 'aria-invalid': undefined,
+ 'aria-describedby': undefined,
+ }
+ }
+ return {
+ 'aria-invalid': 'true',
+ 'aria-describedby': fieldErrorId(fieldKey),
+ }
+}
+
+function chargeFieldKey(index: number, fieldName: ChargeFieldName): string {
+ return `charge-${index}-${fieldName}`
+}
+
function describeGenerationError(error: unknown): GenerationErrorDescription {
if (error instanceof ApiError) {
const authKey = error.status === 401 ? 'AUTH_401' : error.status === 403 ? 'AUTH_403' : null
@@ -1371,14 +1697,15 @@ function isRecord(value: unknown): value is Record {
width: 100%;
min-width: 0;
min-height: 40px;
- border: 1px solid var(--th-color-border);
+ border: 1px solid #b9c7dc;
border-radius: 6px;
- background: var(--th-color-white);
+ background: #fbfdff;
color: var(--th-color-navy-950);
font: inherit;
font-weight: 700;
padding: 10px 11px;
outline: none;
+ box-shadow: 0 1px 2px rgb(15 23 42 / 5%), inset 0 0 0 1px rgb(15 23 42 / 3%);
transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
@@ -1392,7 +1719,7 @@ function isRecord(value: unknown): value is Record {
.field select:hover,
.field textarea:hover,
.charge-grid input:hover {
- border-color: #b9c8dc;
+ border-color: #8fa4c2;
}
.field input:focus-visible,
@@ -1408,6 +1735,38 @@ function isRecord(value: unknown): value is Record {
outline-offset: 2px;
}
+.field input.is-invalid,
+.field select.is-invalid,
+.field textarea.is-invalid,
+.charge-grid input.is-invalid {
+ border-color: #e11d48;
+ background: #fff7f9;
+ box-shadow: 0 0 0 3px rgb(225 29 72 / 12%), inset 0 0 0 1px rgb(225 29 72 / 8%);
+}
+
+.date-control input.is-invalid + .date-preview,
+.number-control input.is-invalid + .number-suffix {
+ border-color: #e11d48;
+ background: #fff1f3;
+ color: #be123c;
+}
+
+.field-label--required::after,
+.control-caption--required::after {
+ content: "*";
+ margin-left: 4px;
+ color: #e11d48;
+ font-weight: 900;
+}
+
+.field-error {
+ margin: -2px 0 0;
+ color: #be123c;
+ font-size: 11px;
+ font-weight: 800;
+ line-height: 1.45;
+}
+
.directory-control {
display: grid;
min-width: 0;