displayed attachments, added attachments filter to material admin view

web/themes/custom/materiotheme/assets/dist/main.css

@@ -2043,6 +2043,15 @@ article.card {
         article.card.modal-card section.col-right section.tool.industriels div.tool-content > section p {
           margin: 0;
           font-size: 0.882em; }
+    article.card.modal-card section.col-right section.attachments a {
+      margin: 0;
+      font-size: 0.882em;
+      line-height: 0.6; }
+      article.card.modal-card section.col-right section.attachments a span {
+        font-size: 0.8em; }
+    article.card.modal-card section.col-right section.attachments p {
+      margin: 0;
+      font-size: 0.882em; }
 
 #main-content > article.thematique div.cols {
   display: flex;

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -45,6 +45,16 @@ import { mapState } from 'vuex'
 import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 import 'theme/assets/styles/main.scss'
 
+// import prettyBytes from 'vuejs/plugins/prettyBytes'
+// Vue.use(prettyBytes)
+
+// Vue.filter('prettyBytes', function (value) {
+//   if (!value) return ''
+//   value = value.toString()
+//   return value + 'Mb'
+// })
+
+
 (function (Drupal, drupalSettings, drupalDecoupled) {
   const MaterioTheme = function () {
     let _v_sitebranding_block, _v_user_block, _v_header_menu,

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1238,6 +1238,20 @@ article.card{
           }
         }
       }
+      section.attachments{
+        a{
+          margin:0;
+          font-size: 0.882em;
+          line-height: 0.6;
+          span{
+            font-size: 0.8em
+          }
+        }
+        p{
+          margin: 0;
+          font-size: 0.882em;
+        }
+      }
     }
   }
 }

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 ...
+    //   }
+    //   ...
+    // })
+  }
+}