scinote-web/app/javascript/vue/protocol/step_attachments/file_modal.vue

155 lines
5.6 KiB
Vue
Raw Normal View History

2022-05-18 17:12:53 +08:00
<template>
<div ref="modal" @keydown.esc="cancel"
class="modal add-file-modal"
:class="{ 'draging-file' : dragingFile }"
2022-05-18 17:12:53 +08:00
role="dialog" aria-hidden="true" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h2 class="modal-title">
{{ i18n.t("protocols.steps.attachments.file_modal.title") }}
</h2>
</div>
<div class="modal-body">
<div class="file-drop-zone"
@drop.prevent="dropFile"
@dragenter.prevent="dragingFile = true"
@dragleave.prevent="dragingFile = false"
@dragover.prevent
>
<input type="file" class="hidden" ref=fileSelector @change="uploadFiles" multiple />
<div class="title btn btn-light" @click="$refs.fileSelector.click()" tabindex="0" @keyup.enter="$refs.fileSelector.click()">
2022-05-18 17:12:53 +08:00
<i class="fas fa-upload"></i>
{{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_title") }}
</div>
<div class="description">
{{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_description") }}
</div>
<StorageUsage v-if="step.attributes.storage_limit" :step="step"/>
2022-05-18 17:12:53 +08:00
<div class="available-storage"></div>
<div class="drop-notification">
{{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_notification", {position: step.attributes.position + 1}) }}
</div>
</div>
<div class="divider" v-if="step.attributes.marvinjs_enabled || step.attributes.wopi_enabled">
{{ i18n.t("protocols.steps.attachments.file_modal.or") }}
</div>
<div class="integrations-container">
<div class="integration-block wopi" v-if="step.attributes.wopi_enabled">
<a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light" tabindex="0" @keyup.enter="openWopiFileModal">
<img :src="step.attributes.wopi_context.icon"/>
{{ i18n.t('assets.create_wopi_file.button_text') }}
</a>
</div>
2022-05-18 17:12:53 +08:00
<div class="integration-block marvinjs" v-if="step.attributes.marvinjs_enabled">
<a
class="new-marvinjs-upload-button btn btn-light"
:data-object-id="step.id"
:data-marvin-url="step.attributes.marvinjs_context.marvin_js_asset_url"
2022-05-18 17:12:53 +08:00
data-object-type="Step"
@click="openMarvinJsModal"
tabindex="0"
@keyup.enter="openMarvinJsModal"
2022-05-18 17:12:53 +08:00
>
<span class="new-marvinjs-upload-icon">
<img :src="step.attributes.marvinjs_context.icon"/>
</span>
{{ i18n.t('marvinjs.new_button') }}
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type='button' class='btn btn-default' @click="cancel">
{{ i18n.t('general.cancel') }}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import StorageUsage from '../storage_usage.vue'
import WopiFileModal from './mixins/wopi_file_modal.js'
2022-05-18 17:12:53 +08:00
export default {
name: 'fileModal',
props: {
step: Object
},
data() {
return {
dragingFile: false,
attachmentsChanged: false
2022-05-18 17:12:53 +08:00
}
},
components: {StorageUsage},
mixins: [WopiFileModal],
2022-05-18 17:12:53 +08:00
mounted() {
$(this.$refs.modal).modal('show');
MarvinJsEditor.initNewButton('.add-file-modal .new-marvinjs-upload-button', () => {
this.attachmentsChanged = true;
$(this.$refs.modal).modal('hide');
});
$(this.$refs.modal).on('hidden.bs.modal', () => {
global.removeEventListener('paste', this.onImageFilePaste, false);
if (this.attachmentsChanged) {
this.$emit('attachmentsChanged');
} else {
this.cancel();
}
});
global.addEventListener('paste', this.onImageFilePaste, false);
2022-05-18 17:12:53 +08:00
},
methods: {
cancel() {
$(this.$refs.modal).modal('hide');
this.$nextTick(() => this.$emit('cancel'));
2022-05-18 17:12:53 +08:00
},
onImageFilePaste (pasteEvent) {
if (pasteEvent.clipboardData !== false) {
let items = pasteEvent.clipboardData.items
for (let i = 0; i < items.length; i += 1) {
if (items[i].type.indexOf('image') !== -1) {
this.$emit('copyPasteImageModal', items[i]);
$(this.$refs.modal).modal('hide');
return
}
}
}
},
2022-05-18 17:12:53 +08:00
dropFile(e) {
e.stopPropagation();
2022-05-18 17:12:53 +08:00
if (e.dataTransfer && e.dataTransfer.files.length) {
this.$emit('files', e.dataTransfer.files);
$(this.$refs.modal).modal('hide');
2022-05-18 17:12:53 +08:00
}
},
uploadFiles() {
2022-05-19 14:51:39 +08:00
this.$emit('files', this.$refs.fileSelector.files);
$(this.$refs.modal).modal('hide');
this.$parent.$parent.$nextTick(() => {
this.$parent.$el.scrollIntoView(false)
});
},
openMarvinJsModal() {
},
openWopiFileModal() {
this.initWopiFileModal(this.step, (_e, data, status) => {
if (status === 'success') {
$(this.$refs.modal).modal('hide');
this.$emit('attachmentUploaded', data);
} else {
HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
}
});
2022-05-18 17:12:53 +08:00
}
}
}
</script>