Better handling of group Send Invites button

Run validation check from @input event rather than @change so that it is executed after user stops typing instead of on blur.
Fix cannotSubmit (bound to button :disabled) so that it correctly checks that at least one invite is filled and all filled invites are valid.
This commit is contained in:
Carl Vuorinen 2020-04-22 08:53:55 +03:00
parent 2a8fc7aea2
commit 6bacb89271

View file

@ -29,7 +29,7 @@
:class="{
'input-valid': invite.valid, 'is-invalid input-invalid': invite.valid === false}"
@keyup="expandInviteList"
@change="checkInviteList"
@input="checkInviteList"
>
</div>
<div
@ -152,12 +152,9 @@ export default {
computed: {
...mapState({ user: 'user.data' }),
cannotSubmit () {
const filteredInvites = filter(
this.invites,
invite => invite.text.length > 0 && !invite.valid,
);
if (filteredInvites.length > 0) return true;
return false;
const filledInvites = filter(this.invites, invite => invite.text.length);
const validInvites = filter(filledInvites, invite => invite.valid);
return !filledInvites.length || validInvites.length !== filledInvites.length;
},
inviter () {
return this.user.profile.name;
@ -185,7 +182,7 @@ export default {
return this.$store.dispatch('user:userLookup', { username: searchUsername })
.then(res => this.fillErrors(index, res));
});
}, 250),
}, 500),
expandInviteList () {
if (this.invites[this.invites.length - 1].text.length > 0) {
this.invites.push(clone(INVITE_DEFAULTS));