From 12d73e0c1214dde46d1c08bd85b2981b6b49fd4e Mon Sep 17 00:00:00 2001
From: phil294 <philip@waritschlager.de>
Date: Thu, 11 May 2023 01:39:10 +0200
Subject: [PATCH] show loading animation while immediate actions load. So for
 example when you click "Fetch", you'll now see that something is happening
 when your network is slow and it's not possible to click it again while doing
 so.

---
 web/src/components/PromiseForm.vue |  6 +++++-
 web/src/views/GitInput.coffee      | 14 ++++++++++----
 web/src/views/GitInput.vue         |  2 +-
 web/src/vue-shims.d.ts             | 10 +++++-----
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web/src/components/PromiseForm.vue b/web/src/components/PromiseForm.vue
index f7bb8ec..f706a68 100644
--- a/web/src/components/PromiseForm.vue
+++ b/web/src/components/PromiseForm.vue
@@ -1,5 +1,5 @@
 <template lang="slm">
-form @submit.prevent="submit" enctype="multipart/form-data"
+form @submit.prevent="submit" enctype="multipart/form-data" ref="form_ref"
 	/ using an invisible fieldset wrapper to group disable attribute for all children (does not work on <form> directly)
 	fieldset.low-key :disabled="disabled || loading" :class="$attrs.class"
 		legend
@@ -37,7 +37,11 @@ export default
 	data: =>
 		loading: false
 	methods:
+		request_submit: ->
+			@$refs.form_ref.requestSubmit()
 		submit: (event) ->
+			if not event
+				throw new Error("Cannot call `submit` on PromiseForm directly. Use `request_submit` instead.")
 			@loading = true
 			@$emit 'submit', event
 
diff --git a/web/src/views/GitInput.coffee b/web/src/views/GitInput.coffee
index 5eb0654..aa15ced 100644
--- a/web/src/views/GitInput.coffee
+++ b/web/src/views/GitInput.coffee
@@ -126,6 +126,8 @@ export default defineComponent
 					throw e
 				else
 					console.warn e
+				if props.git_action.ignore_errors
+					emit 'success'
 				return
 			finally
 				emit 'executed'
@@ -133,12 +135,15 @@ export default defineComponent
 				data.value = result
 			emit 'success', result
 
-		do =>
+		# typing doesn't work https://github.com/vuejs/composition-api/issues/402
+		### @type {Ref<InstanceType<import('../components/PromiseForm.vue')>|null>} ###
+		# so we need the ts-ignore below. TODO
+		ref_form = ref null
+		onMounted =>
 			await get_saved()
 			if props.git_action.immediate
-				await execute()
-				if props.git_action.ignore_errors
-					emit 'success'
+				# @ts-ignore
+				await ref_form.value?.request_submit()
 		
 		{
 			command
@@ -153,4 +158,5 @@ export default defineComponent
 			has_unsaved_changes
 			save
 			params_input_refs
+			ref_form
 		}
diff --git a/web/src/views/GitInput.vue b/web/src/views/GitInput.vue
index caf0c5f..b871a4d 100644
--- a/web/src/views/GitInput.vue
+++ b/web/src/views/GitInput.vue
@@ -1,6 +1,6 @@
 <template lang="slm">
 div.col.gap-10
-	promise-form.col.gap-5 :action="execute"
+	promise-form.col.gap-5 :action="execute" ref="ref_form"
 		.row.align-center.gap-10
 			code git 
 			input.command.flex-1 v-model="command"
diff --git a/web/src/vue-shims.d.ts b/web/src/vue-shims.d.ts
index 9923fb6..2afba02 100644
--- a/web/src/vue-shims.d.ts
+++ b/web/src/vue-shims.d.ts
@@ -1,5 +1,5 @@
-declare module '*.vue' {
-	import { DefineComponent } from 'vue';
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
-}
+// https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/generator/template/src/shims-vue.d.ts
+declare module "*.vue" {
+	import Vue from "vue";
+	export default Vue;
+}
\ No newline at end of file