fix: fix element data preview synchronisation

Author: pyphilia

src/js/elements/addDataElement.js

@@ -97,11 +97,11 @@ const createFolderInput = boxId => {
 //   return input;
 // };
 
-const createFileInputNew = ({ boxId }) => {
+const createFileInputNew = ({ boxId, mimeType }) => {
   const btn = document.createElement("button");
   btn.innerText = "Choose a file";
   btn.addEventListener("click", function() {
-    app.$refs.collections.openCollectionModel(boxId);
+    app.$refs.collections.openCollectionModel(boxId, mimeType);
   });
   btn.classList.add("btn");
   btn.classList.add("btn-primary");
@@ -116,11 +116,18 @@ const createImgPreview = () => {
 };
 
 export const updateImgPreview = (boxId, data) => {
-  const { url, identifier } = data[0]; // suppose one file
   const preview = document.querySelector(
     `${INTERFACE_ROOT} foreignObject[boxId='${boxId}'] .preview`
   );
-  preview.innerHTML = `<img src="${url}"/> <span>${identifier}</span>`;
+
+  if (data && data[0] && data[0].options["mime-type"].includes("image")) {
+    const { url, identifier } = data[0]; // suppose one file
+    preview.innerHTML = `<img src="${url}"/> <span>${identifier}</span>`;
+  }
+  // if the image is removed
+  else {
+    preview.innerHTML = "";
+  }
 };
 
 const createContentBox = () => {
@@ -179,9 +186,7 @@ const addContent = dataEl => {
   foreignObj.appendChild(content);
 
   // add preview if already exist
-  if (data.length && mimeType.includes("image")) {
-    updateImgPreview(boxId, data);
-  }
+  updateImgPreview(boxId, data);
 };
 
 export const addDataBox = data => {

src/js/layout/components/Collections.js

@@ -10,15 +10,29 @@ import { mapState } from "vuex";
 const Collections = Vue.component("Collections", {
   data() {
     return {
-      collections: [],
+      collections: undefined,
       files: {},
-      id: null
+      id: null,
+      mimeType: ""
     };
   },
   components: {
     draggable
   },
   computed: {
+    filteredCollections() {
+      if (!this.collections || !this.collections.length) {
+        return this.collections;
+      }
+      return this.collections
+        .map(coll => ({
+          ...coll,
+          files: coll.files.filter(
+            ({ options }) => options["mime-type"] == this.mimeType
+          )
+        }))
+        .filter(({ files }) => files.length);
+    },
     dragOptions() {
       return {
         group: DRAGGABLE_GROUP_NAME,
@@ -36,8 +50,9 @@ const Collections = Vue.component("Collections", {
     // }
   },
   methods: {
-    openCollectionModel(boxId) {
+    openCollectionModel(boxId, mimeType) {
       this.id = boxId;
+      this.mimeType = mimeType;
 
       // if doesnt exist in obj, add it
       if (!(boxId in this.files)) {
@@ -54,9 +69,7 @@ const Collections = Vue.component("Collections", {
       const data = this.files[this.id];
       app.updateDataInDataElement({ boxId: this.id, data });
       // @TODO: suppose one image
-      if (data[0].options["mime-type"].includes("image")) {
-        updateImgPreview(this.id, data);
-      }
+      updateImgPreview(this.id, data);
 
       // close modal
       $("#collections").modal("hide");
@@ -88,11 +101,13 @@ const Collections = Vue.component("Collections", {
         </button>
       </div>
 
-    <div v-if="collections.length == 0" >Loading...</div>
+      <div v-if="!filteredCollections" >Loading...</div>
+
+      <div class="no-file-found" v-else-if="filteredCollections && filteredCollections.length == 0" >No file available</div>
 
     <div id="collections-wrapper">
 
-      <div v-for="({files, name, url, statusMessage, error, loaded}, idx) in collections" class="collection accordion">
+      <div v-for="({files, name, url, statusMessage, error, loaded}, idx) in filteredCollections" class="collection accordion">
 
         <!-- @click="loadCollection(idx)" -->
         <div class="card-header" :id="'heading'+idx" data-toggle="collapse" :data-target="'#collapse-'+idx" aria-expanded="true" :aria-controls="'collapse-'+idx">
@@ -124,7 +139,7 @@ const Collections = Vue.component("Collections", {
         </a>
       </span>
       <div class="delete-button">
-        <span @click="deleteFile(name, file)" title="delete">x</span>
+        <span @click="deleteFile(file)" title="delete">x</span>
       </div>
     </div>
 

src/js/workflows/saveWorkflow.js

@@ -129,22 +129,24 @@ export const saveWorkflow = async (jsonGraph, installation = false) => {
 
       // @TODO get folder when folder type
       let i = 0;
-      const file = sourceDataBox.data[0]; // suppose one file
-      allFiles.push(file);
-      const dataName =
-        targetWebservice.Name + "_" + link.target.portName + "_" + i++;
-      const fileData = {
-        [dataName]: file.identifier
-      };
-      data.push(fileData);
-
-      targetWebservice.Inputs.Data.push({
-        Name: link.target.portName,
-        Path: file.identifier
-      });
-      _targetWebservice.inputs.data.push({
-        [link.target.portName]: file.identifier
-      });
+      if (sourceDataBox.data && sourceDataBox.data.length) {
+        const file = sourceDataBox.data[0]; // suppose one file
+        allFiles.push(file);
+        const dataName =
+          targetWebservice.Name + "_" + link.target.portName + "_" + i++;
+        const fileData = {
+          [dataName]: file.identifier
+        };
+        data.push(fileData);
+
+        targetWebservice.Inputs.Data.push({
+          Name: link.target.portName,
+          Path: file.identifier
+        });
+        _targetWebservice.inputs.data.push({
+          [link.target.portName]: file.identifier
+        });
+      }
     }
   });
 

src/styles/collections.scss

@@ -3,6 +3,14 @@
   overflow: auto;
 }
 
+.no-file-found {
+  font-weight: bold;
+  text-align: center;
+  color: red;
+  font-style: italic;
+  margin: 10px 0;
+}
+
 .input-files {
   height: 100px;
   width: 100%;