Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<QuickActions
|
||||
:actions="actions[actionMode]"
|
||||
v-on="getEventListeners()"
|
||||
ref="quickActions"
|
||||
@open="openQuickactions"
|
||||
@close="closeQuickactions" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import * as Table from 'new-dashboard/core/models/table';
|
||||
import QuickActions from 'new-dashboard/components/QuickActions/QuickActions';
|
||||
import * as DialogActions from 'new-dashboard/core/dialog-actions';
|
||||
|
||||
export default {
|
||||
name: 'DatasetQuickActions',
|
||||
inject: ['backboneViews'],
|
||||
components: {
|
||||
QuickActions
|
||||
},
|
||||
props: {
|
||||
dataset: Object,
|
||||
storeActionType: {
|
||||
type: String,
|
||||
default: 'datasets'
|
||||
},
|
||||
isSharedWithMe: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
isOutOfDatasetsQuota: 'user/isOutOfDatasetsQuota'
|
||||
}),
|
||||
actions () {
|
||||
return {
|
||||
mine: [
|
||||
{ name: this.$t('QuickActions.createMap'), event: 'createMap' },
|
||||
{ name: this.$t('QuickActions.editInfo'), event: 'editInfo' },
|
||||
{ name: this.$t('QuickActions.manageTags'), event: 'manageTags' },
|
||||
{ name: this.$t('QuickActions.changePrivacy'), event: 'changePrivacy' },
|
||||
{ name: this.$t('QuickActions.share'), event: 'shareVisualization', shouldBeHidden: !this.isUserInsideOrganization },
|
||||
{ name: this.$t('QuickActions.duplicate'), event: 'duplicateDataset', shouldBeDisabled: this.isOutOfDatasetsQuota },
|
||||
{ name: this.$t('QuickActions.lock'), event: 'lockDataset' },
|
||||
{ name: this.$t('QuickActions.delete'), event: 'deleteDataset', isDestructive: true }
|
||||
],
|
||||
shared: [
|
||||
{ name: this.$t('QuickActions.createMap'), event: 'createMap' },
|
||||
{ name: this.$t('QuickActions.duplicate'), event: 'duplicateDataset' }
|
||||
],
|
||||
locked: [
|
||||
{ name: this.$t('QuickActions.duplicate'), event: 'duplicateDataset' },
|
||||
{ name: this.$t('QuickActions.unlock'), event: 'unlockDataset' }
|
||||
]
|
||||
};
|
||||
},
|
||||
actionMode () {
|
||||
if (this.dataset.locked) {
|
||||
return 'locked';
|
||||
}
|
||||
if (this.isSharedWithMe) {
|
||||
return 'shared';
|
||||
}
|
||||
return 'mine';
|
||||
},
|
||||
isUserInsideOrganization () {
|
||||
const userOrganization = this.$store.state.user.organization;
|
||||
return userOrganization && userOrganization.id;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getActionHandlers () {
|
||||
return {
|
||||
deselectAll: () => {},
|
||||
fetchList: () => {
|
||||
this.$store.dispatch(`${this.storeActionType}/fetch`);
|
||||
this.$emit('contentChanged', 'datasets');
|
||||
},
|
||||
updateVisualization: (model) => {
|
||||
this.$store.dispatch(`${this.storeActionType}/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%' }
|
||||
);
|
||||
},
|
||||
openQuickactions () {
|
||||
this.$emit('open');
|
||||
},
|
||||
closeQuickactions () {
|
||||
this.$emit('close');
|
||||
},
|
||||
closeDropdown () {
|
||||
this.$refs.quickActions.closeDropdown();
|
||||
},
|
||||
editInfo () {
|
||||
DialogActions.editDatasetMetadata.apply(this, [this.dataset, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
createMap () {
|
||||
DialogActions.createMap.apply(this, [
|
||||
[this.dataset],
|
||||
this.backboneViews.backgroundPollingView.getBackgroundPollingView(),
|
||||
this.backboneViews.mamufasImportView.getView()
|
||||
]);
|
||||
},
|
||||
changePrivacy () {
|
||||
DialogActions.changePrivacy.apply(this, [this.dataset, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
manageTags () {
|
||||
DialogActions.editDatasetMetadata.apply(this, [this.dataset, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
duplicateDataset () {
|
||||
const bgPollingView = this.backboneViews.backgroundPollingView.getBackgroundPollingView();
|
||||
|
||||
bgPollingView._addDataset({
|
||||
type: 'duplication',
|
||||
table_name: `${Table.getUnqualifiedName(this.dataset.name)}_copy`,
|
||||
value: this.dataset.table.name,
|
||||
create_vis: false
|
||||
});
|
||||
this.closeDropdown();
|
||||
},
|
||||
unlockDataset () {
|
||||
DialogActions.changeLockState.apply(this, [this.dataset, 'datasets', this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
lockDataset () {
|
||||
DialogActions.changeLockState.apply(this, [this.dataset, 'datasets', this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
deleteDataset () {
|
||||
DialogActions.deleteVisualization.apply(this, [this.dataset, 'datasets', this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
shareVisualization () {
|
||||
DialogActions.shareVisualization.apply(this, [this.dataset, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<QuickActions
|
||||
v-if="!isSharedWithMe"
|
||||
ref="quickActions"
|
||||
:actions="actions[actionMode]"
|
||||
v-on="getEventListeners()"
|
||||
@open="openQuickactions"
|
||||
@close="closeQuickactions"></QuickActions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import QuickActions from 'new-dashboard/components/QuickActions/QuickActions';
|
||||
import * as DialogActions from 'new-dashboard/core/dialog-actions';
|
||||
import * as Visualization from 'new-dashboard/core/models/visualization';
|
||||
|
||||
export default {
|
||||
name: 'MapQuickActions',
|
||||
components: {
|
||||
QuickActions
|
||||
},
|
||||
props: {
|
||||
map: Object,
|
||||
storeActionType: {
|
||||
type: String,
|
||||
default: 'maps'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
isOutOfPublicMapsQuota: 'user/isOutOfPublicMapsQuota'
|
||||
}),
|
||||
actions () {
|
||||
return {
|
||||
mine: [
|
||||
{ name: this.$t('QuickActions.editInfo'), event: 'editInfo' },
|
||||
{ name: this.$t('QuickActions.manageTags'), event: 'manageTags' },
|
||||
{ name: this.$t('QuickActions.changePrivacy'), event: 'changePrivacy', shouldBeDisabled: !this.canChangePrivacy },
|
||||
{ name: this.$t('QuickActions.share'), event: 'shareVisualization', shouldBeHidden: !this.isUserInsideOrganization },
|
||||
{ name: this.$t('QuickActions.duplicate'), event: 'duplicateMap', shouldBeDisabled: !this.canDuplicate },
|
||||
{ name: this.$t('QuickActions.lock'), event: 'lockMap' },
|
||||
{ name: this.$t('QuickActions.delete'), event: 'deleteMap', isDestructive: true }
|
||||
],
|
||||
locked: [
|
||||
{ name: this.$t('QuickActions.unlock'), event: 'unlockMap' }
|
||||
]
|
||||
};
|
||||
},
|
||||
actionMode () {
|
||||
return this.map.locked ? 'locked' : 'mine';
|
||||
},
|
||||
isSharedWithMe () {
|
||||
return Visualization.isSharedWithMe(this.$props.map, this.$cartoModels);
|
||||
},
|
||||
isUserInsideOrganization () {
|
||||
const userOrganization = this.$store.state.user.organization;
|
||||
return userOrganization && userOrganization.id;
|
||||
},
|
||||
isSelectedMapPrivate () {
|
||||
return this.map.privacy === 'PRIVATE';
|
||||
},
|
||||
canChangePrivacy () {
|
||||
return !this.isOutOfPublicMapsQuota || !this.isSelectedMapPrivate;
|
||||
},
|
||||
canDuplicate () {
|
||||
return !this.isOutOfPublicMapsQuota || this.isSelectedMapPrivate;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getActionHandlers () {
|
||||
return {
|
||||
deselectAll: () => {},
|
||||
updateVisualization: (model) => {
|
||||
this.$store.dispatch(`${this.storeActionType}/updateVisualization`, { visualizationId: model.get('id'), visualizationAttributes: model.attributes });
|
||||
},
|
||||
fetchList: () => {
|
||||
this.$store.dispatch(`${this.storeActionType}/fetch`);
|
||||
this.$emit('contentChanged', 'maps');
|
||||
}
|
||||
};
|
||||
},
|
||||
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%' }
|
||||
);
|
||||
},
|
||||
openQuickactions () {
|
||||
this.$emit('open');
|
||||
},
|
||||
closeQuickactions () {
|
||||
this.$emit('close');
|
||||
},
|
||||
closeDropdown () {
|
||||
this.$refs.quickActions.closeDropdown();
|
||||
},
|
||||
editInfo () {
|
||||
DialogActions.editMapMetadata.apply(this, [this.map, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
changePrivacy () {
|
||||
DialogActions.changePrivacy.apply(this, [this.map, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
manageTags () {
|
||||
DialogActions.editMapMetadata.apply(this, [this.map, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
duplicateMap () {
|
||||
DialogActions.duplicateVisualization.apply(this, [this.map]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
unlockMap () {
|
||||
DialogActions.changeLockState.apply(this, [this.map, 'maps', this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
lockMap () {
|
||||
DialogActions.changeLockState.apply(this, [this.map, 'maps', this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
deleteMap () {
|
||||
DialogActions.deleteVisualization.apply(this, [this.map, 'maps', this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
},
|
||||
shareVisualization () {
|
||||
DialogActions.shareVisualization.apply(this, [this.map, this.getActionHandlers()]);
|
||||
this.closeDropdown();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="quick-actions" v-click-outside="closeDropdown">
|
||||
<a href="javascript:void(0)" class="quick-actions-select" @click="toggleDropdown" :class="{'is-active': isOpen }">
|
||||
<img svg-inline src="new-dashboard/assets/icons/common/options.svg">
|
||||
</a>
|
||||
<div class="quick-actions-dropdown" :class="{'is-active' : isOpen}" v-if="isOpen" @click="killEvent">
|
||||
<h6 class="quick-actions-title text is-semibold is-xsmall is-txtSoftGrey">{{ $t(`QuickActions.title`) }}</h6>
|
||||
<ul>
|
||||
<template v-for="action in actions">
|
||||
<li class="action__item" :key="action.name" v-if="!action.shouldBeHidden">
|
||||
<a href="#" class="action__text text is-caption" :class="{'is-txtPrimary': !action.isDestructive, 'is-txtAlert': action.isDestructive, 'u-is-disabled': action.shouldBeDisabled}" @click="emitEvent(action.event)">{{action.name}}</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'QuickActions',
|
||||
data: function () {
|
||||
return {
|
||||
isOpen: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
actions: Array
|
||||
},
|
||||
methods: {
|
||||
emitEvent (action) {
|
||||
this.$emit(action);
|
||||
},
|
||||
toggleDropdown () {
|
||||
this.isOpen = !this.isOpen;
|
||||
if (this.isOpen) {
|
||||
this.$emit('open');
|
||||
} else {
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
closeDropdown () {
|
||||
this.isOpen = false;
|
||||
this.$emit('close');
|
||||
},
|
||||
killEvent (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.quick-actions-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
background: $white;
|
||||
|
||||
&.is-active {
|
||||
background-color: $primary-color;
|
||||
|
||||
.path {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions-dropdown {
|
||||
position: absolute;
|
||||
z-index: $z-index__local-dropdown;
|
||||
right: 0;
|
||||
width: 260px;
|
||||
margin-top: 8px;
|
||||
border: 1px solid $border-color--dark;
|
||||
border-radius: 2px;
|
||||
background-color: $white;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.quick-actions-title {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
margin-left: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.action {
|
||||
&__item {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid $softblue;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: block;
|
||||
padding: 12px 24px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $softblue;
|
||||
}
|
||||
|
||||
&.u-is-disabled {
|
||||
pointer-events: none;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user