c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 66 Pull requests 1 Projects 2 Releases Wiki Activity Actions

The Comment button is now disabled when there is no text and the AsyncButton can now be disabled without setting it to inProgress

Browse source
This commit is contained in:
bton 2024-11-27 22:01:31 +01:00
parent 8234fd438a
commit e49c62ce93
3 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/components/inputs/AsyncButton.vue
View file

@ -1,9 +1,9 @@
<template>
<button @click.stop="handleClick" :disabled="disabled">
<button @click.stop="handleClick" :disabled="disabled || inProgress">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
:class="{'d-none': !disabled}"></span>
<span class="ml-2" :class="{'d-none': !disabled}">In Progress...</span>
<span :class="{'d-none': disabled}"><slot></slot></span>
:class="{'d-none': !inProgress}"></span>
<span class="ml-2" :class="{'d-none': !inProgress}">In Progress...</span>
<span :class="{'d-none': inProgress}"><slot></slot></span>
</button>
</template>
@ -13,7 +13,7 @@ export default {
name: 'AsyncButton',
data() {
return {
disabled: false,
inProgress: false,
};
},
props: {
@ -21,17 +21,21 @@ export default {
type: Function,
required: true,
},
disabled: {
type: Boolean,
required: false,
},
},
methods: {
async handleClick() {
if (this.task && typeof this.task === 'function') {
this.disabled = true;
this.inProgress = true;
try {
await this.task();
} catch (e) {
console.error(e);
} finally {
this.disabled = false;
this.inProgress = false;
}
}
},

2
web/src/views/Ticket.vue
View file

@ -17,7 +17,7 @@
<textarea placeholder="add comment..." v-model="newComment"
class="form-control">
</textarea>
<AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
<AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear" :disabled="!newComment">
<font-awesome-icon icon="comment"/>
Save Comment
</AsyncButton>