2018-10-03 09:05:43 +00:00
|
|
|
<script>
|
|
|
|
import { mapActions, mapGetters, mapState } from 'vuex';
|
2018-11-16 19:29:11 +00:00
|
|
|
import { GlTooltipDirective } from '@gitlab/ui';
|
2019-05-16 12:21:27 +00:00
|
|
|
import { s__, sprintf } from '~/locale';
|
2018-10-03 09:05:43 +00:00
|
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
2020-02-07 18:09:03 +00:00
|
|
|
import FileTree from '~/vue_shared/components/file_tree.vue';
|
|
|
|
import DiffFileRow from './diff_file_row.vue';
|
2018-10-03 09:05:43 +00:00
|
|
|
|
|
|
|
export default {
|
2018-10-08 10:50:22 +00:00
|
|
|
directives: {
|
2018-10-29 23:16:10 +00:00
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-10-08 10:50:22 +00:00
|
|
|
},
|
2018-10-03 09:05:43 +00:00
|
|
|
components: {
|
|
|
|
Icon,
|
2020-02-07 18:09:03 +00:00
|
|
|
FileTree,
|
2018-10-03 09:05:43 +00:00
|
|
|
},
|
2019-02-15 10:25:33 +00:00
|
|
|
props: {
|
|
|
|
hideFileStats: {
|
|
|
|
type: Boolean,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
2019-02-08 14:47:07 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
search: '',
|
|
|
|
};
|
|
|
|
},
|
2018-10-03 09:05:43 +00:00
|
|
|
computed: {
|
2020-03-24 21:07:54 +00:00
|
|
|
...mapState('diffs', ['tree', 'renderTreeList']),
|
2019-01-30 03:21:26 +00:00
|
|
|
...mapGetters('diffs', ['allBlobs']),
|
2018-10-03 09:05:43 +00:00
|
|
|
filteredTreeList() {
|
2019-02-08 14:47:07 +00:00
|
|
|
const search = this.search.toLowerCase().trim();
|
|
|
|
|
2019-03-18 13:52:26 +00:00
|
|
|
if (search === '') {
|
2019-02-08 14:47:07 +00:00
|
|
|
return this.renderTreeList ? this.tree : this.allBlobs;
|
2019-03-18 13:52:26 +00:00
|
|
|
}
|
2019-02-08 14:47:07 +00:00
|
|
|
|
|
|
|
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;
|
|
|
|
}, []);
|
2018-10-08 10:50:22 +00:00
|
|
|
},
|
2018-10-03 09:05:43 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2019-03-18 13:52:26 +00:00
|
|
|
...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
|
2019-02-08 14:47:07 +00:00
|
|
|
clearSearch() {
|
|
|
|
this.search = '';
|
|
|
|
},
|
2018-10-03 09:05:43 +00:00
|
|
|
},
|
2020-02-05 09:08:43 +00:00
|
|
|
searchPlaceholder: sprintf(s__('MergeRequest|Search files (%{modifier_key}P)'), {
|
|
|
|
modifier_key: /Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl+',
|
2019-05-16 12:21:27 +00:00
|
|
|
}),
|
2020-02-07 18:09:03 +00:00
|
|
|
DiffFileRow,
|
2018-10-03 09:05:43 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="tree-list-holder d-flex flex-column">
|
2018-10-08 10:50:22 +00:00
|
|
|
<div class="append-bottom-8 position-relative tree-list-search d-flex">
|
|
|
|
<div class="flex-fill d-flex">
|
2018-11-16 20:07:38 +00:00
|
|
|
<icon name="search" class="position-absolute tree-list-icon" />
|
2019-05-16 12:21:27 +00:00
|
|
|
<label for="diff-tree-search" class="sr-only">{{ $options.searchPlaceholder }}</label>
|
2019-03-18 13:52:26 +00:00
|
|
|
<input
|
2019-05-16 12:21:27 +00:00
|
|
|
id="diff-tree-search"
|
2019-03-18 13:52:26 +00:00
|
|
|
v-model="search"
|
2019-05-16 12:21:27 +00:00
|
|
|
:placeholder="$options.searchPlaceholder"
|
2019-03-18 13:52:26 +00:00
|
|
|
type="search"
|
2019-05-16 12:21:27 +00:00
|
|
|
name="diff-tree-search"
|
2019-03-18 13:52:26 +00:00
|
|
|
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>
|
2018-10-08 10:50:22 +00:00
|
|
|
</div>
|
2018-10-03 09:05:43 +00:00
|
|
|
</div>
|
2019-01-08 09:31:23 +00:00
|
|
|
<div :class="{ 'pt-0 tree-list-blobs': !renderTreeList }" class="tree-list-scroll">
|
2018-10-03 09:05:43 +00:00
|
|
|
<template v-if="filteredTreeList.length">
|
2020-02-07 18:09:03 +00:00
|
|
|
<file-tree
|
2018-10-03 09:05:43 +00:00
|
|
|
v-for="file in filteredTreeList"
|
|
|
|
:key="file.key"
|
|
|
|
:file="file"
|
|
|
|
:level="0"
|
2020-02-17 15:09:01 +00:00
|
|
|
:hide-file-stats="hideFileStats"
|
2020-02-07 18:09:03 +00:00
|
|
|
:file-row-component="$options.DiffFileRow"
|
2018-10-03 09:05:43 +00:00
|
|
|
@toggleTreeOpen="toggleTreeOpen"
|
|
|
|
@clickFile="scrollToFile"
|
|
|
|
/>
|
|
|
|
</template>
|
2018-11-16 20:07:38 +00:00
|
|
|
<p v-else class="prepend-top-20 append-bottom-20 text-center">
|
2018-10-03 09:05:43 +00:00
|
|
|
{{ s__('MergeRequest|No files found') }}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
2019-01-08 09:31:23 +00:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.tree-list-blobs .file-row-name {
|
|
|
|
margin-left: 12px;
|
|
|
|
}
|
2019-01-16 15:17:10 +00:00
|
|
|
|
|
|
|
.diff-tree-search-shortcut {
|
|
|
|
top: 50%;
|
|
|
|
right: 10px;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
2019-02-08 14:47:07 +00:00
|
|
|
.tree-list-icon:not(button) {
|
2019-01-16 15:17:10 +00:00
|
|
|
pointer-events: none;
|
|
|
|
}
|
2019-01-08 09:31:23 +00:00
|
|
|
</style>
|