diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/table/index.vue')
-rw-r--r-- | app/assets/javascripts/repository/components/table/index.vue | 45 |
1 files changed, 43 insertions, 2 deletions
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index 10a30bd44b1..0a2ed753e38 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -1,5 +1,6 @@ <script> import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { sprintf, __ } from '../../../locale'; import getRefMixin from '../../mixins/get_ref'; import projectPathQuery from '../../queries/project_path.query.graphql'; @@ -15,13 +16,18 @@ export default { ParentRow, GlButton, }, - mixins: [getRefMixin], + mixins: [getRefMixin, glFeatureFlagMixin()], apollo: { projectPath: { query: projectPathQuery, }, }, props: { + commits: { + type: Array, + required: false, + default: () => [], + }, path: { type: String, required: true, @@ -48,6 +54,7 @@ export default { data() { return { projectPath: '', + rowNumbers: {}, }; }, computed: { @@ -73,10 +80,38 @@ export default { return ['', '/'].indexOf(this.path) === -1; }, }, + watch: { + $route: function routeChange() { + this.$options.totalRowsLoaded = -1; + }, + }, + totalRowsLoaded: -1, methods: { showMore() { this.$emit('showMore'); }, + generateRowNumber(path, id, index) { + const key = `${path}-${id}-${index}`; + if (!this.glFeatures.lazyLoadCommits) { + return 0; + } + + if (!this.rowNumbers[key] && this.rowNumbers[key] !== 0) { + this.$options.totalRowsLoaded += 1; + this.rowNumbers[key] = this.$options.totalRowsLoaded; + } + + return this.rowNumbers[key]; + }, + getCommit(fileName, type) { + if (!this.glFeatures.lazyLoadCommits) { + return {}; + } + + return this.commits.find( + (commitEntry) => commitEntry.fileName === fileName && commitEntry.type === type, + ); + }, }, }; </script> @@ -87,6 +122,7 @@ export default { <table :aria-label="tableCaption" class="table tree-table" + :class="{ 'gl-table-layout-fixed': !showParentRow }" aria-live="polite" data-qa-selector="file_tree_table" > @@ -115,12 +151,17 @@ export default { :lfs-oid="entry.lfsOid" :loading-path="loadingPath" :total-entries="totalEntries" + :row-number="generateRowNumber(entry.flatPath, entry.id, index)" + :commit-info="getCommit(entry.name, entry.type)" + v-on="$listeners" /> </template> <template v-if="isLoading"> <tr v-for="i in 5" :key="i" aria-hidden="true"> <td><gl-skeleton-loading :lines="1" class="h-auto" /></td> - <td><gl-skeleton-loading :lines="1" class="h-auto" /></td> + <td class="gl-display-none gl-sm-display-block"> + <gl-skeleton-loading :lines="1" class="h-auto" /> + </td> <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td> </tr> </template> |