add base structure for card text as textref

src/components/text/TextCard.vue

@@ -1,5 +1,54 @@
 <template>
-  <component-debug :component="this" />
+  <b-card no-body tag="article" class="text-card">
+    <b-overlay class="h-100" :show="loading">
+      <div v-if="text" class="container-fill">
+        <b-card-header header-tag="header">
+          <h4>
+            <span>{{ text.authors | list }},</span>
+            <span>{{ text.title }},</span>
+            <span>{{ text.edition }}</span>
+          </h4>
+
+          <b-nav class="ml-auto flex-nowrap">
+            <b-nav-item v-for="prod in text.prods" :key="prod.id">
+              {{ prod.id }}
+            </b-nav-item>
+
+            <b-nav-item>
+              x
+            </b-nav-item>
+          </b-nav>
+        </b-card-header>
+
+        <b-card-body v-html="text.content" />
+
+        <b-card-footer>
+          <b-badge
+            v-for="tag in text.tags" :key="tag.id"
+            variant="dark" pill
+          >
+            {{ tag.name }}
+          </b-badge>
+
+          <b-button
+            v-if="text.bounces"
+            :id="'bounces-' + text.id"
+          >
+            Textes rebonds
+          </b-button>
+          <b-popover :target="'bounces-' + text.id" triggers="click" placement="top">
+            <div v-for="bounce in text.bounces" :key="bounce.id">
+              <h6>
+                <span>{{ bounce.authors | list }},</span>
+                <span>{{ bounce.title }},</span>
+                <span>{{ bounce.edition }}</span>
+              </h6>
+            </div>
+          </b-popover>
+        </b-card-footer>
+      </div>
+    </b-overlay>
+  </b-card>
 </template>
 
 <script>
@@ -10,11 +59,35 @@ export default {
     id: { type: Number, required: true }
   },
 
+  data () {
+    return {
+      loading: true,
+      text: null
+    }
+  },
+
+  filters: {
+    list (arr) {
+      return arr.map(({ name }) => name).join(', ')
+    }
+  },
+
   created () {
-    console.log('CREATED TEXTCARD', this.id)
+    this.$store.dispatch('GET_TEXT', { id: this.id }).then((text) => {
+      this.text = text
+      this.loading = false
+    })
   }
 }
 </script>
 
 <style lang="scss" scoped>
+header {
+  display: flex;
+
+  h4 {
+    display: flex;
+    flex-direction: column;
+  }
+}
 </style>