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

162 lines
4.1 KiB
Vue
Raw Normal View History

2019-12-26 22:10:19 +05:30
<script>
2020-10-24 23:57:45 +05:30
import { GlButton } from '@gitlab/ui';
import { deprecatedCreateFlash as createFlash } from '~/flash';
2019-12-26 22:10:19 +05:30
import { __ } from '../../locale';
import FileTable from './table/index.vue';
import getRefMixin from '../mixins/get_ref';
2020-10-24 23:57:45 +05:30
import filesQuery from '../queries/files.query.graphql';
import projectPathQuery from '../queries/project_path.query.graphql';
2019-12-26 22:10:19 +05:30
import FilePreview from './preview/index.vue';
import { readmeFile } from '../utils/readme';
2020-10-24 23:57:45 +05:30
const LIMIT = 1000;
2019-12-26 22:10:19 +05:30
const PAGE_SIZE = 100;
2020-10-24 23:57:45 +05:30
export const INITIAL_FETCH_COUNT = LIMIT / PAGE_SIZE;
2019-12-26 22:10:19 +05:30
export default {
components: {
FileTable,
FilePreview,
2020-10-24 23:57:45 +05:30
GlButton,
2019-12-26 22:10:19 +05:30
},
mixins: [getRefMixin],
apollo: {
projectPath: {
2020-10-24 23:57:45 +05:30
query: projectPathQuery,
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-10-24 23:57:45 +05:30
isOverLimit: false,
clickedShowMore: false,
pageSize: PAGE_SIZE,
fetchCounter: 0,
2019-12-26 22:10:19 +05:30
};
},
computed: {
readme() {
return readmeFile(this.entries.blobs);
},
2020-10-24 23:57:45 +05:30
hasShowMore() {
return !this.clickedShowMore && this.fetchCounter === INITIAL_FETCH_COUNT;
},
2019-12-26 22:10:19 +05:30
},
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({
2020-10-24 23:57:45 +05:30
query: filesQuery,
2019-12-26 22:10:19 +05:30
variables: {
projectPath: this.projectPath,
ref: this.ref,
path: this.path || '/',
nextPageCursor: this.nextPageCursor,
2020-10-24 23:57:45 +05:30
pageSize: this.pageSize,
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;
2020-10-24 23:57:45 +05:30
this.fetchCounter += 1;
if (this.fetchCounter < INITIAL_FETCH_COUNT || this.clickedShowMore) {
this.fetchFiles();
this.clickedShowMore = false;
}
2019-12-26 22:10:19 +05:30
}
})
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);
},
2020-10-24 23:57:45 +05:30
showMore() {
this.clickedShowMore = true;
this.fetchFiles();
},
2019-12-26 22:10:19 +05:30
},
};
</script>
<template>
<div>
2020-03-13 15:44:24 +05:30
<file-table
:path="path"
:entries="entries"
:is-loading="isLoadingFiles"
:loading-path="loadingPath"
/>
2020-10-24 23:57:45 +05:30
<div
v-if="hasShowMore"
class="gl-border-1 gl-border-gray-100 gl-rounded-base gl-border-t-none gl-border-b-solid gl-border-l-solid gl-border-r-solid gl-rounded-top-right-none gl-rounded-top-left-none gl-mt-n1"
>
<gl-button
variant="link"
class="gl-display-flex gl-w-full gl-py-4!"
:loading="isLoadingFiles"
@click="showMore"
>
{{ s__('ProjectFileTree|Show more') }}
</gl-button>
</div>
2019-12-26 22:10:19 +05:30
<file-preview v-if="readme" :blob="readme" />
</div>
</template>