scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-13 00:24:42 +08:00
Code Issues Projects Releases Packages Wiki Activity

Disable action toolbar buttons for 1 second after action, to prevent multiple submits [SCI-9221]

Browse source
This commit is contained in:
Martin Artnik 2025-02-04 10:54:48 +01:00
parent 701bfd313e
commit ba997d2a73
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/javascript/vue/components/action_toolbar.vue
View file

@ -11,7 +11,7 @@
<div v-if="!loading && actions.length === 0" class="sn-action-toolbar__message">
{{ i18n.t('action_toolbar.no_actions') }}
</div>
<div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0">
<div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0" :class="{ 'disable-click': disabledActions[action.name] }">
<div v-if="action.type === 'group' && Array.isArray(action.actions) && action.actions.length > 1" class="export-actions-dropdown sci-dropdown dropup">
<button class="btn btn-primary dropdown-toggle single-object-action rounded" type="button" id="exportDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-e2e="e2e-DD-actionToolbar-export">
<i class="sn-icon sn-icon-export"></i>
@ -95,7 +95,8 @@ export default {
bottomOffset: 0,
leftOffset: 0,
buttonOverflow: false,
submitting: false
submitting: false,
disabledActions: {}
};
},
created() {
@ -168,6 +169,12 @@ export default {
this.actionsLoadedCallback = func;
},
doAction(action, event) {
this.disabledActions[action.name] = true;
setTimeout(() => {
delete this.disabledActions[action.name];
}, 1000); // enable action after one second, to prevent multi-clicks
switch (action.type) {
case 'legacy':
// do nothing, this is handled by legacy code based on the button class

13
app/javascript/vue/shared/datatable/action_toolbar.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="p-4 w-full rounded bg-sn-light-grey min-h-[68px]" :class="{ 'disable-click': submitting }" data-e2e="e2e-CO-actionToolbar">
<div class="p-4 w-full rounded bg-sn-light-grey min-h-[68px]" data-e2e="e2e-CO-actionToolbar">
<div class="flex gap-4 items-center h-full">
<div v-if="loading && !actions.length" class="sn-action-toolbar__action">
<a class="rounded flex items-center py-1.5 px-2.5 bg-transparent text-transparent no-underline"></a>
@ -7,7 +7,7 @@
<div v-if="!loading && actions.length === 0" class="text-sn-grey-grey">
{{ i18n.t('action_toolbar.no_actions') }}
</div>
<div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0">
<div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0" :class="{ 'disable-click': disabledActions[action.name] }">
<a :class="`rounded flex gap-2 items-center py-1.5 px-1.5 xl:px-2.5 hover:text-sn-white hover:bg-sn-blue
bg-sn-white color-sn-blue hover:no-underline focus:no-underline ${action.button_class}`"
:href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
@ -42,7 +42,7 @@ export default {
reloadCallback: null,
loaded: false,
loading: true,
submitting: false
disabledActions: {}
};
},
watch: {
@ -70,10 +70,15 @@ export default {
});
},
doAction(action, event) {
this.disabledActions[action.name] = true;
setTimeout(() => {
delete this.disabledActions[action.name];
}, 1000); // enable action after one second, to prevent multi-clicks
switch (action.type) {
case 'emit':
event.preventDefault();
this.submitting = true;
this.$emit('toolbar:action', action);
break;
case 'modal':