diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/sidebar')
5 files changed, 85 insertions, 93 deletions
diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue index 4a664d5beef..6d928337396 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue @@ -1,9 +1,9 @@ <script> -import { mapGetters, mapActions } from 'vuex'; import { GlButton, GlDatepicker } from '@gitlab/ui'; +import { mapGetters, mapActions } from 'vuex'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; -import { dateInWords, formatDate, parsePikadayDate } from '~/lib/utils/datetime_utility'; import createFlash from '~/flash'; +import { dateInWords, formatDate, parsePikadayDate } from '~/lib/utils/datetime_utility'; import { __ } from '~/locale'; export default { @@ -88,15 +88,13 @@ export default { </gl-button> </div> </template> - <template> - <gl-datepicker - ref="datePicker" - :value="parsedDueDate" - show-clear-button - @input="setDueDate" - @clear="setDueDate(null)" - /> - </template> + <gl-datepicker + ref="datePicker" + :value="parsedDueDate" + show-clear-button + @input="setDueDate" + @clear="setDueDate(null)" + /> </board-editable-item> </template> <style> diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_issue_title.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_issue_title.vue index d0e641daf5c..95864bd62a7 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_issue_title.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_issue_title.vue @@ -1,11 +1,11 @@ <script> -import { mapGetters, mapActions } from 'vuex'; import { GlAlert, GlButton, GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui'; +import { mapGetters, mapActions } from 'vuex'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; -import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; -import { joinPaths } from '~/lib/utils/url_utility'; import createFlash from '~/flash'; +import { joinPaths } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; +import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; export default { components: { @@ -136,36 +136,34 @@ export default { <template #collapsed> <span class="gl-text-gray-800">{{ issue.referencePath }}</span> </template> - <template> - <gl-alert v-if="showChangesAlert" variant="warning" class="gl-mb-5" :dismissible="false"> - {{ $options.i18n.reviewYourChanges }} - </gl-alert> - <gl-form @submit.prevent="setTitle"> - <gl-form-group :invalid-feedback="$options.i18n.invalidFeedback" :state="validationState"> - <gl-form-input - v-model="title" - v-autofocusonshow - :placeholder="$options.i18n.issueTitlePlaceholder" - :state="validationState" - /> - </gl-form-group> + <gl-alert v-if="showChangesAlert" variant="warning" class="gl-mb-5" :dismissible="false"> + {{ $options.i18n.reviewYourChanges }} + </gl-alert> + <gl-form @submit.prevent="setTitle"> + <gl-form-group :invalid-feedback="$options.i18n.invalidFeedback" :state="validationState"> + <gl-form-input + v-model="title" + v-autofocusonshow + :placeholder="$options.i18n.issueTitlePlaceholder" + :state="validationState" + /> + </gl-form-group> - <div class="gl-display-flex gl-w-full gl-justify-content-space-between gl-mt-5"> - <gl-button - variant="success" - size="small" - data-testid="submit-button" - :disabled="!title" - @click="setTitle" - > - {{ $options.i18n.submitButton }} - </gl-button> + <div class="gl-display-flex gl-w-full gl-justify-content-space-between gl-mt-5"> + <gl-button + variant="success" + size="small" + data-testid="submit-button" + :disabled="!title" + @click="setTitle" + > + {{ $options.i18n.submitButton }} + </gl-button> - <gl-button size="small" data-testid="cancel-button" @click="cancel"> - {{ $options.i18n.cancelButton }} - </gl-button> - </div> - </gl-form> - </template> + <gl-button size="small" data-testid="cancel-button" @click="cancel"> + {{ $options.i18n.cancelButton }} + </gl-button> + </div> + </gl-form> </board-editable-item> </template> diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue index dcf769e6fe5..55b1596ee18 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue @@ -1,12 +1,12 @@ <script> -import { mapGetters, mapActions } from 'vuex'; import { GlLabel } from '@gitlab/ui'; -import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; -import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { mapGetters, mapActions } from 'vuex'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; -import { isScopedLabel } from '~/lib/utils/common_utils'; import createFlash from '~/flash'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { isScopedLabel } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; +import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; export default { components: { diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue index 144a81f009b..829f1c72806 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue @@ -1,5 +1,4 @@ <script> -import { mapGetters, mapActions } from 'vuex'; import { GlDropdown, GlDropdownItem, @@ -8,11 +7,11 @@ import { GlDropdownDivider, GlLoadingIcon, } from '@gitlab/ui'; -import { fetchPolicies } from '~/lib/graphql'; +import { mapGetters, mapActions } from 'vuex'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; -import groupMilestones from '../../graphql/group_milestones.query.graphql'; import createFlash from '~/flash'; import { __, s__ } from '~/locale'; +import projectMilestones from '../../graphql/project_milestones.query.graphql'; export default { components: { @@ -34,22 +33,21 @@ export default { }, apollo: { milestones: { - fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, - query: groupMilestones, + query: projectMilestones, debounce: 250, skip() { return !this.edit; }, variables() { return { - fullPath: this.groupFullPath, + fullPath: this.projectPath, searchTitle: this.searchTitle, state: 'active', - includeDescendants: true, + includeAncestors: true, }; }, update(data) { - const edges = data?.group?.milestones?.edges ?? []; + const edges = data?.project?.milestones?.edges ?? []; return edges.map((item) => item.node); }, error() { @@ -74,21 +72,20 @@ export default { return this.activeIssue.milestone?.title ?? this.$options.i18n.noMilestone; }, }, - mounted() { - this.$root.$on('bv::dropdown::hide', () => { - this.$refs.sidebarItem.collapse(); - }); - }, methods: { ...mapActions(['setActiveIssueMilestone']), handleOpen() { this.edit = true; this.$refs.dropdown.show(); }, + handleClose() { + this.edit = false; + this.$refs.sidebarItem.collapse(); + }, async setMilestone(milestoneId) { this.loading = true; this.searchTitle = ''; - this.$refs.sidebarItem.collapse(); + this.handleClose(); try { const input = { milestoneId, projectPath: this.projectPath }; @@ -117,45 +114,44 @@ export default { :title="$options.i18n.milestone" :loading="loading" @open="handleOpen()" - @close="edit = false" + @close="handleClose" > <template v-if="hasMilestone" #collapsed> <strong class="gl-text-gray-900">{{ activeIssue.milestone.title }}</strong> </template> - <template> - <gl-dropdown - ref="dropdown" - :text="dropdownText" - :header-text="$options.i18n.assignMilestone" - block + <gl-dropdown + ref="dropdown" + :text="dropdownText" + :header-text="$options.i18n.assignMilestone" + block + @hide="handleClose" + > + <gl-search-box-by-type ref="search" v-model.trim="searchTitle" class="gl-m-3" /> + <gl-dropdown-item + data-testid="no-milestone-item" + :is-check-item="true" + :is-checked="!activeIssue.milestone" + @click="setMilestone(null)" > - <gl-search-box-by-type ref="search" v-model.trim="searchTitle" class="gl-m-3" /> + {{ $options.i18n.noMilestone }} + </gl-dropdown-item> + <gl-dropdown-divider /> + <gl-loading-icon v-if="$apollo.loading" class="gl-py-4" /> + <template v-else-if="milestones.length > 0"> <gl-dropdown-item - data-testid="no-milestone-item" + v-for="milestone in milestones" + :key="milestone.id" :is-check-item="true" - :is-checked="!activeIssue.milestone" - @click="setMilestone(null)" + :is-checked="activeIssue.milestone && milestone.id === activeIssue.milestone.id" + data-testid="milestone-item" + @click="setMilestone(milestone.id)" > - {{ $options.i18n.noMilestone }} + {{ milestone.title }} </gl-dropdown-item> - <gl-dropdown-divider /> - <gl-loading-icon v-if="$apollo.loading" class="gl-py-4" /> - <template v-else-if="milestones.length > 0"> - <gl-dropdown-item - v-for="milestone in milestones" - :key="milestone.id" - :is-check-item="true" - :is-checked="activeIssue.milestone && milestone.id === activeIssue.milestone.id" - data-testid="milestone-item" - @click="setMilestone(milestone.id)" - > - {{ milestone.title }} - </gl-dropdown-item> - </template> - <gl-dropdown-text v-else data-testid="no-milestones-found"> - {{ $options.i18n.noMilestonesFound }} - </gl-dropdown-text> - </gl-dropdown> - </template> + </template> + <gl-dropdown-text v-else data-testid="no-milestones-found"> + {{ $options.i18n.noMilestonesFound }} + </gl-dropdown-text> + </gl-dropdown> </board-editable-item> </template> diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue index 4aa8d2f55e4..aa4fdcf9a94 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue @@ -1,6 +1,6 @@ <script> -import { mapGetters, mapActions } from 'vuex'; import { GlToggle } from '@gitlab/ui'; +import { mapGetters, mapActions } from 'vuex'; import createFlash from '~/flash'; import { __, s__ } from '~/locale'; |