A lot of improvements in bulk edition modal (#18):

add the number of items to the label: Select all 123 items
add more margin to the left
in the actions dropdown: edit selected first, send to trash below
redefine. change label to "set new value". should have only one input text
add "value" to all action labels. Set new value, Add value, Remove value
This commit is contained in:
weryques 2018-09-04 15:20:31 -03:00
parent 5627ce2bde
commit 930c1ca479
4 changed files with 91 additions and 33 deletions

View File

@ -16,6 +16,7 @@
class="tainacan-bulk-edition-inline-fields">
<b-select
:loading="metadataIsLoading"
:class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
:disabled="!!bulkEditionProcedures[criterion].metadatumID"
class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
@ -56,6 +57,7 @@
<option
v-for="(edtAct, key) in editionActionsForNotMultiple"
:value="edtAct"
:selected="Object.keys(editionActionsForNotMultiple).length === 1"
:key="key">
{{ edtAct }}
</option>
@ -140,7 +142,7 @@
.metadata_type_options.allow_new_terms === 'yes'"
:maxtags="1"
:class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
:disabled="bulkEditionProcedures[criterion].isDone"
:disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting"
:id="getMetadataByID(bulkEditionProcedures[criterion].metadatumID).metadata_type_object.component +
'-' + getMetadataByID(bulkEditionProcedures[criterion].metadatumID).slug"
:is="getMetadataByID(bulkEditionProcedures[criterion].metadatumID).metadata_type_object.component"
@ -173,7 +175,11 @@
class="is-pulled-right">
<b-tooltip
class="is-success"
:label="actionResult.constructor.name !== 'Object' && actionResult === 1 ? `${actionResult} ${$i18n.get('info_item_edited')}` : `${actionResult} ${$i18n.get('info_items_edited')}`">
size="is-small"
position="is-left"
animated
multilined
:label="actionResult.constructor.name !== 'Object' && actionResult === 1 ? `${actionResult} ${$i18n.get('info_item_affected')}` : `${actionResult} ${$i18n.get('info_items_affected')}`">
<b-icon
type="is-success"
icon="check-circle"/>
@ -184,6 +190,10 @@
class="is-pulled-right">
<b-tooltip
class="is-danger"
size="is-small"
position="is-left"
animated
multilined
:label="actionResult.constructor.name === 'Object' ? (actionResult.error_message ? actionResult.error_message : actionResult.message) : ''">
<b-icon
type="is-danger"
@ -191,6 +201,7 @@
</b-tooltip>
</div>
<button
:disabled="!groupID"
v-if="!bulkEditionProcedures[criterion].isDone &&
!bulkEditionProcedures[criterion].isExecuting &&
bulkEditionProcedures[criterion].metadatumID &&
@ -233,11 +244,11 @@
<footer class="field is-grouped form-submit">
<div class="control">
<button
@click="$parent.close()"
@click="$eventBusSearch.loadItems(); $parent.close()"
:disabled="(Object.keys(bulkEditionProcedures).length &&
bulkEditionProcedures[editionCriteria[editionCriteria.length-1]].isExecuting) || false"
type="button"
class="button">
class="button is-outlined">
{{ $i18n.get('close') }}
</button>
</div>
@ -247,7 +258,7 @@
class="button is-success"
type="button"
@click="$eventBusSearch.loadItems(); $parent.close();">
{{ $i18n.get('conclude') }}
{{ $i18n.get('done') }}
</button>
</div>
</footer>
@ -264,18 +275,38 @@
modalTitle: String,
totalItems: Array,
objectType: String,
metadata: Array,
selectedForBulk: Object,
collectionID: Number,
},
created(){
if(!this.collectionID){
// is repository level
} else {
this.metadataIsLoading = true;
this.fetchMetadata({
collectionId: this.collectionID,
isRepositoryLevel: false,
isContextEdit: true,
includeDisabled: true,
}).then(() => {
this.metadataIsLoading = false;
});
}
this.createEditGroup({
object: this.selectedForBulk,
collectionID: this.collectionID
collectionID: this.collectionID ? this.collectionID : 'default'
}).then(() => {
this.groupID = this.getGroupID();
});
},
computed: {
metadata() {
return this.getMetadata();
}
},
data() {
return {
statuses: {
@ -285,13 +316,13 @@
},
editionCriteria: [1],
editionActionsForMultiple: {
add: this.$i18n.get('add'),
redefine: this.$i18n.get('redefine'),
remove: this.$i18n.get('remove'),
replace: this.$i18n.get('replace'),
add: this.$i18n.get('add_value'),
redefine: this.$i18n.get('set_new_value'),
remove: this.$i18n.get('remove_value'),
replace: this.$i18n.get('replace_value'),
},
editionActionsForNotMultiple: {
redefine: this.$i18n.get('redefine'),
redefine: this.$i18n.get('set_new_value'),
},
bulkEditionProcedures: {
1: {
@ -304,6 +335,7 @@
dones: [false],
totalItemsEditedWithSuccess: 0,
actionResult: '',
metadataIsLoading: false,
}
},
methods: {
@ -320,6 +352,12 @@
'setStatusInBulk',
'removeValueInBulk'
]),
...mapActions('metadata', [
'fetchMetadata'
]),
...mapGetters('metadata', [
'getMetadata'
]),
finalizeProcedure(criterion, withError){
this.$set(this.bulkEditionProcedures[criterion], 'isDone', !withError);
this.$set(this.bulkEditionProcedures[criterion], 'isDoneWithError', withError);
@ -509,6 +547,21 @@
@import '../../scss/_variables.scss';
@media screen and (max-width: 768px) {
.tainacan-bulk-edition-inline-fields {
flex-direction: column !important;
.tainacan-bulk-edition-field:not(:first-child) {
padding-left: 0 !important;
}
.buttons-r-bulk {
margin-left: 0 !important;
justify-content: center !important;
}
}
}
.tainacan-modal-content {
border-radius: 10px;
min-height: 400px;

View File

@ -6,14 +6,19 @@
<span>
<b-checkbox
@click.native="selectAllItemsOnPage()"
:value="allItemsOnPageSelected">{{ $i18n.get('label_select_all_items_page') }}</b-checkbox>
:value="allItemsOnPageSelected">
{{ $i18n.get('label_select_all_items_page') }}
</b-checkbox>
</span>
<span v-if="allItemsOnPageSelected">
<span
style="margin-left: 10px"
v-if="allItemsOnPageSelected && items.length > 1">
<b-checkbox
@click.native="selectAllItems()"
v-model="isAllItemsSelected">{{ $i18n.get('label_select_all_items') }}</b-checkbox>
<small v-if="isAllItemsSelected">{{ `(${ totalItems } ${ $i18n.get('info_items_selected') })` }}</small>
v-model="isAllItemsSelected">
{{ `${$i18n.get('label_select_all')} ${totalItems} ${$i18n.get('items').toLowerCase()}` }}
</b-checkbox>
</span>
</div>
<div class="field is-pulled-right">
@ -28,17 +33,18 @@
slot="trigger">
<span>{{ $i18n.get('label_bulk_actions') }}</span>
<b-icon icon="menu-down"/>
</button>
</button>
<b-dropdown-item
v-if="$route.params.collectionId && $userCaps.hasCapability('edit_others_posts')"
@click="openBulkEditionModal()">
{{ $i18n.get('label_edit_selected_items') }}
</b-dropdown-item>
<b-dropdown-item
@click="deleteSelectedItems()"
id="item-delete-selected-items">
{{ isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('label_send_to_trash') }}
</b-dropdown-item>
<b-dropdown-item
@click="openBulkEditionModal()">
{{ $i18n.get('label_edit_selected_items') }}
</b-dropdown-item>
</b-dropdown>
</div>
</div>
@ -624,7 +630,6 @@ export default {
totalItems: Object.keys(this.queryAllItemsSelected).length ? this.totalItems : this.selectedItemsIDs.filter(item => item !== false).length,
selectedForBulk: Object.keys(this.queryAllItemsSelected).length ? this.queryAllItemsSelected : this.selectedItemsIDs.filter(item => item !== false),
objectType: this.$i18n.get('items'),
metadata: this.tableMetadata,
collectionID: this.$route.params.collectionId,
},
width: 'calc(100% - 8.333333333%)',

View File

@ -37,11 +37,11 @@ return apply_filters( 'tainacan-admin-i18n', [
'edit' => __( 'Edit', 'tainacan' ),
'settings' => __( 'Settings', 'tainacan' ),
'new' => __( 'New', 'tainacan' ),
'add' => __( 'Add', 'tainacan' ),
'add_value' => __( 'Add value', 'tainacan' ),
'import' => __( 'Import', 'tainacan' ),
'export' => __( 'Export', 'tainacan' ),
'cancel' => __( 'Cancel', 'tainacan' ),
'remove' => __( 'Remove', 'tainacan' ),
'remove_value' => __( 'Remove value', 'tainacan' ),
'save' => __( 'Save', 'tainacan' ),
'next' => __( 'Next', 'tainacan' ),
'back' => __( 'Back', 'tainacan' ),
@ -67,9 +67,9 @@ return apply_filters( 'tainacan-admin-i18n', [
'apply' => __( 'Apply', 'tainacan' ),
'add_another_edition_criterion' => __( 'Add another edition criterion', 'tainacan' ),
'add_one_edition_criterion' => __( 'Add one edition criterion', 'tainacan' ),
'redefine' => __( 'Redefine', 'tainacan' ),
'replace' => __( 'Replace', 'tainacan' ),
'conclude' => __( 'Conclude', 'tainacan' ),
'set_new_value' => __( 'Set new value', 'tainacan' ),
'replace_value' => __( 'Replace value', 'tainacan' ),
'done' => __( 'Done', 'tainacan' ),
'select_to_create' => __( 'select to create', 'tainacan' ),
// Wordpress Status
@ -292,7 +292,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_log_file' => __( 'Log file', 'tainacan' ),
'label_error_log_file' => __( 'Error Log file', 'tainacan' ),
'label_import_items' => __( 'Import items', 'tainacan' ),
'label_select_all_items' => __( 'Select all items', 'tainacan' ),
'label_select_all' => __( 'Select all', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
@ -430,8 +430,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_editing_items_in_bulk' => __( 'Editing items in bulk', 'tainacan' ),
'info_by_inner' => __( 'by', 'tainacan' ),
'info_items_selected' => __( 'items selected', 'tainacan' ),
'info_items_edited' => __( 'items edited', 'tainacan' ),
'info_item_edited' => __( 'item edited', 'tainacan'),
'info_items_affected' => __( 'items affected', 'tainacan' ),
'info_item_affected' => __( 'item affected', 'tainacan'),
'info_no_parent_term_found' => __( 'No valid parent term was found with this name.', 'tainacan' ),
'info_warning_changing_parent_term' => __( 'Warning! Changing parent term will reload the terms list, thus uncheking any selection.', 'tainacan' ),

View File

@ -156,10 +156,10 @@
if(!isNaN(this.selected[0])){
for (let option of this.options) {
let valueIndex = this.selected.findIndex(item => item == option.value);
let value = this.selected.find(item => item == option.value);
if (valueIndex >= 0) {
onlyLabels.push(this.options[valueIndex].label);
if (value != undefined) {
onlyLabels.push(option.label);
}
}
}