Skip to content

Commit cafbdec

Browse files
authored
396 Disabling the save button after click (#397)
* disable the save button after click * reduce opacity of button when disabled
1 parent b011f78 commit cafbdec

File tree

3 files changed

+32
-18
lines changed

3 files changed

+32
-18
lines changed

admin_ui/src/components/AddRowForm.vue

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66

77
<form v-if="defaults" v-on:submit.prevent="submitForm($event)">
88
<RowForm v-bind:row="defaults" v-bind:schema="schema" />
9-
<button data-uitest="create_button">{{ $t("Create") }}</button>
9+
<button :disabled="!saveButtonEnabled" data-uitest="create_button">
10+
{{ $t("Create") }}
11+
</button>
1012
</form>
1113
</div>
1214
</template>
@@ -38,7 +40,8 @@ export default defineComponent({
3840
data() {
3941
return {
4042
defaults: {} as { [key: string]: any },
41-
errors: [] as string[]
43+
errors: [] as string[],
44+
saveButtonEnabled: true
4245
}
4346
},
4447
setup() {
@@ -48,6 +51,8 @@ export default defineComponent({
4851
},
4952
methods: {
5053
async submitForm(event: Event) {
54+
this.saveButtonEnabled = false
55+
5156
const form = new FormData(event.target as HTMLFormElement)
5257
5358
const json: { [key: string]: any } = {}
@@ -66,6 +71,17 @@ export default defineComponent({
6671
tableName: this.tableName,
6772
data: json
6873
})
74+
75+
this.errors = []
76+
77+
var message: APIResponseMessage = {
78+
contents: "Successfully added row",
79+
type: "success"
80+
}
81+
this.$store.commit("updateApiResponseMessage", message)
82+
83+
this.$emit("addedRow")
84+
this.$emit("close")
6985
} catch (error) {
7086
if (axios.isAxiosError(error) && error.response) {
7187
this.errors = parseErrorResponse(
@@ -81,19 +97,9 @@ export default defineComponent({
8197
type: "error"
8298
}
8399
this.$store.commit("updateApiResponseMessage", message)
84-
85-
return
86-
}
87-
this.errors = []
88-
89-
var message: APIResponseMessage = {
90-
contents: "Successfully added row",
91-
type: "success"
92100
}
93-
this.$store.commit("updateApiResponseMessage", message)
94101
95-
this.$emit("addedRow")
96-
this.$emit("close")
102+
this.saveButtonEnabled = true
97103
}
98104
},
99105
async mounted() {

admin_ui/src/components/EditRowForm.vue

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@
3232
:row="selectedRow"
3333
:schema="schema"
3434
/>
35-
<button data-uitest="save_button">{{ $t("Save") }}</button>
35+
<button :disabled="!saveButtonEnabled" data-uitest="save_button">
36+
{{ $t("Save") }}
37+
</button>
3638
</form>
3739

3840
<ReferencingTables :rowID="rowID" :tableName="tableName" />
@@ -79,7 +81,8 @@ export default defineComponent({
7981
data: function () {
8082
return {
8183
errors: [] as string[],
82-
showDropdown: false
84+
showDropdown: false,
85+
saveButtonEnabled: true
8386
}
8487
},
8588
computed: {
@@ -99,6 +102,8 @@ export default defineComponent({
99102
async submitForm(event: Event) {
100103
console.log("Submitting...")
101104
105+
this.saveButtonEnabled = false
106+
102107
const form = new FormData(event.target as HTMLFormElement)
103108
104109
const json: { [key: string]: any } = {}
@@ -125,6 +130,7 @@ export default defineComponent({
125130
type: "success"
126131
}
127132
this.$store.commit("updateApiResponseMessage", message)
133+
this.errors = []
128134
} catch (error) {
129135
if (axios.isAxiosError(error) && error.response) {
130136
this.errors = parseErrorResponse(
@@ -140,11 +146,9 @@ export default defineComponent({
140146
type: "error"
141147
}
142148
this.$store.commit("updateApiResponseMessage", message)
143-
144-
return
145149
}
146150
147-
this.errors = []
151+
this.saveButtonEnabled = true
148152
},
149153
async deleteRow() {
150154
if (window.confirm("Are you sure you want to delete this row?")) {

admin_ui/src/main.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,10 @@ button {
253253
&:hover {
254254
transition: background-color 0.5s;
255255
}
256+
257+
&:disabled {
258+
opacity: 0.8;
259+
}
256260
}
257261

258262
a {

0 commit comments

Comments
 (0)