debian-mirror-gitlab/app/assets/javascripts/diffs/components/app.vue

230 lines
6.3 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import { __ } from '~/locale';
import createFlash from '~/flash';
2019-02-15 15:39:39 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2018-11-08 19:23:39 +05:30
import eventHub from '../../notes/event_hub';
import CompareVersions from './compare_versions.vue';
import DiffFile from './diff_file.vue';
import NoChanges from './no_changes.vue';
import HiddenFilesWarning from './hidden_files_warning.vue';
2018-12-05 23:21:45 +05:30
import CommitWidget from './commit_widget.vue';
import TreeList from './tree_list.vue';
2018-11-08 19:23:39 +05:30
export default {
name: 'DiffsApp',
components: {
Icon,
CompareVersions,
DiffFile,
NoChanges,
HiddenFilesWarning,
2018-12-05 23:21:45 +05:30
CommitWidget,
TreeList,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2018-11-08 19:23:39 +05:30
},
props: {
endpoint: {
type: String,
required: true,
},
projectPath: {
type: String,
required: true,
},
shouldShow: {
type: Boolean,
required: false,
default: false,
},
currentUser: {
type: Object,
required: true,
},
2019-02-15 15:39:39 +05:30
helpPagePath: {
type: String,
required: false,
default: '',
},
changesEmptyStateIllustration: {
type: String,
required: false,
default: '',
},
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
data() {
return {
assignedDiscussions: false,
};
},
2018-11-08 19:23:39 +05:30
computed: {
...mapState({
isLoading: state => state.diffs.isLoading,
diffFiles: state => state.diffs.diffFiles,
diffViewType: state => state.diffs.diffViewType,
mergeRequestDiffs: state => state.diffs.mergeRequestDiffs,
mergeRequestDiff: state => state.diffs.mergeRequestDiff,
commit: state => state.diffs.commit,
targetBranchName: state => state.diffs.targetBranchName,
renderOverflowWarning: state => state.diffs.renderOverflowWarning,
numTotalFiles: state => state.diffs.realSize,
numVisibleFiles: state => state.diffs.size,
plainDiffPath: state => state.diffs.plainDiffPath,
emailPatchPath: state => state.diffs.emailPatchPath,
}),
2019-02-15 15:39:39 +05:30
...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion']),
2018-11-08 19:23:39 +05:30
...mapGetters('diffs', ['isParallelView']),
2018-12-13 13:39:08 +05:30
...mapGetters(['isNotesFetched', 'getNoteableData']),
2018-11-08 19:23:39 +05:30
targetBranch() {
return {
branchName: this.targetBranchName,
versionIndex: -1,
path: '',
};
},
canCurrentUserFork() {
2019-02-15 15:39:39 +05:30
return this.currentUser.can_fork === true && this.currentUser.can_create_merge_request;
2018-11-08 19:23:39 +05:30
},
2018-12-05 23:21:45 +05:30
showCompareVersions() {
return this.mergeRequestDiffs && this.mergeRequestDiff;
},
2019-02-15 15:39:39 +05:30
renderDiffFiles() {
return (
this.diffFiles.length > 0 ||
(this.startVersion &&
this.startVersion.version_index === this.mergeRequestDiff.version_index)
);
},
2018-11-08 19:23:39 +05:30
},
watch: {
diffViewType() {
this.adjustView();
},
shouldShow() {
// When the shouldShow property changed to true, the route is rendered for the first time
// and if we have the isLoading as true this means we didn't fetch the data
if (this.isLoading) {
this.fetchData();
}
this.adjustView();
},
2018-12-05 23:21:45 +05:30
isLoading: 'adjustView',
showTreeList: 'adjustView',
2018-11-08 19:23:39 +05:30
},
mounted() {
this.setBaseConfig({ endpoint: this.endpoint, projectPath: this.projectPath });
if (this.shouldShow) {
this.fetchData();
}
2019-02-15 15:39:39 +05:30
const id = window && window.location && window.location.hash;
if (id) {
this.setHighlightedRow(id.slice(1));
}
2018-11-08 19:23:39 +05:30
},
created() {
this.adjustView();
2018-11-20 20:47:30 +05:30
eventHub.$once('fetchedNotesData', this.setDiscussions);
2019-03-02 22:35:43 +05:30
eventHub.$once('fetchDiffData', this.fetchData);
},
beforeDestroy() {
eventHub.$off('fetchDiffData', this.fetchData);
2018-11-08 19:23:39 +05:30
},
methods: {
2019-02-15 15:39:39 +05:30
...mapActions(['startTaskList']),
2018-11-20 20:47:30 +05:30
...mapActions('diffs', [
'setBaseConfig',
'fetchDiffFiles',
'startRenderDiffsQueue',
'assignDiscussionsToDiff',
2019-02-15 15:39:39 +05:30
'setHighlightedRow',
2018-11-20 20:47:30 +05:30
]),
2018-11-08 19:23:39 +05:30
fetchData() {
2018-11-20 20:47:30 +05:30
this.fetchDiffFiles()
.then(() => {
requestIdleCallback(
() => {
this.setDiscussions();
this.startRenderDiffsQueue();
},
{ timeout: 1000 },
);
})
.catch(() => {
createFlash(__('Something went wrong on our end. Please try again!'));
});
2018-11-08 19:23:39 +05:30
if (!this.isNotesFetched) {
eventHub.$emit('fetchNotesData');
}
},
2018-11-20 20:47:30 +05:30
setDiscussions() {
2018-12-13 13:39:08 +05:30
if (this.isNotesFetched && !this.assignedDiscussions && !this.isLoading) {
this.assignedDiscussions = true;
2019-02-15 15:39:39 +05:30
requestIdleCallback(
() =>
this.assignDiscussionsToDiff()
.then(this.$nextTick)
.then(this.startTaskList),
{ timeout: 1000 },
);
2018-11-20 20:47:30 +05:30
}
},
2018-11-08 19:23:39 +05:30
adjustView() {
2018-12-05 23:21:45 +05:30
if (this.shouldShow) {
this.$nextTick(() => {
window.mrTabs.resetViewContainer();
window.mrTabs.expandViewContainer(this.showTreeList);
});
2018-11-08 19:23:39 +05:30
}
},
},
};
</script>
<template>
<div v-show="shouldShow">
2019-02-15 15:39:39 +05:30
<div v-if="isLoading" class="loading"><gl-loading-icon /></div>
<div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
2018-11-08 19:23:39 +05:30
<compare-versions
:merge-request-diffs="mergeRequestDiffs"
:merge-request-diff="mergeRequestDiff"
:target-branch="targetBranch"
/>
<hidden-files-warning
v-if="renderOverflowWarning"
:visible="numVisibleFiles"
:total="numTotalFiles"
:plain-diff-path="plainDiffPath"
:email-patch-path="emailPatchPath"
/>
2018-12-13 13:39:08 +05:30
<div
:data-can-create-note="getNoteableData.current_user.can_create_note"
class="files d-flex prepend-top-default"
>
2019-02-15 15:39:39 +05:30
<div v-show="showTreeList" class="diff-tree-list"><tree-list /></div>
<div class="diff-files-holder">
<commit-widget v-if="commit" :commit="commit" />
<template v-if="renderDiffFiles">
<diff-file
v-for="file in diffFiles"
:key="file.newPath"
:file="file"
:help-page-path="helpPagePath"
:can-current-user-fork="canCurrentUserFork"
/>
</template>
<no-changes v-else :changes-empty-state-illustration="changesEmptyStateIllustration" />
2018-12-05 23:21:45 +05:30
</div>
2018-11-08 19:23:39 +05:30
</div>
</div>
</div>
</template>