mainview.vue 3.55 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
      <Toolbar
13
        v-if="config['header_section'].panelheadings"
14
15
        :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: () => [],
    },
schneider210's avatar
schneider210 committed
88
89
90
91
92
93
94
95
    collection: {
      type: Object,
      default: () => {},
    },
    config: {
      type: Object,
      default: () => {},
    },
96
97
98
99
    contentindex: {
      type: Number,
      default: () => 0,
    },
100
101
102
103
    contenttypes: {
      type: Array,
      default: () => [],
    },
104
105
106
107
    contenturls: {
      type: Array,
      default: () => [],
    },
schneider210's avatar
schneider210 committed
108
109
    fontsize: {
      type: Number,
110
      default: () => 16,
schneider210's avatar
schneider210 committed
111
112
113
114
115
    },
    imageurl: {
      type: String,
      default: () => '',
    },
116
117
118
119
    errormessage: {
      type: Boolean,
      default: () => false,
    },
120
121
122
123
    isloading: {
      type: Boolean,
      default: false,
    },
124
125
126
    item: {
      type: Object,
      default: () => {},
schneider210's avatar
schneider210 committed
127
128
129
130
131
132
133
134
135
    },
    labels: {
      type: Object,
      default: () => {},
    },
    manifests: {
      type: Array,
      default: () => [],
    },
136
137
138
139
    oncontentindexchange: {
      type: Function,
      default: () => null,
    },
schneider210's avatar
schneider210 committed
140
141
142
143
144
145
146
147
148
149
150
151
    panels: {
      type: Array,
      default: () => [],
    },
    request: {
      type: Function,
      default: () => null,
    },
    tree: {
      type: Array,
      default: () => [],
    },
152
  },
153
  computed: {
154
    ready() {
155
      return this.manifests.length && this.tree.length && this.contenturls.length;
156
157
    },
    keys() {
158
      return { 3: this.imageurl, 4: this.contenturls[0] };
159
    },
160
161
162
163
  },
};
</script>

nwindis's avatar
nwindis committed
164
<style lang="scss" scoped>
nwindis's avatar
nwindis committed
165
166
167
.content-tabs {
  display: inline-block;
}
nwindis's avatar
nwindis committed
168

169
.item {
nwindis's avatar
nwindis committed
170
  display: flex;
171
172
173
174
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
nwindis's avatar
nwindis committed
175

176
177
178
179
180
.item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
nwindis's avatar
nwindis committed
181
}
182
183
184
185
186
187
188
189

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

190
.tabs-container {
191
  display: flex;
192
193
194
195

  > * {
    flex: 1;
  }
196
197
}

198
</style>