mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-10 23:25:31 +08:00
Move attachments to separate component
This commit is contained in:
Anton
parent
9cd0e010a6
commit
5a275aaeae
4 changed files with 157 additions and 103 deletions
116
app/javascript/vue/protocol/attachments.vue
Normal file
116
app/javascript/vue/protocol/attachments.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div v-if="attachments.length" class="step-attachments">
|
||||
<div class="attachments-actions">
|
||||
<div class="title">
|
||||
<h4>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h4>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="dropdown sci-dropdown">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownAttachmentsOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span>{{ i18n.t("protocols.steps.attachments.manage") }}</span>
|
||||
<span class="caret pull-right"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right dropdown-attachment-options"
|
||||
aria-labelledby="dropdownAttachmentsOptions"
|
||||
:data-step-id="step.id"
|
||||
>
|
||||
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.sort_by") }}</li>
|
||||
<li v-for="(orderOption, index) in orderOptions" :key="`orderOption_${index}`">
|
||||
<a class="action-link change-order"
|
||||
@click="changeAttachmentsOrder(orderOption)"
|
||||
:class="step.attributes.assets_order == orderOption ? 'selected' : ''"
|
||||
>
|
||||
{{ i18n.t(`general.sort_new.${orderOption}`) }}
|
||||
</a>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.attachments_view_mode") }}</li>
|
||||
<li v-for="(viewMode, index) in viewModeOptions" :key="`viewMode_${index}`">
|
||||
<a
|
||||
class="attachments-view-mode action-link"
|
||||
:class="viewMode == step.attributes.assets_view_mode ? 'selected' : ''"
|
||||
@click="changeAttachmentsViewMode(viewMode)"
|
||||
v-html="i18n.t(`protocols.steps.attachments.view_mode.${viewMode}_html`)"
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<template v-for="(attachment, index) in attachmentsOrdered">
|
||||
<component
|
||||
:is="`${attachmentsOrdered[index].attributes.view_mode}Attachment`"
|
||||
:key="index"
|
||||
:attachment.sync="attachmentsOrdered[index]"
|
||||
:stepId="parseInt(step.id)"
|
||||
@attachment:viewMode="updateAttachmentViewMode"
|
||||
@attachment:delete="attachments.splice(index, 1)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import listAttachment from 'vue/protocol/step_attachments/list.vue'
|
||||
import inlineAttachment from 'vue/protocol/step_attachments/inline.vue'
|
||||
import thumbnailAttachment from 'vue/protocol/step_attachments/thumbnail.vue'
|
||||
|
||||
export default {
|
||||
name: 'Attachments',
|
||||
props: {
|
||||
attachments: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
step: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
viewModeOptions: ['inline', 'thumbnail', 'list'],
|
||||
orderOptions: ['new', 'old', 'atoz', 'ztoa'],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
thumbnailAttachment,
|
||||
inlineAttachment,
|
||||
listAttachment,
|
||||
},
|
||||
computed: {
|
||||
attachmentsOrdered() {
|
||||
return this.attachments.sort((a, b) => {
|
||||
if (a.attributes.asset_order == b.attributes.asset_order) {
|
||||
switch(this.step.attributes.assets_order) {
|
||||
case 'new':
|
||||
return b.attributes.updated_at - a.attributes.updated_at;
|
||||
case 'old':
|
||||
return a.attributes.updated_at - b.attributes.updated_at;
|
||||
case 'atoz':
|
||||
return a.attributes.file_name.toLowerCase() > b.attributes.file_name.toLowerCase() ? 1 : -1;
|
||||
case 'ztoa':
|
||||
return b.attributes.file_name.toLowerCase() > a.attributes.file_name.toLowerCase() ? 1 : -1;
|
||||
}
|
||||
}
|
||||
|
||||
return a.attributes.asset_order > b.attributes.asset_order ? 1 : -1;
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeAttachmentsOrder(order) {
|
||||
this.$emit('attachments:order', order)
|
||||
},
|
||||
changeAttachmentsViewMode(viewMode) {
|
||||
this.$emit('attachments:viewMode', viewMode)
|
||||
},
|
||||
updateAttachmentViewMode(id, viewMode) {
|
||||
this.$emit('attachment:viewMode', id, viewMode)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +1,15 @@
|
|||
/* global ActiveStorage GLOBAL_CONSTANTS Promise */
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
viewModeOrder: {
|
||||
inline: 0,
|
||||
thumbnail: 1,
|
||||
list: 2
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
directUploadWillStoreFileWithXHR(request) {
|
||||
request.upload.addEventListener('progress', () => {
|
||||
|
|
@ -39,6 +48,27 @@ export default {
|
|||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
changeAttachmentsOrder(order) {
|
||||
this.step.attributes.assets_order = order;
|
||||
$.post(this.step.attributes.urls.update_view_state_step_url, {
|
||||
assets: { order }
|
||||
});
|
||||
},
|
||||
changeAttachmentsViewMode(viewMode) {
|
||||
this.step.attributes.assets_view_mode = viewMode;
|
||||
this.attachments.forEach((attachment) => {
|
||||
this.$set(attachment.attributes, 'view_mode', viewMode);
|
||||
this.$set(attachment.attributes, 'asset_order', this.viewModeOrder[viewMode]);
|
||||
});
|
||||
$.post(this.step.attributes.urls.update_asset_view_mode_url, {
|
||||
assets_view_mode: viewMode
|
||||
});
|
||||
},
|
||||
updateAttachmentViewMode(id, viewMode) {
|
||||
const attachment = this.attachments.find(e => e.id === id);
|
||||
this.$set(attachment.attributes, 'view_mode', viewMode);
|
||||
this.$set(attachment.attributes, 'asset_order', this.viewModeOrder[viewMode]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -64,59 +64,11 @@
|
|||
@component:delete="deleteComponent"
|
||||
@update="updateComponent" />
|
||||
</template>
|
||||
<div v-if="attachments.length" class="step-attachments">
|
||||
<div class="attachments-actions">
|
||||
<div class="title">
|
||||
<h4>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h4>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="dropdown sci-dropdown">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownAttachmentsOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span>{{ i18n.t("protocols.steps.attachments.manage") }}</span>
|
||||
<span class="caret pull-right"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right dropdown-attachment-options"
|
||||
aria-labelledby="dropdownAttachmentsOptions"
|
||||
:data-step-id="step.id"
|
||||
>
|
||||
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.sort_by") }}</li>
|
||||
<li v-for="(orderOption, index) in orderOptions" :key="`orderOption_${index}`">
|
||||
<a class="action-link change-order"
|
||||
@click="changeAttachmentsOrder(orderOption)"
|
||||
:class="step.attributes.assets_order == orderOption ? 'selected' : ''"
|
||||
>
|
||||
{{ i18n.t(`general.sort_new.${orderOption}`) }}
|
||||
</a>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.attachments_view_mode") }}</li>
|
||||
<li v-for="(viewMode, index) in viewModeOptions" :key="`viewMode_${index}`">
|
||||
<a
|
||||
class="attachments-view-mode action-link"
|
||||
:class="viewMode == step.attributes.assets_view_mode ? 'selected' : ''"
|
||||
@click="changeAttachmentsViewMode(viewMode)"
|
||||
v-html="i18n.t(`protocols.steps.attachments.view_mode.${viewMode}_html`)"
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<template v-for="(attachment, index) in attachmentsOrdered">
|
||||
<component
|
||||
:is="`${attachmentsOrdered[index].attributes.view_mode}Attachment`"
|
||||
:key="index"
|
||||
:attachment.sync="attachmentsOrdered[index]"
|
||||
:stepId="parseInt(step.id)"
|
||||
@attachment:viewMode="updateAttachmentViewMode"
|
||||
@attachment:delete="attachments.splice(index, 1)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<Attachments :step="step"
|
||||
:attachments="attachments"
|
||||
@attachments:order="changeAttachmentsOrder"
|
||||
@attachments:viewMode="changeAttachmentsViewMode"
|
||||
@attachment:viewMode="updateAttachmentViewMode"/>
|
||||
</div>
|
||||
<deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
|
||||
<fileModal v-if="showFileModal" @cancel="showFileModal = false" :step="step" @files="uploadFiles" />
|
||||
|
|
@ -129,11 +81,9 @@
|
|||
import StepText from 'vue/protocol/step_components/text.vue'
|
||||
import Checklist from 'vue/protocol/step_components/checklist.vue'
|
||||
import deleteStepModal from 'vue/protocol/modals/delete_step.vue'
|
||||
import listAttachment from 'vue/protocol/step_attachments/list.vue'
|
||||
import inlineAttachment from 'vue/protocol/step_attachments/inline.vue'
|
||||
import thumbnailAttachment from 'vue/protocol/step_attachments/thumbnail.vue'
|
||||
import fileModal from './step_attachments/file_modal.vue'
|
||||
import FileUpload from 'vue/protocol/mixins/file_upload.js'
|
||||
import Attachments from 'vue/protocol/attachments.vue'
|
||||
import fileModal from 'vue/protocol/step_attachments/file_modal.vue'
|
||||
import AttachmentsMixin from 'vue/protocol/mixins/attachments.js'
|
||||
|
||||
export default {
|
||||
name: 'StepContainer',
|
||||
|
|
@ -147,23 +97,19 @@
|
|||
return {
|
||||
elements: [],
|
||||
attachments: [],
|
||||
viewModeOptions: ['inline', 'thumbnail', 'list'],
|
||||
orderOptions: ['new', 'old', 'atoz', 'ztoa'],
|
||||
confirmingDelete: false,
|
||||
showFileModal: false
|
||||
}
|
||||
},
|
||||
mixins: [FileUpload],
|
||||
mixins: [AttachmentsMixin],
|
||||
components: {
|
||||
InlineEdit,
|
||||
StepTable,
|
||||
StepText,
|
||||
Checklist,
|
||||
deleteStepModal,
|
||||
thumbnailAttachment,
|
||||
inlineAttachment,
|
||||
fileModal,
|
||||
listAttachment,
|
||||
Attachments
|
||||
},
|
||||
created() {
|
||||
$.get(this.step.attributes.urls.elements_url, (result) => {
|
||||
|
|
@ -174,26 +120,6 @@
|
|||
this.attachments = result.data
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
attachmentsOrdered() {
|
||||
return this.attachments.sort((a, b) => {
|
||||
if (a.attributes.asset_order == b.attributes.asset_order) {
|
||||
switch(this.step.attributes.assets_order) {
|
||||
case 'new':
|
||||
return b.attributes.updated_at - a.attributes.updated_at;
|
||||
case 'old':
|
||||
return a.attributes.updated_at - b.attributes.updated_at;
|
||||
case 'atoz':
|
||||
return a.attributes.file_name.toLowerCase() > b.attributes.file_name.toLowerCase() ? 1 : -1;
|
||||
case 'ztoa':
|
||||
return b.attributes.file_name.toLowerCase() > a.attributes.file_name.toLowerCase() ? 1 : -1;
|
||||
}
|
||||
}
|
||||
|
||||
return a.attributes.asset_order > b.attributes.asset_order ? 1 : -1;
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDeleteModal() {
|
||||
this.confirmingDelete = true;
|
||||
|
|
@ -273,24 +199,6 @@
|
|||
HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
|
||||
})
|
||||
},
|
||||
changeAttachmentsOrder(order) {
|
||||
this.step.attributes.assets_order = order;
|
||||
$.post(this.step.attributes.urls.update_view_state_step_url, {
|
||||
assets: { order: order }
|
||||
});
|
||||
},
|
||||
changeAttachmentsViewMode(viewMode) {
|
||||
this.step.attributes.assets_view_mode = viewMode
|
||||
this.attachments.forEach((attachment) => {
|
||||
this.$set(attachment.attributes, 'view_mode', viewMode);
|
||||
});
|
||||
$.post(this.step.attributes.urls.update_asset_view_mode_url, {
|
||||
assets_view_mode: viewMode
|
||||
})
|
||||
},
|
||||
updateAttachmentViewMode(id, viewMode) {
|
||||
this.$set(this.attachments.find(e => e.id == id).attributes, 'view_mode', viewMode)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2561,7 +2561,7 @@ en:
|
|||
title: "Add file"
|
||||
drag_zone_title: "Upload a file from your PC"
|
||||
drag_zone_description: "You can also drag & drop files to here or into steps to upload"
|
||||
drag_zone_notification: "Drop files to add to step ${position}"
|
||||
drag_zone_notification: "Drop files to add to step %{position}"
|
||||
or: "OR"
|
||||
|
||||
sort:
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue