get create client working
This commit is contained in:
parent
4a3576168a
commit
cb33d0c3b3
11 changed files with 1179 additions and 336 deletions
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<div class="form-section">
|
||||
<h3>Address Information</h3>
|
||||
<div class="form-grid">
|
||||
<div class="form-field full-width">
|
||||
<label for="address-title"> Address Title <span class="required">*</span> </label>
|
||||
<InputText
|
||||
id="address-title"
|
||||
v-model="localFormData.addressTitle"
|
||||
:disabled="isSubmitting || isEditMode"
|
||||
placeholder="e.g., Home, Office, Site A"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field full-width">
|
||||
<label for="address-line1"> Address Line 1 <span class="required">*</span> </label>
|
||||
<InputText
|
||||
id="address-line1"
|
||||
v-model="localFormData.addressLine1"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="Street address"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field full-width">
|
||||
<label for="address-line2">Address Line 2</label>
|
||||
<InputText
|
||||
id="address-line2"
|
||||
v-model="localFormData.addressLine2"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="Apt, suite, unit, etc."
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="zipcode"> Zip Code <span class="required">*</span> </label>
|
||||
<InputText
|
||||
id="zipcode"
|
||||
v-model="localFormData.pincode"
|
||||
:disabled="isSubmitting"
|
||||
@input="handleZipcodeInput"
|
||||
maxlength="5"
|
||||
placeholder="12345"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="city"> City <span class="required">*</span> </label>
|
||||
<InputText
|
||||
id="city"
|
||||
v-model="localFormData.city"
|
||||
:disabled="isSubmitting || zipcodeLookupDisabled"
|
||||
placeholder="City"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="state"> State <span class="required">*</span> </label>
|
||||
<InputText
|
||||
id="state"
|
||||
v-model="localFormData.state"
|
||||
:disabled="isSubmitting || zipcodeLookupDisabled"
|
||||
placeholder="State"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import InputText from "primevue/inputtext";
|
||||
import Api from "../../api";
|
||||
import { useNotificationStore } from "../../stores/notifications-primevue";
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
isSubmitting: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isEditMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:formData"]);
|
||||
|
||||
const notificationStore = useNotificationStore();
|
||||
|
||||
const localFormData = computed({
|
||||
get: () => props.formData,
|
||||
set: (value) => emit("update:formData", value),
|
||||
});
|
||||
|
||||
const zipcodeLookupDisabled = ref(true);
|
||||
|
||||
const handleZipcodeInput = async (event) => {
|
||||
const input = event.target.value;
|
||||
|
||||
// Only allow digits
|
||||
const digitsOnly = input.replace(/\D/g, "");
|
||||
|
||||
// Limit to 5 digits
|
||||
if (digitsOnly.length > 5) {
|
||||
return;
|
||||
}
|
||||
|
||||
localFormData.value.pincode = digitsOnly;
|
||||
|
||||
// Reset city/state if zipcode is not complete
|
||||
if (digitsOnly.length < 5 && zipcodeLookupDisabled.value) {
|
||||
localFormData.value.city = "";
|
||||
localFormData.value.state = "";
|
||||
zipcodeLookupDisabled.value = false;
|
||||
}
|
||||
|
||||
// Fetch city/state when 5 digits entered
|
||||
if (digitsOnly.length === 5) {
|
||||
try {
|
||||
console.log("DEBUG: Looking up city/state for zip code:", digitsOnly);
|
||||
const places = await Api.getCityStateByZip(digitsOnly);
|
||||
console.log("DEBUG: Retrieved places:", places);
|
||||
if (places && places.length > 0) {
|
||||
// Auto-populate city and state
|
||||
localFormData.value.city = places[0]["city"];
|
||||
localFormData.value.state = places[0]["state"];
|
||||
zipcodeLookupDisabled.value = true;
|
||||
notificationStore.addSuccess(`Found: ${places[0]["city"]}, ${places[0]["state"]}`);
|
||||
}
|
||||
} catch (error) {
|
||||
// Enable manual entry if lookup fails
|
||||
zipcodeLookupDisabled.value = false;
|
||||
notificationStore.addWarning(
|
||||
"Could not find city/state for this zip code. Please enter manually.",
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-section {
|
||||
background: var(--surface-card);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--surface-border);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--text-color);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-field.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-weight: 500;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: var(--red-500);
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue