.eslintrc.js

@@ -3,6 +3,8 @@ module.exports = {
   env: {
     node: true,
   },
+  ignorePatterns: ["node_modules", "build", "coverage"],
+  plugins: ["eslint-comments", "functional"],
   extends: [
     "plugin:vue/essential",
     "eslint:recommended",
@@ -14,14 +16,12 @@ module.exports = {
     ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "@typescript-eslint/no-this-alias": [
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+      "eslint-comments/disable-enable-pair": [
         "error",
-      {
-        allowDestructuring: false,
-        allowedNames: ["app", "me"],
-      },
+        { "allowWholeFile": true }
       ],
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
 };

package.json

 {
   "name": "@coscine/resourcecontentview",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "private": true,
   "directories": {
     "doc": "docs"
@@ -11,12 +11,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@coscine/api-client": "^1.1.1",
     "@coscine/api-connection": "^1.31.0",
     "@coscine/app-util": "^1.9.0",
     "@coscine/component-library": "^1.10.0",
     "@coscine/form-generator": "^1.15.1",
     "@coscine/vuex-store": "^1.2.0",
     "bootstrap-vue": "^2.21.2",
+    "file-saver": "^2.0.5",
     "jquery": "^3.5.1",
     "vue": "^2.6.12",
     "vue-i18n": "^8.22.0",
@@ -32,6 +34,7 @@
     "@semantic-release/gitlab": "^6.0.5",
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
+    "@types/file-saver": "^2.0.4",
     "@types/jquery": "^3.5.2",
     "@types/node": "^14.14.20",
     "@types/rdf-validate-shacl": "^0.2.4",
@@ -45,6 +48,10 @@
     "conventional-changelog-eslint": "3.0.9",
     "core-js": "^3.8.2",
     "eslint": "^6.7.2",
+    "eslint-import-resolver-node": "^0.3.6",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-functional": "^4.0.2",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
     "lint-staged": "^9.5.0",
@@ -68,5 +75,5 @@
     "url": "https://git.rwth-aachen.de/coscine/frontend/apps/resourcecontentview.git"
   },
   "license": "MIT",
-  "packageManager": "yarn@3.1.0"
+  "packageManager": "yarn@3.1.1"
 }

src/ResourceContentView.vue

@@ -125,8 +125,6 @@ import Vue from "vue";
 import FilesView from "./components/FilesView.vue";
 import MetadataManager from "./components/MetadataManager.vue";
 
-import MetadataManagerUtil from "./utils/MetadataManagerUtil";
-
 import { LanguageUtil, GuidUtil, MergeUtil } from "@coscine/app-util";
 import {
   ResourceApi,
@@ -302,10 +300,9 @@ export default Vue.extend({
           (this.canEditResource = response.data.isResourceCreator)
       );
       ProjectRoleApi.getUserRoles(this.projectId, (response: any) => {
-        const app = this;
         response.data.forEach((userRole: any) => {
           if (userRole.role.displayName.toLowerCase() === "owner") {
-            app.canEditResource = true;
+            this.canEditResource = true;
           }
         });
       });

src/components/FilesView.vue

@@ -175,7 +175,7 @@
 <script lang="ts">
 import Vue, { PropType } from "vue";
 import FilesViewHeader from "./FilesViewHeader.vue";
-import { BlobApi, TreeApi } from "@coscine/api-connection";
+import { BlobApi, TreeApi } from "@coscine/api-client";
 import { LanguageUtil, GuidUtil, FileUtil } from "@coscine/app-util";
 
 import { EntryDefinition } from "@/utils/EntryDefinition";
@@ -186,6 +186,7 @@ import MetadataManagerUtil from "../utils/MetadataManagerUtil";
 
 import { mapState } from "vuex";
 import { BTable } from "bootstrap-vue";
+import fileSaver from "file-saver";
 
 export default Vue.extend({
   name: "DataSource",
@@ -337,12 +338,14 @@ export default Vue.extend({
         }
       }
     },
-    deleteFile(file: EntryDefinition) {
+    async deleteFile(file: EntryDefinition) {
       this.$emit("waitingForResponse", true);
-      BlobApi.deleteObject(this.resourceId, file.absolutepath, () => {
+      await BlobApi.blobDeleteFileWithParameter(
+        this.resourceId,
+        file.absolutepath
+      );
       this.$emit("waitingForResponse", false);
       location.reload();
-      });
     },
     getTableHeaders() {
       const headers = [
@@ -435,7 +438,7 @@ export default Vue.extend({
       }
       this.$set(this, "columns", tmpColumns);
     },
-    openDataSourceObject(rowData: EntryDefinition) {
+    async openDataSourceObject(rowData: EntryDefinition) {
       if (rowData.isFolder === true && rowData.absolutepath.endsWith("/")) {
         this.isBusy = true;
 
@@ -446,10 +449,11 @@ export default Vue.extend({
         // Show location change
         window.location.hash = rowData.absolutepath;
 
-        TreeApi.getMetadata(
+        const response = await TreeApi.treeGetMetadataWithParameter(
           this.resourceId,
-          rowData.absolutepath,
-          (response: any) => {
+          rowData.absolutepath
+        );
+
         const tmpFolder = [] as EntryDefinition[];
         if (rowData.name === "..") {
           this.$emit("currentFolder", this.folderPath.pop() as string);
@@ -499,14 +503,15 @@ export default Vue.extend({
         }
         this.isBusy = false;
         this.$emit("folder", tmpFolder);
-          }
-        );
       } else {
-        BlobApi.downloadObject(
+        const response = await BlobApi.blobGetFileWithParameter(
           this.resourceId,
           rowData.absolutepath,
-          rowData.name
+          {
+            responseType: "blob",
+          }
         );
+        fileSaver.saveAs(response.data, rowData.name);
       }
     },
     onRowSelected(items: EntryDefinition[]) {

src/components/MetadataManager.vue

@@ -234,6 +234,17 @@
         id="metadataManagerButtonRowBottomContainer"
         :class="saveButtonDisabled ? 'buttondisabled' : ''"
       >
+        <b-col>
+          <b-progress
+            v-if="isUploading"
+            class="metadataManagerButtonRowProgress"
+            :value="progressStatus"
+            max="100"
+            show-progress
+            animated
+          ></b-progress>
+        </b-col>
+        <b-col id="metadataManagerButtonCol">
           <b-button
             id="metadataManagerButtonRowBottomSave"
             class="metadataManagerButtonRowBottomSave"
@@ -255,13 +266,14 @@
                 : $t("metadataManagerBtnUpdate")
             }}</b-button
           >
+        </b-col>
       </div>
     </b-row>
     <b-popover
       :disabled="valid || validationResults.length === 0"
       over
       custom-class="b-popover"
-      target="metadataManagerButtonRowBottomContainer"
+      target="metadataManagerButtonCol"
       triggers="hover focus"
       placement="top"
     >
@@ -382,8 +394,9 @@
 
 <script lang="ts">
 import Vue, { PropType, VNode } from "vue";
-import { BlobApi, TreeApi } from "@coscine/api-connection";
+import { BlobApi, TreeApi } from "@coscine/api-client";
 import { BIconLink45deg } from "bootstrap-vue";
+import fileSaver from "file-saver";
 
 import { CoscineFormGroup } from "@coscine/component-library";
 import "@coscine/component-library/dist/index.css";
@@ -420,6 +433,7 @@ export default Vue.extend({
       modalIsVisible: false,
       fileListError: [] as EntryDefinition[],
       currentlyUploadedFiles: [] as EntryDefinition[],
+      progressStatus: 0,
       valid: false,
       validationResults: [] as any[],
     };
@@ -622,6 +636,7 @@ export default Vue.extend({
     },
     adjustRemainingFiles(file: EntryDefinition, error = false, reload = false) {
       this.numberOfCurrentlyProcessedFiles -= 1;
+      this.progressStatus = 0;
       file.uploading = false;
       if (error) {
         this.fileListError.push(file);
@@ -670,7 +685,7 @@ export default Vue.extend({
         }
       }
     },
-    initRemainingFiles(numberOfFiles: any) {
+    initRemainingFiles(numberOfFiles: number) {
       this.fileListError = [];
       this.numberOfCurrentlyProcessedFiles = numberOfFiles;
       this.totalNumberOfCurrentlyProcessedFiles = numberOfFiles;
@@ -709,7 +724,7 @@ export default Vue.extend({
         this.inputOk = true;
       }
     },
-    uploadPreparation() {
+    async uploadPreparation() {
       this.uploadFileListNewFiles = [];
       this.uploadFileListReplaceFiles = [];
       for (const fileToUpload of this.fileListUpload) {
@@ -723,10 +738,10 @@ export default Vue.extend({
       if (this.uploadFileListReplaceFiles.length > 0) {
         this.showModalSaveDuplicateFiles();
       } else {
-        this.upload();
+        await this.upload();
       }
     },
-    upload() {
+    async upload() {
       if (this.currentFileId === -1) {
         this.applyMetadataTemplate(this.allFilesUpload);
       }
@@ -734,42 +749,37 @@ export default Vue.extend({
         this.initRemainingFiles(this.fileListUpload.length);
         for (const fileToUpload of this.fileListUpload) {
           const file = fileToUpload;
-          this.uploadFile(file);
+          await this.uploadFile(file);
         }
       } else {
         this.initRemainingFiles(this.uploadFileListNewFiles.length);
         for (const fileToUpload of this.uploadFileListNewFiles) {
           const file = fileToUpload;
-          this.uploadFile(file);
+          await this.uploadFile(file);
         }
       }
     },
-    uploadFile(file: EntryDefinition) {
-      TreeApi.storeMetadataForFile(
+    async uploadFile(file: EntryDefinition) {
+      this.removeEmptyValues(file);
+      try {
+        await TreeApi.treeStoreMetadataForFileWithParameter(
           this.resourceId,
-        file.path + file.name,
-        file.metadata,
-        () => {
-          const form = new FormData();
+          file.absolutepath,
+          { data: file.metadata }
+        );
         if (
           !this.resourceContentSettings.metadataView.editableDataUrl &&
           file.info
         ) {
-            form.append("files", file.info);
-            this.handleUploadContent(form, file);
-            this.adjustRemainingFiles(file);
+          await this.handleUploadContent(file.info, file);
         } else if (file.dataUrl !== undefined) {
           this.fillData(file);
           const blob = new Blob([file.dataUrl], { type: "plain/text" });
-            form.append("files", blob, file.name);
-            this.handleUploadContent(form, file);
-            this.adjustRemainingFiles(file);
+          await this.handleUploadContent(blob, file);
         }
-        },
-        () => {
+      } catch {
         this.adjustRemainingFiles(file, true);
       }
-      );
     },
     fillData(file: EntryDefinition) {
       if (file.dataUrl === null || file.dataUrl === undefined) {
@@ -779,20 +789,32 @@ export default Vue.extend({
         type: "text/plain",
       });
     },
-    handleUploadContent(contents: FormData, file: EntryDefinition) {
-      // TODO: Might replaceable by "file.absolutepath"
-      const absolutepath = (file.path !== "/" ? file.path : "") + file.name;
-      BlobApi.uploadObject(
+    async handleUploadContent(contents: Blob, file: EntryDefinition) {
+      this.progressStatus = 0;
+      try {
+        await BlobApi.blobUploadFileWithParameter(
           this.resourceId,
-        absolutepath,
-        contents,
-        () => {
+          file.absolutepath,
+          [contents],
+          {
+            onUploadProgress: (progressEvent: ProgressEvent) => {
+              this.progressStatus = Math.round(
+                (progressEvent.loaded * 100) / progressEvent.total
+              );
+            },
+          }
+        );
+      } catch {
+        this.adjustRemainingFiles(file, true);
+        return;
+      }
+
       const entry = this.folder.find((x) => x.name === file.name);
       if (entry === undefined) {
         const newRow: EntryDefinition = {
           isFolder: false,
           name: file.name,
-              absolutepath: "/" + absolutepath,
+          absolutepath: file.absolutepath,
           lastModified: new Date().toString(),
           created: new Date().toString(),
           size: file.size,
@@ -809,11 +831,6 @@ export default Vue.extend({
       }
       this.adjustRemainingFiles(file);
     },
-        () => {
-          this.adjustRemainingFiles(file, true);
-        }
-      );
-    },
     openURL() {
       if (this.showDetail) {
         if (
@@ -831,13 +848,20 @@ export default Vue.extend({
         }
       }
     },
-    download() {
+    async download() {
       if (this.showDetail) {
         for (const editableFile of this.shownFiles) {
-          BlobApi.downloadObject(
+          const response = await BlobApi.blobGetFileWithParameter(
             this.resourceId,
             editableFile.absolutepath,
-            editableFile.name
+            {
+              responseType: "blob",
+            }
+          );
+          fileSaver.saveAs(response.data, editableFile.name);
+          window.location.hash = window.location.hash.substring(
+            0,
+            window.location.hash.lastIndexOf("/")
           );
         }
       }
@@ -845,7 +869,7 @@ export default Vue.extend({
     selectFiles() {
       this.$emit("clickFileSelect");
     },
-    update() {
+    async update() {
       if (this.currentFileId === -1) {
         this.applyMetadataTemplate(this.allFilesEdit);
       }
@@ -853,53 +877,67 @@ export default Vue.extend({
 
       for (const editableFile of this.fileListEdit) {
         const file = editableFile as EntryDefinition;
-        TreeApi.storeMetadataForFile(
+
+        this.removeEmptyValues(file);
+
+        try {
+          await TreeApi.treeStoreMetadataForFileWithParameter(
             this.resourceId,
             file.absolutepath,
-          file.metadata,
-          () => {
+            { data: file.metadata }
+          );
           const tmp = this.folder.find((x) => x.name === file.name);
           if (
             this.resourceContentSettings.metadataView.editableDataUrl &&
             file.dataUrl !== undefined
           ) {
             this.fillData(file);
-              const form = new FormData();
             const blob = new Blob([file.dataUrl], { type: "plain/text" });
-              form.append("files", blob, file.name);
-              this.handleUploadContent(form, file);
+            await this.handleUploadContent(blob, file);
           } else {
             MetadataManagerUtil.copyMetadata(file.metadata, tmp, false);
             this.adjustRemainingFiles(file);
           }
-          },
-          () => {
+        } catch {
           this.adjustRemainingFiles(file, true);
         }
-        );
       }
     },
-    deleteFiles() {
+    removeEmptyValues(file: EntryDefinition) {
+      // remove empty nodes
+      for (const node in file.metadata) {
+        const property = file.metadata[node];
+        if (
+          property.length === 0 ||
+          property[0].value === undefined ||
+          property[0].value === null ||
+          property[0].value.trim() === ""
+        ) {
+          delete file.metadata[node];
+        }
+      }
+    },
+    async deleteFiles() {
       this.initRemainingFiles(this.fileListEdit.length);
 
       for (const fileToDelete of this.fileListEdit) {
-        this.deleteFile(fileToDelete);
+        await this.deleteFile(fileToDelete);
       }
       this.cleanup();
     },
-    deleteFile(file: EntryDefinition) {
-      BlobApi.deleteObject(
+    async deleteFile(file: EntryDefinition) {
+      let failure = false;
+      try {
+        await BlobApi.blobDeleteFileWithParameter(
           this.resourceId,
-        file.absolutepath,
-        () => {
-          this.adjustRemainingFiles(file, false, true);
-        },
-        () => {
-          this.adjustRemainingFiles(file, true, true);
-        }
+          file.absolutepath
         );
+      } catch {
+        failure = true;
+      }
+      this.adjustRemainingFiles(file, failure, true);
     },
-    getOptions() {
+    async getOptions() {
       this.shownFiles = [] as EntryDefinition[];
       if (this.showDetail) {
         this.shownFiles = this.fileListEdit;
@@ -916,17 +954,15 @@ export default Vue.extend({
             return;
           }
           element.requesting = true;
-          BlobApi.getDownloadObject(
+          const response = await BlobApi.blobGetFileWithParameter(
             this.resourceId,
-            element.absolutepath,
-            (response: any) => {
+            element.absolutepath
+          );
           (response.data as Blob).text().then((text: string) => {
             this.$set(element, "dataUrl", text);
             element.requesting = false;
           });
         }
-          );
-        }
       }
     },
     cleanup() {
@@ -988,9 +1024,9 @@ export default Vue.extend({
     hideModalDeleteFiles() {
       (this.$refs.modalDeleteFiles as any).hide();
     },
-    deleteModalDeleteFiles() {
+    async deleteModalDeleteFiles() {
       (this.$refs.modalDeleteFiles as any).hide();
-      this.deleteFiles();
+      await this.deleteFiles();
     },
     showModalSaveDuplicateFiles() {
       (this.$refs.modalSaveDuplicateFiles as any).show();
@@ -1183,12 +1219,11 @@ button span.spinner-border {
   width: 100%;
 }
 #metadataManagerButtonRowBottom #metadataManagerButtonRowBottomContainer {
-  display: inline-block;
+  display: inline-flex;
   position: absolute;
   right: 0px;
   width: auto;
   height: 33px;
-  margin-right: 20px;
 }
 #metadataManagerButtonRowBottom
   #metadataManagerButtonRowBottomContainer.buttondisabled {
@@ -1197,6 +1232,10 @@ button span.spinner-border {
 #metadataManagerButtonRowBottom .metadataManagerButtonRowBottomSave.disabled {
   pointer-events: none;
 }
+#metadataManagerButtonRowBottom .metadataManagerButtonRowProgress {
+  width: 350px;
+  margin-top: 13px;
+}
 #metadataManagerButtonRowBottom .processStatement {
   position: absolute;
   top: 13px;

src/utils/MetadataManagerUtil.ts

-import { TreeApi } from "@coscine/api-connection";
+import { TreeApi } from "@coscine/api-client";
 import { EntryDefinition } from "./EntryDefinition";
 
 export default {
@@ -25,16 +25,17 @@ export default {
       return false;
     });
   },
-  loadMetadata(
+  async loadMetadata(
     callback: (response: any) => void,
     fileInfo: EntryDefinition,
     resourceId: string
   ) {
     if (fileInfo !== undefined && fileInfo.absolutepath !== undefined) {
-      TreeApi.getMetadata(
+      const response = await TreeApi.treeGetMetadataWithParameter(
         resourceId,
-        fileInfo.absolutepath,
-        (response: any) => {
+        fileInfo.absolutepath
+      );
+
       const metadataStorage = response.data.data.metadataStorage;
 
       if (metadataStorage.length === 0) {
@@ -64,8 +65,6 @@ export default {
       ) {
         return callback(result);
       }
-        }
-      );
     } else {
       return callback({});
     }