moving towards real data

frontend/src/components/modals/CreatClientModal.vue

@@ -14,12 +14,15 @@
 		</div>
 
 		<Form
+			ref="formRef"
 			:fields="formFields"
 			:form-data="formData"
 			:show-cancel-button="true"
 			:validate-on-change="false"
 			:validate-on-blur="true"
 			:validate-on-submit="true"
+			:loading="isSubmitting"
+			:disable-on-loading="true"
 			submit-button-text="Create Client"
 			cancel-button-text="Cancel"
 			@submit="handleSubmit"
@@ -41,6 +44,8 @@ const modalStore = useModalStore();
 // Modal visibility computed property
 const isVisible = computed(() => modalStore.isModalOpen("createClient"));
 const customerNames = ref([]);
+// Form reference for controlling its state
+const formRef = ref(null);
 // Form data
 const formData = reactive({
 	customertype: "",
@@ -78,6 +83,16 @@ const modalOptions = {
 
 // Form field definitions
 const formFields = computed(() => [
+	{
+		name: "addressTitle",
+		label: "Address Title",
+		type: "text",
+		required: true,
+		placeholder: "Enter address title",
+		helpText: "A short title to identify this address (e.g., Johnson Home, Johnson Office)",
+		cols: 12,
+		md: 6,
+	},
 	{
 		name: "customertype",
 		label: "Client Type",
@@ -318,15 +333,38 @@ function getStatusIcon(type) {
 	}
 }
 
+// Submission state to prevent double submission
+const isSubmitting = ref(false);
+
 // Handle form submission
-async function handleSubmit() {
+async function handleSubmit(formDataFromEvent) {
+	// Prevent double submission with detailed logging
+	if (isSubmitting.value) {
+		console.warn(
+			"CreateClientModal: Form submission already in progress, ignoring duplicate submission",
+		);
+		return;
+	}
+
+	console.log(
+		"CreateClientModal: Form submission started with data:",
+		formDataFromEvent || formData,
+	);
+
+	isSubmitting.value = true;
+
 	try {
 		showStatusMessage("Creating client...", "info");
 
-		// Convert form data to the expected format
+		// Use the form data from the event if provided, otherwise use reactive formData
+		const dataToSubmit = formDataFromEvent || formData;
+
+		console.log("CreateClientModal: Calling API with data:", dataToSubmit);
 
 		// Call API to create client
-		const response = await Api.createClient(formData);
+		const response = await Api.createClient(dataToSubmit);
+
+		console.log("CreateClientModal: API response received:", response);
 
 		if (response && response.success) {
 			showStatusMessage("Client created successfully!", "success");
@@ -339,8 +377,15 @@ async function handleSubmit() {
 			throw new Error(response?.message || "Failed to create client");
 		}
 	} catch (error) {
-		console.error("Error creating client:", error);
+		console.error("CreateClientModal: Error creating client:", error);
 		showStatusMessage(error.message || "Failed to create client. Please try again.", "error");
+	} finally {
+		isSubmitting.value = false;
+		// Also reset the Form component's internal submission state
+		if (formRef.value && formRef.value.stopLoading) {
+			formRef.value.stopLoading();
+		}
+		console.log("CreateClientModal: Form submission completed, isSubmitting reset to false");
 	}
 }
 
@@ -351,7 +396,7 @@ function handleCancel() {
 
 // Handle modal close
 function handleClose() {
-	modalStore.closeCreateClient();
+	modalStore.closeModal("createClient");
 	resetForm();
 }
 
@@ -383,13 +428,9 @@ watch(isVisible, async () => {
 	if (isVisible.value) {
 		try {
 			const names = await Api.getCustomerNames();
-			console.log("Loaded customer names:", names);
 			customerNames.value = names;
 		} catch (error) {
 			console.error("Error loading customer names:", error);
-			// Set some test data to debug if autocomplete works
-			customerNames.value = ["Test Customer 1", "Test Customer 2", "Another Client"];
-			console.log("Using test customer names:", customerNames.value);
 		}
 	}
 });