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

151 lines
4.7 KiB
Vue
Raw Normal View History

2018-03-27 19:54:05 +05:30
<script>
2020-11-24 15:15:51 +05:30
/* eslint-disable vue/no-v-html */
2018-11-08 19:23:39 +05:30
import { mapState, mapActions } from 'vuex';
2020-11-24 15:15:51 +05:30
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
2018-11-08 19:23:39 +05:30
import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
2018-12-13 13:39:08 +05:30
import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
2019-02-15 15:39:39 +05:30
import { getDiffMode } from '~/diffs/store/utils';
2019-07-07 11:18:12 +05:30
import { diffViewerModes } from '~/ide/constants';
2021-02-22 17:27:13 +05:30
import { isCollapsed } from '../../diffs/utils/diff_file';
2019-02-15 15:39:39 +05:30
2019-09-30 21:07:59 +05:30
const FIRST_CHAR_REGEX = /^(\+|-| )/;
2018-05-09 12:01:36 +05:30
export default {
components: {
DiffFileHeader,
2018-12-13 13:39:08 +05:30
GlSkeletonLoading,
DiffViewer,
ImageDiffOverlay,
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({
2018-12-13 13:39:08 +05:30
projectPath: state => state.diffs.projectPath,
2018-11-08 19:23:39 +05:30
}),
2018-12-13 13:39:08 +05:30
diffMode() {
2019-02-15 15:39:39 +05:30
return getDiffMode(this.discussion.diff_file);
2018-12-13 13:39:08 +05:30
},
2019-07-07 11:18:12 +05:30
diffViewerMode() {
return this.discussion.diff_file.viewer.name;
},
isTextFile() {
return this.diffViewerMode === diffViewerModes.text;
},
2018-11-08 19:23:39 +05:30
hasTruncatedDiffLines() {
2019-02-15 15:39:39 +05:30
return (
this.discussion.truncated_diff_lines && this.discussion.truncated_diff_lines.length !== 0
);
2018-11-08 19:23:39 +05:30
},
2021-01-29 00:20:46 +05:30
isCollapsed() {
return isCollapsed(this.discussion.diff_file);
},
2018-05-09 12:01:36 +05:30
},
mounted() {
2020-04-22 19:07:51 +05:30
if (this.isTextFile && !this.hasTruncatedDiffLines) {
2018-11-08 19:23:39 +05:30
this.fetchDiff();
2018-05-09 12:01:36 +05:30
}
},
methods: {
2018-11-08 19:23:39 +05:30
...mapActions(['fetchDiscussionDiffLines']),
fetchDiff() {
this.error = false;
this.fetchDiscussionDiffLines(this.discussion)
.then(this.highlight)
.catch(() => {
this.error = true;
});
},
2019-09-30 21:07:59 +05:30
trimChar(line) {
return line.replace(FIRST_CHAR_REGEX, '');
},
2018-05-09 12:01:36 +05:30
},
2019-02-15 15:39:39 +05:30
userColorSchemeClass: window.gon.user_color_scheme,
2018-05-09 12:01:36 +05:30
};
2018-03-27 19:54:05 +05:30
</script>
<template>
2019-07-07 11:18:12 +05:30
<div :class="{ 'text-file': isTextFile }" class="diff-file file-holder">
2018-11-08 19:23:39 +05:30
<diff-file-header
2019-02-15 15:39:39 +05:30
:discussion-path="discussion.discussion_path"
:diff-file="discussion.diff_file"
2018-11-08 19:23:39 +05:30
:can-current-user-fork="false"
2021-01-29 00:20:46 +05:30
:expanded="!isCollapsed"
2018-11-08 19:23:39 +05:30
/>
2019-07-07 11:18:12 +05:30
<div v-if="isTextFile" class="diff-content">
<table class="code js-syntax-highlight" :class="$options.userColorSchemeClass">
2019-02-15 15:39:39 +05:30
<template v-if="hasTruncatedDiffLines">
<tr
v-for="line in discussion.truncated_diff_lines"
v-once
:key="line.line_code"
class="line_holder"
2018-11-08 19:23:39 +05:30
>
2019-07-07 11:18:12 +05:30
<td :class="line.type" class="diff-line-num old_line">{{ line.old_line }}</td>
<td :class="line.type" class="diff-line-num new_line">{{ line.new_line }}</td>
2019-09-30 21:07:59 +05:30
<td :class="line.type" class="line_content" v-html="trimChar(line.rich_text)"></td>
2019-02-15 15:39:39 +05:30
</tr>
</template>
<tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder">
2018-11-08 19:23:39 +05:30
<td class="old_line diff-line-num"></td>
<td class="new_line diff-line-num"></td>
2019-02-15 15:39:39 +05:30
<td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
2020-04-22 19:07:51 +05:30
{{ __('Unable to load the diff') }}
2018-11-08 19:23:39 +05:30
<button
class="btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button"
@click="fetchDiff"
>
2019-09-30 21:07:59 +05:30
{{ __('Try again') }}
2018-11-08 19:23:39 +05:30
</button>
</td>
2019-02-15 15:39:39 +05:30
<td v-else class="line_content js-success-lazy-load">
2018-11-08 19:23:39 +05:30
<span></span>
2018-12-13 13:39:08 +05:30
<gl-skeleton-loading />
2018-11-08 19:23:39 +05:30
<span></span>
</td>
</tr>
2018-03-27 19:54:05 +05:30
<tr class="notes_holder">
2019-07-31 22:56:46 +05:30
<td class="notes-content" colspan="3"><slot></slot></td>
2018-03-27 19:54:05 +05:30
</tr>
</table>
</div>
2019-02-15 15:39:39 +05:30
<div v-else>
2018-12-13 13:39:08 +05:30
<diff-viewer
2020-06-23 00:09:42 +05:30
:diff-file="discussion.diff_file"
2018-12-13 13:39:08 +05:30
:diff-mode="diffMode"
2019-07-07 11:18:12 +05:30
:diff-viewer-mode="diffViewerMode"
2019-02-15 15:39:39 +05:30
:new-path="discussion.diff_file.new_path"
:new-sha="discussion.diff_file.diff_refs.head_sha"
:old-path="discussion.diff_file.old_path"
:old-sha="discussion.diff_file.diff_refs.base_sha"
:file-hash="discussion.diff_file.file_hash"
2018-12-13 13:39:08 +05:30
:project-path="projectPath"
>
2021-02-22 17:27:13 +05:30
<template #image-overlay="{ renderedWidth, renderedHeight }">
<image-diff-overlay
v-if="renderedWidth"
:rendered-width="renderedWidth"
:rendered-height="renderedHeight"
:discussions="discussion"
:file-hash="discussion.diff_file.file_hash"
:show-comment-icon="true"
:should-toggle-discussion="false"
badge-class="image-comment-badge gl-text-gray-500"
/>
</template>
2018-12-13 13:39:08 +05:30
</diff-viewer>
2018-03-27 19:54:05 +05:30
<slot></slot>
</div>
</div>
</template>