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

63 lines
2 KiB
Vue
Raw Normal View History

2022-05-12 23:05:07 +08:00
<template>
<div class="attachment-container asset"
:data-asset-id="attachment.id"
>
<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"
>
2022-05-13 19:07:50 +08:00
<div class="attachment-preview" :class= "attachment.attributes.asset_type">
<img v-if="attachment.attributes.medium_preview !== null"
:src="attachment.attributes.medium_preview"
@error="ActiveStoragePreviews.reCheckPreview"
@load="ActiveStoragePreviews.showPreview"
2022-05-12 23:05:07 +08:00
style='opacity: 0' />
<i v-else class="fas" :class="attachment.attributes.icon"></i>
</div>
<div class="attachment-label"
data-toggle="tooltip"
data-placement="bottom"
:title="`${ attachment.attributes.file_name }`">
2022-05-12 23:05:07 +08:00
{{ attachment.attributes.file_name }}
<span v-if="attachment.isNewUpload" class="attachment-label-new">
{{ i18n.t('protocols.steps.attachments.new.description') }}
</span>
2022-05-12 23:05:07 +08:00
</div>
<div class="attachment-metadata">
{{ i18n.t('assets.placeholder.modified_label') }} {{ attachment.attributes.updated_at_formatted }}<br>
2022-05-13 19:07:50 +08:00
{{ attachment.attributes.file_size_formatted }}
2022-05-12 23:05:07 +08:00
</div>
</a>
<ContextMenu
:attachment="attachment"
@attachment:viewMode="updateViewMode"
@attachment:delete="deleteAttachment"
/>
2022-05-12 23:05:07 +08:00
</div>
</template>
<script>
import ContextMenuMixin from './mixins/context_menu.js'
import ContextMenu from './context_menu.vue'
2022-05-12 23:05:07 +08:00
export default {
name: 'thumbnailAttachment',
mixins: [ContextMenuMixin],
components: { ContextMenu },
2022-05-12 23:05:07 +08:00
props: {
attachment: {
type: Object,
required: true
},
stepId: {
type: Number,
required: true
}
2022-05-13 19:07:50 +08:00
}
2022-05-12 23:05:07 +08:00
}
</script>