debian-mirror-gitlab/app/assets/javascripts/notes/components/diff_with_note.vue

167 lines
4.2 KiB
Vue
Raw Normal View History

2018-03-27 19:54:05 +05:30
<script>
2018-11-08 19:23:39 +05:30
import { mapState, mapActions } from 'vuex';
2018-05-09 12:01:36 +05:30
import imageDiffHelper from '~/image_diff/helpers/index';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
2018-11-08 19:23:39 +05:30
import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
import { trimFirstCharOfLineContent } from '~/diffs/store/utils';
2018-03-27 19:54:05 +05:30
2018-05-09 12:01:36 +05:30
export default {
components: {
DiffFileHeader,
2018-11-08 19:23:39 +05:30
SkeletonLoadingContainer,
2018-05-09 12:01:36 +05:30
},
props: {
discussion: {
type: Object,
required: true,
2018-03-27 19:54:05 +05:30
},
2018-05-09 12:01:36 +05:30
},
2018-11-08 19:23:39 +05:30
data() {
return {
error: false,
};
},
2018-05-09 12:01:36 +05:30
computed: {
2018-11-08 19:23:39 +05:30
...mapState({
noteableData: state => state.notes.noteableData,
}),
hasTruncatedDiffLines() {
return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0;
},
isDiscussionsExpanded() {
return true; // TODO: @fatihacet - Fix this.
},
isCollapsed() {
return this.diffFile.collapsed || false;
},
2018-05-09 12:01:36 +05:30
isImageDiff() {
return !this.diffFile.text;
2018-03-27 19:54:05 +05:30
},
2018-05-09 12:01:36 +05:30
diffFileClass() {
const { text } = this.diffFile;
return text ? 'text-file' : 'js-image-file';
2018-03-27 19:54:05 +05:30
},
2018-05-09 12:01:36 +05:30
diffFile() {
2018-11-08 19:23:39 +05:30
return convertObjectPropsToCamelCase(this.discussion.diffFile, { deep: true });
2018-03-27 19:54:05 +05:30
},
2018-05-09 12:01:36 +05:30
imageDiffHtml() {
return this.discussion.imageDiffHtml;
},
2018-11-08 19:23:39 +05:30
userColorScheme() {
return window.gon.user_color_scheme;
},
normalizedDiffLines() {
if (this.discussion.truncatedDiffLines) {
return this.discussion.truncatedDiffLines.map(line =>
trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)),
);
}
return [];
},
2018-05-09 12:01:36 +05:30
},
mounted() {
if (this.isImageDiff) {
const canCreateNote = false;
const renderCommentBadge = true;
2018-11-08 19:23:39 +05:30
imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
} else if (!this.hasTruncatedDiffLines) {
this.fetchDiff();
2018-05-09 12:01:36 +05:30
}
},
methods: {
2018-11-08 19:23:39 +05:30
...mapActions(['fetchDiscussionDiffLines']),
2018-05-09 12:01:36 +05:30
rowTag(html) {
return html.outerHTML ? 'tr' : 'template';
},
2018-11-08 19:23:39 +05:30
fetchDiff() {
this.error = false;
this.fetchDiscussionDiffLines(this.discussion)
.then(this.highlight)
.catch(() => {
this.error = true;
});
},
2018-05-09 12:01:36 +05:30
},
};
2018-03-27 19:54:05 +05:30
</script>
<template>
<div
ref="fileHolder"
:class="diffFileClass"
2018-11-08 19:23:39 +05:30
class="diff-file file-holder"
2018-03-27 19:54:05 +05:30
>
2018-11-08 19:23:39 +05:30
<diff-file-header
:diff-file="diffFile"
:can-current-user-fork="false"
:discussions-expanded="isDiscussionsExpanded"
:expanded="!isCollapsed"
/>
2018-03-27 19:54:05 +05:30
<div
v-if="diffFile.text"
2018-11-08 19:23:39 +05:30
:class="userColorScheme"
class="diff-content code"
2018-03-27 19:54:05 +05:30
>
<table>
2018-11-08 19:23:39 +05:30
<tr
v-for="line in normalizedDiffLines"
:key="line.lineCode"
class="line_holder"
>
<td class="diff-line-num old_line">{{ line.oldLine }}</td>
<td class="diff-line-num new_line">{{ line.newLine }}</td>
<td
:class="line.type"
class="line_content"
v-html="line.richText"
>
</td>
</tr>
<tr
v-if="!hasTruncatedDiffLines"
class="line_holder line-holder-placeholder"
>
<td class="old_line diff-line-num"></td>
<td class="new_line diff-line-num"></td>
<td
v-if="error"
class="js-error-lazy-load-diff diff-loading-error-block"
>
Unable to load the diff
<button
class="btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button"
@click="fetchDiff"
>
Try again
</button>
</td>
<td
v-else
class="line_content js-success-lazy-load"
>
<span></span>
<skeleton-loading-container />
<span></span>
</td>
</tr>
2018-03-27 19:54:05 +05:30
<tr class="notes_holder">
<td
2018-11-20 20:47:30 +05:30
class="notes_content"
colspan="3"
>
2018-03-27 19:54:05 +05:30
<slot></slot>
</td>
</tr>
</table>
</div>
<div
v-else
>
<div v-html="imageDiffHtml"></div>
<slot></slot>
</div>
</div>
</template>