tree_list.vue 3.2 KB
Newer Older
1 2
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
Clement Ho's avatar
Clement Ho committed
3
import { GlTooltipDirective } from '@gitlab/ui';
4
import { s__, sprintf } from '~/locale';
5
import Icon from '~/vue_shared/components/icon.vue';
6 7
import FileTree from '~/vue_shared/components/file_tree.vue';
import DiffFileRow from './diff_file_row.vue';
8 9

export default {
10
  directives: {
Clement Ho's avatar
Clement Ho committed
11
    GlTooltip: GlTooltipDirective,
12
  },
13 14
  components: {
    Icon,
15
    FileTree,
16
  },
17 18 19 20 21 22
  props: {
    hideFileStats: {
      type: Boolean,
      required: true,
    },
  },
23 24 25 26 27
  data() {
    return {
      search: '',
    };
  },
28
  computed: {
29 30
    ...mapState('diffs', ['tree', 'renderTreeList']),
    ...mapGetters('diffs', ['allBlobs']),
31
    filteredTreeList() {
32 33
      const search = this.search.toLowerCase().trim();

34
      if (search === '') {
35
        return this.renderTreeList ? this.tree : this.allBlobs;
36
      }
37 38 39 40 41 42 43 44 45 46 47 48 49

      return this.allBlobs.reduce((acc, folder) => {
        const tree = folder.tree.filter(f => f.path.toLowerCase().indexOf(search) >= 0);

        if (tree.length) {
          return acc.concat({
            ...folder,
            tree,
          });
        }

        return acc;
      }, []);
50
    },
51 52
  },
  methods: {
53
    ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
54 55 56
    clearSearch() {
      this.search = '';
    },
57
  },
58 59
  searchPlaceholder: sprintf(s__('MergeRequest|Search files (%{modifier_key}P)'), {
    modifier_key: /Mac/i.test(navigator.userAgent) ? '' : 'Ctrl+',
60
  }),
61
  DiffFileRow,
62 63 64 65 66
};
</script>

<template>
  <div class="tree-list-holder d-flex flex-column">
67 68
    <div class="append-bottom-8 position-relative tree-list-search d-flex">
      <div class="flex-fill d-flex">
Mike Greiling's avatar
Mike Greiling committed
69
        <icon name="search" class="position-absolute tree-list-icon" />
70
        <label for="diff-tree-search" class="sr-only">{{ $options.searchPlaceholder }}</label>
71
        <input
72
          id="diff-tree-search"
73
          v-model="search"
74
          :placeholder="$options.searchPlaceholder"
75
          type="search"
76
          name="diff-tree-search"
77 78 79 80 81 82 83 84 85 86 87
          class="form-control"
        />
        <button
          v-show="search"
          :aria-label="__('Clear search')"
          type="button"
          class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
          @click="clearSearch"
        >
          <icon name="close" />
        </button>
88
      </div>
89
    </div>
90
    <div :class="{ 'pt-0 tree-list-blobs': !renderTreeList }" class="tree-list-scroll">
91
      <template v-if="filteredTreeList.length">
92
        <file-tree
93 94 95 96
          v-for="file in filteredTreeList"
          :key="file.key"
          :file="file"
          :level="0"
97
          :hide-file-stats="hideFileStats"
98
          :file-row-component="$options.DiffFileRow"
99 100 101 102
          @toggleTreeOpen="toggleTreeOpen"
          @clickFile="scrollToFile"
        />
      </template>
Mike Greiling's avatar
Mike Greiling committed
103
      <p v-else class="prepend-top-20 append-bottom-20 text-center">
104 105 106 107 108
        {{ s__('MergeRequest|No files found') }}
      </p>
    </div>
  </div>
</template>
109 110 111 112 113

<style>
.tree-list-blobs .file-row-name {
  margin-left: 12px;
}
114 115 116 117 118 119 120 121

.diff-tree-search-shortcut {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

122
.tree-list-icon:not(button) {
123 124
  pointer-events: none;
}
125
</style>