Commit 93f8ad8d authored by Phil Hughes's avatar Phil Hughes

created HOC for the tree list to cover both edit & review mode

parent fc11520e
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
import RepoFile from './repo_file.vue';
import NewDropdown from './new_dropdown/index.vue';
import IdeTreeList from './ide_tree_list.vue';
export default {
components: {
Icon,
RepoFile,
SkeletonLoadingContainer,
NewDropdown,
},
computed: {
...mapState(['currentBranchId']),
...mapGetters(['currentProject', 'currentTree']),
},
mounted() {
this.updateViewer('diff');
},
methods: {
...mapActions(['updateViewer']),
IdeTreeList,
},
};
</script>
<template>
<div
class="ide-file-list"
<ide-tree-list
viewer-type="diff"
header-class="ide-review-header"
:disable-action-dropdown="true"
>
<template v-if="!currentTree || currentTree.loading">
<div
class="multi-file-loading-container"
v-for="n in 3"
:key="n"
<template
slot="header"
>
<skeleton-loading-container />
</div>
</template>
<template v-else>
<header class="ide-tree-header ide-review-header">
{{ __('Review') }}
<div class="prepend-top-5 clgray">
<div class="prepend-top-5 ide-review-sub-header">
{{ __('Lastest changed') }}
</div>
</header>
<repo-file
v-for="file in currentTree.tree"
:key="file.key"
:file="file"
:level="0"
:disable-action-dropdown="true"
/>
</template>
</div>
</ide-tree-list>
</template>
<style>
.ide-review-header {
flex-direction: column;
align-items: flex-start;
}
</style>
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
import RepoFile from './repo_file.vue';
import { mapState, mapGetters } from 'vuex';
import NewDropdown from './new_dropdown/index.vue';
import IdeTreeList from './ide_tree_list.vue';
export default {
components: {
Icon,
RepoFile,
SkeletonLoadingContainer,
NewDropdown,
IdeTreeList,
},
computed: {
...mapState(['currentBranchId']),
...mapGetters(['currentProject', 'currentTree']),
},
mounted() {
this.updateViewer('editor');
},
methods: {
...mapActions(['updateViewer']),
...mapGetters(['currentProject']),
},
};
</script>
<template>
<div
class="ide-file-list"
<ide-tree-list
viewer-type="editor"
>
<template v-if="!currentTree || currentTree.loading">
<div
class="multi-file-loading-container"
v-for="n in 3"
:key="n"
<template
slot="header"
>
<skeleton-loading-container />
</div>
</template>
<template v-else>
<header class="ide-tree-header">
{{ __('Edit') }}
<new-dropdown
:project-id="currentProject.name_with_namespace"
:branch="currentBranchId"
path=""
/>
</header>
<repo-file
v-for="file in currentTree.tree"
:key="file.key"
:file="file"
:level="0"
/>
</template>
</div>
</ide-tree-list>
</template>
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
import RepoFile from './repo_file.vue';
import NewDropdown from './new_dropdown/index.vue';
export default {
components: {
Icon,
RepoFile,
SkeletonLoadingContainer,
NewDropdown,
},
props: {
viewerType: {
type: String,
required: true,
},
headerClass: {
type: String,
required: false,
default: null,
},
disableActionDropdown: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
...mapState(['currentBranchId']),
...mapGetters(['currentProject', 'currentTree']),
},
mounted() {
this.updateViewer(this.viewerType);
},
methods: {
...mapActions(['updateViewer']),
},
};
</script>
<template>
<div
class="ide-file-list"
>
<template v-if="!currentTree || currentTree.loading">
<div
class="multi-file-loading-container"
v-for="n in 3"
:key="n"
>
<skeleton-loading-container />
</div>
</template>
<template v-else>
<header
class="ide-tree-header"
:class="headerClass"
>
<slot name="header"></slot>
</header>
<repo-file
v-for="file in currentTree.tree"
:key="file.key"
:file="file"
:level="0"
:disable-action-dropdown="disableActionDropdown"
/>
</template>
</div>
</template>
......@@ -902,3 +902,12 @@
margin-top: -1px;
}
}
.ide-review-header {
flex-direction: column;
align-items: flex-start;
}
.ide-review-sub-header {
color: $gl-text-color-secondary;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment