DetailView.vue

<template>
  <b-modal
    size="xl"
    id="detail-view"
    ref="modal"
    :title="showDetail === true ?  $t('detailViewTitleEdit') : $t('detailViewTitleUpload')"
    :hide-footer= true
    @show="checkInputContraints()"
    @ok="cleanup"
    @hide="cleanup"
    @cancel="cleanup"
    @close="cleanup"
  >
    <b-container>
      <b-row>
        <b-col cols="9">
            <b-row class="paddingDifference">
              <b-col cols="4">{{ $t('detailViewSelectLabel') }}</b-col>
              <b-col cols="8">
                <b-form-select
                  v-model="selected"
                  :options="getOptions()"
                  multiple
                  class="select-fullwidth"
                />
                <b-alert v-model="showBadFileNameAlert" variant="danger" dismissible>
                  {{ $t('detailViewBadFileName') }}
                </b-alert>
              </b-col>
            </b-row>
            <b-row class="modalContent" v-if="editableFiles.length > 0">
              <b-col class='metadataContent' cols="12">
                <h5>{{ $t('metadataHeadline') }}</h5>
                <b-row>
                    <b-col class='fileInfo col-form-label text-sm-right' cols="3">{{ $t('infoFileName') }}</b-col>
                    <b-col class='col-form-label'>{{ fileInfo.name === null || fileInfo.name === '' ?   $t('infoFileNoInformation') : fileInfo.name }}</b-col>
                </b-row>
                <b-row>
                    <b-col class='fileInfo col-form-label text-sm-right' cols="3">{{ $t('infoFileLastModified') }}</b-col>
                    <b-col class='col-form-label'>{{ fileInfo.lastModified === null || fileInfo.lastModified === '' ?   $t('infoFileNoInformation') : new Date ( fileInfo.lastModified ) }}</b-col>
                </b-row>
                <b-row>
                    <b-col class='fileInfo col-form-label text-sm-right' cols="3">{{ $t('infoFileCreated') }}</b-col>
                    <b-col class='col-form-label'>{{ fileInfo.created === null || fileInfo.created === '' ?   $t('infoFileNoInformation') : new Date( fileInfo.created) }}</b-col>
                </b-row>
                <b-row>
                    <b-col class='fileInfo col-form-label text-sm-right' cols="3">{{ $t('infoFileSize') }}</b-col>
                    <b-col class='col-form-label'>{{ fileInfo.size === null || fileInfo.size === '' ?   $t('infoFileNoInformation') : (fileInfo.size + " Bytes") }}</b-col>
                </b-row>
                <component class='generatedForm'
                  :is="currentComponent"
                  :projectId="projectId"
                  :resourceId="resourceId"
                  :applicationProfileId="applicationProfileId"
                  :SHACLResponse="SHACLResponse"/>
              </b-col>
            </b-row>
            <b-row class='modalContent' v-else>
              <b-col class='metadataContent' cols="12">
                <h5>{{ $t('metadataHeadline') }}</h5>
                <component class='generatedForm'
                  :is="currentComponent"
                  :projectId="projectId"
                  :resourceId="resourceId"
                  :applicationProfileId="applicationProfileId"
                  :SHACLResponse="SHACLResponse"/>
              </b-col>
            </b-row>
        </b-col>
        <b-col class="detail-view-button" v-if="showDetail">
          <b-button variant="success" @click="download()">{{ $t('detailViewBtnDownload') }}</b-button>
          <b-button class="hiddenButton" variant="secondary" @click="reuse()">{{ $t('detailViewBtnReuse') }}</b-button>
          <b-button class="hiddenButton" variant="secondary" @click="move()">{{ $t('detailViewBtnMove') }}</b-button>
          <b-button class="hiddenButton" variant="secondary" @click="publish()">{{ $t('detailViewBtnPublish') }}</b-button>
          <b-button class="hiddenButton" variant="secondary" @click="archive()">{{ $t('detailViewBtnArchive') }}</b-button>
        </b-col>
        <b-col class="detail-view-button" v-else>
          <b-button variant="secondary" @click="selectFiles()" :placeholder="$t('detailViewBtnSelectFiles')">{{ $t('detailViewBtnSelectFiles') }}</b-button>
          <b-form-file ref="fileTrigger" multiple v-model="filesToUpload" class="mt-3" plain></b-form-file>
        </b-col>
      </b-row>
      <b-row>
        <b-col cols="3" class="detail-view-button">
          <b-button v-if="showDetail" variant="danger" @click="deleteFiles()">{{ $t('detailViewBtnDelete') }}</b-button>
          <b-button v-else variant="secondary" @click="cancel()">{{ $t('detailViewBtnCancel') }}</b-button>
        </b-col>
        <b-col></b-col>
        <b-col cols="3" class="detail-view-button">
          <b-button v-if="showDetail" variant="primary" @click="update()">{{ $t('detailViewBtnUpdate') }}</b-button>
          <b-button v-else variant="primary" :disabled="uploadInProgess || !inputOk" @click="upload()">{{ $t('detailViewBtnUpload') }}</b-button>
        </b-col>
      </b-row>
    </b-container>
    <loading :active.sync="isWaitingForResponse"
      :can-cancel="false"
      :height="128"
      :width="128"
      :z-index="1500"
      :color="color"
      :is-full-page="true"></loading>
  </b-modal>
</template>

<script lang="ts">
import Vue from 'vue';
import {
  DataSourceApi,
  ResourceApi,
  MetadataApi,
  defaultOnCatch,
  redirectToProject,
} from '@coscine/api-connection';

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

import FormGenerator from '@coscine/form-generator';
Vue.use(FormGenerator);

export default Vue.extend({
  name: 'DetailView',
  data() {
    return {
      selected: [] as object[],
      filesToUpload: [] as object[],
      numberOfCurrentlyProcessedFiles: 0,
      isWaitingForResponse: false,
      uploadInProgess: false,
      inputOk: false,
      showBadFileNameAlert: false,
      color: '#00549f',
      currentComponent: 'FormGenerator',
      applicationProfiles: [] as object[],
      SHACLResponse: {} as { [index: string]: any},
      projectId: '',
      version: '1.0.0',
    };
  },
  components: {
    Loading,
  },
  props: {
    filesSelected: Boolean,
    resourceId: String,
    fileInfo: Object,
    editableFiles: Array,
    showDetail: Boolean,
    uploadableFiles: Array,
    folder: Array,
    currentFolder: {
      default: '/',
      type: String,
    },
    applicationProfileId: String,
  },
  created() {
    this.projectId = this.getProjectId();
  },
  methods: {
    getProjectId() {
      const baseUrl = (_spPageContextInfo as any).siteAbsoluteUrl;
      const splitUrl = baseUrl.split('/');
      const projectUri = splitUrl[splitUrl.length - 1];
      return projectUri;
    },
    fileNamesOk() {
      const charFilter = new RegExp('[\\/:?*<>|]+');
      const allUploadFiles: File[] = [... new Set([...this.filesToUpload, ...this.uploadableFiles])] as File[];
      if (allUploadFiles.length === 0) {
        return false;
      }
      for (const file of allUploadFiles) {
        if (charFilter.test(file.name)) {
          this.showBadFileNameAlert = true;
          return false;
        }
      }
      this.showBadFileNameAlert = false;
      return true;
    },
    checkInputContraints() {
      // TODO also consider application profile form validation results here
      // also make sure that input changes/ changes with form validation
      // and consider the file name restraints before activating the button
      if (this.fileNamesOk()) {
        this.inputOk = true;
      }
    },
    upload() {
      this.numberOfCurrentlyProcessedFiles = this.filesToUpload.length + this.uploadableFiles.length;
      if (this.numberOfCurrentlyProcessedFiles > 0) {
        this.isWaitingForResponse = true;
        this.uploadInProgess = true;
      }
      for (const fileToUpload of this.filesToUpload) {
        const file = fileToUpload as any;
        this.uploadFile(file);
      }
      for (const uploadableFile of this.uploadableFiles) {
        const file = uploadableFile as any;
        this.uploadFile(file);
      }
      this.cleanup();
    },
    uploadFile(file: any) {
      const me = this;
      const absolutepath = (this.currentFolder !== '/' ? this.currentFolder : '')  + file.name;
      const reader = new FileReader();
      reader.onload = (event: any) => {
        const contents = event.target.result;
        if (me.folder.find( (x) => (x as any).name === file.name) === undefined ) {
          DataSourceApi.Upload(
                me.resourceId,
                absolutepath,
                file.type,
                contents,
                (response: any) => {
                  me.folder.push({
                    isFolder: false,
                    name: file.name,
                    absolutepath: '/' + absolutepath,
                    lastModified: new Date(),
                    created: new Date(),
                    size: file.size,
                  });
                  me.numberOfCurrentlyProcessedFiles -= 1;
                  if (me.numberOfCurrentlyProcessedFiles === 0 ) {
                    me.$bvModal.hide('detail-view');
                    me.isWaitingForResponse = false;
                    me.uploadInProgess = false;
                  }
                },
                defaultOnCatch,
          );
        } else {
          DataSourceApi.Update(
                me.resourceId,
                absolutepath,
                file.type,
                contents,
                (response: any) => {
                  const tmp =  me.folder.find( (x) => (x as any).name === file.name);
                  (tmp as any).lastModified = new Date();
                  (tmp as any).created = new Date();
                  (tmp as any).size = file.size;
                  me.numberOfCurrentlyProcessedFiles -= 1;
                  if (me.numberOfCurrentlyProcessedFiles === 0 ) {
                    me.$bvModal.hide('detail-view');
                    me.isWaitingForResponse = false;
                    me.uploadInProgess = false;
                  }
                },
                defaultOnCatch,
        );
        }
        MetadataApi.storeMetadataForFile(this.resourceId, this.currentFolder + file.name, this.version,
        this.SHACLResponse, null, defaultOnCatch);
      };
      reader.readAsArrayBuffer(file);
    },
    download() {
        DataSourceApi.downloadDataSourceFile(
          this.resourceId,
          this.fileInfo.absolutepath,
          this.fileInfo.name,
          defaultOnCatch,
        );
    },
    selectFiles() {
      (this.$refs.fileTrigger as any).$el.click();
    },
    update() {
      const me = this;
      this.numberOfCurrentlyProcessedFiles = this.editableFiles.length;
      if (this.numberOfCurrentlyProcessedFiles > 0) {
        this.isWaitingForResponse = true;
        this.uploadInProgess = true;
      }
      const folder = this.fileInfo.absolutepath.substring( 0, this.fileInfo.absolutepath.indexOf('/') + 1);
      for (const editableFile of this.editableFiles) {
        const file = editableFile as any;
        MetadataApi.storeMetadataForFile(this.resourceId, folder + file.text, this.version,
        this.SHACLResponse, (response: any) => {
            me.numberOfCurrentlyProcessedFiles -= 1;
            if (me.numberOfCurrentlyProcessedFiles === 0 ) {
              me.$bvModal.hide('detail-view');
              me.isWaitingForResponse = false;
              me.uploadInProgess = false;
            }
          }, defaultOnCatch);
      }
    },
    cancel() {
      this.cleanup();
      this.$bvModal.hide('detail-view');
    },
    deleteFiles() {
      this.numberOfCurrentlyProcessedFiles = this.editableFiles.length;
      if (this.numberOfCurrentlyProcessedFiles > 0) {
        this.isWaitingForResponse = true;
        this.uploadInProgess = true;
      }
      const folder = this.fileInfo.absolutepath.substring( 0, this.fileInfo.absolutepath.indexOf('/') + 1);
      for (const editableFile of this.editableFiles) {
        const file = editableFile as any;
        this.deleteFile(folder + file.text);
      }
      this.cleanup();
    },
    deleteFile(file: any) {
      const me = this;

      DataSourceApi.delete(
          this.resourceId,
          file,
          (response: any) => {
            me.numberOfCurrentlyProcessedFiles -= 1;
            if (me.numberOfCurrentlyProcessedFiles === 0 ) {
              me.$bvModal.hide('detail-view');
              me.isWaitingForResponse = false;
              me.uploadInProgess = false;
              location.reload();
            }
          },
          defaultOnCatch,
        );
    },
    reuse() {
        // TODO implement
    },
    move() {
        // TODO implement
    },
    publish() {
        // TODO implement
    },
    archive() {
        // TODO implement
    },
    getOptions() {
      const shown = [] as object[];
      if (this.filesToUpload.length !== 0) {
        for (const fileToUpload of this.filesToUpload) {
          shown.push({ value: fileToUpload, text: (fileToUpload as any).name});
        }
      } else if (this.uploadableFiles.length !== 0) {
        for (const uploadableFile of this.uploadableFiles) {
          shown.push({ value: uploadableFile, text: (uploadableFile as any).name});
        }
      } else if (this.editableFiles.length !== 0) {
        for (const editableFile of this.editableFiles) {
          shown.push(editableFile as any);
        }
      }
      return shown;
    },
    loadMetadata() {
      if (this.fileInfo !== undefined && this.fileInfo.absolutepath !== undefined) {
        const folder = this.fileInfo.absolutepath.substring( 0, this.fileInfo.absolutepath.indexOf('/') + 1);
        if (this.editableFiles.length >= 1) {
          const file = (this.editableFiles[0] as any);
          this.$set(this, 'SHACLResponse', {});
          MetadataApi.getMetadataForFile(this.resourceId, folder + file.text, this.version, (response: any) => {
            const json = JSON.parse(response.data);
            const objectKeys = Object.keys(json);
            if (response.data !== undefined && objectKeys.length === 1) {
              this.$set(this, 'SHACLResponse', json[objectKeys[0]]);
            } else if (response.data !== undefined && objectKeys.length > 1) {
              this.$set(this, 'SHACLResponse', json);
            }
          }, defaultOnCatch);
        }
      }
    },
    cleanup() {
      this.filesToUpload.length = 0;
      this.uploadableFiles.length = 0;
    },
  },
  watch: {
    fileInfo() {
      this.loadMetadata();
    },
    filesToUpload() {
      this.checkInputContraints();
    },
  },
});
</script>

<style>
.modal-header .modal-title {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 0;
}
.modal-header button.close {
  text-align: end;
  min-width: 1em;
}
.modal footer button {
  min-width: auto;
}
.detail-view-button button {
  width: 100%;
}
.select-fullwidth {
  width: 100%;
}
.detail-view-button input[type=file] {
  display: none;
  font-size: 0px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.modal-backdrop {
  opacity: .5;
}
.metadataContent{
  overflow-y: auto;
  max-height: inherit;
}
.metadataContent .fileInfo{
  padding-right: 0px;
}
.modalContent{
  max-height: 700px;
}
.generatedForm{
  margin-top: 10px;
}
.fileInfo{
  font-weight: bold;
}
</style>

<style scoped>
.paddingDifference {
  padding-bottom: 1em;
}
.invalid-tooltip {
  margin-top: -20px;
}
#displayName {
  font-size: large;
  padding-bottom: 0.3em;
}
.hiddenButton{
  display: none;
}
</style>