issue_note.vue 3.87 KB
Newer Older
1
<script>
2 3
/* global Flash */

4
import { mapGetters } from 'vuex';
5 6 7 8 9 10 11 12 13 14 15 16
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import IssueNoteHeader from './issue_note_header.vue';
import IssueNoteActions from './issue_note_actions.vue';
import IssueNoteBody from './issue_note_body.vue';

export default {
  props: {
    note: {
      type: Object,
      required: true,
    },
  },
17 18 19
  data() {
    return {
      isEditing: false,
20
      isDeleting: false,
21
    };
22
  },
23 24 25 26 27 28 29
  components: {
    UserAvatarLink,
    IssueNoteHeader,
    IssueNoteActions,
    IssueNoteBody,
  },
  computed: {
30 31 32
    ...mapGetters([
      'targetNoteHash',
    ]),
33 34 35
    author() {
      return this.note.author;
    },
36 37 38 39
    classNameBindings() {
      return {
        'is-editing': this.isEditing,
        'disabled-content': this.isDeleting,
40
        target: this.targetNoteHash === this.noteAnchorId,
41 42
      };
    },
43 44 45
    canReportAsAbuse() {
      return this.note.report_abuse_path && this.author.id !== window.gon.current_user_id;
    },
46 47 48
    noteAnchorId() {
      return `note_${this.note.id}`;
    },
49
  },
50 51 52 53
  methods: {
    editHandler() {
      this.isEditing = true;
    },
54
    deleteHandler() {
55 56 57 58 59 60 61 62 63 64 65
      const msg = 'Are you sure you want to delete this list?';
      const isConfirmed = confirm(msg); // eslint-disable-line

      if (isConfirmed) {
        this.isDeleting = true;
        this.$store
          .dispatch('deleteNote', this.note)
          .then(() => {
            this.isDeleting = false;
          })
          .catch(() => {
66
            new Flash('Something went wrong while deleting your note. Please try again.'); // eslint-disable-line
67 68 69
            this.isDeleting = false;
          });
      }
70
    },
71 72
    formUpdateHandler(note) {
      const data = {
73
        endpoint: this.note.path,
74
        note: {
75
          full_data: true,
76 77 78 79 80 81 82 83 84
          target_type: 'issue',
          target_id: this.note.noteable_id,
          note,
        },
      };

      this.$store.dispatch('updateNote', data)
        .then(() => {
          this.isEditing = false;
85
          $(this.$refs['noteBody'].$el).renderGFM();
86 87 88 89
        })
        .catch(() => {
          new Flash('Something went wrong while editing your comment. Please try again.'); // eslint-disable-line
        });
90
    },
91 92 93 94 95 96 97 98 99
    formCancelHandler(shouldConfirm) {
      if (shouldConfirm && this.$refs.noteBody.$refs.noteForm.isDirty) {
        const msg = 'Are you sure you want to cancel editing this comment?';
        const isConfirmed = confirm(msg); // eslint-disable-line
        if (!isConfirmed) {
          return;
        }
      }

100 101 102
      this.isEditing = false;
    },
  },
103 104 105 106
};
</script>

<template>
107 108
  <li
    class="note timeline-entry"
109
    :id="noteAnchorId"
110
    :class="classNameBindings">
111 112 113
    <div class="timeline-entry-inner">
      <div class="timeline-icon">
        <user-avatar-link
114 115 116 117
          :linkHref="author.path"
          :imgSrc="author.avatar_url"
          :imgAlt="author.name"
          :imgSize="40" />
118 119 120 121 122 123
      </div>
      <div class="timeline-content">
        <div class="note-header">
          <issue-note-header
            :author="author"
            :createdAt="note.created_at"
124
            :noteId="note.id"
125 126
            actionText="commented" />
          <issue-note-actions
127
            :authorId="author.id"
128 129
            :accessLevel="note.human_access"
            :canAward="note.emoji_awardable"
130 131
            :canEdit="note.current_user.can_edit"
            :canDelete="note.current_user.can_edit"
132
            :canReportAsAbuse="canReportAsAbuse"
133
            :reportAbusePath="note.report_abuse_path"
134 135
            :editHandler="editHandler"
            :deleteHandler="deleteHandler" />
136
        </div>
137 138 139 140
        <issue-note-body
          :note="note"
          :isEditing="isEditing"
          :formUpdateHandler="formUpdateHandler"
141 142
          :formCancelHandler="formCancelHandler"
          ref="noteBody" />
143 144 145 146
      </div>
    </div>
  </li>
</template>