From 5a275aaeae9d7c2f4998c4f58df0368a3e9681bf Mon Sep 17 00:00:00 2001 From: Anton Date: Thu, 19 May 2022 11:13:34 +0200 Subject: [PATCH] Move attachments to separate component --- app/javascript/vue/protocol/attachments.vue | 116 ++++++++++++++++++ .../mixins/{file_upload.js => attachments.js} | 30 +++++ app/javascript/vue/protocol/step.vue | 112 ++--------------- config/locales/en.yml | 2 +- 4 files changed, 157 insertions(+), 103 deletions(-) create mode 100644 app/javascript/vue/protocol/attachments.vue rename app/javascript/vue/protocol/mixins/{file_upload.js => attachments.js} (56%) diff --git a/app/javascript/vue/protocol/attachments.vue b/app/javascript/vue/protocol/attachments.vue new file mode 100644 index 000000000..8902db9a4 --- /dev/null +++ b/app/javascript/vue/protocol/attachments.vue @@ -0,0 +1,116 @@ + + diff --git a/app/javascript/vue/protocol/mixins/file_upload.js b/app/javascript/vue/protocol/mixins/attachments.js similarity index 56% rename from app/javascript/vue/protocol/mixins/file_upload.js rename to app/javascript/vue/protocol/mixins/attachments.js index 70c44a408..86ead4d73 100644 --- a/app/javascript/vue/protocol/mixins/file_upload.js +++ b/app/javascript/vue/protocol/mixins/attachments.js @@ -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]); } } }; diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue index 3da6254fa..173170bf1 100644 --- a/app/javascript/vue/protocol/step.vue +++ b/app/javascript/vue/protocol/step.vue @@ -64,59 +64,11 @@ @component:delete="deleteComponent" @update="updateComponent" /> -
-
-
-

{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}

-
-
-
- - -
-
-
-
- -
-
+ @@ -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) - } } } diff --git a/config/locales/en.yml b/config/locales/en.yml index edf418a3a..0c4aac52b 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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: