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

Merge pull request #8205 from artoscinote/ma_SCI_9221

Browse source 
Disable action toolbar buttons for 1 second after action, to prevent multiple submits [SCI-9221]
This commit is contained in:
Martin Artnik 2025-02-04 11:35:54 +01:00 • committed by GitHub
commit e005eef3fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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"> <div v-if="!loading && actions.length === 0" class="sn-action-toolbar__message">
{{ i18n.t('action_toolbar.no_actions') }} {{ i18n.t('action_toolbar.no_actions') }}
</div> </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"> <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"> <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> <i class="sn-icon sn-icon-export"></i>
@ -96,7 +96,8 @@ export default {
bottomOffset: 0, bottomOffset: 0,
leftOffset: 0, leftOffset: 0,
buttonOverflow: false, buttonOverflow: false,
submitting: false submitting: false,
disabledActions: {}
}; };
}, },
created() { created() {
@ -169,6 +170,12 @@ export default {
this.actionsLoadedCallback = func; this.actionsLoadedCallback = func;
}, },
doAction(action, event) { 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) { switch (action.type) {
case 'legacy': case 'legacy':
// do nothing, this is handled by legacy code based on the button class // 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> <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 class="flex gap-4 items-center h-full">
<div v-if="loading && !actions.length" class="sn-action-toolbar__action"> <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> <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"> <div v-if="!loading && actions.length === 0" class="text-sn-grey-grey">
{{ i18n.t('action_toolbar.no_actions') }} {{ i18n.t('action_toolbar.no_actions') }}
</div> </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 <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}`" bg-sn-white color-sn-blue hover:no-underline focus:no-underline ${action.button_class}`"
:href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'" :href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
@ -42,7 +42,7 @@ export default {
reloadCallback: null, reloadCallback: null,
loaded: false, loaded: false,
loading: true, loading: true,
submitting: false disabledActions: {}
}; };
}, },
watch: { watch: {
@ -70,10 +70,15 @@ export default {
}); });
}, },
doAction(action, event) { 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) { switch (action.type) {
case 'emit': case 'emit':
event.preventDefault(); event.preventDefault();
this.submitting = true;
this.$emit('toolbar:action', action); this.$emit('toolbar:action', action);
break; break;
case 'modal': case 'modal':