summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ide/components/ide_side_bar.vue
blob: 8cf1ccb4fce2f0873479f8f09c1a846759202c8f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script>
  import { mapState, mapGetters } from 'vuex';
  import icon from '~/vue_shared/components/icon.vue';
  import panelResizer from '~/vue_shared/components/panel_resizer.vue';
  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
  import projectTree from './ide_project_tree.vue';
  import ResizablePanel from './resizable_panel.vue';

  export default {
    components: {
      projectTree,
      icon,
      panelResizer,
      skeletonLoadingContainer,
      ResizablePanel,
    },
    computed: {
      ...mapState([
        'loading',
      ]),
      ...mapGetters([
        'projectsWithTrees',
      ]),
    },
  };
</script>

<template>
  <resizable-panel
    :collapsible="false"
    :initial-width="290"
    side="left"
  >
    <div class="multi-file-commit-panel-inner">
      <template v-if="loading">
        <div
          class="multi-file-loading-container"
          v-for="n in 3"
          :key="n"
        >
          <skeleton-loading-container />
        </div>
      </template>
      <project-tree
        v-for="project in projectsWithTrees"
        :key="project.id"
        :project="project"
      />
    </div>
  </resizable-panel>
</template>