From 1ec83b318a5bf52185cc88489137aa04d80c59f7 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 9 May 2021 00:08:01 +0200
Subject: [PATCH] add some debug styling and display notes data in content

---
 src/assets/scss/main.scss            | 38 +++++++++++++++++++
 src/components/text/TextCard.vue     | 15 +++++---
 src/components/text/TextCardBase.vue | 57 ++++++++++++++++++++++------
 src/components/text/TextMiniCard.vue |  5 +++
 src/messages/fr.json                 |  5 ++-
 src/pages/library/CardList.vue       |  3 +-
 6 files changed, 105 insertions(+), 18 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index ee138ea..8fb139d 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -34,3 +34,41 @@ main {
   width: 100%;
   height: 100%;
 }
+
+
+// TEMP
+.text-authors {
+  font: {
+    size: 1.2em;
+  }
+}
+
+.text-title {
+  font: {
+    size: 1em;
+    style: italic;
+    weight: normal;
+  }
+}
+
+.text-edition {
+  font: {
+    size: .8em;
+    weight: normal;
+  }
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.tags {
+  > :not(:last-of-type) {
+    margin-right: .5rem;
+  }
+}
diff --git a/src/components/text/TextCard.vue b/src/components/text/TextCard.vue
index dd3bc94..26ba983 100644
--- a/src/components/text/TextCard.vue
+++ b/src/components/text/TextCard.vue
@@ -22,18 +22,19 @@
       <b-button
         v-if="text.siblings"
         :id="'siblings-' + text.id"
+        size="sm"
       >
         {{ $t('siblings') }}
       </b-button>
       <b-popover
         v-if="text.siblings"
-        :target="'siblings-' + text.id" triggers="click" placement="top"
+        :target="'siblings-' + text.id" triggers="hover" placement="top"
       >
         <div v-for="sibling in text.siblings" :key="sibling.id">
-          <h6>
-            <span>{{ toCommaList(sibling.authors) }},</span>
-            <span>{{ sibling.title }},</span>
-            <span>{{ sibling.edition }}</span>
+          <h6 @click="onSiblingOpen($event, sibling.id)" class="clickable">
+            <span class="text-authors d-block">{{ toCommaList(sibling.authors) }},</span>
+            <span class="text-title d-block">{{ sibling.title }},</span>
+            <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
           </h6>
         </div>
       </b-popover>
@@ -61,6 +62,10 @@ export default {
       this.$emit('open', id, childId)
     },
 
+    onSiblingOpen (_, id) {
+      this.$emit('open', id)
+    },
+
     onSelfClose (e, id) {
       // stop the click event propagation to avoid other listeners to interact with a soon to be deleted element.
       e.stopPropagation()
diff --git a/src/components/text/TextCardBase.vue b/src/components/text/TextCardBase.vue
index 25a7f52..84f4f3d 100644
--- a/src/components/text/TextCardBase.vue
+++ b/src/components/text/TextCardBase.vue
@@ -5,27 +5,62 @@
         <b-card-header header-tag="header">
           <h4>
             <template v-if="text.type === 'Textref'">
-              <span>{{ toCommaList(text.authors) }},</span>
-              <span>{{ text.title }},</span>
-              <span>{{ text.edition }}</span>
+              <span class="text-authors d-block">{{ toCommaList(text.authors) }},</span>
+              <span class="text-title d-block">{{ text.title }},</span>
+              <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
             </template>
             <template v-else>
-              {{ text.title }}
+              {{ text.families[0].name }}
             </template>
           </h4>
 
           <slot name="header-extra" :text="text" />
         </b-card-header>
 
-        <b-card-body v-html="text.content" :class="ellipsis ? 'ellipsis' : 'overflow-auto'" />
+        <b-card-body :class="ellipsis ? 'ellipsis' : 'overflow-auto'">
+          <div class="text-content" v-html="text.content" />
+
+          <div class="text-notes mt-5" v-if="text.notes">
+            <div v-for="note in text.notes" :key="note.number" class="mb-4 border border-dark p-2">
+              <p class="m-0">
+                <span class="font-weight-bold">Numéro de note :</span> {{ note.number || 'aucun ?' }}
+              </p>
+
+              <p class="m-0 font-weight-bold">
+                Contenu :
+              </p>
+              <div v-if="note.content" v-html="note.content" />
+              <div v-else>
+                Aucun ?
+              </div>
+
+              <p class="m-0 font-weight-bold">
+                Liens :
+              </p>
+              <ul v-if="note.links">
+                <li v-for="link in note.links" :key="link.id" class="">
+                  <span class="text-authors">{{ toCommaList(link.authors) }}</span>,
+                  <span class="text-title">{{ link.title }}</span> —
+                  <span>{{ link.families[0].name }}</span>
+                  (id: {{ link.id }})
+                </li>
+              </ul>
+              <div v-else>
+                Aucun
+              </div>
+            </div>
+          </div>
+        </b-card-body>
 
         <b-card-footer>
-          <b-badge
-            v-for="tag in text.tags" :key="tag.id"
-            variant="dark" pill
-          >
-            {{ tag.name }}
-          </b-badge>
+          <div class="tags">
+            <b-badge
+              v-for="tag in text.tags" :key="tag.id"
+              variant="dark" pill
+            >
+              {{ tag.name }}
+            </b-badge>
+          </div>
 
           <slot name="footer-extra" v-bind="{ text, toCommaList }" />
         </b-card-footer>
diff --git a/src/components/text/TextMiniCard.vue b/src/components/text/TextMiniCard.vue
index a55a2a5..3029109 100644
--- a/src/components/text/TextMiniCard.vue
+++ b/src/components/text/TextMiniCard.vue
@@ -1,5 +1,10 @@
 <template>
   <text-card-base v-bind="$attrs" ellipsis>
+    <template v-slot:footer-extra="{ text }">
+      <b-button @click="$emit('open', text.id)" size="sm">
+        {{ $t('text.read') }}
+      </b-button>
+    </template>
   </text-card-base>
 </template>
 
diff --git a/src/messages/fr.json b/src/messages/fr.json
index c0083ea..b8fc471 100644
--- a/src/messages/fr.json
+++ b/src/messages/fr.json
@@ -29,5 +29,8 @@
       "title": "Rechercher"
     }
   },
-  "siblings": "Textes rebonds"
+  "siblings": "Textes rebonds",
+  "text": {
+    "read": "Voir le texte"
+  }
 }
diff --git a/src/pages/library/CardList.vue b/src/pages/library/CardList.vue
index 211ff7b..d39253a 100644
--- a/src/pages/library/CardList.vue
+++ b/src/pages/library/CardList.vue
@@ -7,7 +7,7 @@
           v-for="parent in parents" :key="parent.id"
           :id="parent.id"
           :text-data="parent"
-          @click.native="$emit('open', parent.id)"
+          @open="$emit('open', $event)"
         />
       </b-card-group>
     </div>
@@ -15,6 +15,7 @@
 </template>
 
 <script>
+// FIXME let events bubble
 import { mapGetters } from 'vuex'
 
 import TextMiniCard from '@/components/text/TextMiniCard'