add new node components

2021-06-10 13:21:26 +02:00
parent 9c67a871e2
commit 659a16c29c
7 changed files with 619 additions and 0 deletions
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="node-view-footer" :class="'node-view-footer-' + mode"
+  >
+    <div class="d-flex w-100">
+      <div class="tags">
+        <b-badge
+          v-for="tag in node.tags" :key="tag.id"
+          variant="dark" pill
+        >
+          {{ tag.name }}
+        </b-badge>
+      </div>
+
+      <div v-if="mode === 'view' && node.siblings">
+        <b-button :id="'siblings-' + node.id">
+          {{ $t('siblings') }}
+        </b-button>
+
+        <b-popover
+          :target="'siblings-' + node.id" triggers="hover" placement="top"
+        >
+          <div v-for="sibling in node.siblings" :key="sibling.id">
+            <h6>
+              <a @click.prevent="onOpen(sibling.id)" href="#">
+                <div class="">
+                  {{ toCommaList(sibling.authors) }},
+                </div>
+                <div class="">
+                  {{ sibling.title }},
+                </div>
+                <div class="">
+                  {{ sibling.edition ? sibling.edition.name : sibling.edition }}
+                </div>
+              </a>
+            </h6>
+          </div>
+        </b-popover>
+      </div>
+
+      <div v-if="mode === 'card'">
+        <b-button @click="onOpen(node.id)" variant="outline-dark">
+          {{ $t('text.read') }}
+        </b-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toCommaList } from '@/helpers/common'
+
+
+export default {
+  name: 'NodeViewFooter',
+
+  props: {
+    node: { type: Object, required: true },
+    type: { type: String, required: true },
+    mode: { type: String, required: true }
+  },
+
+  computed: {
+    authors () {
+      const authors = this.node.authors
+      if (!authors) return 'Pas d\'auteur⋅rices'
+      return authors.map(({ name }) => name).join(', ')
+    }
+  },
+
+  methods: {
+    toCommaList,
+
+    onOpen (nodeId) {
+      this.$store.dispatch('OPEN_NODE', [nodeId])
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.node-view-footer {
+  margin-top: auto;
+  font-family: $font-family-base;
+}
+</style>