diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
commit | b39512ed755239198a9c294b6a45e65c05900235 (patch) | |
tree | d234a3efade1de67c46b9e5a38ce813627726aa7 /app/assets/javascripts/boards/components/board_add_new_column_form.vue | |
parent | d31474cf3b17ece37939d20082b07f6657cc79a9 (diff) |
Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42
Diffstat (limited to 'app/assets/javascripts/boards/components/board_add_new_column_form.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_add_new_column_form.vue | 29 |
1 files changed, 25 insertions, 4 deletions
diff --git a/app/assets/javascripts/boards/components/board_add_new_column_form.vue b/app/assets/javascripts/boards/components/board_add_new_column_form.vue index 10c7a3db2d3..c4a2f83ab50 100644 --- a/app/assets/javascripts/boards/components/board_add_new_column_form.vue +++ b/app/assets/javascripts/boards/components/board_add_new_column_form.vue @@ -19,6 +19,7 @@ export default { scope: __('Scope'), scopeDescription: __('Issues must match this scope to appear in this list.'), selected: __('Selected'), + requiredFieldFeedback: __('This field is required.'), }, components: { GlButton, @@ -55,12 +56,21 @@ export default { data() { return { searchValue: '', + selectedIdValid: true, }; }, + computed: { + toggleClassList() { + return `gl-max-w-full gl-display-flex gl-align-items-center gl-text-trunate ${ + this.selectedIdValid ? '' : 'gl-inset-border-1-red-400!' + }`; + }, + }, watch: { selectedId(val) { if (val) { this.$refs.dropdown.hide(true); + this.selectedIdValid = true; } }, }, @@ -74,6 +84,13 @@ export default { this.$emit('filter-items', ''); this.$emit('hide'); }, + onSubmit() { + if (!this.selectedId) { + this.selectedIdValid = false; + } else { + this.$emit('add-list'); + } + }, }, }; </script> @@ -103,11 +120,16 @@ export default { <slot name="select-list-type"></slot> - <gl-form-group class="gl-px-5 lg-mb-3 gl-max-w-full" :label="searchLabel"> + <gl-form-group + class="gl-px-5 lg-mb-3 gl-max-w-full" + :label="searchLabel" + :state="selectedIdValid" + :invalid-feedback="$options.i18n.requiredFieldFeedback" + > <gl-dropdown ref="dropdown" class="gl-mb-3 gl-max-w-full" - toggle-class="gl-max-w-full gl-display-flex gl-align-items-center gl-text-trunate" + :toggle-class="toggleClassList" boundary="viewport" @shown="setFocus" @hide="onHide" @@ -147,10 +169,9 @@ export default { <div class="gl-display-flex gl-mb-4"> <gl-button data-testid="addNewColumnButton" - :disabled="!selectedId" variant="confirm" class="gl-mr-3 gl-ml-4" - @click="$emit('add-list')" + @click="onSubmit" >{{ $options.i18n.add }}</gl-button > <gl-button data-testid="cancelAddNewColumn" @click="setAddColumnFormVisibility(false)">{{ |