128 lines
3 KiB
Vue
128 lines
3 KiB
Vue
|
<script>
|
||
|
|
import { mapActions } from 'vuex';
|
||
|
|
import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
|
||
|
|
import fileIcon from '~/vue_shared/components/file_icon.vue';
|
||
|
|
import router from '../ide_router';
|
||
|
|
import newDropdown from './new_dropdown/index.vue';
|
||
|
|
import fileStatusIcon from './repo_file_status_icon.vue';
|
||
|
|
import changedFileIcon from './changed_file_icon.vue';
|
||
|
|
import mrFileIcon from './mr_file_icon.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'RepoFile',
|
||
|
|
components: {
|
||
|
|
skeletonLoadingContainer,
|
||
|
|
newDropdown,
|
||
|
|
fileStatusIcon,
|
||
|
|
fileIcon,
|
||
|
|
changedFileIcon,
|
||
|
|
mrFileIcon,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
file: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
level: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isTree() {
|
||
|
|
return this.file.type === 'tree';
|
||
|
|
},
|
||
|
|
isBlob() {
|
||
|
|
return this.file.type === 'blob';
|
||
|
|
},
|
||
|
|
levelIndentation() {
|
||
|
|
return {
|
||
|
|
marginLeft: `${this.level * 16}px`,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
fileClass() {
|
||
|
|
return {
|
||
|
|
'file-open': this.isBlob && this.file.opened,
|
||
|
|
'file-active': this.isBlob && this.file.active,
|
||
|
|
folder: this.isTree,
|
||
|
|
'is-open': this.file.opened,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
updated() {
|
||
|
|
if (this.file.type === 'blob' && this.file.active) {
|
||
|
|
this.$el.scrollIntoView();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(['toggleTreeOpen', 'updateDelayViewerUpdated']),
|
||
|
|
clickFile() {
|
||
|
|
// Manual Action if a tree is selected/opened
|
||
|
|
if (this.isTree && this.$router.currentRoute.path === `/project${this.file.url}`) {
|
||
|
|
this.toggleTreeOpen(this.file.path);
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.updateDelayViewerUpdated(true).then(() => {
|
||
|
|
router.push(`/project${this.file.url}`);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="file"
|
||
|
|
:class="fileClass"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="file-name"
|
||
|
|
@click="clickFile"
|
||
|
|
role="button"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="ide-file-name str-truncated"
|
||
|
|
:style="levelIndentation"
|
||
|
|
>
|
||
|
|
<file-icon
|
||
|
|
:file-name="file.name"
|
||
|
|
:loading="file.loading"
|
||
|
|
:folder="isTree"
|
||
|
|
:opened="file.opened"
|
||
|
|
:size="16"
|
||
|
|
/>
|
||
|
|
{{ file.name }}
|
||
|
|
<file-status-icon
|
||
|
|
:file="file"
|
||
|
|
/>
|
||
|
|
</span>
|
||
|
|
<span class="pull-right">
|
||
|
|
<mr-file-icon
|
||
|
|
v-if="file.mrChange"
|
||
|
|
/>
|
||
|
|
<changed-file-icon
|
||
|
|
:file="file"
|
||
|
|
v-if="file.changed || file.tempFile"
|
||
|
|
/>
|
||
|
|
</span>
|
||
|
|
<new-dropdown
|
||
|
|
v-if="isTree"
|
||
|
|
:project-id="file.projectId"
|
||
|
|
:branch="file.branchId"
|
||
|
|
:path="file.path"
|
||
|
|
class="pull-right prepend-left-8"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<template v-if="file.opened">
|
||
|
|
<repo-file
|
||
|
|
v-for="childFile in file.tree"
|
||
|
|
:key="childFile.key"
|
||
|
|
:file="childFile"
|
||
|
|
:level="level + 1"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|