From 402ab8625f650aa9d8b2125c02fb215b5bb257dc Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 14:13:08 +0200 Subject: [PATCH 01/15] Fix SVGs not loaded in Vite dev mode --- vite-svg-loader.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vite-svg-loader.js b/vite-svg-loader.js index 87cc6c97e8..f40baee0f3 100644 --- a/vite-svg-loader.js +++ b/vite-svg-loader.js @@ -51,7 +51,9 @@ module.exports = function svgLoader (options = {}) { transformAssetUrls: false }) - return `${code}\nexport default { render: render }` + const template = code instanceof Promise ? await code : code; + + return `${template}\nexport default { render: render }` } } } From dc078906b60814b2952b5443e84e88a414f23dc3 Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 14:29:15 +0200 Subject: [PATCH 02/15] Show loader when actions are running in confirmation modal Adds a loader to the confirmation modal when an action is running in the background to indicate that something is going on. Before the UI did not give any feedback. --- resources/js/components/data-list/Action.vue | 11 ++++-- resources/js/components/data-list/Actions.js | 17 ++++++---- .../components/modals/ConfirmationModal.vue | 34 +++++++++++++------ 3 files changed, 42 insertions(+), 20 deletions(-) diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue index af870a14d8..035f043ff8 100644 --- a/resources/js/components/data-list/Action.vue +++ b/resources/js/components/data-list/Action.vue @@ -8,6 +8,7 @@ :title="action.title" :danger="action.dangerous" :buttonText="runButtonText" + :submitting="running" @confirm="confirm" @cancel="reset" > @@ -71,6 +72,7 @@ export default { confirming: false, fieldset: {tabs:[{fields:this.action.fields}]}, values: this.action.values, + running: false, } }, @@ -113,6 +115,9 @@ export default { }, methods: { + onDone() { + this.running = false; + }, select() { if (this.action.confirm) { @@ -120,11 +125,13 @@ export default { return; } - this.$emit('selected', this.action, this.values); + this.running = true; + this.$emit('selected', this.action, this.values, this.onDone); }, confirm() { - this.$emit('selected', this.action, this.values); + this.running = true; + this.$emit('selected', this.action, this.values, this.onDone); }, reset() { diff --git a/resources/js/components/data-list/Actions.js b/resources/js/components/data-list/Actions.js index a72480fdbc..180f101d30 100644 --- a/resources/js/components/data-list/Actions.js +++ b/resources/js/components/data-list/Actions.js @@ -30,8 +30,7 @@ export default { }, methods: { - - run(action, values) { + run(action, values, done) { this.$emit('started'); this.errors = {}; @@ -43,11 +42,15 @@ export default { values }; - this.$axios.post(this.url, payload, { responseType: 'blob' }).then(response => { - response.headers['content-disposition'] - ? this.handleFileDownload(response) // Pass blob response for downloads - : this.handleActionSuccess(response); // Otherwise handle as normal, converting from JSON - }).catch(error => this.handleActionError(error.response)); + this.$axios + .post(this.url, payload, { responseType: 'blob' }) + .then((response) => { + response.headers['content-disposition'] + ? this.handleFileDownload(response) // Pass blob response for downloads + : this.handleActionSuccess(response); // Otherwise handle as normal, converting from JSON + }) + .catch((error) => this.handleActionError(error.response)) + .finally(() => done()); }, handleActionSuccess(response) { diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index 068a74da72..bf70e19df2 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -4,17 +4,25 @@
{{ __(title) }}
-
- -

- -

{{ __('Are you sure?') }}

+ +
+
+ +

+ +

{{ __('Are you sure?') }}

+ - +
+
+ +
-
-
@@ -48,6 +56,10 @@ export default { disabled: { type: Boolean, default: false, + }, + submitting: { + type: Boolean, + default: false, } }, @@ -69,7 +81,7 @@ export default { this.$emit('cancel') }, submit() { - this.$emit('confirm') + this.$emit('confirm'); } }, @@ -77,7 +89,7 @@ export default { this.escBinding = this.$keys.bind('esc', this.dismiss) }, - beforeDestroy() { + beforeDestroy() { this.escBinding.destroy() }, } From d3f2548ec84d40d64621477fe6c5a268881b0a98 Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 14:42:08 +0200 Subject: [PATCH 03/15] Decrease confirmation modal loader size --- resources/js/components/modals/ConfirmationModal.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index bf70e19df2..9ba97c23be 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -15,7 +15,7 @@
- +
@@ -66,7 +66,6 @@ export default { data() { return { escBinding: null, - enterBinding: null, } }, From 77afab6da753d2b1028b8b634824e66ab8c40501 Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 14:43:31 +0200 Subject: [PATCH 04/15] Add loader to create folder action --- resources/js/components/assets/Browser/CreateFolder.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/resources/js/components/assets/Browser/CreateFolder.vue b/resources/js/components/assets/Browser/CreateFolder.vue index 5a82d54af1..c880a9370a 100644 --- a/resources/js/components/assets/Browser/CreateFolder.vue +++ b/resources/js/components/assets/Browser/CreateFolder.vue @@ -3,6 +3,7 @@ @@ -42,6 +43,7 @@ export default { buttonText: __('Create'), directory: this.initialDirectory, errors: {}, + creating: false, } }, @@ -59,11 +61,15 @@ export default { title: this.title }; + this.creating = true; + this.$axios.post(url, payload).then(response => { this.$toast.success(__('Folder created')); this.$emit('created', response.data); }).catch(e => { this.handleErrors(e); + }).finally(() => { + this.creating = false; }); }, From c61c1089c8faf2f21e7b90bc7a42106e96beb633 Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 14:43:57 +0200 Subject: [PATCH 05/15] Fix create folder action submitted twice using submit button --- resources/js/components/assets/Browser/CreateFolder.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/resources/js/components/assets/Browser/CreateFolder.vue b/resources/js/components/assets/Browser/CreateFolder.vue index c880a9370a..6b2ff4a3b0 100644 --- a/resources/js/components/assets/Browser/CreateFolder.vue +++ b/resources/js/components/assets/Browser/CreateFolder.vue @@ -87,7 +87,6 @@ export default { }, created() { - this.$keys.bindGlobal('enter', this.submit) this.$keys.bindGlobal('esc', this.cancel) }, From ec980f2665cdab6c0498499b67741779a067d87f Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 14:45:17 +0200 Subject: [PATCH 06/15] Rename submitting prop --- resources/js/components/assets/Browser/CreateFolder.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/js/components/assets/Browser/CreateFolder.vue b/resources/js/components/assets/Browser/CreateFolder.vue index 6b2ff4a3b0..68ab4e5912 100644 --- a/resources/js/components/assets/Browser/CreateFolder.vue +++ b/resources/js/components/assets/Browser/CreateFolder.vue @@ -3,7 +3,7 @@ @@ -43,7 +43,7 @@ export default { buttonText: __('Create'), directory: this.initialDirectory, errors: {}, - creating: false, + submitting: false, } }, @@ -61,7 +61,7 @@ export default { title: this.title }; - this.creating = true; + this.submitting = true; this.$axios.post(url, payload).then(response => { this.$toast.success(__('Folder created')); @@ -69,7 +69,7 @@ export default { }).catch(e => { this.handleErrors(e); }).finally(() => { - this.creating = false; + this.submitting = false; }); }, From c5150f51de3c7dc979e5b91b7b996cdc992d9170 Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 14:51:04 +0200 Subject: [PATCH 07/15] Add loader to blueprint resetter modal and add some blur --- resources/js/components/blueprints/BlueprintResetter.vue | 6 ++++++ resources/js/components/modals/ConfirmationModal.vue | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/resources/js/components/blueprints/BlueprintResetter.vue b/resources/js/components/blueprints/BlueprintResetter.vue index b4e30be1f7..a8ee8b0fd6 100644 --- a/resources/js/components/blueprints/BlueprintResetter.vue +++ b/resources/js/components/blueprints/BlueprintResetter.vue @@ -5,6 +5,7 @@ :bodyText="modalBody" :buttonText="__('Reset')" :danger="true" + :submitting="submitting" @confirm="confirmed" @cancel="cancel" > @@ -36,6 +37,7 @@ export default { return { resetting: false, redirectFromServer: null, + submitting: false, } }, @@ -69,6 +71,8 @@ export default { }, confirmed() { + this.submitting = true; + this.$axios.delete(this.resetUrl) .then(response => { this.redirectFromServer = data_get(response, 'data.redirect'); @@ -76,6 +80,7 @@ export default { }) .catch(() => { this.$toast.error(__('Something went wrong')); + this.submitting = false; }); }, @@ -92,6 +97,7 @@ export default { this.$toast.success(__('Reset')); this.$emit('reset'); + this.submitting = false; }, cancel() { diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index 9ba97c23be..45e2a0f400 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -6,7 +6,7 @@
-
+

From a7c7af6ac0f3c607a1ed820b3f7cd31f8b8acf52 Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 15:00:32 +0200 Subject: [PATCH 08/15] Make sure form is not submitted when already submitting --- resources/js/components/modals/ConfirmationModal.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index 45e2a0f400..9c953e6d8f 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -80,6 +80,10 @@ export default { this.$emit('cancel') }, submit() { + if (this.submitting) { + return; + } + this.$emit('confirm'); } }, From b7c0dc055376aea6d5ecffd8f74c34314501720b Mon Sep 17 00:00:00 2001 From: Maurice Hildebrandt Date: Mon, 26 Aug 2024 16:08:42 +0200 Subject: [PATCH 09/15] Revert "Fix SVGs not loaded in Vite dev mode" This reverts commit 402ab8625f650aa9d8b2125c02fb215b5bb257dc. --- vite-svg-loader.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/vite-svg-loader.js b/vite-svg-loader.js index f40baee0f3..87cc6c97e8 100644 --- a/vite-svg-loader.js +++ b/vite-svg-loader.js @@ -51,9 +51,7 @@ module.exports = function svgLoader (options = {}) { transformAssetUrls: false }) - const template = code instanceof Promise ? await code : code; - - return `${template}\nexport default { render: render }` + return `${code}\nexport default { render: render }` } } } From 409257093ab2e633d3447cd1e1a79c4f1030c9db Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Wed, 11 Sep 2024 14:22:42 -0400 Subject: [PATCH 10/15] object syntax --- resources/js/components/modals/ConfirmationModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index 04b0d3677a..d14ad90eb1 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -5,7 +5,7 @@ {{ __(title) }}

-
+

From dc447d030294c3eaae0a5322af369e34a1aa5981 Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Wed, 11 Sep 2024 14:50:12 -0400 Subject: [PATCH 11/15] adjust style to match other places with loading overlays --- .../js/components/modals/ConfirmationModal.vue | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index d14ad90eb1..039a4f2310 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -4,16 +4,14 @@

{{ __(title) }}
-
-
- -

- -

{{ __('Are you sure?') }}

- +
+ +

+ +

{{ __('Are you sure?') }}

 -
-
+ +
From dbc9dff05f341c629cc02dff0bd7a06468b3c59d Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Wed, 11 Sep 2024 14:50:18 -0400 Subject: [PATCH 12/15] disable cancel button too --- resources/js/components/modals/ConfirmationModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index 039a4f2310..4d6f24ab27 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -16,7 +16,7 @@
-
From 953ab91bbcec45c3c5fbcd0be0dcf81b9f3ad25e Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Wed, 11 Sep 2024 14:51:28 -0400 Subject: [PATCH 13/15] call the prop busy --- .../js/components/assets/Browser/CreateFolder.vue | 2 +- .../js/components/blueprints/BlueprintResetter.vue | 2 +- resources/js/components/data-list/Action.vue | 2 +- resources/js/components/modals/ConfirmationModal.vue | 10 +++++----- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/resources/js/components/assets/Browser/CreateFolder.vue b/resources/js/components/assets/Browser/CreateFolder.vue index 68ab4e5912..ba04482b8e 100644 --- a/resources/js/components/assets/Browser/CreateFolder.vue +++ b/resources/js/components/assets/Browser/CreateFolder.vue @@ -3,7 +3,7 @@ diff --git a/resources/js/components/blueprints/BlueprintResetter.vue b/resources/js/components/blueprints/BlueprintResetter.vue index a8ee8b0fd6..f7d983b0d1 100644 --- a/resources/js/components/blueprints/BlueprintResetter.vue +++ b/resources/js/components/blueprints/BlueprintResetter.vue @@ -5,7 +5,7 @@ :bodyText="modalBody" :buttonText="__('Reset')" :danger="true" - :submitting="submitting" + :busy="submitting" @confirm="confirmed" @cancel="cancel" > diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue index 035f043ff8..4580fa6833 100644 --- a/resources/js/components/data-list/Action.vue +++ b/resources/js/components/data-list/Action.vue @@ -8,7 +8,7 @@ :title="action.title" :danger="action.dangerous" :buttonText="runButtonText" - :submitting="running" + :busy="running" @confirm="confirm" @cancel="reset" > diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index 4d6f24ab27..09529f6eb3 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -11,13 +11,13 @@

{{ __('Are you sure?') }}

 -
+
-
@@ -52,7 +52,7 @@ export default { type: Boolean, default: false, }, - submitting: { + busy: { type: Boolean, default: false, } @@ -75,7 +75,7 @@ export default { this.$emit('cancel') }, submit() { - if (this.submitting) { + if (this.busy) { return; } From e5141a3cb80423a3295eea18b0da76c53a40e858 Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Wed, 11 Sep 2024 14:54:05 -0400 Subject: [PATCH 14/15] avoid dismiss on busy too --- resources/js/components/modals/ConfirmationModal.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue index 09529f6eb3..a6ff9da357 100644 --- a/resources/js/components/modals/ConfirmationModal.vue +++ b/resources/js/components/modals/ConfirmationModal.vue @@ -72,12 +72,12 @@ export default { methods: { dismiss() { + if (this.busy) return; + this.$emit('cancel') }, submit() { - if (this.busy) { - return; - } + if (this.busy) return; this.$emit('confirm'); } From 465a629148ca230eb4352ffa9e5013566f0af175 Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Wed, 11 Sep 2024 15:18:03 -0400 Subject: [PATCH 15/15] wrap in condition in case a function wasnt passed --- resources/js/components/data-list/Actions.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/js/components/data-list/Actions.js b/resources/js/components/data-list/Actions.js index 180f101d30..1a168f0629 100644 --- a/resources/js/components/data-list/Actions.js +++ b/resources/js/components/data-list/Actions.js @@ -50,7 +50,9 @@ export default { : this.handleActionSuccess(response); // Otherwise handle as normal, converting from JSON }) .catch((error) => this.handleActionError(error.response)) - .finally(() => done()); + .finally(() => { + if (done) done() + }); }, handleActionSuccess(response) {