displayed attachments, added attachments filter to material admin view

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -81,7 +81,18 @@
         </section>
       </nav>
       <section class="body" v-html="material.body"/>
-      <section class="linked-materials">
+      <section v-if="material.attachments" class="attachments">
+        <span class="label">{{ $t("materio.Attachments") }}</span>
+        <ul>
+          <li
+            v-for="attachmt in material.attachments" :key="attachmt.file.fid"
+          >
+            <a target="_blank" :href="attachmt.file.url">{{ attachmt.file.filename}} <span>({{ prettyFileSize(attachmt.file.filesize) }})</span></a>
+            <p v-if="attachmt.description" class="description" v-html="attachmt.description" />
+          </li>
+        </ul>
+      </section>
+      <section v-if="material.linked_materials" class="linked-materials">
         <span class="label">{{ $t("materio.Linked materials") }}</span>
         <ul>
           <li v-for="m in material.linked_materials" v-bind:key="m.id">
@@ -130,6 +141,8 @@ import { print } from 'graphql/language/printer'
 import gql from 'graphql-tag'
 import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
 
+const prettyBytes = require('pretty-bytes')
+
 export default {
   name: "ModalCard",
   props: ['item'],
@@ -217,6 +230,9 @@ export default {
     onCloseModalCard (e) {
       // this.$modal.hideAll()
       this.$modal.hide(`modal-${this.item.id}`)
+    },
+    prettyFileSize(bytes){
+      return prettyBytes(parseInt(bytes))
     }
   }
 }