Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<section class="bulk-actions">
|
||||
<template
|
||||
v-for="action in actions">
|
||||
<button
|
||||
class="bulk-actions__button button button--ghost"
|
||||
v-if="!action.shouldBeHidden"
|
||||
:class="{
|
||||
'is-txtAlert': action.isDestructive,
|
||||
'u-is-disabled': action.shouldBeDisabled}"
|
||||
:disabled="action.shouldBeDisabled"
|
||||
:key="action.event"
|
||||
@click="emitEvent(action.event)">
|
||||
{{ action.name }}
|
||||
</button>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BulkActions',
|
||||
props: {
|
||||
actions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitEvent (eventName) {
|
||||
this.$emit(eventName);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bulk-actions {
|
||||
display: flex;
|
||||
|
||||
&__button:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<BulkActions :actions="actions[actionMode]" v-on="getEventListeners()"></BulkActions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import BulkActions from 'new-dashboard/components/BulkActions/BulkActions';
|
||||
import * as DialogActions from 'new-dashboard/core/dialog-actions';
|
||||
import * as Table from 'new-dashboard/core/models/table';
|
||||
import * as Visualization from 'new-dashboard/core/models/visualization';
|
||||
|
||||
export default {
|
||||
name: 'DatasetBulkActions',
|
||||
inject: ['backboneViews'],
|
||||
components: {
|
||||
BulkActions
|
||||
},
|
||||
props: {
|
||||
areAllDatasetsSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selectedDatasets: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
isOutOfDatasetsQuota: 'user/isOutOfDatasetsQuota'
|
||||
}),
|
||||
actions () {
|
||||
return {
|
||||
single: [
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.selectAll'),
|
||||
event: 'selectAll',
|
||||
shouldBeHidden: this.areAllMapsSelected
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.createMap'),
|
||||
event: 'createMap',
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.changePrivacy'),
|
||||
event: 'changePrivacy',
|
||||
shouldBeHidden: this.isAnyShared || this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.duplicate'),
|
||||
event: 'duplicateDataset',
|
||||
shouldBeDisabled: this.isOutOfDatasetsQuota
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.lock'),
|
||||
event: 'lockDataset',
|
||||
shouldBeDisabled: this.isAnyShared && !this.areAllLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.unlock'),
|
||||
event: 'unlockDataset',
|
||||
shouldBeDisabled: this.isAnyShared && this.areAllLocked,
|
||||
shouldBeHidden: !this.areAllLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.delete'),
|
||||
event: 'deleteDataset',
|
||||
isDestructive: true,
|
||||
shouldBeDisabled: this.isAnyShared && !this.isAnyLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
}
|
||||
],
|
||||
multiple: [
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.selectAll'),
|
||||
event: 'selectAll',
|
||||
shouldBeHidden: this.areAllDatasetsSelected
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.deselectAll'),
|
||||
event: 'deselectAll'
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.createMap'),
|
||||
event: 'createMap',
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.lock'),
|
||||
event: 'lockDatasets',
|
||||
shouldBeDisabled: this.isAnyShared && !this.areAllLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.unlock'),
|
||||
event: 'unlockDatasets',
|
||||
shouldBeDisabled: this.isAnyShared && this.areAllLocked,
|
||||
shouldBeHidden: !this.areAllLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.datasets.delete'),
|
||||
event: 'deleteDatasets',
|
||||
isDestructive: true,
|
||||
shouldBeDisabled: this.isAnyShared && !this.isAnyLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
actionMode () {
|
||||
return this.selectedDatasets.length > 1 ? 'multiple' : 'single';
|
||||
},
|
||||
isAnyShared () {
|
||||
return this.selectedDatasets.some(dataset => Visualization.isSharedWithMe(dataset, this.$cartoModels));
|
||||
},
|
||||
isAnyLocked () {
|
||||
return this.selectedDatasets.some(dataset => dataset.locked);
|
||||
},
|
||||
areAllLocked () {
|
||||
return this.selectedDatasets.every(dataset => dataset.locked);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getActionHandlers () {
|
||||
return {
|
||||
deselectAll: () => {
|
||||
this.deselectAll();
|
||||
},
|
||||
fetchList: () => {
|
||||
this.$store.dispatch('datasets/fetch');
|
||||
},
|
||||
updateVisualization: (model) => {
|
||||
this.$store.dispatch('datasets/updateVisualization', { visualizationId: model.get('id'), visualizationAttributes: model.attributes });
|
||||
}
|
||||
};
|
||||
},
|
||||
getEventListeners () {
|
||||
const events = this.actions[this.actionMode].map(action => action.event);
|
||||
|
||||
return events.reduce(
|
||||
(eventListeners, action) => {
|
||||
eventListeners[action] = this[action].bind(this);
|
||||
return eventListeners;
|
||||
}, {}
|
||||
);
|
||||
},
|
||||
showModal (componentDefinition, componentPropsData) {
|
||||
this.$modal.show(
|
||||
componentDefinition,
|
||||
componentPropsData,
|
||||
{ width: '100%', height: '100%' }
|
||||
);
|
||||
},
|
||||
selectAll () {
|
||||
this.$emit('selectAll');
|
||||
},
|
||||
deselectAll () {
|
||||
this.$emit('deselectAll');
|
||||
},
|
||||
createMap () {
|
||||
DialogActions.createMap.apply(this, [
|
||||
this.selectedDatasets,
|
||||
this.backboneViews.backgroundPollingView.getBackgroundPollingView(),
|
||||
this.backboneViews.mamufasImportView.getView()
|
||||
]);
|
||||
},
|
||||
changePrivacy () {
|
||||
DialogActions.changePrivacy.apply(this, [this.selectedDatasets[0], this.getActionHandlers()]);
|
||||
},
|
||||
duplicateDataset () {
|
||||
const selectedDataset = this.selectedDatasets[0];
|
||||
const bgPollingView = this.backboneViews.backgroundPollingView.getBackgroundPollingView();
|
||||
|
||||
bgPollingView._addDataset({
|
||||
type: 'duplication',
|
||||
table_name: `${Table.getUnqualifiedName(selectedDataset.name)}_copy`,
|
||||
value: selectedDataset.table.name,
|
||||
create_vis: false
|
||||
});
|
||||
this.deselectAll();
|
||||
},
|
||||
unlockDataset () {
|
||||
DialogActions.changeLockState.apply(this, [
|
||||
this.selectedDatasets[0],
|
||||
'datasets',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
lockDataset () {
|
||||
DialogActions.changeLockState.apply(this, [
|
||||
this.selectedDatasets[0],
|
||||
'datasets',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
deleteDataset () {
|
||||
DialogActions.deleteVisualization.apply(this, [
|
||||
this.selectedDatasets[0],
|
||||
'datasets',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
unlockDatasets () {
|
||||
DialogActions.changeVisualizationsLockState.apply(this, [
|
||||
this.selectedDatasets,
|
||||
'datasets',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
lockDatasets () {
|
||||
DialogActions.changeVisualizationsLockState.apply(this, [
|
||||
this.selectedDatasets,
|
||||
'datasets',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
deleteDatasets () {
|
||||
DialogActions.deleteVisualizations.apply(this, [
|
||||
this.selectedDatasets,
|
||||
'datasets',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<BulkActions :actions="actions[actionMode]" v-on="getEventListeners()"></BulkActions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import BulkActions from 'new-dashboard/components/BulkActions/BulkActions';
|
||||
import * as DialogActions from 'new-dashboard/core/dialog-actions';
|
||||
import * as Visualization from 'new-dashboard/core/models/visualization';
|
||||
|
||||
export default {
|
||||
name: 'MapBulkActions',
|
||||
components: {
|
||||
BulkActions
|
||||
},
|
||||
props: {
|
||||
areAllMapsSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selectedMaps: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
isOutOfPublicMapsQuota: 'user/isOutOfPublicMapsQuota'
|
||||
}),
|
||||
actions () {
|
||||
return {
|
||||
single: [
|
||||
{
|
||||
name: this.$t('BulkActions.maps.selectAll'),
|
||||
event: 'selectAll',
|
||||
shouldBeHidden: this.areAllMapsSelected
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.changePrivacy'),
|
||||
event: 'changePrivacy',
|
||||
shouldBeDisabled: !this.canChangePrivacy,
|
||||
shouldBeHidden: this.isAnyShared || this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.duplicate'),
|
||||
event: 'duplicateMap',
|
||||
shouldBeDisabled: !this.canDuplicate
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.lock'),
|
||||
event: 'lockMap',
|
||||
shouldBeDisabled: this.isAnyShared && !this.areAllLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.unlock'),
|
||||
event: 'unlockMap',
|
||||
shouldBeDisabled: this.isAnyShared && this.areAllLocked,
|
||||
shouldBeHidden: !this.areAllLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.delete'),
|
||||
event: 'deleteMap',
|
||||
isDestructive: true,
|
||||
shouldBeDisabled: this.isAnyShared && !this.isAnyLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
}
|
||||
],
|
||||
multiple: [
|
||||
{
|
||||
name: this.$t('BulkActions.maps.selectAll'),
|
||||
event: 'selectAll',
|
||||
shouldBeHidden: this.areAllMapsSelected
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.deselectAll'),
|
||||
event: 'deselectAll'
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.lock'),
|
||||
event: 'lockMaps',
|
||||
shouldBeDisabled: this.isAnyShared && !this.areAllLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.unlock'),
|
||||
event: 'unlockMaps',
|
||||
shouldBeDisabled: this.isAnyShared && this.areAllLocked,
|
||||
shouldBeHidden: !this.areAllLocked
|
||||
},
|
||||
{
|
||||
name: this.$t('BulkActions.maps.delete'),
|
||||
event: 'deleteMaps',
|
||||
isDestructive: true,
|
||||
shouldBeDisabled: this.isAnyShared && !this.isAnyLocked,
|
||||
shouldBeHidden: this.isAnyLocked
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
actionMode () {
|
||||
return this.selectedMaps.length > 1 ? 'multiple' : 'single';
|
||||
},
|
||||
isAnyShared () {
|
||||
return this.selectedMaps.some(map => Visualization.isSharedWithMe(map, this.$cartoModels));
|
||||
},
|
||||
isAnyLocked () {
|
||||
return this.selectedMaps.some(map => map.locked);
|
||||
},
|
||||
areAllLocked () {
|
||||
return this.selectedMaps.every(map => map.locked);
|
||||
},
|
||||
isSelectedMapPrivate () {
|
||||
return this.selectedMaps.some(map => ['PRIVATE'].includes(map.privacy));
|
||||
},
|
||||
canChangePrivacy () {
|
||||
return !this.isOutOfPublicMapsQuota || !this.isSelectedMapPrivate;
|
||||
},
|
||||
canDuplicate () {
|
||||
return !this.isOutOfPublicMapsQuota || this.isSelectedMapPrivate;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getActionHandlers () {
|
||||
return {
|
||||
deselectAll: () => {
|
||||
this.deselectAll();
|
||||
},
|
||||
fetchList: () => {
|
||||
this.$store.dispatch('maps/fetch');
|
||||
},
|
||||
updateVisualization: (model) => {
|
||||
this.$store.dispatch('maps/updateVisualization', { visualizationId: model.get('id'), visualizationAttributes: model.attributes });
|
||||
}
|
||||
};
|
||||
},
|
||||
getEventListeners () {
|
||||
const events = this.actions[this.actionMode].map(action => action.event);
|
||||
|
||||
return events.reduce(
|
||||
(eventListeners, action) => {
|
||||
eventListeners[action] = this[action].bind(this);
|
||||
return eventListeners;
|
||||
}, {}
|
||||
);
|
||||
},
|
||||
showModal (componentDefinition, componentPropsData) {
|
||||
this.$modal.show(
|
||||
componentDefinition,
|
||||
componentPropsData,
|
||||
{ width: '100%', height: '100%' }
|
||||
);
|
||||
},
|
||||
selectAll () {
|
||||
this.$emit('selectAll');
|
||||
},
|
||||
deselectAll () {
|
||||
this.$emit('deselectAll');
|
||||
},
|
||||
changePrivacy () {
|
||||
DialogActions.changePrivacy.apply(this, [this.selectedMaps[0], this.getActionHandlers()]);
|
||||
},
|
||||
duplicateMap () {
|
||||
DialogActions.duplicateVisualization.apply(this, [this.selectedMaps[0]]);
|
||||
},
|
||||
unlockMap () {
|
||||
DialogActions.changeLockState.apply(this, [
|
||||
this.selectedMaps[0],
|
||||
'maps',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
lockMap () {
|
||||
DialogActions.changeLockState.apply(this, [
|
||||
this.selectedMaps[0],
|
||||
'maps',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
deleteMap () {
|
||||
DialogActions.deleteVisualization.apply(this, [
|
||||
this.selectedMaps[0],
|
||||
'maps',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
unlockMaps () {
|
||||
DialogActions.changeVisualizationsLockState.apply(this, [
|
||||
this.selectedMaps,
|
||||
'maps',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
lockMaps () {
|
||||
DialogActions.changeVisualizationsLockState.apply(this, [
|
||||
this.selectedMaps,
|
||||
'maps',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
},
|
||||
deleteMaps () {
|
||||
DialogActions.deleteVisualizations.apply(this, [
|
||||
this.selectedMaps,
|
||||
'maps',
|
||||
this.getActionHandlers()
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user