add validation to manager for email and phone number

lab2/src/lib/ManagerForm.svelte

@@ -28,12 +28,43 @@
 		showTitleInvalid = manager.title === ""
 	}
 
+	// Phone number validation
+	let showPhoneNumberInvalid = false
+	function validatePhoneNumber() {
+		showPhoneNumberInvalid = false
+		if (manager.phone_number === "") {
+			return
+		}
+
+		let allowedSymbols = " +()1234567890"
+		for (var symbol of manager.phone_number) {
+			console.log(symbol)
+			if (allowedSymbols.indexOf(symbol) == -1) {
+				showPhoneNumberInvalid = true
+				return
+			}
+		}
+	}
+
+	// Email validation
+	let showEmailInvalid = false
+	function validateEmail() {
+		if (manager.email === "") {
+			showEmailInvalid = false
+			return
+		}
+
+		showEmailInvalid = !manager.email.includes("@")
+	}
+
 	// Exports
 	export const validate = () => {
 		validateFirstName()
 		validateSurname()
 		validateTitle()
-		return !showFirstNameInvalid && !showSurnameInvalid && !showTitleInvalid
+		validateEmail()
+		validatePhoneNumber()
+		return !showFirstNameInvalid && !showSurnameInvalid && !showTitleInvalid && !showEmailInvalid && !showPhoneNumberInvalid
 	};
 
 	export const reset = () => {
@@ -45,6 +76,8 @@
 		showFirstNameInvalid = false
 		showSurnameInvalid = false
 		showTitleInvalid = false
+		showEmailInvalid = false
+		showPhoneNumberInvalid = false
 	};
 </script>
 
@@ -76,10 +109,16 @@
 	/>
 	<TextInput
 		bind:value={manager.phone_number}
+		bind:invalid={showPhoneNumberInvalid}
+		on:input={validatePhoneNumber}
+		invalidText={"Phone number can only contain '+', ' ', '(', ')' and numbers"}
 		labelText="Phone number"
 	/>
 	<TextInput
 		bind:value={manager.email}
+		bind:invalid={showEmailInvalid}
+		on:input={validateEmail}
+		invalidText={"Email must contain '@'"}
 		labelText="Email"
 	/>
 </Form>

lab2/src/lib/MyDataTable.svelte

@@ -102,11 +102,13 @@
 </DataTable>
 
 <Modal
+    preventCloseOnClickOutside
     bind:open={isModalShown}
     modalHeading={currentlyUpdatingId != undefined ? updateModalTitle : addModalTitle}
     primaryButtonText="Confirm"
     secondaryButtonText="Cancel"
     on:open
+    on:close={() => console.log("close")}
     on:click:button--secondary={closeModal}
     on:submit={async () => {
         let valid = dispatch("validateModal", undefined, { cancelable: true })

lab2/src/routes/Factories-Managers.svelte

@@ -52,10 +52,13 @@
         resetProcessList()
     }
 
-    let validateModal = () => {
+    let validateModal = (event) => {
         let isFactoryValid = validateFactoryForm()
         let isManagerValid = validateManagerForm()
-        return isFactoryValid && isManagerValid
+        let valid = isFactoryValid && isManagerValid
+        if (!valid) {
+            event.preventDefault()
+        }
     }
 </script>
 
@@ -91,7 +94,7 @@
     ]}
 >
     <div class="flex flex-row gap-1rem mb-1rem">
-        <div class="flex-grow">
+        <div class="flex-grow w-50">
             <p>Factory</p>
             <FactoryForm
                 bind:factory={factoryData}
@@ -99,7 +102,7 @@
                 bind:reset={resetFactoryForm}
             />
         </div>
-        <div class="flex-grow-2">
+        <div class="flex-grow w-50">
             <p>Manager</p>
             <ManagerForm
                 bind:manager={managerData}