debian-mirror-gitlab/app/assets/javascripts/repository/components/tree_content.vue

136 lines
3.2 KiB
Vue
Raw Normal View History

2019-12-26 22:10:19 +05:30
<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';
2020-03-13 15:44:24 +05:30
import getVueFileListLfsBadge from '../queries/getVueFileListLfsBadge.query.graphql';
2019-12-26 22:10:19 +05:30
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,
},
2020-03-13 15:44:24 +05:30
vueFileListLfsBadge: {
query: getVueFileListLfsBadge,
},
2019-12-26 22:10:19 +05:30
},
props: {
path: {
type: String,
required: false,
default: '/',
},
2020-03-13 15:44:24 +05:30
loadingPath: {
type: String,
required: false,
default: '',
},
2019-12-26 22:10:19 +05:30
},
data() {
return {
projectPath: '',
nextPageCursor: '',
entries: {
trees: [],
submodules: [],
blobs: [],
},
isLoadingFiles: false,
2020-03-13 15:44:24 +05:30
vueFileListLfsBadge: false,
2019-12-26 22:10:19 +05:30
};
},
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,
2020-03-13 15:44:24 +05:30
vueLfsEnabled: this.vueFileListLfsBadge,
2019-12-26 22:10:19 +05:30
},
})
.then(({ data }) => {
2020-03-13 15:44:24 +05:30
if (data.errors) throw data.errors;
if (!data?.project?.repository) return;
2019-12-26 22:10:19 +05:30
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),
}),
{},
);
2020-03-13 15:44:24 +05:30
if (pageInfo?.hasNextPage) {
2019-12-26 22:10:19 +05:30
this.nextPageCursor = pageInfo.endCursor;
this.fetchFiles();
}
})
2020-03-13 15:44:24 +05:30
.catch(error => {
createFlash(__('An error occurred while fetching folder content.'));
throw error;
});
2019-12-26 22:10:19 +05:30
},
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>
2020-03-13 15:44:24 +05:30
<file-table
:path="path"
:entries="entries"
:is-loading="isLoadingFiles"
:loading-path="loadingPath"
/>
2019-12-26 22:10:19 +05:30
<file-preview v-if="readme" :blob="readme" />
</div>
</template>