diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
commit | 3cccd102ba543e02725d247893729e5c73b38295 (patch) | |
tree | f36a04ec38517f5deaaacb5acc7d949688d1e187 /app/assets/javascripts/work_items/components/work_item_detail_modal.vue | |
parent | 205943281328046ef7b4528031b90fbda70c75ac (diff) |
Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_detail_modal.vue')
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_detail_modal.vue | 83 |
1 files changed, 51 insertions, 32 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue index 942677bb937..a79091fb8b2 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue @@ -1,15 +1,22 @@ <script> -import { GlModal } from '@gitlab/ui'; -import { s__ } from '~/locale'; -import workItemQuery from '../graphql/work_item.query.graphql'; -import ItemTitle from './item_title.vue'; +import { GlAlert, GlButton, GlModal } from '@gitlab/ui'; +import WorkItemActions from './work_item_actions.vue'; +import WorkItemDetail from './work_item_detail.vue'; export default { components: { + GlAlert, + GlButton, GlModal, - ItemTitle, + WorkItemDetail, + WorkItemActions, }, props: { + canUpdate: { + type: Boolean, + required: false, + default: false, + }, visible: { type: Boolean, required: true, @@ -20,43 +27,55 @@ export default { default: null, }, }, + emits: ['workItemDeleted', 'close'], data() { return { - workItem: {}, + error: undefined, }; }, - apollo: { - workItem: { - query: workItemQuery, - variables() { - return { - id: this.workItemId, - }; - }, - update(data) { - return data.workItem; - }, - skip() { - return !this.workItemId; - }, - error() { - this.$emit( - 'error', - s__('WorkItem|Something went wrong when fetching the work item. Please try again.'), - ); - }, + methods: { + handleWorkItemDeleted() { + this.$emit('workItemDeleted'); + this.closeModal(); }, - }, - computed: { - workItemTitle() { - return this.workItem?.title; + closeModal() { + this.error = ''; + this.$emit('close'); + }, + setErrorMessage(message) { + this.error = message; }, }, }; </script> <template> - <gl-modal hide-footer modal-id="work-item-detail-modal" :visible="visible" @hide="$emit('close')"> - <item-title class="gl-m-0!" :initial-title="workItemTitle" /> + <gl-modal hide-footer modal-id="work-item-detail-modal" :visible="visible" @hide="closeModal"> + <template #modal-header> + <div class="gl-w-full gl-display-flex gl-align-items-center gl-justify-content-end"> + <h2 class="modal-title gl-mr-auto">{{ s__('WorkItem|Work Item') }}</h2> + <work-item-actions + :work-item-id="workItemId" + :can-update="canUpdate" + @workItemDeleted="handleWorkItemDeleted" + @error="setErrorMessage" + /> + <gl-button category="tertiary" icon="close" :aria-label="__('Close')" @click="closeModal" /> + </div> + </template> + <gl-alert v-if="error" variant="danger" @dismiss="error = false"> + {{ error }} + </gl-alert> + + <work-item-detail :work-item-id="workItemId" /> </gl-modal> </template> + +<style> +/* hide the existing close button until we can do it + * with https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2710 + */ +#work-item-detail-modal .modal-header > .gl-button { + display: none; +} +</style> |