metadata.vue 3 KB
Newer Older
schneider210's avatar
schneider210 committed
1
<template>
2
3
4
  <div>
    <q-list v-if="Object.keys(collection).length">
      <q-item>
5
        <q-item-section class="text-h6 caps">Collection</q-item-section>
6
7
8
      </q-item>
      <q-item>
        <q-item-section>
9
          <q-item-label overline class="text-uppercase">Title:</q-item-label>
10
11
12
13
14
15
16
          <q-item-label>
            {{ collection.title ? collection.title[0].title : '' }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>
17
          <q-item-label overline class="text-uppercase">Collector:</q-item-label>
18
19
20
21
22
23
24
          <q-item-label>
            {{ collection.collector ? collection.collector.name : '' }}
            </q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>
25
          <q-item-label overline class="text-uppercase">Description:</q-item-label>
26
27
28
29
30
31
          <q-item-label>
            {{ collection.description }}
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
32

33
    <q-separator inset class="q-mt-md q-mb-sm" />
34

35
36
    <q-list>
      <q-item>
37
        <q-item-section class="text-h6 caps">
38
          {{ config.labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
39
40
41
42
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>
43
          <q-item-label overline class="text-uppercase">Label:</q-item-label>
44
45
46
47
          <q-item-label>{{ manifesttitle }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
48
49
50
51
52

    <q-separator inset class="q-mt-md q-mb-sm" />

    <q-list>
      <q-item>
53
        <q-item-section class="text-h6 caps">
54
          {{ config.labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
55
56
57
58
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>
59
          <q-item-label overline class="text-uppercase">Label:</q-item-label>
60
61
62
63
64
65
66
          <q-item-label>{{ pagelabel }}</q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>
          <q-item-label overline class="text-uppercase">Language:</q-item-label>
          <q-item-label>{{ language }}</q-item-label>
67
68
69
        </q-item-section>
      </q-item>
    </q-list>
schneider210's avatar
schneider210 committed
70
71
72
73
74
75
76
77
  </div>
</template>

<script>
export default {
  name: 'Metadata',
  props: {
    collection: Object,
78
    config: Object,
79
    language: String,
schneider210's avatar
schneider210 committed
80
    manifests: Array,
81
    pagelabel: String,
schneider210's avatar
schneider210 committed
82
83
84
  },
  data() {
    return {
85
      itemindex: 0,
schneider210's avatar
schneider210 committed
86
87
88
89
90
91
92
      sequenceindex: 0,
    };
  },
  computed: {
    manifesttitle() {
      return this.manifests[this.sequenceindex].label;
    },
93
94
95
    itemcount() {
      return this.manifests[this.sequenceindex].sequence.length;
    },
schneider210's avatar
schneider210 committed
96
97
  },
  mounted() {
98
99
    this.$root.$on('update-sequence-index', (index) => {
      this.sequenceindex = index;
schneider210's avatar
schneider210 committed
100
    });
101
102
103
104
105
106
107
108

    this.$root.$on('update-item', (url) => {
      this.manifests[this.sequenceindex].sequence.forEach((item, index) => {
        if (item.id === url) {
          this.itemindex = index;
        }
      });
    });
schneider210's avatar
schneider210 committed
109
110
111
  },
};
</script>
112
113
114
115
116
117

<style scoped>
.caps {
  font-variant: small-caps;
}
</style>