Adds support to redefine status in bulk, do procedures one by one, remove close button, adds more actions for bulk actions (#18)

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     rules: {
         // override/add rules settings here, such as:
         'no-extra-boolean-cast': 'off',
+        'vue/require-v-for-key': 'off',
         'vue/no-unused-vars': 'error',
         'no-console': 'warn',
         'no-unused-vars': 'warn',

src/admin/components/bulk-edition/bulk-edition-modal.vue

@@ -16,20 +16,27 @@
                         class="tainacan-bulk-edition-inline-fields">
 
                     <b-select
+                            :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
                             :disabled="!!bulkEditionProcedures[criterion].metadatumID"
                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
                             :placeholder="$i18n.get('instruction_select_a_metadatum')"
                             @input="addToBulkEditionProcedures($event, 'metadatumID', criterion)">
-                        <option
+                        <template v-for="(metadatum, index) in metadata">
-                                v-for="metadatum in metadata"
+                            <option
-                                v-if="metadatum.id"
+                                    v-if="metadatum.id"
-                                :value="metadatum.id"
+                                    :value="metadatum.id">
-                                :key="metadatum.id">
+                                {{ metadatum.name }}
-                            {{ metadatum.name }}
+                            </option>
-                        </option>
+                            <option
+                                    v-if="index === Object.keys(metadata).length-1"
+                                    value="status">
+                                {{ $i18n.get('label_status') }}
+                            </option>
+                        </template>
                     </b-select>
 
                     <b-select
+                            :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
                             v-if="bulkEditionProcedures[criterion] &&
                             bulkEditionProcedures[criterion].metadatumID"
                             :disabled="!!bulkEditionProcedures[criterion].action"
@@ -70,6 +77,7 @@
                               getMetadataByID(bulkEditionProcedures[criterion].metadatumID).multiple == 'yes'))">
 
                         <component
+                                :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
                                 :disabled="bulkEditionProcedures[criterion].isDone"
                                 :id="getMetadataByID(bulkEditionProcedures[criterion].metadatumID).metadata_type_object.component +
                              '-' + getMetadataByID(bulkEditionProcedures[criterion].metadatumID).slug"
@@ -86,7 +94,8 @@
                         </div>
 
                         <b-input
-                                :disabled="!!bulkEditionProcedures[criterion].isDone"
+                                :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
+                                :disabled="bulkEditionProcedures[criterion].isDone"
                                 class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
                                 type="text"
                                 @input="addToBulkEditionProcedures($event, 'newValue', criterion)"
@@ -94,11 +103,30 @@
                     </template>
 
                     <!-- Not replace -->
+                    <template
+                            v-else-if="bulkEditionProcedures[criterion] &&
+                             bulkEditionProcedures[criterion].metadatumID == 'status'">
+                        <b-select
+                                :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
+                                :disabled="bulkEditionProcedures[criterion].isDone"
+                                class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
+                                :placeholder="$i18n.get('instruction_select_a_status2')"
+                                @input="addToBulkEditionProcedures($event, 'newValue', criterion)">
+                            <option
+                                    v-for="(status, key) in statuses"
+                                    :key="key"
+                                    :value="status">
+                                {{ $i18n.get(status) }}
+                            </option>
+                        </b-select>
+                    </template>
+
                     <template
                             v-else-if="bulkEditionProcedures[criterion] &&
                              bulkEditionProcedures[criterion].metadatumID &&
                              bulkEditionProcedures[criterion].action">
                         <component
+                                :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
                                 :disabled="bulkEditionProcedures[criterion].isDone"
                                 :id="getMetadataByID(bulkEditionProcedures[criterion].metadatumID).metadata_type_object.component +
                              '-' + getMetadataByID(bulkEditionProcedures[criterion].metadatumID).slug"
@@ -110,12 +138,13 @@
                     </template>
 
                     <!-- DISABLED FIELD -->
-                    <template v-else>
+                    <!--<template v-else>-->
-                        <b-input
+                        <!--<input-->
-                                class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
+                                <!--style="border: none !important; background-color: white !important;"-->
-                                type="text"
+                                <!--class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"-->
-                                disabled />
+                                <!--type="text"-->
-                    </template>
+                                <!--disabled >-->
+                    <!--</template>-->
 
                     <div class="field buttons-r-bulk">
                         <button
@@ -123,8 +152,8 @@
                                 @click="removeThis(criterion)"
                                 class="button is-white is-pulled-right">
                             <b-icon
-                                    type="is-secondary"
+                                    type="is-gray4"
-                                    icon="close"/>
+                                    icon="close-circle-outline"/>
                         </button>
                         <a
                                 v-if="bulkEditionProcedures[criterion].isDone"
@@ -141,7 +170,8 @@
                                 @click="executeBulkEditionProcedure(criterion)"
                                 class="button is-white is-pulled-right">
                             <b-icon
-                                    icon="play-circle-outline"/>
+                                    type="is-gray4"
+                                    icon="play-circle"/>
                         </button>
                         <div v-if="bulkEditionProcedures[criterion].isExecuting">
                             <b-icon
@@ -151,9 +181,13 @@
                         </div>
                     </div>
                 </div>
-                <div>
+                <button
+                        style="padding-left: 2px !important;"
+                        class="button is-white is-text"
+                        :disabled="dones.every((item) => item === true) === false"
+                        @click="addEditionCriterion()">
                     <a
-                            @click="addEditionCriterion()"
+                            :class="{ 'tainacan-add-edition-criterion-button-disabled': dones.every((item) => item === true) === false }"
                             class="tainacan-add-edition-criterion-button">
                         <b-icon
                                 icon="plus-circle"
@@ -164,25 +198,19 @@
                             $i18n.get('add_another_edition_criterion')
                         }}
                     </a>
-                </div>
+                </button>
             </div>
             <pre>{{ bulkEditionProcedures }}</pre>
 
-            <!--<footer class="field is-grouped form-submit">-->
+            <footer class="field form-submit">
-                <!--<div class="control">-->
+                <div class="control is-pulled-right">
-                    <!--<button-->
+                    <button
-                            <!--class="button is-outlined"-->
+                            class="button is-success"
-                            <!--type="button"-->
+                            type="button"
-                            <!--@click="$parent.close()">{{ $i18n.get('cancel') }}-->
+                            @click="$parent.close()">{{ $i18n.get('conclude') }}
-                    <!--</button>-->
+                    </button>
-                <!--</div>-->
+                </div>
-                <!--<div class="control">-->
+            </footer>
-                    <!--<button-->
-                            <!--type="button"-->
-                            <!--class="button is-success">{{ $i18n.get('save') }}-->
-                    <!--</button>-->
-                <!--</div>-->
-            <!--</footer>-->
         </div>
     </div>
 </template>
@@ -210,11 +238,17 @@
         },
         data() {
             return {
+                statuses: {
+                    draft: 'draft',
+                    publish: 'publish',
+                    private: 'private'
+                },
                 editionCriteria: [1],
                 editionActionsForMultiple: {
                     remove: this.$i18n.get('remove'),
                     redefine: this.$i18n.get('redefine'),
                     replace: this.$i18n.get('replace'),
+                    add: this.$i18n.get('add')
                 },
                 editionActionsForNotMultiple: {
                     redefine: this.$i18n.get('redefine'),
@@ -226,6 +260,7 @@
                     }
                 },
                 groupID: null,
+                dones: [false],
             }
         },
         methods: {
@@ -236,24 +271,46 @@
             ...mapActions('bulkedition', [
                 'createEditGroup',
                 'setValueInBulk',
+                'addValueInBulk',
+                'replaceValueInBulk',
+                'redefineValueInBulk',
+                'setStatusInBulk',
             ]),
+            finalizeProcedure(criterion){
+                this.$set(this.bulkEditionProcedures[criterion], 'isDone', true);
+
+                let index = this.editionCriteria.indexOf(criterion);
+
+                this.dones[index] = true;
+
+                this.$set(this.bulkEditionProcedures[criterion], 'isExecuting', false);
+            },
             executeBulkEditionProcedure(criterion){
                 let procedure = this.bulkEditionProcedures[criterion];
 
                 if(procedure.action === 'Redefine'){
                     this.$set(this.bulkEditionProcedures[criterion], 'isExecuting', true);
 
-                    this.setValueInBulk({
+                    if(procedure.metadatumID == 'status'){
-                        collectionID: this.collectionID,
+                        this.setStatusInBulk({
-                        groupID: this.groupID,
+                            collectionID: this.collectionID,
-                        bodyParams: {
+                            groupID: this.groupID,
-                            metadatum_id: procedure.metadatumID,
+                            bodyParams: procedure.newValue
-                            value: procedure.newValue
+                        }).then(() => {
-                        }
+                            this.finalizeProcedure(criterion)
-                    }).then(() => {
+                        })
-                        this.$set(this.bulkEditionProcedures[criterion], 'isDone', true);
+                    } else {
-                        this.$set(this.bulkEditionProcedures[criterion], 'isExecuting', false);
+                        this.setValueInBulk({
-                    });
+                            collectionID: this.collectionID,
+                            groupID: this.groupID,
+                            bodyParams: {
+                                metadatum_id: procedure.metadatumID,
+                                value: procedure.newValue
+                            }
+                        }).then(() => {
+                            this.finalizeProcedure(criterion)
+                        });
+                    }
                 }
             },
             addEditionCriterion() {
@@ -272,6 +329,8 @@
                             isExecuting: false
                         }
                     });
+
+                    this.dones.push(false)
                 } else {
                     this.addEditionCriterion();
                 }
@@ -284,6 +343,7 @@
                 if(this.editionCriteria[criterionIndex]){
                     this.editionCriteria.splice(criterionIndex, 1);
                     delete this.bulkEditionProcedures[criterion];
+                    this.dones.splice(criterionIndex, 1)
                 }
             },
             getMetadataByID(id){
@@ -291,7 +351,7 @@
                     return element.id == id;
                 });
 
-                return found;
+                return found ? found : {};
             },
             addToBulkEditionProcedures(value, key, criterion){
                 this.$set(this.bulkEditionProcedures[criterion], `${key}`, value);
@@ -333,6 +393,33 @@
             }
         }
 
+        .is-field-history {
+
+            input {
+                color: black !important;
+                border: none !important;
+                background-color: white !important;
+            }
+
+            textarea {
+                color: black !important;
+                border: none !important;
+                background-color: white !important;
+                min-height: auto !important;
+            }
+
+            .select {
+
+                &:after {
+                    display: none !important;
+                }
+
+                select {
+                    border: none !important;
+                }
+            }
+        }
+
         .tainacan-bulk-edition-field {
             flex-grow: 1;
             flex-shrink: 1;
@@ -358,6 +445,11 @@
     .tainacan-add-edition-criterion-button {
         font-size: 12px;
         color: $turquoise5;
+        text-decoration: none !important;
+    }
+
+    .tainacan-add-edition-criterion-button-disabled {
+        cursor: not-allowed !important;
     }
 
     .tainacan-loader {

src/admin/components/lists/items-list.vue

@@ -617,7 +617,7 @@ export default {
                 component: BulkEditionModal,
                 props: {
                     modalTitle: this.$i18n.get('info_editing_items_in_bulk'),
-                    totalItems: this.queryAllItemsSelected ? this.totalItems : this.selectedItemsIDs.length,
+                    totalItems: Object.keys(this.queryAllItemsSelected).length ? this.totalItems : this.selectedItemsIDs.length,
                     selectedForBulk: Object.keys(this.queryAllItemsSelected).length ? this.queryAllItemsSelected : this.selectedItemsIDs,
                     objectType: this.$i18n.get('items'),
                     metadata: this.tableMetadata,

src/admin/tainacan-admin-i18n.php

@@ -68,6 +68,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'add_one_edition_criterion'                      => __( 'Add one edition criterion', 'tainacan' ),
 	'redefine'                                       => __( 'Redefine', 'tainacan' ),
 	'replace'                                        => __( 'Replace', 'tainacan' ),
+	'conclude'                                       => __( 'Conclude', 'tainacan' ),
 
 	// Wordpress Status
 	'publish'                                        => __( 'Publish', 'tainacan' ),
@@ -297,6 +298,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'instruction_delete_selected_taxonomies'         => __( 'Delete selected taxonomies', 'tainacan' ),
 	'instruction_image_upload_box'                   => __( 'Drop an image here or click to upload.', 'tainacan' ),
 	'instruction_select_a_status'                    => __( 'Select a status:', 'tainacan' ),
+	'instruction_select_a_status2'                   => __( 'Select a status', 'tainacan' ),
 	'instruction_select_a_filter_type'               => __( 'Select a filter type:', 'tainacan' ),
 	'instruction_select_a_parent_term'               => __( 'Select a parent term:', 'tainacan' ),
 	'instruction_select_a_metadatum'                 => __( 'Select a metadatum', 'tainacan' ),

src/classes/metadata-types/textarea/Textarea.vue

@@ -1,5 +1,6 @@
 <template>
-    <b-input 
+    <b-input
+            :disabled="disabled"
             :class="{'has-content': inputValue !== undefined && inputValue !== ''}"
             :id="id"
             size="is-small"
@@ -27,6 +28,7 @@
                 type: Object
             },
             value: [String, Number, Array],
+            disabled: false
         },
         methods: {
             onBlur() {

src/js/store/modules/bulk-edition/actions.js

@@ -28,17 +28,90 @@ export const createEditGroup = ({commit}, parameters) => {
 export const setValueInBulk = ({commit}, parameters) => {
     let groupID = parameters.groupID;
     let collectionID = parameters.collectionID;
+
+    /**
+     * @var bodyParams { metadatum_id, new_value } Object
+     * */
     let bodyParams = parameters.bodyParams;
 
     return axios.tainacan.post(`/collection/${collectionID}/bulk-edit/${groupID}/set`, bodyParams)
         .then(response => {
-            commit('setActionResult', response.data)
+            commit('setActionResult', response.data);
         })
         .catch(error => {
-            console.error(error)
+            console.error(error);
         });
 };
 
 export const addValueInBulk = ({commit}, parameters) => {
+    let groupID = parameters.groupID;
+    let collectionID = parameters.collectionID;
 
+    /**
+     * @var bodyParams { metadatum_id, new_value } Object
+     * */
+    let bodyParams = parameters.bodyParams;
+
+    return axios.tainacan.post(`/collection/${collectionID}/bulk-edit/${groupID}/add`, bodyParams)
+        .then(response => {
+            commit('setActionResult', response.data);
+        })
+        .catch(error => {
+            console.error(error);
+        });
+};
+
+export const removeValueInBulk = ({commit}, parameters) => {
+    let groupID = parameters.groupID;
+    let collectionID = parameters.collectionID;
+
+    /**
+     * @var bodyParams { metadatum_id, new_value } Object
+     * */
+    let bodyParams = parameters.bodyParams;
+
+    return axios.tainacan.post(`/collection/${collectionID}/bulk-edit/${groupID}/remove`, bodyParams)
+        .then(response => {
+            commit('setActionResult', response.data);
+        })
+        .catch(error => {
+            console.error(error);
+        });
+};
+
+export const replaceValueInBulk = ({commit}, parameters) => {
+    let groupID = parameters.groupID;
+    let collectionID = parameters.collectionID;
+
+    /**
+     * @var bodyParams { metadatum_id, old_value, new_value } Object
+     * */
+    let bodyParams = parameters.bodyParams;
+
+    return axios.tainacan.post(`/collection/${collectionID}/bulk-edit/${groupID}/replace`, bodyParams)
+        .then(response => {
+            commit('setActionResult', response.data);
+        })
+        .catch(error => {
+            console.error(error);
+        });
+};
+
+export const setStatusInBulk = ({commit}, parameters) => {
+    let groupID = parameters.groupID;
+    let collectionID = parameters.collectionID;
+
+    /**
+     * The new status value (draft, publish or private)
+     * @var bodyParams String
+     * */
+    let bodyParams = parameters.bodyParams;
+
+    return axios.tainacan.post(`/collection/${collectionID}/bulk-edit/${groupID}/set_status`, bodyParams)
+        .then(response => {
+            commit('setActionResult', response.data);
+        })
+        .catch(error => {
+            console.error(error);
+        });
 };