2022-05-12 23:05:07 +08:00
|
|
|
<template>
|
2022-05-13 19:07:50 +08:00
|
|
|
<div class="inline-attachment-container asset"
|
|
|
|
:data-asset-id="attachment.id"
|
|
|
|
>
|
|
|
|
<div class="header">
|
|
|
|
<div class="file-info">
|
|
|
|
<a :href="attachment.attributes.urls.blob"
|
|
|
|
class="file-preview-link file-name"
|
|
|
|
:id="`modal_link${attachment.id}`"
|
|
|
|
data-no-turbolink="true"
|
|
|
|
:data-id="attachment.id"
|
|
|
|
:data-gallery-view-id="stepId"
|
|
|
|
:data-preview-url="attachment.attributes.urls.preview"
|
|
|
|
>
|
2023-02-22 17:29:39 +08:00
|
|
|
<span data-toggle="tooltip"
|
|
|
|
data-placement="bottom"
|
2022-08-16 18:20:37 +08:00
|
|
|
:title="`${ attachment.attributes.file_name }`">
|
|
|
|
{{ attachment.attributes.file_name }}
|
|
|
|
</span>
|
2022-05-13 19:07:50 +08:00
|
|
|
</a>
|
2022-07-15 16:13:55 +08:00
|
|
|
<span v-if="attachment.isNewUpload" class="attachment-label-new">
|
|
|
|
{{ i18n.t('protocols.steps.attachments.new.description') }}
|
|
|
|
</span>
|
2022-05-13 19:07:50 +08:00
|
|
|
<div class="file-metadata">
|
|
|
|
<span>
|
|
|
|
{{ i18n.t('assets.placeholder.modified_label') }}
|
2022-05-16 17:05:18 +08:00
|
|
|
{{ attachment.attributes.updated_at_formatted }}
|
2022-05-13 19:07:50 +08:00
|
|
|
</span>
|
|
|
|
<span>
|
|
|
|
{{ i18n.t('assets.placeholder.size_label', {size: attachment.attributes.file_size_formatted}) }}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-05-17 16:39:17 +08:00
|
|
|
<ContextMenu
|
|
|
|
:attachment="attachment"
|
|
|
|
@attachment:viewMode="updateViewMode"
|
|
|
|
@attachment:delete="deleteAttachment"
|
|
|
|
/>
|
2022-05-13 19:07:50 +08:00
|
|
|
</div>
|
|
|
|
<template v-if="attachment.attributes.wopi">
|
|
|
|
<div v-if="attachment.attributes.file_size > 0"
|
|
|
|
class="iframe-placeholder"
|
|
|
|
:data-iframe-url="attachment.attributes.urls.wopi_action"></div>
|
|
|
|
<div v-else class="empty-office-file">
|
|
|
|
<h2>{{ i18n.t('assets.empty_office_file.description') }}</h2>
|
|
|
|
<a :href="attachment.attributes.urls.load_asset"
|
2023-02-22 17:29:39 +08:00
|
|
|
remote="true"
|
2022-05-13 19:07:50 +08:00
|
|
|
class="btn btn-primary reload-asset"
|
2023-02-22 17:29:39 +08:00
|
|
|
:params="{asset: {view_mode: attachment.attributes.view_mode}}">
|
2022-05-13 19:07:50 +08:00
|
|
|
{{ i18n.t('assets.empty_office_file.reload') }}
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="attachment.attributes.pdf_previewable">
|
2022-08-09 16:13:43 +08:00
|
|
|
<PdfViewer :pdf="attachment.attributes.pdf" />
|
2022-05-13 19:07:50 +08:00
|
|
|
</template>
|
|
|
|
<template v-else-if="attachment.attributes.large_preview !== null">
|
|
|
|
<div class="image-container">
|
2022-05-16 17:05:18 +08:00
|
|
|
<img :src="attachment.attributes.large_preview"
|
2022-05-13 19:07:50 +08:00
|
|
|
@error="ActiveStoragePreviews.reCheckPreview"
|
|
|
|
@load="ActiveStoragePreviews.showPreview"
|
|
|
|
style='opacity: 0' />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<div class="general-file-container">
|
|
|
|
<i lass="fas" :class="attachment.attributes.icon"></i>
|
|
|
|
</div>
|
|
|
|
</template>
|
2022-05-12 23:05:07 +08:00
|
|
|
</div>
|
2022-05-13 19:07:50 +08:00
|
|
|
|
2022-05-12 23:05:07 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-08-09 16:13:43 +08:00
|
|
|
import ContextMenuMixin from './mixins/context_menu.js';
|
|
|
|
import ContextMenu from './context_menu.vue';
|
|
|
|
import PdfViewer from '../../shared/pdf_viewer.vue';
|
2022-05-17 16:39:17 +08:00
|
|
|
|
2022-05-12 23:05:07 +08:00
|
|
|
export default {
|
|
|
|
name: 'inlineAttachment',
|
2022-05-17 16:39:17 +08:00
|
|
|
mixins: [ContextMenuMixin],
|
2022-08-09 16:13:43 +08:00
|
|
|
components: { ContextMenu, PdfViewer },
|
2022-05-13 19:07:50 +08:00
|
|
|
props: {
|
|
|
|
attachment: {
|
|
|
|
type: Object,
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
stepId: {
|
|
|
|
type: Number,
|
|
|
|
required: true
|
|
|
|
}
|
|
|
|
},
|
2022-05-12 23:05:07 +08:00
|
|
|
}
|
|
|
|
</script>
|