diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-05-21 12:27:09 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-05-21 12:27:09 +0300 |
commit | 5ae293e33c4d6c8187543778717474a7aaccee1c (patch) | |
tree | 7d507f68e8b9857a4db1aa7d5cac82274a300e29 /app | |
parent | 383d61af5c2a5a920213957365f6a2a791f79103 (diff) | |
parent | a3014debbd9435c90a86be398d33b1cd3453f10c (diff) |
Merge branch 'repo-list-table-component' into 'master'
Added table component for file listing
See merge request gitlab-org/gitlab-ce!28334
Diffstat (limited to 'app')
7 files changed, 113 insertions, 12 deletions
diff --git a/app/assets/javascripts/repository/components/table/header.vue b/app/assets/javascripts/repository/components/table/header.vue new file mode 100644 index 00000000000..9d30aa88155 --- /dev/null +++ b/app/assets/javascripts/repository/components/table/header.vue @@ -0,0 +1,9 @@ +<template> + <thead> + <tr> + <th id="name" scope="col">{{ s__('ProjectFileTree|Name') }}</th> + <th id="last-commit" scope="col" class="d-none d-sm-table-cell">{{ __('Last commit') }}</th> + <th id="last-update" scope="col" class="text-right">{{ __('Last update') }}</th> + </tr> + </thead> +</template> diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue new file mode 100644 index 00000000000..7119861c7b3 --- /dev/null +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -0,0 +1,65 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +import { sprintf, __ } from '../../../locale'; +import getRefMixin from '../../mixins/get_ref'; +import getFiles from '../../queries/getFiles.graphql'; +import TableHeader from './header.vue'; + +export default { + components: { + GlLoadingIcon, + TableHeader, + }, + mixins: [getRefMixin], + apollo: { + files: { + query: getFiles, + variables() { + return { + ref: this.ref, + path: this.path, + }; + }, + }, + }, + props: { + path: { + type: String, + required: true, + }, + }, + data() { + return { + files: [], + }; + }, + computed: { + tableCaption() { + return sprintf( + __('Files, directories, and submodules in the path %{path} for commit reference %{ref}'), + { path: this.path, ref: this.ref }, + ); + }, + isLoadingFiles() { + return this.$apollo.queries.files.loading; + }, + }, +}; +</script> + +<template> + <div class="tree-content-holder"> + <div class="table-holder bordered-box"> + <table class="table tree-table qa-file-tree" aria-live="polite"> + <caption class="sr-only"> + {{ + tableCaption + }} + </caption> + <table-header /> + <tbody></tbody> + </table> + <gl-loading-icon v-if="isLoadingFiles" class="my-3" size="md" /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js index febfcce780c..0aedc73fc12 100644 --- a/app/assets/javascripts/repository/graphql.js +++ b/app/assets/javascripts/repository/graphql.js @@ -4,7 +4,13 @@ import createDefaultClient from '~/lib/graphql'; Vue.use(VueApollo); -const defaultClient = createDefaultClient({}); +const defaultClient = createDefaultClient({ + Query: { + files() { + return []; + }, + }, +}); export default new VueApollo({ defaultClient, diff --git a/app/assets/javascripts/repository/mixins/get_ref.js b/app/assets/javascripts/repository/mixins/get_ref.js new file mode 100644 index 00000000000..b06087d6f42 --- /dev/null +++ b/app/assets/javascripts/repository/mixins/get_ref.js @@ -0,0 +1,14 @@ +import getRef from '../queries/getRef.graphql'; + +export default { + apollo: { + ref: { + query: getRef, + }, + }, + data() { + return { + ref: '', + }; + }, +}; diff --git a/app/assets/javascripts/repository/pages/index.vue b/app/assets/javascripts/repository/pages/index.vue index fdbf195f0f6..2d92e9174ca 100644 --- a/app/assets/javascripts/repository/pages/index.vue +++ b/app/assets/javascripts/repository/pages/index.vue @@ -1,11 +1,9 @@ <script> -import getRef from '../queries/getRef.graphql'; +import FileTable from '../components/table/index.vue'; export default { - apollo: { - ref: { - query: getRef, - }, + components: { + FileTable, }, data() { return { @@ -16,9 +14,5 @@ export default { </script> <template> - <div> - <router-link :to="{ path: `/tree/${ref}/app` }"> - Go to tree - </router-link> - </div> + <file-table path="/" /> </template> diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue index f51aafee775..413102b2cd3 100644 --- a/app/assets/javascripts/repository/pages/tree.vue +++ b/app/assets/javascripts/repository/pages/tree.vue @@ -1,5 +1,10 @@ <script> +import FileTable from '../components/table/index.vue'; + export default { + component: { + FileTable, + }, props: { path: { type: String, @@ -11,5 +16,5 @@ export default { </script> <template> - <div>{{ path }}</div> + <file-table :path="path" /> </template> diff --git a/app/assets/javascripts/repository/queries/getFiles.graphql b/app/assets/javascripts/repository/queries/getFiles.graphql new file mode 100644 index 00000000000..5ceaf67ea82 --- /dev/null +++ b/app/assets/javascripts/repository/queries/getFiles.graphql @@ -0,0 +1,8 @@ +query getFiles($path: String!, $ref: String!) { + files(path: $path, ref: $ref) @client { + id + name + fullPath + type + } +} |