diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue index eaaeae7a3..8a48e8965 100644 --- a/src/admin/components/edition/item-edition-form.vue +++ b/src/admin/components/edition/item-edition-form.vue @@ -496,47 +496,28 @@ {{ $i18n.get('label_attachments') }} - ({{ attachmentsList.length }}) + ({{ totalAttachments }}) -
+
+
-
-
- - - - - - -
-


{{ $i18n.get('info_no_attachments_on_item_yet') }}

-
+
@@ -729,6 +710,7 @@ import wpMediaFrames from '../../js/wp-media-frames'; import FileItem from '../other/file-item.vue'; import DocumentItem from '../other/document-item.vue'; import CustomDialog from '../other/custom-dialog.vue'; +import AttachmentsList from '../lists/attachments-list.vue'; import { formHooks } from '../../js/mixins'; export default { @@ -777,9 +759,6 @@ export default { metadatumList() { return JSON.parse(JSON.stringify(this.getMetadata())); }, - attachmentsList(){ - return this.getAttachments().filter((attachment) => attachment.id != this.item.document && attachment.id != this.form.document); - }, lastUpdated() { return this.getLastUpdated(); }, @@ -788,11 +767,15 @@ export default { }, itemIdInSequence() { return this.getItemIdInSequence(); + }, + totalAttachments() { + return this.getTotalAttachments(); } }, components: { FileItem, - DocumentItem + DocumentItem, + AttachmentsList }, watch: { '$route.params.itemPosition'(newItemPosition, oldItemPosition) { @@ -835,15 +818,15 @@ export default { 'fetchItem', 'cleanMetadata', 'sendAttachments', - 'updateThumbnail', 'fetchAttachments', + 'updateThumbnail', 'cleanLastUpdated', 'setLastUpdated', 'removeAttachmentFromItem' ]), ...mapGetters('item',[ 'getMetadata', - 'getAttachments', + 'getTotalAttachments', 'getLastUpdated' ]), ...mapActions('collection', [ @@ -945,7 +928,7 @@ export default { this.form.comment_status = this.item.comment_status; this.loadMetadata(); - this.fetchAttachments(this.itemId); + this.fetchAttachments({ page: 1, attachmentsPerPage: 24, itemId: this.itemId }); }) .catch(error => this.$console.error(error)); @@ -1045,13 +1028,17 @@ export default { item_id: this.itemId, document: this.form.document, document_type: this.form.document_type - }).catch((errors) => { - for (let error of errors.errors) { - for (let metadatum of Object.keys(error)){ - eventBus.errors.push({ metadatum_id: metadatum, errors: error[metadatum]}); - } + }) + .then(() => { + this.fetchAttachments({ page: 1, attachmentsPerPage: 24, itemId: this.itemId, documentId: this.item.document }); + }) + .catch((errors) => { + for (let error of errors.errors) { + for (let metadatum of Object.keys(error)){ + eventBus.errors.push({ metadatum_id: metadatum, errors: error[metadatum]}); } - this.formErrorMessage = errors.error_message; + } + this.formErrorMessage = errors.error_message; }); }, deleteThumbnail() { @@ -1064,7 +1051,6 @@ export default { }); }, deleteAttachment(attachment) { - this.$modal.open({ parent: this, component: CustomDialog, @@ -1074,7 +1060,9 @@ export default { message: this.$i18n.get('info_warning_attachment_delete'), onConfirm: () => { this.removeAttachmentFromItem(attachment.id) - .then(() => { }) + .then(() => { + this.fetchAttachments({ page: 1, attachmentsPerPage: 24, itemId: this.itemId, documentId: this.item.document }); + }) .catch((error) => { this.$console.error(error); }); @@ -1144,7 +1132,7 @@ export default { relatedPostId: this.itemId, onSave: () => { // Fetch current existing attachments - this.fetchAttachments(this.itemId); + this.fetchAttachments({ page: 1, attachmentsPerPage: 24, itemId: this.itemId, documentId: this.item.document }); } } ); @@ -1232,7 +1220,7 @@ export default { }); // Fetch current existing attachments - this.fetchAttachments(this.itemId); + this.fetchAttachments({ page: 1, attachmentsPerPage: 24, itemId: this.itemId, documentId: this.item.document }); }, onNextInSequence() { this.sequenceRightDirection = true; @@ -1502,48 +1490,8 @@ export default { } } } - .section-attachments { - margin-top: 0px; - p { margin: 4px 15px } - } - - .uploaded-files { - display: flex; - flex-flow: wrap; - margin-left: -15px; - margin-right: -15px; - - .file-item-container { - position: relative; - - &:hover .file-item-control { - display: block; - visibility: visible; - opacity: 1; - } - - .file-item-control { - position: absolute; - background-color: $gray1; - width: 112px; - margin: 15px; - bottom: 0px; - padding: 2px 8px 4px 8px; - text-align: right; - display: none; - visibility: hidden; - opacity: 0; - transition: opacity ease 0.2s, visibility ease 0.2s, display ease 0.2s; - - .icon { - cursor: pointer; - } - } - } - } .document-field { - .document-buttons-row { text-align: right; top: -21px; diff --git a/src/admin/components/lists/attachments-list.vue b/src/admin/components/lists/attachments-list.vue new file mode 100644 index 000000000..3e21f50ae --- /dev/null +++ b/src/admin/components/lists/attachments-list.vue @@ -0,0 +1,213 @@ + + + + + diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue index fd44ce6f0..2f1b3c209 100644 --- a/src/admin/pages/singles/item-page.vue +++ b/src/admin/pages/singles/item-page.vue @@ -233,27 +233,16 @@ {{ $i18n.get('label_attachments') }} - ({{ attachmentsList.length }}) + ({{ totalAttachments }}) - -
-
- -


{{ - $i18n.get('info_no_attachments_on_item_yet') }}

-
-
+ + @@ -322,6 +311,7 @@ import {formHooks} from '../../js/mixins'; import ActivitiesPage from '../lists/activities-page.vue'; import ExposersModal from '../../components/other/exposers-modal.vue'; + import AttachmentsList from '../../components/lists/attachments-list.vue'; export default { name: 'ItemPage', @@ -330,7 +320,8 @@ FileItem, DocumentItem, ActivitiesPage, - ExposersModal + ExposersModal, + AttachmentsList }, data() { return { @@ -355,14 +346,13 @@ metadatumList() { return JSON.parse(JSON.stringify(this.getMetadata())); }, - attachmentsList() { - return this.getAttachments().filter((attachment) => attachment.id != this.item.document); - }, + totalAttachments() { + return this.getTotalAttachments(); + } }, methods: { ...mapActions('item', [ 'fetchItem', - 'fetchAttachments', 'fetchMetadata', ]), ...mapActions('collection', [ @@ -372,7 +362,7 @@ ...mapGetters('item', [ 'getItem', 'getMetadata', - 'getAttachments' + 'getTotalAttachments' ]), loadMetadata() { // Obtains Item Metadatum @@ -416,15 +406,12 @@ this.loadMetadata(); }); - // Obtains collection name - if (!this.isRepositoryLevel) { - this.fetchCollectionName(this.collectionId).then((collectionName) => { - this.collectionName = collectionName; - }); - } - - // Get attachments - this.fetchAttachments(this.itemId); + // Obtains collection name + if (!this.isRepositoryLevel) { + this.fetchCollectionName(this.collectionId).then((collectionName) => { + this.collectionName = collectionName; + }); + } // Obtains collection Comment Status this.fetchCollectionAllowComments(this.collectionId).then((collectionAllowComments) => { diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index 8aeaefe2a..480706bfe 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -171,6 +171,7 @@ return apply_filters( 'tainacan-admin-i18n', [ 'label_taxonomies_per_page' => __( 'Taxonomies per Page:', 'tainacan' ), 'label_activities_per_page' => __( 'Activities per Page:', 'tainacan' ), 'label_items_per_page' => __( 'Items per Page:', 'tainacan' ), + 'label_attachments_per_page' => __( 'Attachments per Page:', 'tainacan' ), 'label_processes_per_page' => __( 'Processes per Page:', 'tainacan' ), 'label_go_to_page' => __( 'Go to Page:', 'tainacan' ), 'label_active_metadata' => __( 'Active Metadata', 'tainacan' ), @@ -551,6 +552,7 @@ return apply_filters( 'tainacan-admin-i18n', [ 'info_warning_collection_related' => __( 'The metadata Collection related is required', 'tainacan' ), 'info_warning_no_metadata_found' => __( 'No metadata found in this collection', 'tainacan' ), 'info_showing_items' => __( 'Showing items ', 'tainacan' ), + 'info_showing_attachments' => __( 'Showing attachments ', 'tainacan' ), 'info_showing_collections' => __( 'Showing collections ', 'tainacan' ), 'info_showing_taxonomies' => __( 'Showing taxonomies ', 'tainacan' ), 'info_showing_activities' => __( 'Showing activities ', 'tainacan' ), diff --git a/src/js/store/modules/item/actions.js b/src/js/store/modules/item/actions.js index 7c8a035fc..9fadd8977 100644 --- a/src/js/store/modules/item/actions.js +++ b/src/js/store/modules/item/actions.js @@ -202,14 +202,23 @@ export const removeAttachmentFromItem = ( { commit }, attachmentId) => { }); }; -export const fetchAttachments = ({ commit }, item_id) => { +export const fetchAttachments = ({ commit }, { page, attachmentsPerPage, itemId, documentId }) => { commit('cleanAttachments'); + commit('setTotalAttachments', null); + return new Promise((resolve, reject) => { - axios.wp.get('/media/?parent=' + item_id + '&per_page=100&paged=1') + axios.wp.get('/media/?parent=' + itemId + '&per_page=' + attachmentsPerPage + '&page=' + page) .then(res => { - let attachments = res.data; + let attachments = res.data.filter((attachment) => attachment.id != documentId); + let total = documentId ? res.headers['x-wp-total'] - 1 : res.headers['x-wp-total']; + commit('setAttachments', attachments); - resolve( attachments ); + commit('setTotalAttachments', total); + + resolve( { + attachments: attachments, + total: total + }); }) .catch(error => { reject( error ); diff --git a/src/js/store/modules/item/getters.js b/src/js/store/modules/item/getters.js index b1d595c64..26b666db3 100644 --- a/src/js/store/modules/item/getters.js +++ b/src/js/store/modules/item/getters.js @@ -17,3 +17,7 @@ export const getItemTitle = state => { export const getAttachments = state => { return state.attachments; } + +export const getTotalAttachments = state => { + return state.totalAttachments; +} diff --git a/src/js/store/modules/item/index.js b/src/js/store/modules/item/index.js index 967e4a2a9..daaa77bd2 100644 --- a/src/js/store/modules/item/index.js +++ b/src/js/store/modules/item/index.js @@ -10,7 +10,8 @@ const state = { attachment: {}, attachments: [], lastUpdated: '', - comment_status: '' + comment_status: '', + totalAttachments: 0 }; diff --git a/src/js/store/modules/item/mutations.js b/src/js/store/modules/item/mutations.js index 1b7a50898..ec3c0039b 100644 --- a/src/js/store/modules/item/mutations.js +++ b/src/js/store/modules/item/mutations.js @@ -42,6 +42,10 @@ export const cleanAttachments = (state) => { state.attachments = []; } +export const setTotalAttachments = ( state, total) => { + state.totalAttachments = total; +} + export const setItemTitle = ( state, itemTitle ) => { state.itemTitle = itemTitle; }