add some debug styling and display notes data in content

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;
+  }
+}

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>
+          <h6 @click="onSiblingOpen($event, sibling.id)" class="clickable">
-            <span>{{ toCommaList(sibling.authors) }},</span>
+            <span class="text-authors d-block">{{ toCommaList(sibling.authors) }},</span>
-            <span>{{ sibling.title }},</span>
+            <span class="text-title d-block">{{ sibling.title }},</span>
-            <span>{{ sibling.edition }}</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()

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 class="text-authors d-block">{{ toCommaList(text.authors) }},</span>
-              <span>{{ text.title }},</span>
+              <span class="text-title d-block">{{ text.title }},</span>
-              <span>{{ text.edition }}</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
+          <div class="tags">
-            v-for="tag in text.tags" :key="tag.id"
+            <b-badge
-            variant="dark" pill
+              v-for="tag in text.tags" :key="tag.id"
-          >
+              variant="dark" pill
-            {{ tag.name }}
+            >
-          </b-badge>
+              {{ tag.name }}
+            </b-badge>
+          </div>
 
           <slot name="footer-extra" v-bind="{ text, toCommaList }" />
         </b-card-footer>

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>
 

src/messages/fr.json

@@ -29,5 +29,8 @@
       "title": "Rechercher"
     }
   },
-  "siblings": "Textes rebonds"
+  "siblings": "Textes rebonds",
+  "text": {
+    "read": "Voir le texte"
+  }
 }

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'