mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-16 22:25:30 +08:00
50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<template>
|
|
<div class="asset uploading-attachment-container"
|
|
:class="`${attachmentViewMode} ${attachment.error ? 'error' : ''}`"
|
|
>
|
|
<div class="icon">
|
|
<i v-if="!attachment.error" class="fas fa-file"></i>
|
|
<i v-if="attachment.error" class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="file-name" :class="{'one-line': attachmentViewMode == 'list-attachment-container' }">
|
|
<div v-if="!attachment.error">{{ i18n.t("attachments.new.uploading") }}</div>
|
|
<div class="file-name-text">{{ attachment.attributes.file_name }}</div>
|
|
</div>
|
|
<div v-if="!attachment.error" class="progress-container">
|
|
<div class="progress-bar" :style="`width: ${attachment.attributes.progress}%`"></div>
|
|
</div>
|
|
<div v-if="attachment.error" class="error-container">
|
|
{{ attachment.error }}
|
|
</div>
|
|
<div v-if="attachment.error" class="remove-button" @click="$emit('attachment:delete')">
|
|
<i class="sn-icon sn-icon-close"></i>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'uploadingAttachment',
|
|
props: {
|
|
attachment: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
parentId: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
attachmentViewMode() {
|
|
switch (this.attachment.attributes.view_mode) {
|
|
case 'inline':
|
|
return 'inline-attachment-container';
|
|
case 'list':
|
|
return 'list-attachment-container';
|
|
default:
|
|
return 'attachment-container';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|