diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-07 18:06:21 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-07 18:06:21 +0000 |
commit | d8ccc7a00b7a1ea954263170a2044257424a2cfe (patch) | |
tree | 0a29cb558aae61795da47c82ce7e87983c5dc4af /app/assets/javascripts/repository/components/tree_content.vue | |
parent | 90a06a20be61bb6d48d77746091492831153e075 (diff) | |
download | gitlab-ce-d8ccc7a00b7a1ea954263170a2044257424a2cfe.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/repository/components/tree_content.vue')
-rw-r--r-- | app/assets/javascripts/repository/components/tree_content.vue | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue new file mode 100644 index 00000000000..949e653fc8f --- /dev/null +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -0,0 +1,115 @@ +<script> +import createFlash from '~/flash'; +import { __ } from '../../locale'; +import FileTable from './table/index.vue'; +import getRefMixin from '../mixins/get_ref'; +import getFiles from '../queries/getFiles.query.graphql'; +import getProjectPath from '../queries/getProjectPath.query.graphql'; +import FilePreview from './preview/index.vue'; +import { readmeFile } from '../utils/readme'; + +const PAGE_SIZE = 100; + +export default { + components: { + FileTable, + FilePreview, + }, + mixins: [getRefMixin], + apollo: { + projectPath: { + query: getProjectPath, + }, + }, + props: { + path: { + type: String, + required: false, + default: '/', + }, + }, + data() { + return { + projectPath: '', + nextPageCursor: '', + entries: { + trees: [], + submodules: [], + blobs: [], + }, + isLoadingFiles: false, + }; + }, + computed: { + readme() { + return readmeFile(this.entries.blobs); + }, + }, + + watch: { + $route: function routeChange() { + this.entries.trees = []; + this.entries.submodules = []; + this.entries.blobs = []; + this.nextPageCursor = ''; + this.fetchFiles(); + }, + }, + mounted() { + // We need to wait for `ref` and `projectPath` to be set + this.$nextTick(() => this.fetchFiles()); + }, + methods: { + fetchFiles() { + this.isLoadingFiles = true; + + return this.$apollo + .query({ + query: getFiles, + variables: { + projectPath: this.projectPath, + ref: this.ref, + path: this.path || '/', + nextPageCursor: this.nextPageCursor, + pageSize: PAGE_SIZE, + }, + }) + .then(({ data }) => { + if (!data) return; + + const pageInfo = this.hasNextPage(data.project.repository.tree); + + this.isLoadingFiles = false; + this.entries = Object.keys(this.entries).reduce( + (acc, key) => ({ + ...acc, + [key]: this.normalizeData(key, data.project.repository.tree[key].edges), + }), + {}, + ); + + if (pageInfo && pageInfo.hasNextPage) { + this.nextPageCursor = pageInfo.endCursor; + this.fetchFiles(); + } + }) + .catch(() => createFlash(__('An error occurred while fetching folder content.'))); + }, + normalizeData(key, data) { + return this.entries[key].concat(data.map(({ node }) => node)); + }, + hasNextPage(data) { + return [] + .concat(data.trees.pageInfo, data.submodules.pageInfo, data.blobs.pageInfo) + .find(({ hasNextPage }) => hasNextPage); + }, + }, +}; +</script> + +<template> + <div> + <file-table :path="path" :entries="entries" :is-loading="isLoadingFiles" /> + <file-preview v-if="readme" :blob="readme" /> + </div> +</template> |