From 239c29b44573f28ec3f659b4fecc5f5ba55a77c5 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Mon, 16 Dec 2019 13:19:09 -0300
Subject: [PATCH] Removes ItemMetadataBulkEditionPage. Uses modal on Bulk Add
 and Item Copy routines. Uses specific endpoint for sequence edition on both
 routines as well. #200.

---
 .../bulk-edition/bulk-edition-modal.vue       |   2 +-
 .../edition/item-bulk-edition-form.vue        |  51 +-
 .../item-metadata-bulk-edition-form.vue       | 669 ------------------
 .../components/other/item-copy-dialog.vue     |  42 +-
 src/admin/js/router.js                        |   2 -
 src/admin/tainacan-admin-i18n.php             |   1 +
 src/js/store/modules/bulk-edition/actions.js  |   6 -
 src/js/store/modules/bulk-edition/getters.js  |   4 -
 src/js/store/modules/bulk-edition/index.js    |   3 +-
 .../store/modules/bulk-edition/mutations.js   |   4 -
 10 files changed, 47 insertions(+), 737 deletions(-)
 delete mode 100644 src/admin/components/edition/item-metadata-bulk-edition-form.vue

diff --git a/src/admin/components/bulk-edition/bulk-edition-modal.vue b/src/admin/components/bulk-edition/bulk-edition-modal.vue
index 3838b3394..244d4e78f 100644
--- a/src/admin/components/bulk-edition/bulk-edition-modal.vue
+++ b/src/admin/components/bulk-edition/bulk-edition-modal.vue
@@ -320,7 +320,7 @@
             totalItems: Array,
             objectType: String,
             selectedForBulk: Object,
-            collectionID: Number,
+            collectionID: Number
         },
         created(){
             if (this.collectionID){
diff --git a/src/admin/components/edition/item-bulk-edition-form.vue b/src/admin/components/edition/item-bulk-edition-form.vue
index c41de471f..a6e1939c2 100644
--- a/src/admin/components/edition/item-bulk-edition-form.vue
+++ b/src/admin/components/edition/item-bulk-edition-form.vue
@@ -153,7 +153,7 @@
                             style="margin-left: auto;"
                             class="control">
                         <button 
-                                :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished) || isCreatingBulkEditGroup"
+                                :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)"
                                 class="button is-secondary" 
                                 :class="{'is-loading': isCreatingSequenceEditGroup }"
                                 @click.prevent="sequenceEditGroup()"
@@ -161,10 +161,9 @@
                     </div>
                     <div class="control">
                         <button 
-                                :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished) || isCreatingSequenceEditGroup"
+                                :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)"
                                 class="button is-secondary" 
-                                :class="{'is-loading': isCreatingBulkEditGroup }"
-                                @click.prevent="createBulkEditGroup()"
+                                @click.prevent="openBulkEditionModal()"
                                 type="submit">{{ $i18n.get('label_bulk_edit_items') }}</button>
                     </div>
                 </div>
@@ -176,6 +175,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import CustomDialog from '../other/custom-dialog.vue';
+import BulkEditionModal from '../bulk-edition/bulk-edition-modal.vue';
 
 export default {
     name: 'ItemBulkEditionForm',
@@ -183,7 +183,6 @@ export default {
         return {
             collectionId: '',
             isLoading: false,
-            isCreatingBulkEditGroup: false,
             isCreatingSequenceEditGroup: false,
             submitedFileList: [],
             thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
@@ -211,8 +210,8 @@ export default {
         ]),
         ...mapActions('bulkedition', [
             'createEditGroup',
-            'setStatusInBulk',
-            'setBulkAddItems'
+            'createSequenceEditGroup',
+            'setStatusInBulk'
         ]),
         uploadFiles() {
             
@@ -257,12 +256,11 @@ export default {
                                     });
                             })
                             .catch((error) => {
-
                                 let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
                                 if ( index >= 0)
                                     this.uploadedItems.splice(index, 1);
 
-                                item.errorMessage = error.data.message;
+                                item.errorMessage = error.data && error.data.message ? error.data.message : this.$i18n.get('info_error_upload');
                                 this.$buefy.toast.open({
                                     message: item.errorMessage + ": " + file.name,
                                     type: 'is-danger',
@@ -283,7 +281,7 @@ export default {
         sequenceEditGroup() {
             let onlyItemIds = this.uploadedItems.map(item => item.id);
             this.isCreatingSequenceEditGroup = true;
-            this.createEditGroup({
+            this.createSequenceEditGroup({
                 object: onlyItemIds,
                 collectionID: this.collectionId
             }).then((group) => {
@@ -298,27 +296,23 @@ export default {
                 });
             });
         },
-        createBulkEditGroup() {
-            // Sends to store, so we can retrieve in next page.
-            this.setBulkAddItems(this.uploadedItems);
+        openBulkEditionModal() {
 
             let onlyItemIds = this.uploadedItems.map(item => item.id);
 
-            this.isCreatingBulkEditGroup = true;
-            this.createEditGroup({
-                object: onlyItemIds,
-                collectionID: this.collectionId
-            }).then((group) => {
-                let groupId = group.id;
-                this.setStatusInBulk({
-                    groupID: groupId,
-                    collectionID: this.collectionId,
-                    bodyParams: { value: 'draft' }
-                }).then(() => {
-                    this.isCreatingBulkEditGroup = false;
-                    this.$router.push(this.$routerHelper.getItemMetadataBulkAddPath(this.collectionId, groupId));
-                });
-            }); 
+            this.$buefy.modal.open({
+                parent: this,
+                component: BulkEditionModal,
+                props: {
+                    modalTitle: this.$i18n.get('info_editing_items_in_bulk'),
+                    totalItems: onlyItemIds.length,
+                    selectedForBulk: onlyItemIds,
+                    objectType: this.$i18n.get('items'),
+                    collectionID: this.collectionId
+                },
+                width: 'calc(100% - 8.333333333%)',
+                trapFocus: true
+            });
         },
         deleteOneItem(itemId, index) {
             this.$buefy.modal.open({
@@ -347,7 +341,6 @@ export default {
         this.collectionId = this.$route.params.collectionId;
 
         this.cleanFiles();
-        this.setBulkAddItems([]);
 
         // Updates Collection BreadCrumb
         this.$root.$emit('onCollectionBreadCrumbUpdate', [
diff --git a/src/admin/components/edition/item-metadata-bulk-edition-form.vue b/src/admin/components/edition/item-metadata-bulk-edition-form.vue
deleted file mode 100644
index c3742fd6c..000000000
--- a/src/admin/components/edition/item-metadata-bulk-edition-form.vue
+++ /dev/null
@@ -1,669 +0,0 @@
-<template>
-    <div>
-        <b-loading
-                :is-full-page="false"
-                :active.sync="showLoading"
-                :can-cancel="false"/>
-        <div class="tainacan-page-title">
-            <h1><span class="status-tag">{{ $i18n.get('status_' + status) }}</span>{{ $i18n.get('label_bulk_edit_items') }}</h1>
-            <a 
-                    @click="$router.go(-1)"
-                    class="back-link has-text-secondary">
-                {{ $i18n.get('back') }}
-            </a>
-            <hr>
-        </div>
-        <form
-                class="tainacan-form" 
-                label-width="120px">
-                
-            <div class="columns">
-                <div class="column is-half document-list">
-                    <div class="section-label">
-                        <label>{{ $i18n.get('label_added_items') }}
-                            <span 
-                                    v-if="!isLoadingGroupInfo && bulkEditGroup.items_count != undefined"
-                                    class="has-text-gray has-text-weight-normal">{{ ' (' + bulkEditGroup.items_count + ')' }}</span>
-                        </label>
-                    </div>
-                    <br>
-                    <p v-if="items.length <= 0 && !isLoadingGroupInfo && bulkEditGroup.items_count == 1">
-                        {{ $i18n.get('info_there_is_one_item_being_edited') }}
-                    </p>
-                    <p v-if="items.length <= 0 && !isLoadingGroupInfo && bulkEditGroup.items_count > 1">
-                        {{ $i18n.getWithVariables('info_there_are_%s_items_being_edited', [bulkEditGroup.items_count]) }}
-                    </p>
-                    <p v-if="items.length <= 0 && !isLoadingGroupInfo">
-                        {{ $i18n.get('info_no_preview_found') }}
-                    </p>
-                    <transition-group name="item-appear">
-                        <div 
-                                class="document-item"
-                                v-for="(item) of items"
-                                :key="item.id">
-                            <img 
-                                v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
-                                class="document-thumb"
-                                :alt="$i18n.get('label_thumbnail') + ': ' + item.title"
-                                :src="item.thumbnail['tainacan-small'] ? item.thumbnail['tainacan-small'][0] : (item.thumbnail.thumbnail ? item.thumbnail.thumbnail[0] : thumbPlaceholderPath)" > 
-                            <span 
-                                class="document-name"
-                                v-html="item.title" />                            
-                            <span 
-                                    v-if="item.errorMessage != undefined" 
-                                    class="help is-danger">
-                                {{ item.errorMessage }}
-                            </span>                                 
-                        </div>
-                    </transition-group>
-                </div>
-                <div class="column is-half">
-                     
-                    <!-- Visibility (status public or private) -------------------------------- -->
-                    <div class="section-label">
-                        <label>{{ $i18n.get('label_status') }}</label>
-                        <span class="required-metadatum-asterisk">*</span>
-                        <help-button
-                                :title="$i18n.get('label_status')"
-                                :message="$i18n.get('info_visibility_helper')"/>
-                    </div>
-                    <div class="section-status">
-                        <div class="field has-addons">
-                            <b-radio
-                                    v-for="(statusOption, index) of $statusHelper.getStatuses().filter(option => { return option.value != 'trash' })"
-                                    :key="index"
-                                    v-model="status"
-                                    @input="changeStatus($event)"
-                                    :value="statusOption.slug"
-                                    :native-value="statusOption.slug">
-                                <span class="icon">
-                                    <i 
-                                            class="tainacan-icon"
-                                            :class="$statusHelper.getIcon(statusOption.slug)"/>
-                                </span> {{ statusOption.name }}
-                            </b-radio>
-                        </div>
-                    </div>
-
-                    <!-- Metadata from Collection-------------------------------- -->
-                    <span class="section-label">
-                        <label>{{ $i18n.get('metadata') }}</label>
-                    </span>
-                    <br>
-                    <a
-                            class="collapse-all"
-                            @click="toggleCollapseAll()">
-                        {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                        <b-icon :icon=" collapseAll ? 'menu-down' : 'menu-right'" />
-                    </a>
-
-                    <template 
-                            v-if="!showLoading"
-                            v-for="(metadatum, index) of metadata">
-                        <b-field
-                                :key="index"
-                                :addons="false"
-                                :message="getErrorMessage(formErrors[metadatum.id])"
-                                :type="getErrorMessage(formErrors[metadatum.id]) != '' ? 'is-danger' : ''">
-                            <span   
-                                    class="collapse-handle"
-                                    @click="changeCollapse(!metadatumCollapses[index], index)">
-                                <b-icon 
-                                        type="is-secondary"
-                                        :icon="metadatumCollapses[index] ? 'menu-down' : 'menu-right'" />
-                                <label class="label">{{ metadatum.name }}</label>
-                                <span
-                                        v-if="metadatum.required == 'yes'"
-                                        class="required-metadatum-asterisk">*</span>
-                                <span class="metadata-type">({{ metadatum.metadata_type_object.metadata }})</span>
-                                <help-button 
-                                        :title="metadatum.name"
-                                        :message="metadatum.description"/>
-                            </span>
-                            <transition name="filter-item">
-                                <div v-show="metadatumCollapses[index]">
-                                    <component
-                                            :forced-component-type="false"
-                                            :allow-new="false"
-                                            :allow-select-to-create="metadatum.metadata_type_options.allow_new_terms === 'yes'"
-                                            :maxtags="1"
-                                            :id="metadatum.metadata_type_object.component + '-' + metadatum.slug"
-                                            :is="metadatum.metadata_type_object.component"
-                                            :metadatum="{ metadatum: metadatum }"
-                                            :value="itemMetadata[index].value"
-                                            @input="clearErrorMessage(metadatum.id); bulkEdit($event, metadatum)"/>
-                                </div>
-                            </transition>
-                        </b-field>
-                    </template>
-                </div>
-            </div>
-            <footer class="footer">
-                <!-- Last Updated Info --> 
-                <div class="update-info-section"> 
-                    <p v-if="!isExecutingBulkEdit && lastUpdated != ''">
-                        {{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}
-                        <span class="help is-danger">{{ formErrorMessage }}</span>
-                    </p>
-                    <p v-if="!isExecutingBulkEdit && lastUpdated == ''">
-                        <span class="help is-danger">{{ formErrorMessage }}</span>
-                    </p>          
-                    <p 
-                            class="update-warning"
-                            v-if="isExecutingBulkEdit">
-                        <b-icon icon="autorenew" />{{ $i18n.get('info_updating_metadata_values') }}
-                        <span class="help is-danger">{{ formErrorMessage }}</span>
-                    </p> 
-                </div>  
-                <div class="form-submission-footer">
-                    <button 
-                            v-if="status != 'trash'"
-                            @click="onSubmit('trash')"
-                            type="button"
-                            :class="{ 'is-loading': isTrashingItems }"
-                            class="button is-outlined">{{ $i18n.get('label_send_to_trash') }}</button>       
-                    <button 
-                            v-if="status == 'trash'"
-                            class="button is-secondary" 
-                            :class="{'is-loading': isCreatingSequenceEditGroup || isTrashingItems }"
-                            @click.prevent="status = previousStatus; changeStatus(previousStatus)"
-                            type="submit">{{ $i18n.get('label_recover_from_trash') }}</button>      
-                    <button 
-                            :disabled="status == 'trash'"
-                            class="button is-secondary" 
-                            :class="{'is-loading': isCreatingSequenceEditGroup }"
-                            @click.prevent="sequenceEditGroup()"
-                            type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button>           
-                    <button 
-                            :disabled="formErrorMessage != undefined && formErrorMessage != ''"
-                            @click="onSubmit(status)"
-                            type="button"
-                            :class="{ 'is-loading': isPublishingItems }"
-                            class="button is-success">{{ $i18n.get('finish') }}</button>
-                </div>
-            </footer>
-        </form>
-    </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex';
-import CustomDialog from '../other/custom-dialog.vue';
-
-export default {
-    name: 'ItemMetadataBulkEditionForm',
-    data(){
-        return {
-            collectionId: '',
-            isLoadingItems: false,
-            isLoadingMetadata: false,
-            isLoadingItemMetadata: false,
-            isLoadingGroupInfo: false,
-            isExecutingBulkEdit: false,
-            isCreatingSequenceEditGroup: false,
-            isUpdatingItems: false,
-            isTrashingItems: false,
-            isPublishingItems: false,
-            collapseAll: true,
-            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
-            metadatumCollapses: [],
-            itemMetadata: [],
-            formErrors: {},
-            status: 'draft',
-            previousStatus: 'draft',
-            groupID: null,
-            formErrorMessage: '',
-            copyItemId: null
-        }
-    },
-    computed: {
-        metadata() {
-            return this.getMetadata();
-        },
-        lastUpdated() {
-            return this.getLastUpdated();
-        },
-        items() {
-            return this.getBulkAddItems();
-        },
-        bulkEditGroup() {
-            return this.getGroup();
-        },
-        showLoading() {
-            return this.isLoadingMetadata || this.isLoadingItemMetadata;
-        }
-    },
-    methods: {
-        ...mapActions('item', {
-            'updateItem': 'updateItem',
-            'fetchItemMetadata':'fetchMetadata'
-        }),
-        ...mapActions('metadata', [
-            'fetchMetadata',
-        ]),
-        ...mapGetters('metadata', [
-            'getMetadata',
-        ]),
-        ...mapActions('bulkedition', [
-            'setValueInBulk',
-            'addValueInBulk',
-            'replaceValueInBulk',
-            'redefineValueInBulk',
-            'setStatusInBulk',
-            'removeValueInBulk',
-            'createEditGroup',
-            'deleteItemsInBulk',
-            'trashItemsInBulk',
-            'fetchItemIdInSequence',
-            'fetchGroup'  
-        ]),
-        ...mapGetters('bulkedition', [
-            'getItemIdInSequence',
-            'getGroup',
-            'getLastUpdated',
-            'getBulkAddItems'
-        ]),
-        toggleCollapseAll() {
-            this.collapseAll = !this.collapseAll;
-
-            for (let i = 0; i < this.metadatumCollapses.length; i++)
-                this.metadatumCollapses[i] = this.collapseAll;
-        },
-        changeCollapse(event, index) {
-            this.metadatumCollapses.splice(index, 1, event);
-        },
-        bulkEdit: _.debounce(function(newValue, metadatum) {
-
-            this.isExecutingBulkEdit = true;
-            this.setValueInBulk({
-                collectionID: this.collectionId,
-                groupID: this.groupID,
-                bodyParams: {
-                    metadatum_id: metadatum.id,
-                    value: newValue,
-                }
-            }).then(() => {
-                this.isExecutingBulkEdit = false;
-
-            }).catch(() => this.isExecutingBulkEdit = false);
-        }, 1000),
-        onSubmit(status) {
-            this.isExecutingBulkEdit = true;
-            this.previousStatus = status;
-
-            if (status != 'trash') {
-                this.status = status;
-                this.isPublishingItems = false;
-                this.isExecutingBulkEdit = false;
-   
-                this.$buefy.modal.open({
-                    parent: this,
-                    component: CustomDialog,
-                    props: {
-                        icon: 'alert',
-                        title: this.$i18n.get('label_warning'),
-                        message: this.$i18n.get('info_leaving_bulk_edition'	),
-                        onConfirm: () => {
-                            this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
-                        }
-                    },
-                    trapFocus: true
-                });
-                
-            } else if (status == 'trash') {
-
-                this.$buefy.modal.open({
-                    parent: this,
-                    component: CustomDialog,
-                    props: {
-                        icon: 'alert',
-                        title: this.$i18n.get('label_warning'),
-                        message: this.$i18n.get('info_warning_selected_items_trash'),
-                        onConfirm: () => {
-                            
-                            this.isTrashingItems = true;
-                            this.trashItemsInBulk({
-                                    groupID: this.groupID,
-                                    collectionID: this.collectionId
-                                }).then(() => {
-                                    this.status = status;
-                                    this.isTrashingItems = false;
-                                    this.isExecutingBulkEdit = false;
-                                    this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
-                                }).catch(() => {
-                                    this.isExecutingBulkEdit = false;
-                                    this.isTrashingItems = false;
-                                });
-                        }
-                    },
-                    trapFocus: true
-                });            
-            }
-        },
-        sequenceEditGroup() {
-            this.isCreatingSequenceEditGroup = true;
-            this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, this.groupID, 1));    
-        },
-        changeStatus(status) {
-            this.isPublishingItems = true;
-
-            if (!this.copyItemId){
-                // Gets an item from the bulk group
-                this.fetchItemIdInSequence({ collectionId: this.collectionId, sequenceId: this.groupID, itemPosition: 1 })
-                    .then((itemId) => {
-                        this.copyItemId = itemId;
-                        this.updateItemStatus(status);
-                    })
-                    .catch(() => {
-                        this.isPublishingItems = false;
-                        this.isExecutingBulkEdit = false;
-                    });
-            } else {
-                this.updateItemStatus(status);
-            }
-        },
-        updateItemStatus(status) {
-
-            // Test if this item can be set to this status
-            this.updateItem({ id: this.copyItemId, status: status })
-                .then(() => {
-
-                    // The status can be applied to everyone.
-                    this.setStatusInBulk({
-                        groupID: this.groupID,
-                        collectionID: this.collectionId,
-                        bodyParams: { value: status }
-                    }).then(() => {
-                    
-                        this.status = status;
-                        this.isPublishingItems = false;
-                        this.isExecutingBulkEdit = false;
-                        
-                    }).catch(() => {
-                        this.isPublishingItems = false;
-                        this.isExecutingBulkEdit = false;
-                    });
-                })
-                .catch((errors) => {
-                    // The status can not be applied.
-                    this.isPublishingItems = false;
-                    this.isExecutingBulkEdit = false;
-
-                    for (let error of errors.errors) {
-                        for (let metadatum of Object.keys(error)){
-                            this.formErrors[metadatum] = error[metadatum];
-                        }
-                    }
-                    this.formErrorMessage = errors.error_message;
-                });
-        },
-        clearErrorMessage(metadatumId) {
-            this.formErrors[metadatumId] = false;
-            let amountClean = 0;
-
-            for (let formError in this.formErrors) {
-                if (formError == false || formError == undefined)
-                    amountClean++;
-            }
-
-            if (amountClean == 0)
-                this.formErrorMessage = '';
-        },
-        getErrorMessage(errors) {
-                
-            let msg = '';
-            if ( errors != undefined && errors != false) {
-                for (let error of errors) { 
-                    for (let index of Object.keys(error)) {
-                        msg += error[index] + '\n';
-                    }
-                }
-            } 
-            return msg;
-        },
-        loadItemMetadata() {
-            this.isLoadingItemMetadata = true;
-            // Gets an item from the bulk group
-            this.fetchItemIdInSequence({ collectionId: this.collectionId, sequenceId: this.groupID, itemPosition: 1 })
-                .then((itemId) => {
-                    this.copyItemId = itemId;
-                    this.fetchItemMetadata(this.copyItemId)
-                        .then((metadata) => {
-                            this.itemMetadata = metadata;
-                            this.isLoadingItemMetadata = false;
-                        });
-                });
-        }
-    },
-    created() {
-        // Obtains collection ID
-        this.collectionId = this.$route.params.collectionId;
-        this.groupID = this.$route.params.groupId;
-
-        // Updates Collection BreadCrumb
-        this.$root.$emit('onCollectionBreadCrumbUpdate', [
-            { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
-            { path: '', label: this.$i18n.get('add_items_bulk') }
-        ]);
-
-        this.isLoadingMetadata = true;
-        this.fetchMetadata({
-            collectionId: this.collectionId,
-            isRepositoryLevel: false,
-            isContextEdit: true,
-            includeDisabled: false,
-        }).then(() => {
-            this.isLoadingMetadata = false;
-            for (let i = 0; i < this.metadata.length; i++) {
-                this.metadatumCollapses.push(false);
-                this.metadatumCollapses[i] = true;
-            }
-            this.loadItemMetadata();
-        });
-
-        this.isLoadingGroupInfo = true;
-        this.fetchGroup({ collectionId: this.collectionId, groupId: this.groupID })
-            .then(() => this.isLoadingGroupInfo = false)
-            .then(() => this.isLoadingGroupInfo = false)
-       
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-
-    @import "../../scss/_variables.scss";
-
-
-    .page-container {
-
-        &>.tainacan-form {
-            padding: 0 $page-side-padding; 
-            margin-bottom: 110px;
-        }
-
-        .tainacan-page-title {
-            margin-bottom: 35px;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: flex-end;
-            justify-content: space-between;
-
-            h1, h2 {
-                font-size: 20px;
-                font-weight: 500;
-                color: $gray5;
-                display: inline-block;
-                flex-shrink: 1;
-                flex-grow: 1;
-            }
-            .status-tag {
-                color: white;
-                background: $turquoise5;
-                padding: 0.15rem 0.5rem;
-                font-size: 0.75rem;
-                margin: 0 1rem 0 0;
-                font-weight: 600;
-                position: relative;
-                top: -2px;
-            }
-            a.back-link{
-                font-weight: 500;
-                float: right;
-                margin-top: 5px;
-            }
-            hr{
-                margin: 0px 0px 4px 0px; 
-                height: 1px;
-                background-color: $secondary;
-                width: 100%;
-            }
-        }
-
-        .document-list {
-            display: inline-block;
-
-            .document-item {
-                display: flex;
-                flex-wrap: nowrap;
-                width: 100%;
-                justify-content: flex-start;
-                align-items: center;
-                padding: 0.5rem 0.75rem;
-                position: relative;
-                cursor: default;
-
-                .document-thumb {
-                    max-height: 42px;
-                    max-width: 42px;
-                    margin-right: 1rem;
-                }
-
-                .document-name {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    width: 100%;
-                    white-space: nowrap;
-                }
-            }
-        }
-
-        .column {
-
-            .section-status{
-                padding: 16px 0;     
-                .field {
-                    border-bottom: none;
-                    .b-radio {
-                        margin-right: 24px;
-                        .icon  {
-                            font-size: 18px !important; 
-                            color: $gray3;
-                        }
-                    }
-                }
-            }
-
-            .section-label {
-                cursor: default;
-                position: relative;
-                label {
-                    font-size: 16px !important;
-                    font-weight: 500 !important;
-                    color: $gray5 !important;
-                    line-height: 1.2em;
-                }
-            }
-
-            .collapse-all {
-                font-size: 12px;
-                .icon { 
-                    vertical-align: bottom; 
-                }
-            }
-
-            .multiple-inputs {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-            }
-
-            .field {
-                border-bottom: 1px solid $gray2;
-                padding: 10px 0px 10px 60px;
-
-                .label {
-                    font-size: 0.875rem;
-                    font-weight: 500;
-                    margin-left: 15px;
-                    margin-bottom: 0.5em;
-                }
-                .metadata-type {
-                    font-size: 0.8125rem;
-                    font-weight: 400;
-                    color: $gray3;
-                    top: -0.2em;
-                    position: relative;
-                }
-                .help-wrapper {
-                    top: -0.2em;
-                }
-                .collapse-handle {
-                    cursor: pointer;
-                    position: relative;
-                    margin-left: -42px;
-                }
-            }
-        }
-
-        .footer {
-            padding: 18px $page-side-padding;
-            position: absolute;
-            bottom: 0;
-            z-index: 999999;
-            background-color: $gray1;
-            width: 100%;
-            height: 65px;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            left: 0;
-
-            .form-submission-footer {    
-                .button {
-                    margin-left: 16px;
-                    margin-right: 6px;
-                }
-            }
-            
-
-            @keyframes blink {
-                from { color: $blue5; }
-                to { color: $gray4; }
-            }
-
-            .update-warning {
-                color: $blue5;
-                animation-name: blink;
-                animation-duration: 0.5s;
-                animation-delay: 0.5s;
-                align-items: center;
-                display: flex;
-            }
-
-            .update-info-section {
-                color: $gray4;
-                margin-right: auto;
-            }
-
-            .help {
-                display: inline-block;
-                font-size: 1.0em;
-                margin-top: 0;
-                margin-left: 24px;
-            }
-        }
-
-    }
-
-</style>
diff --git a/src/admin/components/other/item-copy-dialog.vue b/src/admin/components/other/item-copy-dialog.vue
index 86af52b14..54520a57a 100644
--- a/src/admin/components/other/item-copy-dialog.vue
+++ b/src/admin/components/other/item-copy-dialog.vue
@@ -81,9 +81,8 @@
                 </button>
                 <button 
                         v-if="copyCount > 1 && hasCopied && newItems.length > 1"
-                        class="button is-secondary" 
-                        :class="{'is-loading': isCreatingBulkEditGroup }"
-                        @click.prevent="createBulkEditGroup()"
+                        class="button is-secondary"
+                        @click.prevent="openBulkEditionModal()"
                         type="submit">
                     {{ $i18n.get('label_bulk_edit_items') }}
                 </button>
@@ -94,6 +93,8 @@
 
 <script>
     import { mapActions } from 'vuex';
+    import BulkEditionModal from '../bulk-edition/bulk-edition-modal.vue';
+
     export default {
         name: 'ItemCopyDialog',
         props: {
@@ -112,7 +113,6 @@
                 newItems: Array,
                 copyCount: Number,
                 hasCopied: Boolean,
-                isCreatingBulkEditGroup: Boolean,
                 isCreatingSequenceEditGroup: Boolean,
             }
         },
@@ -123,8 +123,8 @@
             ]),
             ...mapActions('bulkedition', [
                 'createEditGroup',
-                'setStatusInBulk',
-                'setBulkAddItems'
+                'createSequenceEditGroup',
+                'setStatusInBulk'
             ]),
             generateCopies() {
                 this.isLoading = true;
@@ -151,7 +151,7 @@
                 let onlyItemIds = this.newItems.map(item => item.id);
 
                 this.isCreatingSequenceEditGroup = true;
-                this.createEditGroup({
+                this.createSequenceEditGroup({
                     object: onlyItemIds,
                     collectionID: this.collectionId
                 }).then((group) => {
@@ -161,29 +161,31 @@
                     this.$parent.close();
                 });
             },
-            createBulkEditGroup() {
-                // Sends to store, so we can retrieve in next page.
-                this.setBulkAddItems(this.newItems);
+            openBulkEditionModal() {
 
                 let onlyItemIds = this.newItems.map(item => item.id);
 
-                this.isCreatingBulkEditGroup = true;
-                this.createEditGroup({
-                    object: onlyItemIds,
-                    collectionID: this.collectionId
-                }).then((group) => {
-                    let groupId = group.id;
-                    this.isCreatingBulkEditGroup = false;
-                    this.$router.push({ path: this.$routerHelper.getItemMetadataBulkAddPath(this.collectionId, groupId), query: { loadCopy: true }});
-                    this.$parent.close();
+                this.$buefy.modal.open({
+                    parent: this,
+                    component: BulkEditionModal,
+                    props: {
+                        modalTitle: this.$i18n.get('info_editing_items_in_bulk'),
+                        totalItems: onlyItemIds.length,
+                        selectedForBulk: onlyItemIds,
+                        objectType: this.$i18n.get('items'),
+                        collectionID: this.collectionId
+                    },
+                    width: 'calc(100% - 8.333333333%)',
+                    trapFocus: true
                 }); 
+
+                this.$parent.close();
             },
         },
         created() {
             this.message = this.$i18n.get('instruction_select_the_amount_of_copies');
             this.isLoading = false;
             this.hasCopied = false;
-            this.isCreatingBulkEditGroup = false;
             this.isCreatingSequenceEditGroup = false;
             this.copyCount = 1;
         },
diff --git a/src/admin/js/router.js b/src/admin/js/router.js
index 189c09680..9aefe38c8 100644
--- a/src/admin/js/router.js
+++ b/src/admin/js/router.js
@@ -21,7 +21,6 @@ import ImporterEditionForm from '../components/edition/importer-edition-form.vue
 import ImporterMappingForm from '../components/edition/importer-mapping-form.vue'
 import ItemEditionForm from '../components/edition/item-edition-form.vue'
 import ItemBulkEditionForm from '../components/edition/item-bulk-edition-form.vue'
-import ItemMetadataBulkEditionForm from '../components/edition/item-metadata-bulk-edition-form.vue'
 import TaxonomyEditionForm from '../components/edition/taxonomy-edition-form.vue'
 import ExporterEditionForm from '../components/edition/exporter-edition-form.vue'
 
@@ -52,7 +51,6 @@ const routes = [
         { path: 'items/new', name: 'CollectionItemCreatePage', component: ItemEditionForm, meta: {title: i18nGet('title_create_item_collection'), icon: 'folder-multiple'} },
         { path: 'items/:itemId', name: 'ItemPage', component: ItemPage, meta: {title: i18nGet('title_item_page'), icon: 'folder-multiple'} },   
         { path: 'bulk-add', name: 'CollectionItemBulkAddPage', component: ItemBulkEditionForm, meta: {title: i18nGet('title_item_bulk_add'), icon: 'folder-multiple'} },
-        { path: 'bulk-add/:groupId', name: 'CollectionItemBulkAddMetadataPage', component: ItemMetadataBulkEditionForm, meta: {title: i18nGet('title_item_bulk_add'), icon: 'folder-multiple'} },
         { path: 'settings', component: CollectionEditionForm,  name: 'CollectionEditionForm', meta: {title: i18nGet('title_collection_settings'), icon: 'folder-multiple'} },
         { path: 'metadata', component: MetadataList, name: 'MetadataList', meta: {title: i18nGet('title_collection_metadata_edition'), icon: 'folder-multiple'} },
         { path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_filters_edition'), icon: 'folder-multiple'} },
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index 2261421fd..f2dc4cf0a 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -550,6 +550,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'info_error_deleting_taxonomy'                   => __( 'Error on deleting taxonomy', 'tainacan' ),
 	'info_error_first_value_greater'                 => __( 'First value should be lower than second value', 'tainacan' ),
 	'info_error_value_must_be_number'                => __( 'Value should be a number', 'tainacan' ),
+	'info_error_upload'							 	 => __( 'Error while uploading files.', 'tainacan' ),
 	'info_collection_deleted'                        => __( 'Collection deleted.', 'tainacan' ),
 	'info_item_deleted'                              => __( 'Item deleted.', 'tainacan' ),
 	'info_taxonomy_deleted'                          => __( 'Taxonomy deleted', 'tainacan' ),
diff --git a/src/js/store/modules/bulk-edition/actions.js b/src/js/store/modules/bulk-edition/actions.js
index cea44caf9..12a94d373 100644
--- a/src/js/store/modules/bulk-edition/actions.js
+++ b/src/js/store/modules/bulk-edition/actions.js
@@ -259,9 +259,3 @@ export const createSequenceEditGroup = ({commit}, parameters) => {
             });
         });
 };
-
-// BULK ADD SPECIFIC
-export const setBulkAddItems = ({commit}, items) => {
-    commit('setBulkAddItems', items);
-};
-
diff --git a/src/js/store/modules/bulk-edition/getters.js b/src/js/store/modules/bulk-edition/getters.js
index a3cf8c1f5..b8d489877 100644
--- a/src/js/store/modules/bulk-edition/getters.js
+++ b/src/js/store/modules/bulk-edition/getters.js
@@ -16,8 +16,4 @@ export const getItemIdInSequence = state => {
 
 export const getLastUpdated = state => {
     return state.lastUpdated;
-}
-
-export const getBulkAddItems = state => {
-    return state.bulkAddItems;
 }
\ No newline at end of file
diff --git a/src/js/store/modules/bulk-edition/index.js b/src/js/store/modules/bulk-edition/index.js
index 56984b879..7d0fbe513 100644
--- a/src/js/store/modules/bulk-edition/index.js
+++ b/src/js/store/modules/bulk-edition/index.js
@@ -6,8 +6,7 @@ const state = {
     group: null,
     actionResult: null,
     itemIdInSequence: null,
-    lastUpdated: '',
-    bulkAddItems: []
+    lastUpdated: ''
 };
 
 export default {
diff --git a/src/js/store/modules/bulk-edition/mutations.js b/src/js/store/modules/bulk-edition/mutations.js
index 191217424..e2786b86b 100644
--- a/src/js/store/modules/bulk-edition/mutations.js
+++ b/src/js/store/modules/bulk-edition/mutations.js
@@ -17,8 +17,4 @@ export const setLastUpdated = (state, value) => {
         let now = new Date();
         state.lastUpdated = now.toLocaleString();
     }
-}
-
-export const setBulkAddItems = (state, items) => {
-    return state.bulkAddItems = items;
 }
\ No newline at end of file