scinote-web/app/javascript/vue/protocol/step_attachments/list.vue
ajugo ccf95fea24
Fix file block issues [SCI-6966] (#4244)
* Fix bugs for step attachments [SCI-6966]

* Fix flickering on fast drag over of file [SCI-6966]

* Fix flickering on fast drag over of file [SCI-6966]

* CSS fixes, rearrange steps button hiding [SCI-6940][SCI-6934] (#4234)

* Hide rearange steps button when less than 2 steps [SCI-6934]

* Task status buttons CSS fix [SCI-6940]

* Fix microinteraction for table editing [SCI-6957] (#4236)

* Fix protocol elements allignments [SCI-6932]

* DOCX layout improvements [SCI-6857] (#4160)

* Fix edit step button [SCI-6938] (#4232)

* Clean storage usage check [SCI-6966]

Co-authored-by: artoscinote <85488244+artoscinote@users.noreply.github.com>
Co-authored-by: Anton <anton@scinote.net>
2022-07-15 10:13:55 +02:00

56 lines
1.5 KiB
Vue

<template>
<div class="list-attachment-container asset"
:data-asset-id="attachment.id"
>
<i class="fas asset-icon" :class="attachment.attributes.icon"></i>
<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"
>
{{ attachment.attributes.file_name }}
</a>
<span v-if="attachment.isNewUpload" class="attachment-label-new">
{{ i18n.t('protocols.steps.attachments.new.description') }}
</span>
<div class="file-metadata">
<span>
{{ i18n.t('assets.placeholder.modified_label') }}
{{ attachment.attributes.updated_at_formatted }}
</span>
<span>
{{ i18n.t('assets.placeholder.size_label', {size: attachment.attributes.file_size_formatted}) }}
</span>
</div>
<ContextMenu
:attachment="attachment"
@attachment:viewMode="updateViewMode"
@attachment:delete="deleteAttachment"
/>
</div>
</template>
<script>
import ContextMenuMixin from './mixins/context_menu.js'
import ContextMenu from './context_menu.vue'
export default {
name: 'listAttachment',
mixins: [ContextMenuMixin],
components: { ContextMenu },
props: {
attachment: {
type: Object,
required: true
},
stepId: {
type: Number,
required: true
}
},
}
</script>