summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/work_items/components/work_item_title.vue
blob: 88a825853ccdd3d7561e64808fbc9fac4f65bb76 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import Tracking from '~/tracking';
import { i18n } from '../constants';
import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
import ItemTitle from './item_title.vue';

export default {
  components: {
    GlLoadingIcon,
    ItemTitle,
  },
  mixins: [Tracking.mixin()],
  props: {
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
    workItemId: {
      type: String,
      required: false,
      default: '',
    },
    workItemTitle: {
      type: String,
      required: false,
      default: '',
    },
    workItemType: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    tracking() {
      return {
        category: 'workItems:show',
        label: 'item_title',
        property: `type_${this.workItemType}`,
      };
    },
  },
  methods: {
    async updateTitle(updatedTitle) {
      if (updatedTitle === this.workItemTitle) {
        return;
      }

      try {
        await this.$apollo.mutate({
          mutation: updateWorkItemMutation,
          variables: {
            input: {
              id: this.workItemId,
              title: updatedTitle,
            },
          },
        });
        this.track('updated_title');
      } catch {
        this.$emit('error', i18n.updateError);
      }
    },
  },
};
</script>

<template>
  <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" />
  <item-title v-else :title="workItemTitle" @title-changed="updateTitle" />
</template>