handle submit event in forms

radio4000 · Oct 21, 2022 · efb0294 · efb0294
1 parent e51081f
commit efb0294
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 20 deletions.
diff --git a/examples/r4-channel-create/index.html b/examples/r4-channel-create/index.html
@@ -14,6 +14,12 @@
 
 <body>
 	<r4-channel-create></r4-channel-create>
+	<script>
+		function handleSubmit(event) {
+			console.log('Create did submit', event.detail)
+		}
+		document.querySelector('r4-channel-create').addEventListener('submit', handleSubmit)
+	</script>
 </body>
 
 </html>
diff --git a/examples/r4-channel-update/index.html b/examples/r4-channel-update/index.html
@@ -14,6 +14,12 @@
 
 <body>
 	<r4-channel-update></r4-channel-update>
+	<script>
+		function handleSubmit(event) {
+			console.log('Update did submit', event.detail)
+		}
+		document.querySelector('r4-channel-update').addEventListener('submit', handleSubmit)
+	</script>
 </body>
 
 </html>
diff --git a/examples/r4-list-channels/index.html b/examples/r4-list-channels/index.html
@@ -16,7 +16,7 @@
 	<r4-list-channels origin="https://example.org/"></r4-list-channels>
 	<script>
 		const $el = document.querySelector('r4-list-channels')
-		$el.setAttribute('origin', `${window.origin}/r4-channel-update/`)
+		$el.setAttribute('origin', `${window.origin}/examples/r4-channel-update/`)
 	</script>
 </body>
 

diff --git a/src/components/r4-channel-create.js b/src/components/r4-channel-create.js
@@ -46,26 +46,33 @@ export default class R4ChannelCreate extends R4Form {
 
 	async handleSubmit(event) {
 		event.preventDefault()
+		event.stopPropagation()
+
 		this.disableForm()
 		const channel = this.state
-		let res
+		let res = {},
+				error = null
 		try {
 			res = await sdk.createChannel({
 				name: channel.name,
 				slug: channel.slug,
 			})
 			if (res.error) {
-				console.log(res.error)
-				throw res
+				error = res
+				throw error
 			}
-		} catch (error) {
-			this.handleError(error)
+		} catch (err) {
+			this.handleError(err)
 		}
-
 		this.enableForm()
-		if (res && res.data) {
-			console.log('res.data', res.data)
+
+		const { data } = res
+		if (data) {
 			this.resetForm()
 		}
+		super.handleSubmit({
+			error,
+			data,
+		})
 	}
 }
diff --git a/src/components/r4-channel-update.js b/src/components/r4-channel-update.js
@@ -53,28 +53,34 @@ export default class R4ChannelUpdate extends R4Form {
 	}
 
 	async handleSubmit(event) {
+		event.stopPropagation()
 		event.preventDefault()
 		this.disableForm()
 
 		const channelId = this.state.id
 		const changes = { ...this.state }
 		delete changes.id
 
-		let res
+		let res = {},
+				error = null
 		try {
 			res = await sdk.updateChannel(channelId, changes)
 			if (res.error) {
 				if (res.status === 404) {
 					res.error.code = 404
 				}
-				this.handleError(res.error)
+				error = res.error
+				this.handleError(error)
 			}
-		} catch (error) {
-			this.handleError(error)
+		} catch (err) {
+			this.handleError(err)
 		}
 		this.enableForm()
-		if (res && res.data) {
+
+		const { data } = res
+		if (data) {
 			this.resetForm()
 		}
+		super.handleSubmit({error, data})
 	}
 }
diff --git a/src/components/r4-form.js b/src/components/r4-form.js
@@ -112,12 +112,27 @@ export default class R4Form extends HTMLElement {
 		return $output
 	}
 
-	async handleSubmit(event) {
-		event.preventDefault()
-		this.disableForm()
-		// ex: await this.submit()
-		this.resetForm()
-		this.enableForm()
+	async handleSubmit(submitData) {
+		const { error, data } = submitData
+		const submitEvent = new CustomEvent('submit', {
+			bubbles: true,
+			detail: {
+				error,
+				data,
+			}
+		})
+		this.dispatchEvent(submitEvent)
+
+		/*
+			 Example flow in a component extending this one:
+			 event.stopPropagation()
+			 event.preventDefault()
+			 this.disableForm()
+			 await this.myAsyncMethod()
+			 this.resetForm()
+			 this.enableForm()
+			 super.handleSubmit({error,data,})
+		 */
 	}
 
 	handleError(error) {