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> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import IdeTreeList from './ide_tree_list.vue';
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 { export default {
components: { components: {
Icon, IdeTreeList,
RepoFile,
SkeletonLoadingContainer,
NewDropdown,
},
computed: {
...mapState(['currentBranchId']),
...mapGetters(['currentProject', 'currentTree']),
},
mounted() {
this.updateViewer('diff');
},
methods: {
...mapActions(['updateViewer']),
}, },
}; };
</script> </script>
<template> <template>
<div <ide-tree-list
class="ide-file-list" viewer-type="diff"
header-class="ide-review-header"
:disable-action-dropdown="true"
> >
<template v-if="!currentTree || currentTree.loading"> <template
<div slot="header"
class="multi-file-loading-container" >
v-for="n in 3" {{ __('Review') }}
:key="n" <div class="prepend-top-5 ide-review-sub-header">
> {{ __('Lastest changed') }}
<skeleton-loading-container />
</div> </div>
</template> </template>
<template v-else> </ide-tree-list>
<header class="ide-tree-header ide-review-header">
{{ __('Review') }}
<div class="prepend-top-5 clgray">
{{ __('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>
</template> </template>
<style>
.ide-review-header {
flex-direction: column;
align-items: flex-start;
}
</style>
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapState, mapGetters } 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 NewDropdown from './new_dropdown/index.vue';
import IdeTreeList from './ide_tree_list.vue';
export default { export default {
components: { components: {
Icon,
RepoFile,
SkeletonLoadingContainer,
NewDropdown, NewDropdown,
IdeTreeList,
}, },
computed: { computed: {
...mapState(['currentBranchId']), ...mapState(['currentBranchId']),
...mapGetters(['currentProject', 'currentTree']), ...mapGetters(['currentProject']),
},
mounted() {
this.updateViewer('editor');
},
methods: {
...mapActions(['updateViewer']),
}, },
}; };
</script> </script>
<template> <template>
<div <ide-tree-list
class="ide-file-list" viewer-type="editor"
> >
<template v-if="!currentTree || currentTree.loading"> <template
<div slot="header"
class="multi-file-loading-container" >
v-for="n in 3" {{ __('Edit') }}
:key="n" <new-dropdown
> :project-id="currentProject.name_with_namespace"
<skeleton-loading-container /> :branch="currentBranchId"
</div> path=""
</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> </template>
</div> </ide-tree-list>
</template> </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 @@ ...@@ -902,3 +902,12 @@
margin-top: -1px; 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