added submit guard to manage groups

This commit is contained in:
2026-01-19 19:04:45 -05:00
parent 30a97082a1
commit 4069b7274d

View File

@@ -13,6 +13,7 @@ import Button from '../ui/button/Button.vue';
import InputGroup from '../ui/input-group/InputGroup.vue'; import InputGroup from '../ui/input-group/InputGroup.vue';
import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue'; import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue';
import { SearchIcon } from 'lucide-vue-next'; import { SearchIcon } from 'lucide-vue-next';
import Spinner from '../ui/spinner/Spinner.vue';
const props = defineProps<{ const props = defineProps<{
allMembers: MemberLight[], allMembers: MemberLight[],
@@ -43,8 +44,11 @@ function openDialog() {
showAddMemberDialog.value = true; showAddMemberDialog.value = true;
} }
const submitting = ref(false);
async function handleAddMember() { async function handleAddMember() {
//catch double submit
if (submitting.value) return;
submitting.value = true;
//guard //guard
if (memberToAdd.value == null) if (memberToAdd.value == null)
return; return;
@@ -52,6 +56,7 @@ async function handleAddMember() {
await addMemberToRole(memberToAdd.value.id, props.role.id); await addMemberToRole(memberToAdd.value.id, props.role.id);
emit('submit'); emit('submit');
showAddMemberDialog.value = false; showAddMemberDialog.value = false;
submitting.value = false;
} }
</script> </script>
@@ -94,8 +99,11 @@ async function handleAddMember() {
<Button variant="secondary" @click="showAddMemberDialog = false"> <Button variant="secondary" @click="showAddMemberDialog = false">
Cancel Cancel
</Button> </Button>
<Button :disabled="!memberToAdd" @click="handleAddMember"> <Button :disabled="!memberToAdd || submitting" @click="handleAddMember">
Add <span class="flex items-center gap-2" v-if="submitting">
<Spinner></Spinner> Add
</span>
<span v-else>Add</span>
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>