.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint",
+  ],
+  parserOptions: {
+    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": [
+      "error",
+      {
+        allowDestructuring: false,
+        allowedNames: ["app", "me"],
+      },
+    ],
+  },
+};

package.json

 {
   "name": "@coscine/resourcecontentview",
-  "version": "1.10.2",
+  "version": "1.11.0",
   "private": true,
   "directories": {
     "doc": "docs"
@@ -11,9 +11,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@coscine/api-connection": "^1.30.0",
+    "@coscine/api-connection": "^1.31.0",
     "@coscine/app-util": "^1.9.0",
-    "@coscine/component-library": "^1.8.1",
+    "@coscine/component-library": "^1.9.0",
     "@coscine/form-generator": "^1.14.0",
     "@coscine/vuex-store": "^1.2.0",
     "@types/jquery": "^3.5.2",
@@ -35,18 +35,34 @@
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
     "@types/node": "^14.14.20",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "^4.5.12",
     "@vue/cli-service": "^4.5.7",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "conventional-changelog-eslint": "3.0.9",
     "core-js": "^3.8.2",
-    "eslint": "^7.17.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^2.2.1",
     "semantic-release": "^17.3.1",
     "tslib": "^2.3.0",
     "typescript": "~4.3.3",
     "vue-template-compiler": "^2.6.12"
   },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue,ts,tsx}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://git.rwth-aachen.de/coscine/frontend/apps/resourcecontentview.git"

src/ResourceContentView.vue

@@ -7,11 +7,24 @@
     @dragover.prevent=""
     @drop.prevent="uploadDrop"
   >
-    <div class="droppable" v-if="showDroppable && !resourceContentSettings.readOnly && !resourceContentSettings.metadataView.editableDataUrl">
-      <p class="droppableText">{{ $t('canDropFile') }}</p>
+    <div
+      class="droppable"
+      v-if="
+        showDroppable &&
+        !resourceContentSettings.readOnly &&
+        !resourceContentSettings.metadataView.editableDataUrl
+      "
+    >
+      <p class="droppableText">{{ $t("canDropFile") }}</p>
     </div>
     <coscine-headline v-show="!isFullscreen" :headline="$t('resources')" />
-    <b-form-file ref="fileTrigger" multiple v-model="fileListUploadSelect" class="mt-3" plain></b-form-file>
+    <b-form-file
+      ref="fileTrigger"
+      multiple
+      v-model="fileListUploadSelect"
+      class="mt-3"
+      plain
+    ></b-form-file>
     <span id="filesViewSpan">
       <div id="filesViewCard" :class="isFullscreen == false ? 'card' : ''">
         <div :class="isFullscreen == false ? 'card-body' : ''">
@@ -41,14 +54,22 @@
         </div>
       </div>
     </span>
-    <div id="metadataManagerDiv" :class="isMetadataManagerHidden == true ? 'hiddenMetadataManager' : ''">
-      <b-button v-show="isFullscreen" squared id="metadataManagerToggleFullscreen" @click="toggleMenu()"
-        ><span>{{ $t('metadataManager') }}</span></b-button
+    <div
+      id="metadataManagerDiv"
+      :class="isMetadataManagerHidden == true ? 'hiddenMetadataManager' : ''"
+    >
+      <b-button
+        v-show="isFullscreen"
+        squared
+        id="metadataManagerToggleFullscreen"
+        @click="toggleMenu()"
+        ><span>{{ $t("metadataManager") }}</span></b-button
       >
       <div class="card">
         <div class="card-body">
           <MetadataManager
             :resourceId="resourceId"
+            :resource="resource"
             :projectId="projectId"
             :fileInfo="fileInfo"
             :showDetail="showDetail"
@@ -67,7 +88,12 @@
             @fileListEdit="setFileListEdit"
             @clickFileSelect="clickFileSelect"
           />
-          <div id="toggleFullscreenButton" :class="isMetadataManagerHidden == true ? '' : 'hiddenMetadataManager'">
+          <div
+            id="toggleFullscreenButton"
+            :class="
+              isMetadataManagerHidden == true ? '' : 'hiddenMetadataManager'
+            "
+          >
             <button
               v-if="isFullscreen"
               class="material-icons btn btn-secondary"
@@ -76,75 +102,99 @@
             >
               fullscreen_exit
             </button>
-            <button v-else type="button" class="material-icons btn btn-secondary" @click="toggleFullscreen">
+            <button
+              v-else
+              type="button"
+              class="material-icons btn btn-secondary"
+              @click="toggleFullscreen"
+            >
               fullscreen
             </button>
           </div>
         </div>
       </div>
     </div>
-    <coscine-loading-spinner :isWaitingForResponse="isWaitingForResponse"></coscine-loading-spinner>
+    <coscine-loading-spinner
+      :isWaitingForResponse="isWaitingForResponse"
+    ></coscine-loading-spinner>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import FilesView from './components/FilesView.vue';
-import MetadataManager from './components/MetadataManager.vue';
-import URLSearchParams from '@ungap/url-search-params';
+import Vue from "vue";
+import FilesView from "./components/FilesView.vue";
+import MetadataManager from "./components/MetadataManager.vue";
+import URLSearchParams from "@ungap/url-search-params";
 
-import MetadataManagerUtil from './utils/MetadataManagerUtil';
+import MetadataManagerUtil from "./utils/MetadataManagerUtil";
 
-import { LanguageUtil, GuidUtil, MergeUtil } from '@coscine/app-util';
-import { ResourceApi, ResourceTypeApi, BlobApi, ProjectRoleApi, MetadataApi, UserApi } from '@coscine/api-connection';
-import { CoscineLoadingSpinner, CoscineHeadline } from '@coscine/component-library';
-import '@coscine/component-library/dist/index.css';
+import { LanguageUtil, GuidUtil, MergeUtil } from "@coscine/app-util";
+import {
+  ResourceApi,
+  ResourceTypeApi,
+  BlobApi,
+  ProjectRoleApi,
+  MetadataApi,
+  UserApi,
+} from "@coscine/api-connection";
+import {
+  CoscineLoadingSpinner,
+  CoscineHeadline,
+} from "@coscine/component-library";
+import "@coscine/component-library/dist/index.css";
 
-import { DefaultResourceContentSettings } from './utils/DefaultResourceContentSettings';
+import { DefaultResourceContentSettings } from "./utils/DefaultResourceContentSettings";
+import ResourceContentSettings from "@/global";
 
 export default Vue.extend({
-  name: 'resourcecontentview',
+  name: "resourcecontentview",
   data() {
     return {
-      locale: 'en',
-      resourceId: '',
-      projectId: '',
+      locale: "en",
+      resourceId: "",
+      projectId: "",
       resource: {
-        ResourceName: '',
-        DisplayName: '',
-        Description: '',
-        PID: '',
-        Disciplines: [] as object[],
-        Keywords: [] as object[],
+        //---add flag for archived resources---
+        Archived: false,
+        //--------------------------------------
+        ResourceName: "",
+        DisplayName: "",
+        Description: "",
+        PID: "",
+        Disciplines: [] as Array<unknown>,
+        Keywords: [] as Array<unknown>,
         Visibility: {
-          id: '',
-          displayName: '',
+          id: "",
+          displayName: "",
         },
         License: null,
-        UsageRights: '',
+        UsageRights: "",
         type: {
-          id: '',
-          displayName: '',
+          id: "",
+          displayName: "",
           enabled: true,
         },
-        applicationProfile: '',
+        applicationProfile: "",
         fixedValues: {},
         resourceTypeOption: {},
       },
-      resourceName: '',
+      resourceName: "",
       isWaitingForResponse: false,
       fileInfo: {},
-      fileListEdit: [] as object[],
+      fileListEdit: [] as Array<unknown>,
       showDetail: false,
-      fileListUpload: [] as object[],
-      fileListUploadSelect: [] as object[],
-      folder: [] as object[],
-      currentFolder: window.location.hash.indexOf('#') !== -1 ? window.location.hash.substring(1) : '/',
-      applicationProfileId: '',
+      fileListUpload: [] as Array<unknown>,
+      fileListUploadSelect: [] as Array<unknown>,
+      folder: [] as Array<unknown>,
+      currentFolder:
+        window.location.hash.indexOf("#") !== -1
+          ? window.location.hash.substring(1)
+          : "/",
+      applicationProfileId: "",
       showDroppable: false,
       dragCounter: 0,
       applicationProfile: [] as any[],
-      userId: '',
+      userId: "",
       progressbarOccupied: 0,
       windowWidth: 0,
       windowHeight: 0,
@@ -152,7 +202,8 @@ export default Vue.extend({
       isFullscreen: false,
       isMetadataManagerHidden: false,
       isUploading: false,
-      resourceContentSettings: new DefaultResourceContentSettings() as ResourceContentSettings,
+      resourceContentSettings:
+        new DefaultResourceContentSettings() as ResourceContentSettings,
     };
   },
   watch: {
@@ -162,7 +213,7 @@ export default Vue.extend({
           (loadedMetadata: any) => {
             this.fileListUpload.push({
               path: this.currentFolder,
-              version: '1.0.0',
+              version: "1.0.0",
               uploading: false,
               info: file,
               name: (file as any).name,
@@ -170,7 +221,7 @@ export default Vue.extend({
             });
           },
           file,
-          this.resourceId,
+          this.resourceId
         );
       }
       (this.$refs.filesView as any).$refs.adaptTable.clearSelected();
@@ -194,10 +245,11 @@ export default Vue.extend({
         this.resource.DisplayName = data.displayName;
         this.resource.Description = data.description;
         this.resource.UsageRights = data.usageRights;
-        this.resource.Keywords = [] as object[];
-        const keywords = data.keywords ? data.keywords.split(';') : [];
+        this.resource.Archived = data.archived;
+        this.resource.Keywords = [] as Array<unknown>;
+        const keywords = data.keywords ? data.keywords.split(";") : [];
         this.resource.Keywords = keywords;
-        this.resource.Disciplines = [] as object[];
+        this.resource.Disciplines = [] as Array<unknown>;
         for (const discipline of Object.keys(data.disciplines)) {
           this.resource.Disciplines.push(data.disciplines[discipline]);
         }
@@ -213,39 +265,50 @@ export default Vue.extend({
           (this.resource.resourceTypeOption as any).Size =
             (this.resource.resourceTypeOption as any).Size * 1024 * 1024 * 1024;
         }
-        this.resource.applicationProfile = data.applicationProfile !== null ? data.applicationProfile : '';
-        this.resource.fixedValues = data.fixedValues !== null ? data.fixedValues : {};
+        this.resource.applicationProfile =
+          data.applicationProfile !== null ? data.applicationProfile : "";
+        this.resource.fixedValues =
+          data.fixedValues !== null ? data.fixedValues : {};
         ResourceTypeApi.getResourceType(
           (this.resource.type as any).id,
           (resourceTypeResponse: any) => {
-            this.resourceContentSettings = resourceTypeResponse.data.resourceContent as ResourceContentSettings;
-            const languageStrings = (coscine.i18n.resourcecontentview as any)[LanguageUtil.getLanguage()];
+            this.resourceContentSettings = resourceTypeResponse.data
+              .resourceContent as ResourceContentSettings;
+            const languageStrings = (
+              (window as any).coscine.i18n.resourcecontentview as any
+            )[LanguageUtil.getLanguage()];
             // depending on the resource type information merge the appropriate strings
-            if (languageStrings[resourceTypeResponse.data.displayName] !== undefined) {
-              (coscine.i18n.resourcecontentview as any)[LanguageUtil.getLanguage()] =
-                MergeUtil.merge(
+            if (
+              languageStrings[resourceTypeResponse.data.displayName] !==
+              undefined
+            ) {
+              ((window as any).coscine.i18n.resourcecontentview as any)[
+                LanguageUtil.getLanguage()
+              ] = MergeUtil.merge(
                 MergeUtil.merge({}, languageStrings),
-                  languageStrings[resourceTypeResponse.data.displayName]);
+                languageStrings[resourceTypeResponse.data.displayName]
+              );
+            }
           }
-          },
         );
         MetadataApi.getProfileComplete(
           this.applicationProfileId,
           this.resourceId,
           (responseApplicationProfile: any) => {
             this.applicationProfile = responseApplicationProfile.data;
-          },
+          }
         );
       });
       // should get the free/occupied space for the reasource here and hand it to the other templates?
       ResourceApi.isUserResourceCreator(
         this.resourceId,
-        (response: any) => (this.canEditResource = response.data.isResourceCreator),
+        (response: any) =>
+          (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') {
+          if (userRole.role.displayName.toLowerCase() === "owner") {
             app.canEditResource = true;
           }
         });
@@ -254,8 +317,8 @@ export default Vue.extend({
   },
   mounted() {
     this.$nextTick(function () {
-      window.addEventListener('resize', this.getWindowWidth);
-      window.addEventListener('resize', this.getWindowHeight);
+      window.addEventListener("resize", this.getWindowWidth);
+      window.addEventListener("resize", this.getWindowHeight);
 
       this.getWindowWidth();
       this.getWindowHeight();
@@ -267,13 +330,13 @@ export default Vue.extend({
       if (this.resourceContentSettings.metadataView.editableDataUrl) {
         this.fileListUpload.length = 0;
         const file = {
-          name: '',
+          name: "",
         };
         MetadataManagerUtil.loadMetadata(
           (loadedMetadata: any) => {
             this.fileListUpload.push({
               path: this.currentFolder,
-              version: '1.0.0',
+              version: "1.0.0",
               uploading: false,
               info: file,
               name: (file as any).name,
@@ -281,7 +344,7 @@ export default Vue.extend({
             });
           },
           file,
-          this.resourceId,
+          this.resourceId
         );
       } else {
         (this.$refs.fileTrigger as any).$el.click();
@@ -298,18 +361,21 @@ export default Vue.extend({
       }
     },
     uploadDrop(ev: any) {
-      if (!this.resourceContentSettings.readOnly && !this.resourceContentSettings.metadataView.editableDataUrl) {
+      if (
+        !this.resourceContentSettings.readOnly &&
+        !this.resourceContentSettings.metadataView.editableDataUrl
+      ) {
         this.dragCounter = 0;
         this.showDroppable = false;
         if (ev.dataTransfer.items) {
           for (const item of ev.dataTransfer.items) {
-            if (item.kind === 'file') {
+            if (item.kind === "file") {
               const file = item.getAsFile();
               MetadataManagerUtil.loadMetadata(
                 (loadedMetadata: any) => {
                   this.fileListUpload.push({
                     path: this.currentFolder,
-                    version: '1.0.0',
+                    version: "1.0.0",
                     uploading: false,
                     info: file,
                     name: (file as any).name,
@@ -317,7 +383,7 @@ export default Vue.extend({
                   });
                 },
                 file,
-                this.resourceId,
+                this.resourceId
               );
             }
           }
@@ -347,11 +413,14 @@ export default Vue.extend({
     setFileListEdit(newFileListEdit: any) {
       this.fileListEdit = newFileListEdit;
     },
-    removeSelection(selectionRemovable: object[]) {
+    removeSelection(selectionRemovable: Array<unknown>) {
       const table = (this.$refs.filesView as any).$refs.adaptTable;
       for (let i = 0; i < table.items.length; i++) {
         const item = table.items[i];
-        if (selectionRemovable.filter((entry: any) => entry.name === item.name).length > 0) {
+        if (
+          selectionRemovable.filter((entry: any) => entry.name === item.name)
+            .length > 0
+        ) {
           table.unselectRow(i);
         }
       }
@@ -359,13 +428,13 @@ export default Vue.extend({
     setFullscreen(newIsFullscreen: boolean) {
       this.isFullscreen = newIsFullscreen;
       if (newIsFullscreen) {
-        document.body.classList.add('fullscreen');
-        document.body.classList.remove('show-menu');
+        document.body.classList.add("fullscreen");
+        document.body.classList.remove("show-menu");
       } else {
-        document.body.classList.remove('fullscreen');
+        document.body.classList.remove("fullscreen");
         this.isMetadataManagerHidden = false;
-        if (localStorage.getItem('isSidebarVisible') === '1') {
-          document.body.classList.add('show-menu');
+        if (localStorage.getItem("isSidebarVisible") === "1") {
+          document.body.classList.add("show-menu");
         }
       }
     },
@@ -373,7 +442,7 @@ export default Vue.extend({
       this.setFullscreen(!this.isFullscreen);
     },
     toggleMenu() {
-      this.$set(this, 'isMetadataManagerHidden', !this.isMetadataManagerHidden);
+      this.$set(this, "isMetadataManagerHidden", !this.isMetadataManagerHidden);
     },
     getWindowWidth() {
       this.windowWidth = document.documentElement.clientWidth;
@@ -421,7 +490,7 @@ body.fullscreen #resourcecontentview .DataSource .headerRow {
 }
 #resourceview h4 {
   color: #000;
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
 }
 body.fullscreen #footer {
   display: none;
@@ -499,7 +568,7 @@ body:not(.fullscreen) #resourcecontentview #metadataManagerDiv,
 </style>
 
 <style scoped>
-input[type='file'] {
+input[type="file"] {
   display: none;
   font-size: 0px;
   position: absolute;

src/components/FilesView.vue

 <template>
   <div class="DataSource">
     <b-row class="headerRow">
-      <b-col sm="8" class="headerLeftCol">
+      <b-col sm="10" class="headerLeftCol">
         <FilesViewHeader
           @clickFileSelect="clickFileSelect"
           :locale="locale"
@@ -14,7 +14,7 @@
           :resourceContentSettings="resourceContentSettings"
         />
       </b-col>
-      <b-col sm="4" class="headerRightCol">
+      <b-col sm="2" class="headerRightCol">
         <b-input-group>
           <b-form-input
             v-model="filter"
@@ -51,27 +51,36 @@
       >
         <div slot="table-busy" class="text-center text-danger my-2">
           <b-spinner class="align-middle"></b-spinner>
-          <strong style="margin-left: 1%">{{ $t('loading') }}</strong>
+          <strong style="margin-left: 1%">{{ $t("loading") }}</strong>
         </div>
         <template v-slot:head(name)="row">
-          <b-form-checkbox v-model="selectAll" @change="allSelect(row)"></b-form-checkbox>
-          <span>{{ $t('fileName') }}</span>
+          <b-form-checkbox
+            v-model="selectAll"
+            @change="allSelect(row)"
+          ></b-form-checkbox>
+          <span>{{ $t("fileName") }}</span>
         </template>
         <template v-slot:head(lastModified)="row">
           <span>{{ row.label }}</span>
         </template>
         <template v-slot:head()="row">
-          <template v-if="resourceContentSettings.entriesView.columns.always.includes(row.field.key)">
+          <template
+            v-if="
+              resourceContentSettings.entriesView.columns.always.includes(
+                row.field.key
+              )
+            "
+          >
             <span>{{ row.label }}</span>
           </template>
           <template v-else>
             <span class="additionalColumnHeader">{{ row.label }}</span>
             <i class="material-icons" @click="removeColumn(row)">
-              {{ 'close' }}
+              {{ "close" }}
             </i>
           </template>
         </template>
-        <template v-slot:head(addColumn)="row">
+        <template v-slot:head(addColumn)>
           <b-dropdown size="sm" right :no-caret="true" id="addColumnDropDown">
             <template v-slot:button-content>
               <i class="material-icons">arrow_drop_down</i>
@@ -92,9 +101,13 @@
         </template>
         <template v-slot:cell(name)="row">
           <span class="checkFile">
-            <b-form-checkbox class="tableCheck" v-model="row.rowSelected" @change="select(row)" />
+            <b-form-checkbox
+              class="tableCheck"
+              v-model="row.rowSelected"
+              @change="select(row)"
+            />
             <i class="material-icons">
-              {{ row.item.isFolder ? 'folder' : 'insert_drive_file' }}
+              {{ row.item.isFolder ? "folder" : "insert_drive_file" }}
             </i>
           </span>
           <a
@@ -117,6 +130,13 @@
             toggle-class="text-decoration-none"
             size="sm"
             :no-caret="true"
+            :disabled="
+              resourceContentSettings !== null &&
+              resourceContentSettings.metadataView !== null &&
+              resourceContentSettings.metadataView.editableDataUrl !== null &&
+              resourceContentSettings.metadataView.editableDataUrl &&
+              resource.Archived
+            "
           >
             <template v-slot:button-content> ... </template>
             <b-dropdown-item
@@ -127,9 +147,13 @@
                 resourceContentSettings.metadataView.editableDataUrl === false
               "
               @click="openDataSourceObject(row.item)"
-              >{{ $t('metadataManagerBtnDownload') }}</b-dropdown-item
+              >{{ $t("metadataManagerBtnDownload") }}</b-dropdown-item
+            >
+            <b-dropdown-item
+              @click="deleteFile(row.item)"
+              :disabled="resource.Archived"
+              >{{ $t("metadataManagerBtnDelete") }}</b-dropdown-item
             >
-            <b-dropdown-item @click="deleteFile(row.item)">{{ $t('metadataManagerBtnDelete') }}</b-dropdown-item>
           </b-dropdown>
         </template>
         <template v-slot:cell(size)="row">
@@ -140,25 +164,33 @@
         </template>
       </b-table>
       <b-row v-if="!isBusy && errorLoadingResource === true">
-        <b-col class="center-align" id="error-loading-resource">{{ $t('errorLoadingResource') }}</b-col>
+        <b-col class="center-align" id="error-loading-resource">{{
+          $t("errorLoadingResource")
+        }}</b-col>
       </b-row>
     </b-row>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import FilesViewHeader from './FilesViewHeader.vue';
-import { ResourceApi, BlobApi, TreeApi, MetadataApi } from '@coscine/api-connection';
-import { LanguageUtil, GuidUtil, FileUtil } from '@coscine/app-util';
-import AddIcon from 'vue-material-design-icons/Lock.vue';
+import Vue from "vue";
+import FilesViewHeader from "./FilesViewHeader.vue";
+import {
+  ResourceApi,
+  BlobApi,
+  TreeApi,
+  MetadataApi,
+} from "@coscine/api-connection";
+import { LanguageUtil, GuidUtil, FileUtil } from "@coscine/app-util";
 
-import MetadataManagerUtil from '../utils/MetadataManagerUtil';
+import MetadataManagerUtil from "../utils/MetadataManagerUtil";
 
-import { mapState } from 'vuex';
+import ResourceContentSettings from "@/global";
+
+import { mapState } from "vuex";
 
 export default Vue.extend({
-  name: 'DataSource',
+  name: "DataSource",
   data() {
     return {
       headers: [],
@@ -166,17 +198,16 @@ export default Vue.extend({
       selectAll: false,
       downloadTrigger: false,
       currentPage: 1,
-      filter: '',
+      filter: "",
       folderPath: [] as string[],
       itemList: {},
       errorLoadingResource: false,
       selectableFiles: [{ text: String, value: String }],
-      columns: [] as object[],
+      columns: [] as Array<unknown>,
       filterFields: [] as string[],
     };
   },
   components: {
-    AddIcon,
     FilesViewHeader,
   },
   props: {
@@ -189,11 +220,13 @@ export default Vue.extend({
     userId: String,
     applicationProfile: Array,
     currentFolder: {
-      default: '/',
+      default: "/",
       type: String,
     },
     fileListEdit: {
-      default: [],
+      default() {
+        return [];
+      },
       type: Array,
     },
     progressbarOccupied: Number,
@@ -219,42 +252,55 @@ export default Vue.extend({
   },
   created() {
     this.isBusy = true;
-    this.$set(this, 'resourceId', GuidUtil.getResourceId());
+    this.$set(this, "resourceId", GuidUtil.getResourceId());
     this.getColumns();
     this.getTableHeaders();
     if (GuidUtil.isValidGuid(this.resourceId)) {
       // Doesn't end with '/' => Probably a file
-      if (this.currentFolder.indexOf('/', this.currentFolder.length - '/'.length) === -1) {
+      if (
+        this.currentFolder.indexOf(
+          "/",
+          this.currentFolder.length - "/".length
+        ) === -1
+      ) {
         // TODO: Change to open modal
         this.openDataSourceObject({
           isFolder: false,
-          name: this.currentFolder.substring(this.currentFolder.lastIndexOf('/') + 1),
+          name: this.currentFolder.substring(
+            this.currentFolder.lastIndexOf("/") + 1
+          ),
           absolutepath: this.currentFolder,
         });
-        this.$emit('currentFolder', this.currentFolder.substring(0, this.currentFolder.lastIndexOf('/') + 1));
+        this.$emit(
+          "currentFolder",
+          this.currentFolder.substring(
+            0,
+            this.currentFolder.lastIndexOf("/") + 1
+          )
+        );
       }
       const absolutePath = this.currentFolder;
-      if (this.currentFolder !== '/') {
-        let combine = '';
-        const folderSplit = this.currentFolder.split('/');
+      if (this.currentFolder !== "/") {
+        let combine = "";
+        const folderSplit = this.currentFolder.split("/");
         for (const folderKey in folderSplit) {
-          if (folderSplit.hasOwnProperty(folderKey)) {
+          if (Object.prototype.hasOwnProperty.call(folderSplit, folderKey)) {
             const folder = folderSplit[folderKey];
-            if (combine !== '' && folder === '') {
+            if (combine !== "" && folder === "") {
               continue;
             }
-            combine += folder + '/';
+            combine += folder + "/";
             this.folderPath.push(combine);
           }
         }
         this.folderPath.pop();
         if (this.folderPath.length > 0) {
-          this.$emit('currentFolder', this.folderPath.pop() as string);
+          this.$emit("currentFolder", this.folderPath.pop() as string);
         } else {
-          this.$emit('currentFolder', '');
+          this.$emit("currentFolder", "");
         }
       } else {
-        this.$emit('currentFolder', '');
+        this.$emit("currentFolder", "");
       }
       this.openDataSourceObject({
         isFolder: true,
@@ -268,7 +314,7 @@ export default Vue.extend({
   methods: {
     saveInLocalStorage() {
       if (this.columns.length > 0) {
-        this.$store.commit('resourcecontentview/storeColumns', {
+        this.$store.commit("resourcecontentview/storeColumns", {
           resourceId: this.resourceId,
           columns: JSON.stringify(this.columns),
         });
@@ -276,10 +322,13 @@ export default Vue.extend({
     },
     loadFromLocalStorage() {
       let element = null;
-      if (this.storedColumns !== null && this.storedColumns[this.resourceId] !== undefined) {
+      if (
+        this.storedColumns !== null &&
+        this.storedColumns[this.resourceId] !== undefined
+      ) {
         element = this.storedColumns[this.resourceId];
       }
-      let json = [] as object[];
+      let json = [] as Array<unknown>;
       if (element !== null) {
         json = JSON.parse(element);
       }
@@ -293,27 +342,32 @@ export default Vue.extend({
       }
     },
     deleteFile(file: any) {
-      this.$emit('waitingForResponse', true);
-      BlobApi.deleteObject(this.resourceId, file.absolutepath, (response: any) => {
-        this.$emit('waitingForResponse', false);
+      this.$emit("waitingForResponse", true);
+      BlobApi.deleteObject(
+        this.resourceId,
+        file.absolutepath,
+        (response: any) => {
+          this.$emit("waitingForResponse", false);
           location.reload();
-      });
+        }
+      );
     },
     getTableHeaders() {
       const headers = [
         {
-          label: this.$t('fileName'),
-          key: 'name',
+          label: this.$t("fileName"),
+          key: "name",
           sortable: true,
         },
         {
-          label: this.$t('lastModified'),
-          key: 'lastModified',
+          label: this.$t("lastModified"),
+          key: "lastModified",
           sortable: true,
         },
       ];
       const filterFields = headers.map((header) => header.key);
-      for (const column of this.resourceContentSettings.entriesView.columns.always) {
+      for (const column of this.resourceContentSettings.entriesView.columns
+        .always) {
         if (!filterFields.includes(column)) {
           headers.push({
             label: this.$t(column),
@@ -334,32 +388,41 @@ export default Vue.extend({
         }
       }
       headers.push({
-        label: 'add',
-        key: 'addColumn',
+        label: "add",
+        key: "addColumn",
         sortable: false,
       });
-      this.$set(this, 'filterFields', filterFields);
-      this.$set(this, 'headers', headers);
+      this.$set(this, "filterFields", filterFields);
+      this.$set(this, "headers", headers);
       this.saveInLocalStorage();
     },
     getColumns() {
       const tmpColumns = [];
       // keys a, b, name, active
       if (this.applicationProfile.length > 0) {
-        const entries = (this.applicationProfile[0] as any)['@graph'];
+        const entries = (this.applicationProfile[0] as any)["@graph"];
         const languageKey = LanguageUtil.getLanguage();
         const oldColumns = this.loadFromLocalStorage();
         for (const entry of entries) {
-          if (entry.hasOwnProperty('http://www.w3.org/ns/shacl#name')) {
           if (
-              entry.hasOwnProperty('https://purl.org/coscine/invisible') &&
-              entry['https://purl.org/coscine/invisible'][0]['@value'] === '1'
+            Object.prototype.hasOwnProperty.call(
+              entry,
+              "http://www.w3.org/ns/shacl#name"
+            )
+          ) {
+            if (
+              Object.prototype.hasOwnProperty.call(
+                entry,
+                "https://purl.org/coscine/invisible"
+              ) &&
+              entry["https://purl.org/coscine/invisible"][0]["@value"] === "1"
             ) {
               continue;
             }
-            for (const name of entry['http://www.w3.org/ns/shacl#name']) {
-              if (name['@language'] === languageKey) {
-                const identifier = entry['http://www.w3.org/ns/shacl#path'][0]['@id'];
+            for (const name of entry["http://www.w3.org/ns/shacl#name"]) {
+              if (name["@language"] === languageKey) {
+                const identifier =
+                  entry["http://www.w3.org/ns/shacl#path"][0]["@id"];
                 // read the active value from the localstorage
                 let activeColumn = false;
                 for (const oldColumn of oldColumns) {
@@ -367,35 +430,49 @@ export default Vue.extend({
                     activeColumn = (oldColumn as any).active;
                   }
                 }
-                tmpColumns.push({ label: name['@value'], key: identifier, sortable: true, active: activeColumn });
+                tmpColumns.push({
+                  label: name["@value"],
+                  key: identifier,
+                  sortable: true,
+                  active: activeColumn,
+                });
               }
             }
           }
         }
       }
-      this.$set(this, 'columns', tmpColumns);
+      this.$set(this, "columns", tmpColumns);
     },
     openDataSourceObject(rowData: any) {
       if (
         rowData.isFolder === true &&
-        rowData.absolutepath.indexOf('/', rowData.absolutepath.length - '/'.length) !== -1
+        rowData.absolutepath.indexOf(
+          "/",
+          rowData.absolutepath.length - "/".length
+        ) !== -1
       ) {
         this.isBusy = true;
-        TreeApi.getMetadata(this.resourceId, rowData.absolutepath, (response: any) => {
+        TreeApi.getMetadata(
+          this.resourceId,
+          rowData.absolutepath,
+          (response: any) => {
             const tmpFolder = [];
-          if (rowData.name === '..') {
-            this.$emit('currentFolder', this.folderPath.pop() as string);
-          } else if (this.currentFolder !== '') {
+            if (rowData.name === "..") {
+              this.$emit("currentFolder", this.folderPath.pop() as string);
+            } else if (this.currentFolder !== "") {
               this.folderPath.push(this.currentFolder);
-            this.$emit('currentFolder', rowData.absolutepath);
+              this.$emit("currentFolder", rowData.absolutepath);
             } else {
-            this.$emit('currentFolder', rowData.absolutepath);
+              this.$emit("currentFolder", rowData.absolutepath);
             }
-          window.location.hash = this.currentFolder.substring(0, this.currentFolder.lastIndexOf('/'));
+            window.location.hash = this.currentFolder.substring(
+              0,
+              this.currentFolder.lastIndexOf("/")
+            );
             if (this.folderPath.length > 0) {
               tmpFolder.push({
                 isFolder: true,
-              name: '..',
+                name: "..",
                 absolutepath: this.folderPath[this.folderPath.length - 1],
               });
             }
@@ -426,15 +503,20 @@ export default Vue.extend({
               tmpFolder.push(newEntry);
             }
             this.isBusy = false;
-          this.$emit('folder', tmpFolder);
-        });
+            this.$emit("folder", tmpFolder);
+          }
+        );
       } else {
-        BlobApi.downloadObject(this.resourceId, rowData.absolutepath, rowData.name);
+        BlobApi.downloadObject(
+          this.resourceId,
+          rowData.absolutepath,
+          rowData.name
+        );
       }
     },
     onRowSelected(items: any) {
       this.downloadTrigger = items.length > 0;
-      this.$emit('showDetail', this.downloadTrigger);
+      this.$emit("showDetail", this.downloadTrigger);
       this.selectAll = items.length === this.folder.length;
       this.selectableFiles = items;
       this.updateFileListEdit();
@@ -456,7 +538,7 @@ export default Vue.extend({
       this.updateFileListEdit();
     },
     clickFileSelect() {
-      this.$emit('clickFileSelect');
+      this.$emit("clickFileSelect");
     },
     download() {
       this.updateFileListEdit();
@@ -469,7 +551,9 @@ export default Vue.extend({
           newFileListEdit.push(fileEdit);
         } else {
           const selectedFile = this.selectableFiles.find(
-            (f: any) => this.currentFolder === fileEdit.path && (f as any).name === fileEdit.name
+            (f: any) =>
+              this.currentFolder === fileEdit.path &&
+              (f as any).name === fileEdit.name
           );
           if (selectedFile) {
             newFileListEdit.push(fileEdit);
@@ -479,14 +563,16 @@ export default Vue.extend({
       for (const currentSelectableFile of this.selectableFiles) {
         const selectableFile = currentSelectableFile as any;
         const fileEdit = newFileListEdit.find(
-          (f: any) => (f as any).path === this.currentFolder && (f as any).name === selectableFile.name
+          (f: any) =>
+            (f as any).path === this.currentFolder &&
+            (f as any).name === selectableFile.name
         );
         if (!fileEdit) {
           MetadataManagerUtil.loadMetadata(
             (loadedMetadata: any) => {
               newFileListEdit.push({
                 path: this.currentFolder,
-                version: '1.0.0',
+                version: "1.0.0",
                 uploading: false,
                 info: selectableFile,
                 name: (selectableFile as any).name,
@@ -498,18 +584,18 @@ export default Vue.extend({
           );
         }
       }
-      this.$emit('fileListEdit', newFileListEdit);
+      this.$emit("fileListEdit", newFileListEdit);
       if (this.selectableFiles.length > 0) {
-        this.$emit('showDetail', true);
-        this.$emit('fileInfo', this.selectableFiles[0]);
+        this.$emit("showDetail", true);
+        this.$emit("fileInfo", this.selectableFiles[0]);
       } else {
-        this.$emit('showDetail', false);
-        this.$emit('fileInfo', {});
+        this.$emit("showDetail", false);
+        this.$emit("fileInfo", {});
       }
     },
     renderDate(row: any) {
       if (row.item.lastModified === null && row.item.created === null) {
-        return '';
+        return "";
       }
       const date = row.item.lastModified;
       const dateObject = new Date(date);
@@ -517,7 +603,7 @@ export default Vue.extend({
     },
     renderSize(row: any) {
       if (row.item.size === null) {
-        return '';
+        return "";
       }
       return FileUtil.formatBytes(row.item.size);
     },

src/components/FilesViewHeader.vue

 <template>
-  <!-- <b-input-group> -->
-  <!-- <b-button-toolbar> -->
   <div class="row">
-    <div class="col-sm-6 file-view-header">
+    <div class="col-sm-10 file-view-header">
       <span>
         <h4>{{ resource.type.displayName }}: {{ resourceName }}</h4>
       </span>
-      <InfoOutlineIcon id="resourceDetails" class="icon-tiny" :title="$t('info')" />
-      <b-popover over custom-class="b-popover" target="resourceDetails" triggers="hover focus" placement="bottom">
+      <InfoOutlineIcon
+        id="resourceDetails"
+        class="icon-tiny"
+        :title="$t('info')"
+      />
+      <b-popover
+        over
+        custom-class="b-popover"
+        target="resourceDetails"
+        triggers="hover focus"
+        placement="bottom"
+      >
         <template v-slot:title
           ><b>{{ resourceName }}</b></template
         >
         <div v-if="resource.DisplayName">
           <span
-          ><b>{{ $t('displayName') }}: </b> </span
+            ><b>{{ $t("displayName") }}: </b> </span
           ><span>{{ resource.DisplayName }}</span>
         </div>
         <div v-if="resource.PID">
           <span
-          ><b>{{ $t('PID') }}: </b> </span
+            ><b>{{ $t("PID") }}: </b> </span
           ><span>{{ resource.PID }}</span>
         </div>
         <div v-if="resource.Description">
           <span
-          ><b>{{ $t('description') }}: </b> </span
+            ><b>{{ $t("description") }}: </b> </span
           ><span>{{ resource.Description }}</span
           ><br />
         </div>
         <div v-if="resource.Disciplines && resource.Disciplines.length > 0">
           <span
-          ><b>{{ $t('disciplines') }}: </b>
+            ><b>{{ $t("disciplines") }}: </b>
           </span>
           <ul>
-          <li v-for="discipline in resource.Disciplines" v-bind:key="discipline.id">
+            <li
+              v-for="discipline in resource.Disciplines"
+              v-bind:key="discipline.id"
+            >
               <div v-if="locale === 'de'">
                 {{ discipline.displayNameDe }}
               </div>
@@ -44,7 +55,7 @@
         </div>
         <div v-if="resource.Keywords && resource.Keywords.length > 0">
           <span
-          ><b>{{ $t('keywords') }}: </b> </span
+            ><b>{{ $t("keywords") }}: </b> </span
           ><br />
           <ul>
             <li v-for="keyword in resource.Keywords" v-bind:key="keyword">
@@ -54,49 +65,79 @@
         </div>
         <div v-if="resource.Visibility">
           <span
-          ><b>{{ $t('visibility') }}: </b> </span
+            ><b>{{ $t("visibility") }}: </b> </span
           ><span>{{ resource.Visibility.displayName }}</span
           ><br />
         </div>
         <div v-if="resource.resourceLicense">
           <span
-          ><b>{{ $t('resourceLicense') }}: </b> </span
+            ><b>{{ $t("resourceLicense") }}: </b> </span
           ><span>{{ resource.resourceLicense }}</span
           ><br />
         </div>
         <div v-if="resource.UsageRights">
           <span
-          ><b>{{ $t('usageRights') }}: </b> </span
+            ><b>{{ $t("usageRights") }}: </b> </span
           ><span>{{ resource.UsageRights }}</span
           ><br />
         </div>
       </b-popover>
       <span v-if="canEditResource">
-        <b-button @click="edit" :title="$t('edit')" class="btn btn-sm">
+        <b-button
+          @click="edit"
+          :title="$t('edit')"
+          class="btn btn-sm"
+        >
           <PencilIcon :title="$t('edit')" />
         </b-button>
       </span>
       <span>
-        <b-button @click="upload" :title="$t('upload')" class="btn btn-sm" :disabled="isUploading || resourceContentSettings.readOnly">
+        <b-button
+          @click="upload"
+          :title="$t('upload')"
+          class="btn btn-sm"
+          :disabled="
+            isUploading || resourceContentSettings.readOnly || resource.Archived
+          "
+        >
           <PlusThickIcon :title="$t('upload')" />
         </b-button>
       </span>
+      <span v-if="resource.Archived">
+        <b-badge pill variant="warning">{{ $t("archive.archived") }}</b-badge>
+      </span>
     </div>
 
-    <div class="col-sm-6">
-      <div v-if="resource.resourceTypeOption.Size !== undefined" class="progressContainer">
+    <div class="col-sm-2">
+      <div
+        v-if="resource.resourceTypeOption.Size !== undefined"
+        class="progressContainer"
+      >
         <b-progress :max="resource.resourceTypeOption.Size">
           <b-progress-bar :value="progressbarOccupied">
-            <span v-if="progressbarOccupied / resource.resourceTypeOption.Size >= 0.5">
+            <span
+              v-if="
+                progressbarOccupied / resource.resourceTypeOption.Size >= 0.5
+              "
+            >
               <strong
-                >{{ formatBytes(progressbarOccupied) }} / {{ formatBytes(resource.resourceTypeOption.Size) }}</strong
+                >{{ formatBytes(progressbarOccupied) }} /
+                {{ formatBytes(resource.resourceTypeOption.Size) }}</strong
               >
             </span>
           </b-progress-bar>
-          <b-progress-bar :value="resource.resourceTypeOption.Size - progressbarOccupied" variant="secondary">
-            <span v-if="progressbarOccupied / resource.resourceTypeOption.Size < 0.5">
+          <b-progress-bar
+            :value="resource.resourceTypeOption.Size - progressbarOccupied"
+            variant="secondary"
+          >
+            <span
+              v-if="
+                progressbarOccupied / resource.resourceTypeOption.Size < 0.5
+              "
+            >
               <strong
-                >{{ formatBytes(progressbarOccupied) }} / {{ formatBytes(resource.resourceTypeOption.Size) }}</strong
+                >{{ formatBytes(progressbarOccupied) }} /
+                {{ formatBytes(resource.resourceTypeOption.Size) }}</strong
               >
             </span>
           </b-progress-bar>
@@ -107,16 +148,17 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue from "vue";
 
-import { FileUtil } from '@coscine/app-util';
+import { FileUtil } from "@coscine/app-util";
 
-import InfoOutlineIcon from 'vue-material-design-icons/InformationOutline.vue';
-import PencilIcon from 'vue-material-design-icons/Pencil.vue';
-import PlusThickIcon from 'vue-material-design-icons/PlusThick.vue';
+import InfoOutlineIcon from "vue-material-design-icons/InformationOutline.vue";
+import PencilIcon from "vue-material-design-icons/Pencil.vue";
+import PlusThickIcon from "vue-material-design-icons/PlusThick.vue";
+import ResourceContentSettings from "@/global";
 
 export default Vue.extend({
-  name: 'Header',
+  name: "Header",
   props: {
     resource: Object,
     resourceId: String,
@@ -129,11 +171,12 @@ export default Vue.extend({
   },
   methods: {
     edit() {
-      const baseUrl = (_spPageContextInfo as any).siteAbsoluteUrl;
-      window.location.href = baseUrl + '/SitePages/EditResource.aspx?resource_id=' + this.resourceId;
+      const baseUrl = (window as any)._spPageContextInfo.siteAbsoluteUrl;
+      window.location.href =
+        baseUrl + "/SitePages/EditResource.aspx?resource_id=" + this.resourceId;
     },
     upload() {
-      this.$emit('clickFileSelect');
+      this.$emit("clickFileSelect");
     },
     formatBytes(bytes: any) {
       return FileUtil.formatBytes(bytes);
@@ -157,7 +200,7 @@ export default Vue.extend({
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: calc(100% - 100px);
+  max-width: calc(100% - 11rem);
 }
 .file-view-header > span > svg {
   margin-top: 0;
@@ -201,4 +244,10 @@ b-progress {
 .b-popover {
   max-width: 100%;
 }
+.badge {
+  vertical-align: super;
+  font-size: 100%;
+  width: 5rem;
+  height: 1.3rem;
+}
 </style>

src/coscine.d.ts

-declare var coscine: {
-    i18n: {
-        resourcecontentview: {},
-    },
-};
-declare var _spPageContextInfo: any;
-
-interface ResourceContentSettings {
-    readOnly: boolean;
-    metadataView: {
-        editableDataUrl: boolean,
-        editableKey: boolean,
-    };
-    entriesView: {
-        columns: {
-            always: Array<string>
-        },
-    };
-}

src/global.d.ts

+declare global {
+  let coscine: {
+    i18n: {
+      resourcecontentview: Record<string, unknown> = {};
+    };
+  };
+}
+declare let _spPageContextInfo: any;
+
+export default interface ResourceContentSettings {
+  readOnly: boolean;
+  metadataView: {
+    editableDataUrl: boolean;
+    editableKey: boolean;
+  };
+  entriesView: {
+    columns: {
+      always: Array<string>;
+    };
+  };
+}

src/main.ts

-import jQuery from 'jquery';
-import BootstrapVue from 'bootstrap-vue';
-import 'bootstrap-vue/dist/bootstrap-vue.css';
-import Vue from 'vue';
-import ResourceContentView from './ResourceContentView.vue';
-import VueI18n from 'vue-i18n';
-import { LanguageUtil } from '@coscine/app-util';
-import VueRouter from 'vue-router';
+import jQuery from "jquery";
+import BootstrapVue from "bootstrap-vue";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+import Vue from "vue";
+import ResourceContentView from "./ResourceContentView.vue";
+import VueI18n from "vue-i18n";
+import { LanguageUtil } from "@coscine/app-util";
+import VueRouter from "vue-router";
 
-import Vuex from 'vuex';
-import store from '@coscine/vuex-store';
+import Vuex from "vuex";
+import store from "@coscine/vuex-store";
 
 Vue.config.productionTip = false;
 Vue.use(BootstrapVue);
@@ -19,7 +19,7 @@ Vue.use(Vuex);
 jQuery(() => {
   const i18n = new VueI18n({
     locale: LanguageUtil.getLanguage(),
-    messages: coscine.i18n.resourcecontentview,
+    messages: (window as any).coscine.i18n.resourcecontentview,
     silentFallbackWarn: true,
   });
 
@@ -27,5 +27,5 @@ jQuery(() => {
     store,
     render: (h) => h(ResourceContentView),
     i18n,
-  }).$mount('resourcecontentview');
+  }).$mount("resourcecontentview");
 });

src/shims-tsx.d.ts

-import Vue, { VNode } from 'vue';
+import Vue, { VNode } from "vue";
 
 declare global {
   namespace JSX {

src/shims-vue.d.ts

-declare module '*.vue' {
-  import Vue from 'vue';
+declare module "*.vue" {
+  import Vue from "vue";
   export default Vue;
 }
 
-declare module '@coscine/api-connection';
-declare module '@coscine/app-util';
-declare module '@coscine/vuex-store';
-declare module '@coscine/form-generator';
-declare module '@coscine/component-library';
-declare module '@ungap/url-search-params';
+declare module "@coscine/api-connection";
+declare module "@coscine/app-util";
+declare module "@coscine/vuex-store";
+declare module "@coscine/form-generator";
+declare module "@coscine/component-library";
+declare module "@ungap/url-search-params";
 
-declare module 'vue-loading-overlay';
+declare module "vue-loading-overlay";
 
-declare module 'vue2-dropzone';
+declare module "vue2-dropzone";
 
 declare module "*.png" {
   const value: any;
   export default value;
 }
-

src/utils/DefaultResourceContentSettings.ts

+import ResourceContentSettings from "@/global";
 export class DefaultResourceContentSettings implements ResourceContentSettings {
-    public readOnly: boolean = false;
+  public readOnly = false;
   public metadataView = {
     editableDataUrl: false,
     editableKey: false,

src/utils/MetadataManagerUtil.ts

-import { TreeApi } from '@coscine/api-connection';
+import { TreeApi } from "@coscine/api-connection";
 
 export default {
   filterMetadataStorage(metadataStorage: any, filterPath: string) {
-    return metadataStorage.filter(
-      (x: any) => {
+    return metadataStorage.filter((x: any) => {
       if (Object.keys(x).length > 0) {
         const graphName = Object.keys(x)[0];
-          const pathQueryString = 'path=';
+        const pathQueryString = "path=";
         if (graphName.indexOf(pathQueryString) !== -1) {
-            let path = graphName.substr(graphName.indexOf(pathQueryString) + pathQueryString.length);
-            if (path.indexOf('&') !== -1) {
-              path = path.substr(0, path.indexOf('&'));
+          let path = graphName.substr(
+            graphName.indexOf(pathQueryString) + pathQueryString.length
+          );
+          if (path.indexOf("&") !== -1) {
+            path = path.substr(0, path.indexOf("&"));
           }
           if (decodeURIComponent(path) === filterPath) {
             return true;
@@ -20,11 +21,20 @@ export default {
       return false;
     });
   },
-  loadMetadata(callback: (response: any) => void, fileInfo: any, resourceId: any) {
+  loadMetadata(
+    callback: (response: any) => void,
+    fileInfo: any,
+    resourceId: any
+  ) {
     if (fileInfo !== undefined && fileInfo.absolutepath !== undefined) {
-      const folder = fileInfo.absolutepath.substring(0, fileInfo.absolutepath.indexOf('/') + 1);
-      TreeApi.getMetadata(resourceId, folder + fileInfo.name, (response: any) => {
-
+      const folder = fileInfo.absolutepath.substring(
+        0,
+        fileInfo.absolutepath.indexOf("/") + 1
+      );
+      TreeApi.getMetadata(
+        resourceId,
+        folder + fileInfo.name,
+        (response: any) => {
           const metadataStorage = response.data.data.metadataStorage;
 
           if (metadataStorage.length === 0) {
@@ -41,17 +51,29 @@ export default {
           result = result[0];
 
           const objectKeys = Object.keys(result);
-        if (response.data.data.metadataStorage !== undefined && objectKeys.length === 1) {
+          if (
+            response.data.data.metadataStorage !== undefined &&
+            objectKeys.length === 1
+          ) {
             return callback(result[objectKeys[0]]);
-        } else if (response.data.data.metadataStorage !== undefined && objectKeys.length > 1) {
+          } else if (
+            response.data.data.metadataStorage !== undefined &&
+            objectKeys.length > 1
+          ) {
             return callback(result);
           }
-      });
+        }
+      );
     } else {
       return callback({});
     }
   },
-  copyMetadata(source: any, target: any, copyStructure: boolean = true, createNode: boolean = false) {
+  copyMetadata(
+    source: any,
+    target: any,
+    copyStructure = true,
+    createNode = false
+  ) {
     let copyTarget = target;
     if (createNode) {
       target.metadata = {};
@@ -69,8 +91,9 @@ export default {
         const innerObjectKeys = Object.keys(source[objectKey][i]);
         for (const innerObjectKey of innerObjectKeys) {
           if (copyStructure) {
-            copyTarget[objectKey][i][innerObjectKey] = source[objectKey][i][innerObjectKey];
-          } else if (innerObjectKey === 'value') {
+            copyTarget[objectKey][i][innerObjectKey] =
+              source[objectKey][i][innerObjectKey];
+          } else if (innerObjectKey === "value") {
             copyTarget[objectKey] = source[objectKey][i][innerObjectKey];
           }
         }

vue.config.js

@@ -2,18 +2,18 @@ module.exports = {
   devServer: {
     disableHostCheck: true,
   },
-	publicPath: './',
+  publicPath: "./",
   configureWebpack: {
-        devtool: 'source-map',
+    devtool: "source-map",
     devServer: {
       port: 9777,
-        }
+    },
   },
   filenameHashing: false,
-	chainWebpack: config => {
-		config.optimization.delete('splitChunks')
+  chainWebpack: (config) => {
+    config.optimization.delete("splitChunks");
   },
   css: {
     extract: false,
   },
-}
\ No newline at end of file
+};