added submit guard to manage groups
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user