diff options
author | Phil Hughes <me@iamphill.com> | 2019-05-21 14:26:18 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-05-21 14:26:18 +0100 |
commit | 5ddedb6b8bf3f47c400e3d38e415462abefa3b50 (patch) | |
tree | f458e8cedf8d9be1a0b95804f22c0e7f4bcfb862 /app/assets/javascripts/repository/components/table | |
parent | 729bac5e1643eb47e97ed1b9e2a90868cdbb2382 (diff) | |
download | gitlab-ce-5ddedb6b8bf3f47c400e3d38e415462abefa3b50.tar.gz |
Added tree list row component
Diffstat (limited to 'app/assets/javascripts/repository/components/table')
-rw-r--r-- | app/assets/javascripts/repository/components/table/index.vue | 12 | ||||
-rw-r--r-- | app/assets/javascripts/repository/components/table/row.vue | 60 |
2 files changed, 71 insertions, 1 deletions
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index 7119861c7b3..ad3d8f9329d 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -4,11 +4,13 @@ import { sprintf, __ } from '../../../locale'; import getRefMixin from '../../mixins/get_ref'; import getFiles from '../../queries/getFiles.graphql'; import TableHeader from './header.vue'; +import TableRow from './row.vue'; export default { components: { GlLoadingIcon, TableHeader, + TableRow, }, mixins: [getRefMixin], apollo: { @@ -57,7 +59,15 @@ export default { }} </caption> <table-header /> - <tbody></tbody> + <tbody> + <table-row + v-for="entry in files" + :id="entry.id" + :key="entry.id" + :path="entry.flatPath" + :type="entry.type" + /> + </tbody> </table> <gl-loading-icon v-if="isLoadingFiles" class="my-3" size="md" /> </div> diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue new file mode 100644 index 00000000000..0ad0fdbd605 --- /dev/null +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -0,0 +1,60 @@ +<script> +import { getIconName } from '../../utils/icon'; +import getRefMixin from '../../mixins/get_ref'; + +export default { + mixins: [getRefMixin], + props: { + id: { + type: Number, + required: true, + }, + path: { + type: String, + required: true, + }, + type: { + type: String, + required: true, + }, + }, + computed: { + routerLinkTo() { + return this.isFolder ? { path: `/tree/${this.ref}/${this.path}` } : null; + }, + iconName() { + return `fa-${getIconName(this.type, this.path)}`; + }, + isFolder() { + return this.type === 'folder'; + }, + isSubmodule() { + return this.type === 'commit'; + }, + linkComponent() { + return this.isFolder ? 'router-link' : 'a'; + }, + }, + methods: { + openRow() { + if (this.isFolder) { + this.$router.push(this.routerLinkTo); + } + }, + }, +}; +</script> + +<template> + <tr v-once :class="`file_${id}`" class="tree-item" @click="openRow"> + <td class="tree-item-file-name"> + <i :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i> + <component :is="linkComponent" :to="routerLinkTo" class="str-truncated">{{ path }}</component> + <template v-if="isSubmodule"> + @ <a href="#" class="commit-sha">{{ id }}</a> + </template> + </td> + <td class="d-none d-sm-table-cell tree-commit"></td> + <td class="tree-time-ago text-right"></td> + </tr> +</template> |