displayed attachments, added attachments filter to material admin view

web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql

@@ -63,6 +63,15 @@ fragment MateriauFields on Materiau {
       family_name
     }
   }
+  attachments {
+    description
+    file{
+      fid
+      filename
+      url
+      filesize
+    }
+  }
   body
 	samples{
     showroom{

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))
     }
   }
 }

web/themes/custom/materiotheme/vuejs/plugins/prettyBytes.js

@@ -0,0 +1,24 @@
+// plugins/prettyBytes.js
+export default {
+  install: (app, options) => {
+    app.config.globalProperties.$prettyBytes = (value) => {
+      return value + 'Mb'
+    }
+
+    app.provide('prettyBytes', options)
+
+    // app.directive('my-directive', {
+    //   mounted (el, binding, vnode, oldVnode) {
+    //     // some logic ...
+    //   }
+    //   ...
+    // })
+
+    // app.mixin({
+    //   created() {
+    //     // some logic ...
+    //   }
+    //   ...
+    // })
+  }
+}