summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/diffs/components/diff_content.vue
blob: 02d5be1821bd030979ba4bca8013bb92934f3575 (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
<script>
import { mapGetters, mapState } from 'vuex';
import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
import { diffModes } from '~/ide/constants';
import InlineDiffView from './inline_diff_view.vue';
import ParallelDiffView from './parallel_diff_view.vue';

export default {
  components: {
    InlineDiffView,
    ParallelDiffView,
    DiffViewer,
  },
  props: {
    diffFile: {
      type: Object,
      required: true,
    },
  },
  computed: {
    ...mapState({
      projectPath: state => state.diffs.projectPath,
      endpoint: state => state.diffs.endpoint,
    }),
    ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
    diffMode() {
      const diffModeKey = Object.keys(diffModes).find(key => this.diffFile[`${key}File`]);
      return diffModes[diffModeKey] || diffModes.replaced;
    },
    isTextFile() {
      return this.diffFile.text;
    },
  },
};
</script>

<template>
  <div class="diff-content">
    <div class="diff-viewer">
      <template v-if="isTextFile">
        <inline-diff-view
          v-if="isInlineView"
          :diff-file="diffFile"
          :diff-lines="diffFile.highlightedDiffLines || []"
        />
        <parallel-diff-view
          v-if="isParallelView"
          :diff-file="diffFile"
          :diff-lines="diffFile.parallelDiffLines || []"
        />
      </template>
      <diff-viewer
        v-else
        :diff-mode="diffMode"
        :new-path="diffFile.newPath"
        :new-sha="diffFile.diffRefs.headSha"
        :old-path="diffFile.oldPath"
        :old-sha="diffFile.diffRefs.baseSha"
        :project-path="projectPath"/>
    </div>
  </div>
</template>