From 6da4dc244fe00bb9416b280be9c50f8a1b44383c Mon Sep 17 00:00:00 2001 From: gustavobascope Date: Fri, 15 Sep 2023 18:59:13 +0000 Subject: [PATCH 1/9] Added a Loading Button inspector configuration --- src/components/task.vue | 20 +++++++++++++++++++- src/form-builder-controls.js | 6 ++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/task.vue b/src/components/task.vue index e8f34bc43..e349733fb 100644 --- a/src/components/task.vue +++ b/src/components/task.vue @@ -98,6 +98,7 @@ export default { hasErrors: false, refreshScreen: 0, redirecting: null, + loadingButton: false }; }, watch: { @@ -175,6 +176,9 @@ export default { }, screen: { handler() { + console.log(this.screen.config); + this.findSubmitButtonConfigs(this.screen.config); + console.log(this.loadingButton); if (!this.screen) { return; } @@ -303,6 +307,10 @@ export default { if (this.task.process_request.status === 'COMPLETED') { this.loadNextAssignedTask(parentRequestId); + } else if (this.loadingButton) { + this.loadNextAssignedTask(parentRequestId); + console.log("flag closetask"); + } else if (this.task.allow_interstitial) { this.task.interstitial_screen['_interstitial'] = true; this.screen = this.task.interstitial_screen; @@ -377,7 +385,7 @@ export default { this.disabled = false; }); - if (this.task && this.task.allow_interstitial) { + if (this.task && this.task.allow_interstitial && !this.loadingButton) { this.task.interstitial_screen['_interstitial'] = true; this.screen = this.task.interstitial_screen; } @@ -500,6 +508,16 @@ export default { requestIdNode.setAttribute('content', this.requestId); } }, + findSubmitButtonConfigs(items) { + items.forEach((item) => { + if (item.component === "FormButton" && item.config.event === "submit") { + this.loadingButton = item.config.loading; + } + if (item.items && item.items.length > 0) { + this.findSubmitButtonConfigs(item.items); + } + }); + }, }, mounted() { this.screenId = this.initialScreenId; diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js index caadde5d8..f6993190b 100644 --- a/src/form-builder-controls.js +++ b/src/form-builder-controls.js @@ -583,6 +583,12 @@ export default [ validation: 'regex:/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(? Date: Thu, 21 Sep 2023 14:17:34 +0000 Subject: [PATCH 2/9] Added the configuration for the Loading Submit Button --- src/components/inspector/index.js | 1 + .../inspector/loading-submit-button.vue | 98 +++++++++++++++++++ src/components/renderer/form-button.vue | 30 ++++-- src/components/task.vue | 24 ++--- src/components/vue-form-renderer.vue | 4 +- src/form-builder-controls.js | 11 +-- src/form-control-common-properties.js | 8 ++ src/mixins/Json2Vue.js | 4 +- src/mixins/ScreenBase.js | 4 +- 9 files changed, 147 insertions(+), 37 deletions(-) create mode 100644 src/components/inspector/loading-submit-button.vue diff --git a/src/components/inspector/index.js b/src/components/inspector/index.js index c3c417107..9de85c1aa 100644 --- a/src/components/inspector/index.js +++ b/src/components/inspector/index.js @@ -12,3 +12,4 @@ export { default as ImageVariable } from './image-variable.vue'; export { default as InputVariable } from './input-variable.vue'; export { default as Tooltip } from './tooltip'; export { default as DeviceVisibility } from './device-visibility'; +export { default as LoadingSubmitButton } from './loading-submit-button'; diff --git a/src/components/inspector/loading-submit-button.vue b/src/components/inspector/loading-submit-button.vue new file mode 100644 index 000000000..fb9d20e0c --- /dev/null +++ b/src/components/inspector/loading-submit-button.vue @@ -0,0 +1,98 @@ + + + diff --git a/src/components/renderer/form-button.vue b/src/components/renderer/form-button.vue index 4e74e3e7d..2d7b6d258 100644 --- a/src/components/renderer/form-button.vue +++ b/src/components/renderer/form-button.vue @@ -1,7 +1,16 @@ @@ -11,10 +20,14 @@ import Mustache from 'mustache'; import { mapActions, mapState } from "vuex"; import { getValidPath } from '@/mixins'; - export default { mixins: [getValidPath], - props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData'], + props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData', 'loading', 'loadingLabel'], + data() { + return { + showSpinner: false + }; + }, computed: { ...mapState('globalErrorsModule', ['valid']), classList() { @@ -65,9 +78,12 @@ export default { this.setValue(this.$parent, this.name, this.fieldValue); } if (this.event === 'submit') { + if (this.loading) { + this.showSpinner = true; + } this.$emit('input', this.fieldValue); - this.$nextTick(()=>{ - this.$emit('submit', this.eventData); + this.$nextTick(() => { + this.$emit('submit', this.eventData, this.loading); }); return; } diff --git a/src/components/task.vue b/src/components/task.vue index e349733fb..cab3c22b5 100644 --- a/src/components/task.vue +++ b/src/components/task.vue @@ -79,7 +79,8 @@ export default { csrfToken: { type: String, default: null }, value: { type: Object, default: () => {} }, beforeLoadTask: { type: Function, default: defaultBeforeLoadTask }, - initialLoopContext: { type: String, default: "" } + initialLoopContext: { type: String, default: "" }, + loading: { type: Number, default: null } }, data() { return { @@ -176,9 +177,6 @@ export default { }, screen: { handler() { - console.log(this.screen.config); - this.findSubmitButtonConfigs(this.screen.config); - console.log(this.loadingButton); if (!this.screen) { return; } @@ -309,7 +307,6 @@ export default { } else if (this.loadingButton) { this.loadNextAssignedTask(parentRequestId); - console.log("flag closetask"); } else if (this.task.allow_interstitial) { this.task.interstitial_screen['_interstitial'] = true; @@ -370,7 +367,7 @@ export default { } return 'card-header text-capitalize text-white ' + header; }, - submit(formData = null) { + submit(formData = null, loading = false) { //single click if (this.disabled) { return; @@ -380,6 +377,10 @@ export default { if (formData) { this.onUpdate(Object.assign({}, this.requestData, formData)); } + + if (loading) { + this.loadingButton = true; + } this.$emit('submit', this.task); this.$nextTick(() => { this.disabled = false; @@ -508,16 +509,7 @@ export default { requestIdNode.setAttribute('content', this.requestId); } }, - findSubmitButtonConfigs(items) { - items.forEach((item) => { - if (item.component === "FormButton" && item.config.event === "submit") { - this.loadingButton = item.config.loading; - } - if (item.items && item.items.length > 0) { - this.findSubmitButtonConfigs(item.items); - } - }); - }, + }, mounted() { this.screenId = this.initialScreenId; diff --git a/src/components/vue-form-renderer.vue b/src/components/vue-form-renderer.vue index 632b44f3b..212cd1221 100644 --- a/src/components/vue-form-renderer.vue +++ b/src/components/vue-form-renderer.vue @@ -231,8 +231,8 @@ export default { node.$children.forEach(child => this.registerCustomFunctions(child)); } }, - submit() { - this.$emit('submit', this.data); + submit(eventData, loading = false) { + this.$emit('submit', this.data, loading); }, parseCss() { const containerSelector = `.${this.containerClass}`; diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js index f6993190b..51f8ddad3 100644 --- a/src/form-builder-controls.js +++ b/src/form-builder-controls.js @@ -38,6 +38,7 @@ import { defaultValueProperty, buttonTypeEvent, tooltipProperty, + LoadingSubmitButtonProperty } from './form-control-common-properties'; export default [ @@ -582,15 +583,9 @@ export default [ helper: 'A variable name is a symbolic name to reference information.', validation: 'regex:/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(? `[${match.substr(1)}]`); }, - submit() { - this.$emit('submit', this.value); + submit(eventData, loading = false) { + this.$emit('submit', this.value, loading); }, buildComponent(definition) { if (window.ProcessMaker && window.ProcessMaker.EventBus) { diff --git a/src/mixins/ScreenBase.js b/src/mixins/ScreenBase.js index cb6935cae..07dd17906 100644 --- a/src/mixins/ScreenBase.js +++ b/src/mixins/ScreenBase.js @@ -145,7 +145,7 @@ export default { return 'MUSTACHE: ' + e.message; } }, - async submitForm() { + async submitForm(eventData, loading = false) { await this.validateNow(findRootScreen(this)); this.hasSubmitted(true); if (!this.valid__ || this.disableSubmit__) { @@ -155,7 +155,7 @@ export default { // if the form is not valid the data is not emitted return; } - this.$emit('submit', this.vdata); + this.$emit('submit', this.vdata, loading); }, resetValue(safeDotName, variableName) { this.setValue(safeDotName, null); From 242ef731fe771e1c74d5bfe7274735dc1bf7f398 Mon Sep 17 00:00:00 2001 From: gustavobascope Date: Thu, 21 Sep 2023 15:08:55 +0000 Subject: [PATCH 3/9] Style Adjustments --- src/components/inspector/loading-submit-button.vue | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/inspector/loading-submit-button.vue b/src/components/inspector/loading-submit-button.vue index fb9d20e0c..83ff1bce7 100644 --- a/src/components/inspector/loading-submit-button.vue +++ b/src/components/inspector/loading-submit-button.vue @@ -8,7 +8,6 @@ class="mb-3" :options="options.map((option) => option.value)" :custom-label="getLabelFromValue" - /> {{ $t("Choose whether the button should submit the form") }} @@ -18,15 +17,13 @@ v-model="loading" :toggle="false" :helper="$t('Loading Submit Button')" - /> - From 31424129165b320ae7ea9b8570556eb59f199daf Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Fri, 22 Sep 2023 14:27:43 -0700 Subject: [PATCH 4/9] Emit loading button --- src/components/task.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/task.vue b/src/components/task.vue index cab3c22b5..020f1966a 100644 --- a/src/components/task.vue +++ b/src/components/task.vue @@ -381,7 +381,7 @@ export default { if (loading) { this.loadingButton = true; } - this.$emit('submit', this.task); + this.$emit('submit', this.task, loading); this.$nextTick(() => { this.disabled = false; }); From bd7a97c38ba69f6ba190f6f17acc6e4c1925db33 Mon Sep 17 00:00:00 2001 From: gustavobascope Date: Mon, 25 Sep 2023 16:06:11 +0000 Subject: [PATCH 5/9] Fix configuration for many buttons --- .../inspector/loading-submit-button.vue | 36 ++++++++++++++----- src/components/renderer/form-button.vue | 2 +- src/components/task.vue | 2 ++ 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/src/components/inspector/loading-submit-button.vue b/src/components/inspector/loading-submit-button.vue index 83ff1bce7..1a8e52450 100644 --- a/src/components/inspector/loading-submit-button.vue +++ b/src/components/inspector/loading-submit-button.vue @@ -69,19 +69,36 @@ export default { }, }, watch: { - value() { - if (this.value == undefined) { + event() { + this.$emit('input', this.event); + }, + loading() { + if (this.loading == undefined) { this.loading = false; - this.loadingLabel = null; - } else { - this.event = this.value; + this.loadingLabel = 'Loading...' + this.$emit('input', this.event); + } + }, + loadingLabel() { + if (this.loadingLabel == undefined) { this.loading = false; - this.loadingLabel = 'Loading...'; + this.loadingLabel = 'Loading...' + this.$emit('input', this.event); } }, - event() { + value() { + this.event = this.value; this.$emit('input', this.event); - }, + } + }, + mounted() { + + if (this.loading == undefined) { + this.loading = false; + this.loadingLabel = 'Loading...' + this.$emit('input', this.event); + } + }, methods: { getLabelFromValue(value) { @@ -90,6 +107,7 @@ export default { ); return selectedOption ? selectedOption.content : null; }, - } + }, + }; diff --git a/src/components/renderer/form-button.vue b/src/components/renderer/form-button.vue index 2d7b6d258..c909d512b 100644 --- a/src/components/renderer/form-button.vue +++ b/src/components/renderer/form-button.vue @@ -10,7 +10,7 @@ :disabled="showSpinner" > - {{ showSpinner ? loadingLabel : label }} + {{ showSpinner ? (!loadingLabel ? 'Loading...': loadingLabel) : label }} diff --git a/src/components/task.vue b/src/components/task.vue index 020f1966a..53e9871c8 100644 --- a/src/components/task.vue +++ b/src/components/task.vue @@ -380,6 +380,8 @@ export default { if (loading) { this.loadingButton = true; + } else { + this.loadingButton = false; } this.$emit('submit', this.task, loading); this.$nextTick(() => { From d4c7405733d0beffae343d22ca0af8fa227f0d26 Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Mon, 25 Sep 2023 14:41:22 -0700 Subject: [PATCH 6/9] Disable submit buttons while loading --- src/components/task.vue | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/task.vue b/src/components/task.vue index 53e9871c8..80536e494 100644 --- a/src/components/task.vue +++ b/src/components/task.vue @@ -265,10 +265,15 @@ export default { }); }, prepareTask() { - this.resetScreenState(); - this.requestData = _.get(this.task, 'request_data', {}); - this.loopContext = _.get(this.task, "loop_context", ""); - this.refreshScreen++; + // If the immediate task status is completed and we are waiting with a loading button, + // do not reset the screen because that would stop displaying the loading spinner + // before the next task is ready. + if (!this.loadingButton || this.task.status === 'ACTIVE') { + this.resetScreenState(); + this.requestData = _.get(this.task, 'request_data', {}); + this.loopContext = _.get(this.task, "loop_context", ""); + this.refreshScreen++; + } this.$emit('task-updated', this.task); @@ -280,6 +285,8 @@ export default { } }, resetScreenState() { + this.loadingButton = false; + this.disabled = false; if (this.$refs.renderer && this.$refs.renderer.$children[0]) { this.$refs.renderer.$children[0].currentPage = 0; } @@ -384,9 +391,6 @@ export default { this.loadingButton = false; } this.$emit('submit', this.task, loading); - this.$nextTick(() => { - this.disabled = false; - }); if (this.task && this.task.allow_interstitial && !this.loadingButton) { this.task.interstitial_screen['_interstitial'] = true; From 549177f9e209b1f4da2a26eb89c794df3a2b90f0 Mon Sep 17 00:00:00 2001 From: Gustavo Bascope Date: Tue, 26 Sep 2023 16:14:50 -0400 Subject: [PATCH 7/9] Submit Configuration Fix --- src/components/inspector/index.js | 1 + .../inspector/label-submit-button.vue | 46 ++++++++++ .../inspector/loading-submit-button.vue | 90 +++---------------- src/form-builder-controls.js | 5 +- src/form-control-common-properties.js | 14 ++- 5 files changed, 74 insertions(+), 82 deletions(-) create mode 100644 src/components/inspector/label-submit-button.vue diff --git a/src/components/inspector/index.js b/src/components/inspector/index.js index 9de85c1aa..ee9503130 100644 --- a/src/components/inspector/index.js +++ b/src/components/inspector/index.js @@ -13,3 +13,4 @@ export { default as InputVariable } from './input-variable.vue'; export { default as Tooltip } from './tooltip'; export { default as DeviceVisibility } from './device-visibility'; export { default as LoadingSubmitButton } from './loading-submit-button'; +export { default as LabelSubmitButton } from './label-submit-button'; diff --git a/src/components/inspector/label-submit-button.vue b/src/components/inspector/label-submit-button.vue new file mode 100644 index 000000000..21921b82f --- /dev/null +++ b/src/components/inspector/label-submit-button.vue @@ -0,0 +1,46 @@ + + + + \ No newline at end of file diff --git a/src/components/inspector/loading-submit-button.vue b/src/components/inspector/loading-submit-button.vue index 1a8e52450..6a7bcc14e 100644 --- a/src/components/inspector/loading-submit-button.vue +++ b/src/components/inspector/loading-submit-button.vue @@ -1,30 +1,12 @@ @@ -34,80 +16,30 @@ export default { props: ['value', 'selectedControl'], data() { return { - options: [ - { - value: "submit", - content: "Submit Button" - }, - { - value: "script", - content: "Regular Button" - } - ], - event: 'submit', + event: "", + loading: false, }; }, computed: { - loadingLabel: { - get() { - return this.selectedControl.config.loadingLabel; - }, - set(value) { - this.selectedControl.config.loadingLabel = value; - }, - }, - loading: { - get() { - return this.selectedControl.config.loading; - }, - set(value) { - this.selectedControl.config.loading = value; - }, - }, mode() { return this.$root.$children[0].mode; }, }, watch: { - event() { - this.$emit('input', this.event); - }, loading() { - if (this.loading == undefined) { - this.loading = false; - this.loadingLabel = 'Loading...' - this.$emit('input', this.event); - } + this.$emit('input', this.loading); }, - loadingLabel() { - if (this.loadingLabel == undefined) { + value() { + if (typeof(this.value) === "undefined") { this.loading = false; - this.loadingLabel = 'Loading...' - this.$emit('input', this.event); } }, - value() { - this.event = this.value; - this.$emit('input', this.event); + "selectedControl.config.event": function (newVal) { + this.event = newVal; } }, mounted() { - - if (this.loading == undefined) { - this.loading = false; - this.loadingLabel = 'Loading...' - this.$emit('input', this.event); - } - - }, - methods: { - getLabelFromValue(value) { - const selectedOption = this.options.find( - (option) => option.value == value - ); - return selectedOption ? selectedOption.content : null; - }, - }, - + this.event = this.selectedControl.config.event; + } }; diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js index 51f8ddad3..ea2fe1bb5 100644 --- a/src/form-builder-controls.js +++ b/src/form-builder-controls.js @@ -38,7 +38,8 @@ import { defaultValueProperty, buttonTypeEvent, tooltipProperty, - LoadingSubmitButtonProperty + LoadingSubmitButtonProperty, + LabelSubmitButtonProperty } from './form-control-common-properties'; export default [ @@ -585,7 +586,9 @@ export default [ }, }, + buttonTypeEvent, LoadingSubmitButtonProperty, + LabelSubmitButtonProperty, tooltipProperty, { type: 'FormInput', diff --git a/src/form-control-common-properties.js b/src/form-control-common-properties.js index 0aae9e0e0..50a7463e3 100644 --- a/src/form-control-common-properties.js +++ b/src/form-control-common-properties.js @@ -266,8 +266,18 @@ export const deviceVisibilityProperty = { export const LoadingSubmitButtonProperty = { type: 'LoadingSubmitButton', - field: 'event', + field: 'loading', + config: { + label: 'Loading Submit Button', + helper: 'Loading Submit Button', + }, +}; + +export const LabelSubmitButtonProperty = { + type: 'LabelSubmitButton', + field: 'loadingLabel', config: { - label: 'Type ', + label: 'Loading Submit Button Label', + helper: 'Loading Submit Button Label', }, }; From 0797fcb87335a7ed90191e37c4a6b81f945b1d23 Mon Sep 17 00:00:00 2001 From: Rodrigo Quelca Date: Tue, 26 Sep 2023 16:58:16 -0400 Subject: [PATCH 8/9] loading label support --- .../inspector/label-submit-button.vue | 62 +++++++++---------- src/form-builder-controls.js | 1 + 2 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/components/inspector/label-submit-button.vue b/src/components/inspector/label-submit-button.vue index 21921b82f..ee7e8f669 100644 --- a/src/components/inspector/label-submit-button.vue +++ b/src/components/inspector/label-submit-button.vue @@ -1,46 +1,44 @@ + + - - \ No newline at end of file + }, + mounted() { + this.event = this.selectedControl.config.event; + } +}; + diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js index ea2fe1bb5..f93d23b4f 100644 --- a/src/form-builder-controls.js +++ b/src/form-builder-controls.js @@ -561,6 +561,7 @@ export default [ label: 'New Submit', variant: 'primary', event: 'submit', + loadingLabel: 'loading', defaultSubmit: true, name: null, fieldValue: null, From 856dd3c03305f3f81f8d467bbb8321c72cdedb40 Mon Sep 17 00:00:00 2001 From: Gustavo Bascope Date: Tue, 26 Sep 2023 18:01:04 -0400 Subject: [PATCH 9/9] Fix Loading Submit Label configuration --- .../inspector/label-submit-button.vue | 38 +++++++++---------- .../inspector/loading-submit-button.vue | 9 ++--- src/form-builder-controls.js | 3 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/inspector/label-submit-button.vue b/src/components/inspector/label-submit-button.vue index ee7e8f669..686d07eca 100644 --- a/src/components/inspector/label-submit-button.vue +++ b/src/components/inspector/label-submit-button.vue @@ -1,44 +1,44 @@ - + diff --git a/src/components/inspector/loading-submit-button.vue b/src/components/inspector/loading-submit-button.vue index 6a7bcc14e..cc2f3bde0 100644 --- a/src/components/inspector/loading-submit-button.vue +++ b/src/components/inspector/loading-submit-button.vue @@ -1,5 +1,5 @@