Allow multi-format media files

assets/vue/components/documents/FormNewDocument.vue

@@ -9,7 +9,8 @@
 
     <BaseTinyEditor
       v-if="
-        (item.resourceNode && item.resourceNode.resourceFile && item.resourceNode.resourceFile.text) || item.newDocument
+        (item.resourceNode && item.resourceNode.firstResourceFile && item.resourceNode.firstResourceFile.text) ||
+        item.newDocument
       "
       v-model="item.contentFile"
       :title="t('Content')"

assets/vue/components/documents/ResourceFileLink.vue

@@ -1,38 +1,38 @@
 <template>
   <a
-      data-fancybox="gallery"
-      :href="resource.contentUrl"
-      :data-type="getDataType"
+    data-fancybox="gallery"
+    :href="resource.contentUrl"
+    :data-type="getDataType"
   >
     <ResourceIcon :resource-data="resource" />
     {{ resource.title }}
   </a>
 </template>
 
 <script>
-import ResourceIcon from './ResourceIcon.vue';
+import ResourceIcon from "./ResourceIcon.vue"
 export default {
-  name: 'ResourceFileLink',
+  name: "ResourceFileLink",
   components: {
-    ResourceIcon
+    ResourceIcon,
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true,
+    },
   },
   computed: {
     getDataType() {
-      if (this.resource.resourceNode.resourceFile.image) {
-        return 'image';
+      if (this.resource.resourceNode.firstResourceFile.image) {
+        return "image"
       }
-      if (this.resource.resourceNode.resourceFile.video) {
-        return 'video';
+      if (this.resource.resourceNode.firstResourceFile.video) {
+        return "video"
       }
 
-      return 'iframe';
-    }
-  },
-  props: {
-    resource: {
-      type: Object,
-      required: true,
-    }
+      return "iframe"
+    },
   },
-};
+}
 </script>

assets/vue/components/documents/ResourceIcon.vue

@@ -4,19 +4,19 @@
     icon="folder-generic"
   />
   <BaseIcon
-    v-else-if="resourceData.resourceNode.resourceFile.image"
+    v-else-if="resourceData.resourceNode.firstResourceFile.image"
     icon="file-image"
   />
   <BaseIcon
-    v-else-if="resourceData.resourceNode.resourceFile.video"
+    v-else-if="resourceData.resourceNode.firstResourceFile.video"
     icon="file-video"
   />
   <BaseIcon
-    v-else-if="resourceData.resourceNode.resourceFile.text"
+    v-else-if="resourceData.resourceNode.firstResourceFile.text"
     icon="file-text"
   />
   <BaseIcon
-    v-else-if="'application/pdf' === resourceData.resourceNode.resourceFile.mimeType"
+    v-else-if="'application/pdf' === resourceData.resourceNode.firstResourceFile.mimeType"
     icon="file-pdf"
   />
   <BaseIcon
@@ -30,15 +30,15 @@
 </template>
 
 <script setup>
-import BaseIcon from "../basecomponents/BaseIcon.vue";
-import {useFileUtils} from "../../composables/fileUtils";
+import BaseIcon from "../basecomponents/BaseIcon.vue"
+import { useFileUtils } from "../../composables/fileUtils"
 
-const {isAudio} = useFileUtils()
+const { isAudio } = useFileUtils()
 
 defineProps({
   resourceData: {
     type: Object,
     required: true,
   },
-});
+})
 </script>

assets/vue/composables/datatableList.js

@@ -1,13 +1,13 @@
-import { useStore } from 'vuex'
-import { inject, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { isEmpty } from 'lodash'
+import { useStore } from "vuex"
+import { inject, ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { isEmpty } from "lodash"
 
-import { useCidReq } from './cidReq'
-import { useI18n } from 'vue-i18n';
+import { useCidReq } from "./cidReq"
+import { useI18n } from "vue-i18n"
 import { useNotification } from "./notification"
 
-export function useDatatableList (servicePrefix) {
+export function useDatatableList(servicePrefix) {
   const moduleName = servicePrefix.toLowerCase()
 
   const store = useStore()
@@ -30,99 +30,101 @@ export function useDatatableList (servicePrefix) {
     itemsPerPage: 5,
   })
 
-  function onUpdateOptions ({ page, itemsPerPage, sortBy, sortDesc }) {
+  function onUpdateOptions({ page, itemsPerPage, sortBy, sortDesc }) {
     page = page || options.value.page
 
-    if (!isEmpty(route.query.filetype) && route.query.filetype === 'certificate') {
-      filters.value.filetype = 'certificate';
+    if (!isEmpty(route.query.filetype) && route.query.filetype === "certificate") {
+      filters.value.filetype = "certificate"
     } else {
-      filters.value.filetype = ['file', 'folder'];
+      filters.value.filetype = ["file", "folder"]
     }
 
     let params = { ...filters.value }
 
     if (1 === filters.value.loadNode) {
-      params['resourceNode.parent'] = route.params.node
+      params["resourceNode.parent"] = route.params.node
     }
 
     if (itemsPerPage > 0) {
       params = { ...params, itemsPerPage, page }
     }
 
     if (!isEmpty(sortBy)) {
-      params[`order[${sortBy}]`] = sortDesc ? 'desc' : 'asc'
+      params[`order[${sortBy}]`] = sortDesc ? "desc" : "asc"
     }
 
     let type = route.query.type
 
     params = { ...params, cid, sid, gid, type, page }
 
-    store.dispatch(`${moduleName}/fetchAll`, params)
-      .then(() => options.value = { sortBy, sortDesc, itemsPerPage, page })
+    store
+      .dispatch(`${moduleName}/fetchAll`, params)
+      .then(() => (options.value = { sortBy, sortDesc, itemsPerPage, page }))
   }
 
-  function goToAddItem () {
-    console.log('addHandler');
+  function goToAddItem() {
+    console.log("addHandler")
 
-    let folderParams = route.query;
+    let folderParams = route.query
 
     router.push({
       name: `${servicePrefix}Create`,
       query: folderParams,
-    });
+    })
   }
 
-  function goToEditItem (item) {
-    let folderParams = route.query;
-    folderParams['id'] = item['@id'];
+  function goToEditItem(item) {
+    let folderParams = route.query
+    folderParams["id"] = item["@id"]
 
-    if ('folder' === item.filetype || isEmpty(item.filetype)) {
+    if ("folder" === item.filetype || isEmpty(item.filetype)) {
       router.push({
         name: `${servicePrefix}Update`,
-        params: { id: item['@id'] },
-        query: folderParams
-      });
+        params: { id: item["@id"] },
+        query: folderParams,
+      })
     }
 
-    if ('file' === item.filetype) {
-      folderParams['getFile'] = true;
-      if (item.resourceNode.resourceFile &&
-          item.resourceNode.resourceFile.mimeType &&
-          'text/html' === item.resourceNode.resourceFile.mimeType
+    if ("file" === item.filetype) {
+      folderParams["getFile"] = true
+      if (
+        item.resourceNode.firstResourceFile &&
+        item.resourceNode.firstResourceFile.mimeType &&
+        "text/html" === item.resourceNode.firstResourceFile.mimeType
       ) {
         //folderParams['getFile'] = true;
       }
 
       this.$router.push({
         name: `${servicePrefix}UpdateFile`,
-        params: { id: item['@id'] },
-        query: folderParams
-      });
+        params: { id: item["@id"] },
+        query: folderParams,
+      })
     }
   }
 
-  function onShowItem (item) {
-    console.log('listmixin showHandler', item);
+  function onShowItem(item) {
+    console.log("listmixin showHandler", item)
 
-    let folderParams = route.query;
+    let folderParams = route.query
 
     if (item) {
-      folderParams['id'] = item['@id'];
+      folderParams["id"] = item["@id"]
     }
 
     router.push({
       name: `${servicePrefix}Show`,
       params: folderParams,
       query: folderParams,
-    });
+    })
   }
 
- async function deleteItem (item) {
+  async function deleteItem(item) {
     await store.dispatch(`${moduleName}/del`, item.value)
 
-    onUpdateOptions(options.value);
+    onUpdateOptions(options.value)
 
-    notification.showSuccessNotification(t('Deleted'))
+    notification.showSuccessNotification(t("Deleted"))
   }
 
   return {

assets/vue/composables/fileUtils.js

@@ -1,31 +1,28 @@
-
-
 export function useFileUtils() {
-
   const isImage = (fileData) => {
-    return isFile(fileData) && fileData.resourceNode.resourceFile.image
+    return isFile(fileData) && fileData.resourceNode.firstResourceFile.image
   }
 
   const isVideo = (fileData) => {
-    return isFile(fileData) && fileData.resourceNode.resourceFile.video
+    return isFile(fileData) && fileData.resourceNode.firstResourceFile.video
   }
 
   const isAudio = (fileData) => {
-    const mimeType = fileData.resourceNode.resourceFile.mimeType
+    const mimeType = fileData.resourceNode.firstResourceFile.mimeType
     const isAudio = mimeType.split("/")[0].toLowerCase() === "audio"
     return isFile(fileData) && isAudio
   }
 
   const isHtml = (fileData) => {
     if (!isFile(fileData)) {
-      return false;
+      return false
     }
-    const mimeType = fileData.resourceNode.resourceFile.mimeType
+    const mimeType = fileData.resourceNode.firstResourceFile.mimeType
     return mimeType.split("/")[1].toLowerCase() === "html"
   }
 
   const isFile = (fileData) => {
-    return fileData.resourceNode && fileData.resourceNode.resourceFile
+    return fileData.resourceNode && fileData.resourceNode.firstResourceFile
   }
 
   return {

assets/vue/mixins/ListMixin.js

@@ -257,9 +257,9 @@ export default {
       if ("file" === item.filetype) {
         folderParams["getFile"] = true
         if (
-          item.resourceNode.resourceFile &&
-          item.resourceNode.resourceFile.mimeType &&
-          "text/html" === item.resourceNode.resourceFile.mimeType
+          item.resourceNode.firstResourceFile &&
+          item.resourceNode.firstResourceFile.mimeType &&
+          "text/html" === item.resourceNode.firstResourceFile.mimeType
         ) {
           //folderParams['getFile'] = true;
         }