1<script>
2import { mapState, mapActions, mapGetters } from 'vuex';
3import { stageKeys } from '../constants';
4import EmptyState from './commit_sidebar/empty_state.vue';
5import CommitFilesList from './commit_sidebar/list.vue';
6
7export default {
8  components: {
9    CommitFilesList,
10    EmptyState,
11  },
12  computed: {
13    ...mapState(['changedFiles', 'stagedFiles', 'lastCommitMsg']),
14    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
15    ...mapGetters(['lastOpenedFile', 'someUncommittedChanges', 'activeFile']),
16    ...mapGetters('commit', ['discardDraftButtonDisabled']),
17    showStageUnstageArea() {
18      return Boolean(this.someUncommittedChanges || this.lastCommitMsg);
19    },
20    activeFileKey() {
21      return this.activeFile ? this.activeFile.key : null;
22    },
23  },
24  mounted() {
25    this.initialize();
26  },
27  activated() {
28    this.initialize();
29  },
30  methods: {
31    ...mapActions(['openPendingTab', 'updateViewer', 'updateActivityBarView']),
32    initialize() {
33      const file =
34        this.lastOpenedFile && this.lastOpenedFile.type !== 'tree'
35          ? this.lastOpenedFile
36          : this.activeFile;
37
38      if (!file) return;
39
40      this.openPendingTab({
41        file,
42        keyPrefix: file.staged ? stageKeys.staged : stageKeys.unstaged,
43      })
44        .then((changeViewer) => {
45          if (changeViewer) {
46            this.updateViewer('diff');
47          }
48        })
49        .catch((e) => {
50          throw e;
51        });
52    },
53  },
54  stageKeys,
55};
56</script>
57
58<template>
59  <div class="multi-file-commit-panel-section">
60    <template v-if="showStageUnstageArea">
61      <commit-files-list
62        :key-prefix="$options.stageKeys.staged"
63        :file-list="stagedFiles"
64        :active-file-key="activeFileKey"
65        :empty-state-text="__('There are no changes')"
66        class="is-first"
67      />
68    </template>
69    <empty-state v-else />
70  </div>
71</template>
72