mainview.vue 3.32 KB
Newer Older
1
<template>
2
3
4
5
  <div
    v-if="ready"
    class="root panels-target"
  >
nwindis's avatar
nwindis committed
6
    <div
7
8
9
10
      v-for="(p, index) in panels"
      v-show="p.show && p.connector.length"
      :key="`pc${index}`"
      class="item"
nwindis's avatar
nwindis committed
11
    >
12
13
14
15
      <Toolbar
        v-if="config.headers.panelheadings"
        :heading="p.panel_label"
      />
16

17
      <q-separator />
18

19
      <!-- shows the nested tabs -->
20
      <div
21
        v-if="p.connector.length > 1"
22
        class="item-content"
23
      >
24
        <div class="tabs-container">
25
26
27
28
29
30
          <q-tabs
            v-for="(tab, i) in p.connector"
            :key="`pt${i}`"
            v-model="p.tab_model"
            class="content-tabs"
            :active-bg-color="$q.dark.isActive ? 'bg-black' : 'bg-grey-4'"
31
            dense
nwindis's avatar
nwindis committed
32
          >
33
34
            <q-tab
              :name="`tab${i}`"
35
              :label="$t(tab.label)"
36
37
38
            />
          </q-tabs>
        </div>
39

40
41
42
43
44
45
46
47
48
        <q-tab-panels
          v-model="p.tab_model"
          animated
          keep-alive
        >
          <q-tab-panel
            v-for="(tab, idx) in p.connector"
            :key="`co${idx}`"
            :name="`tab${idx}`"
49
            class="q-pa-none"
nwindis's avatar
nwindis committed
50
51
          >
            <component
52
53
              :is="tab.component"
              :key="keys[tab.id]"
nwindis's avatar
nwindis committed
54
55
              v-bind="$props"
            />
56
57
          </q-tab-panel>
        </q-tab-panels>
58
      </div>
59
60
61
62
63
64
65
66
67
68
69

      <!-- shows the panels -->
      <div
        v-else-if="p.connector.length === 1"
        class="item-content"
      >
        <component
          :is="p.connector[0].component"
          :key="keys[p.connector[0].id]"
          v-bind="$props"
        />
70
71
      </div>
    </div>
72
  </div>
73
74
75
76
77
78
79
80
81
82
83
</template>

<script>
import Toolbar from '@/components/toolbar.vue';

export default {
  name: 'MainView',
  components: {
    Toolbar,
  },
  props: {
84
85
86
87
    annotations: {
      type: Array,
      default: () => [],
    },
88
89
90
91
    annotationloading: {
      type: Boolean,
      default: false,
    },
schneider210's avatar
schneider210 committed
92
93
94
95
96
97
98
99
    collection: {
      type: Object,
      default: () => {},
    },
    config: {
      type: Object,
      default: () => {},
    },
100
101
102
103
    contenttypes: {
      type: Array,
      default: () => [],
    },
104
105
106
107
    contenturls: {
      type: Array,
      default: () => [],
    },
schneider210's avatar
schneider210 committed
108
109
110
111
112
113
114
115
    fontsize: {
      type: Number,
      default: () => 14,
    },
    imageurl: {
      type: String,
      default: () => '',
    },
116
117
118
    item: {
      type: Object,
      default: () => {},
schneider210's avatar
schneider210 committed
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
    },
    labels: {
      type: Object,
      default: () => {},
    },
    manifests: {
      type: Array,
      default: () => [],
    },
    panels: {
      type: Array,
      default: () => [],
    },
    request: {
      type: Function,
      default: () => null,
    },
    tree: {
      type: Array,
      default: () => [],
    },
140
  },
141
  computed: {
142
    ready() {
143
      return this.manifests.length && this.tree.length && this.contenturls.length;
144
145
    },
    keys() {
146
      return { 3: this.imageurl, 4: this.contenturls[0] };
147
    },
148
149
150
151
  },
};
</script>

nwindis's avatar
nwindis committed
152
<style lang="scss" scoped>
nwindis's avatar
nwindis committed
153
154
155
.content-tabs {
  display: inline-block;
}
nwindis's avatar
nwindis committed
156

157
.item {
nwindis's avatar
nwindis committed
158
  display: flex;
159
160
161
162
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
nwindis's avatar
nwindis committed
163

164
165
166
167
168
.item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
nwindis's avatar
nwindis committed
169
}
170
171
172
173
174
175
176
177

.root {
  display: flex;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
}

178
.tabs-container {
179
  display: flex;
180
181
182
183

  > * {
    flex: 1;
  }
184
185
}

186
</style>