pui9-datatables 1.16.4

package/src/mixins/PuiActionsBtnMixin.js

@@ -0,0 +1,287 @@
+import generalActions from '../generalActions';
+import PuiToolbarBtnMixin from './PuiToolbarBtnMixin';
+
+export default {
+	mixins: [PuiToolbarBtnMixin],
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		actions: {
+			type: [Array],
+			default: () => {
+				return [];
+			}
+		},
+		insideForm: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			idTool: 'actions',
+			internalActions: [],
+			favoriteIds: [],
+			panel: {
+				position: {}
+			},
+			label: '',
+			selectedRows: [],
+			externalActions: [],
+			generalActions: [],
+			sessionUser: null,
+			controller: '/puiusermodelconfig',
+			serverConfigId: null,
+			showPuiCopyAction: false,
+			showPuiImportExportAction: false,
+			importExportModelName: null
+		};
+	},
+	computed: {
+		compClass() {
+			return {
+				'pui-toolbar__btn--darkapplied': this.states.applied,
+				'pui-toolbar__btn--active': this.states.active
+			};
+		},
+		showPuiDocgenAction() {
+			const thisModel = this.$store.getters.getModelByName(this.modelName);
+			return thisModel && thisModel.name !== 'puidocgentemplate' && thisModel.entity !== null && thisModel.withDocgen;
+		}
+	},
+	methods: {
+		getFavoriteActionsSavedAtServer(model) {
+			if (model && model.configurations && model.configurations.favactions) {
+				if (Array.isArray(model.configurations.favactions)) {
+					var config = model.configurations.favactions[0];
+					this.serverConfigId = config.id;
+					this.favoriteIds = config.configuration;
+				}
+			}
+			// Cargar acciones
+			this.loadActions();
+		},
+		isActionFavorite(action) {
+			if (this.favoriteIds) {
+				for (let i = 0, length = this.favoriteIds.length; i < length; i++) {
+					const actId = this.favoriteIds[i];
+					if (action.id === actId) {
+						return true;
+					}
+				}
+			}
+			return false;
+		},
+		loadActions() {
+			// crear el array de acciones para trabajar
+			for (let i = 0, length = this.actions.length; i < length; i++) {
+				const action = this.actions[i];
+				const decoratedAction = this.decorateAction(action);
+				this.internalActions.push(decoratedAction);
+			}
+			for (let j = 0, length = this.externalActions.length; j < length; j++) {
+				const extAction = this.externalActions[j];
+				const decoratedExtAction = this.decorateAction(extAction);
+				this.internalActions.push(decoratedExtAction);
+			}
+			for (let k = 0, length = this.generalActions.length; k < length; k++) {
+				const generalAction = this.generalActions[k];
+				if (this.insideForm && !generalAction.showInForm) {
+					continue;
+				}
+				if (this.showPuiCopyAction && generalAction.id === 'copyAction') {
+					const decoratedGeneralAction = this.decorateAction(generalAction);
+					this.internalActions.push(decoratedGeneralAction);
+				} else if (this.showPuiImportExportAction && (generalAction.id === 'puiImportAction' || generalAction.id === 'puiExportAction')) {
+					const decoratedGeneralAction = this.decorateAction(generalAction);
+					this.internalActions.push(decoratedGeneralAction);
+				} else if (this.showPuiDocgenAction && generalAction.id === 'puiDocgenAction') {
+					const decoratedGeneralAction = this.decorateAction(generalAction);
+					this.internalActions.push(decoratedGeneralAction);
+				} else if (generalAction.id === 'puiAuditAction') {
+					const decoratedGeneralAction = this.decorateAction(generalAction);
+					this.internalActions.push(decoratedGeneralAction);
+				}
+			}
+		},
+		decorateAction(action) {
+			var actionImprovements = {
+				runnable: true,
+				disabled: false,
+				favorite: this.isActionFavorite(action)
+			};
+			return Object.assign(actionImprovements, action);
+		},
+		showSubPanel() {
+			if (!this.states.applied) {
+				this.validateActions();
+				this.states.active = !this.states.active;
+			}
+		},
+		validateActions() {
+			for (let i = 0, length = this.internalActions.length; i < length; i++) {
+				const action = this.internalActions[i];
+				if (action.selectionType === 'single') {
+					var enable = action.checkAvailability.call(this, this.selectedRows);
+					if (this.selectedRows.length === 1 && enable) {
+						action.runnable = true;
+					} else {
+						action.runnable = false;
+					}
+				} else if (action.selectionType === 'multiple') {
+					action.runnable = true;
+				} else if (action.selectionType === 'general') {
+					action.runnable = true;
+				}
+			}
+		},
+		saveFavoriteActionsSelected() {
+			var saveInStore = obj => {
+				this.$store.commit('saveFavsAction', obj);
+			};
+			var favIds = [];
+			for (let i = 0, length = this.internalActions.length; i < length; i++) {
+				const action = this.internalActions[i];
+				if (action.favorite) {
+					favIds.push(action.id);
+				}
+			}
+			var usr = this.sessionUser;
+			var modelName = this.modelName;
+			var favIdsStr = JSON.stringify(favIds);
+			var me = this;
+			var messageError = this.$t('messageError');
+			var titleError = this.$t('titleError');
+			if (this.serverConfigId === null) {
+				var controllerInsert = this.controller + '/insert';
+				var paramsInsert = {
+					configuration: favIdsStr,
+					model: modelName,
+					type: 'favactions',
+					usr: usr
+				};
+				this.$puiRequests.postRequest(
+					controllerInsert,
+					paramsInsert,
+					response => {
+						const data = response.data;
+						data.configuration = JSON.parse(data.configuration);
+						me.serverConfigId = data.id;
+						saveInStore({ model: modelName, data: data });
+					},
+					err => {
+						if (err) {
+							this.$puiNotify.error(messageError, titleError);
+						}
+					}
+				);
+			} else {
+				var controllerUpdate = this.controller + '/update';
+				var paramsUpdate = {
+					configuration: favIdsStr,
+					model: modelName,
+					id: this.serverConfigId,
+					type: 'favactions',
+					usr: usr
+				};
+				this.$puiRequests.putRequest(
+					controllerUpdate,
+					paramsUpdate,
+					response => {
+						const data = response.data;
+						data.configuration = JSON.parse(data.configuration);
+						saveInStore({ model: modelName, data: data });
+					},
+					err => {
+						if (err) {
+							this.$puiNotify.error(messageError, titleError);
+						}
+					}
+				);
+			}
+		}
+	},
+	created() {
+		this.sessionUser = this.$store.getters.getUser;
+		this.generalActions = generalActions.actions;
+		// añadir las acciones externas
+		this.$puiEvents.$emit(`onPui-action-get-externals-${this.modelName}`, { actions: this.externalActions });
+		// estados del botón principal de acciones
+		this.$puiEvents.$on(`onPui-action-before-running-${this.modelName}`, obj => {
+			this.states.active = false;
+			this.states.applied = true;
+			this.label = this.$t(obj.action.label);
+		});
+		this.$puiEvents.$on(`onPui-action-running-ended-${this.modelName}`, () => {
+			this.states.active = false;
+			this.states.applied = false;
+			this.label = '';
+		});
+		this.$puiEvents.$on(`onPui-action-running-cancelled-${this.modelName}`, () => {
+			this.states.active = false;
+			this.states.applied = false;
+			this.label = '';
+		});
+		// trabajar con las acciones favoritas
+		this.$puiEvents.$on('onPui-action-set-favorite-' + this.modelName, obj => {
+			var actId = obj.action.id;
+			for (let i = 0, length = this.internalActions.length; i < length; i++) {
+				const theaction = this.internalActions[i];
+				if (theaction.id === actId) {
+					theaction.favorite = true;
+					break;
+				}
+			}
+			this.$puiEvents.$emit('onPui-action-refresh-favorites-' + this.modelName);
+			this.saveFavoriteActionsSelected();
+		});
+		this.$puiEvents.$on('onPui-action-unset-favorite-' + this.modelName, obj => {
+			var actId = obj.action.id;
+			for (let i = 0, length = this.internalActions.length; i < length; i++) {
+				const theaction = this.internalActions[i];
+				if (theaction.id === actId) {
+					theaction.favorite = false;
+					break;
+				}
+			}
+			this.$puiEvents.$emit('onPui-action-refresh-favorites-' + this.modelName);
+			this.saveFavoriteActionsSelected();
+		});
+		// gestion de elementos seleccionados
+		this.$puiEvents.$on(`onPui-selectItem-dataTable-${this.modelName}`, selectedRows => {
+			this.selectedRows = selectedRows.map(row => {
+				return Object.values(row)[0];
+			});
+		});
+		this.$puiEvents.$on(`onPui-clearSelection-dataTable-${this.modelName}`, () => {
+			this.selectedRows = [];
+		});
+		this.$puiEvents.$on(`onPui-form-afterGetData-${this.modelName}`, selectedModel => {
+			this.selectedRows = [selectedModel];
+		});
+
+		const model = this.$store.getters.getModelByName(this.modelName);
+
+		this.showPuiCopyAction = model.defaultConfiguration.actionCopy && this.$store.getters.hasFunctionality(model.functionalities.insert);
+		this.showPuiImportExportAction = model && model.defaultConfiguration.actionImportExport;
+		if (this.showPuiImportExportAction) {
+			this.importExportModelName = `${model.name}_importexport`;
+			const modelImportExport = Object.assign({}, model);
+			modelImportExport.name = this.importExportModelName;
+			this.$store.commit('puiModelsAddModel', modelImportExport);
+		}
+		this.getFavoriteActionsSavedAtServer(model);
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-action-before-running-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-action-running-ended-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-action-running-cancelled-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-action-set-favorite-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-action-unset-favorite-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-selectItem-dataTable-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-clearSelection-dataTable-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-form-afterGetData-${this.modelName}`);
+	}
+};

package/src/mixins/PuiActionsDialogMixin.js

@@ -0,0 +1,161 @@
+import PuiToolbarDialogMixin from './PuiToolbarDialogMixin';
+
+export default {
+	mixins: [PuiToolbarDialogMixin],
+	props: {
+		position: {
+			type: Object
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		visibility: {
+			type: Boolean,
+			default: true
+		},
+		actions: {
+			type: [Array],
+			default: () => {
+				return [];
+			},
+			required: false
+		},
+		insideForm: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			internalActions: {
+				all: [],
+				favorites: []
+			},
+			actionsAll: [],
+			actionsFavorites: [],
+			filteredActionsAll: [],
+			filteredActionsFavorites: [],
+			searchAll: '',
+			searchFav: '',
+			tabActive: 'tab2',
+			userFilterModelName: 'puiusermodelfilter',
+			firstLoad: true
+		};
+	},
+	created() {
+		this.$puiEvents.$on('onPui-action-refresh-favorites-' + this.modelName, () => {
+			this.loadRefreshActions();
+		});
+		//
+		this.loadRefreshActions();
+	},
+	mounted() {
+		this.calculatePosition();
+	},
+	beforeDestroy() {
+		this.$puiEvents.$off('onPui-action-refresh-favorites-' + this.modelName);
+	},
+	updated() {
+		this.calculatePosition();
+	},
+	computed: {
+		getPlaceholder() {
+			return this.$t('puidatatables.searchPlaceholder');
+		}
+	},
+	methods: {
+		loadRefreshActions() {
+			this.internalActions.all = [];
+			this.filteredActionsAll = [];
+			this.internalActions.favorites = [];
+			this.filteredActionsFavorites = [];
+
+			for (let i = 0, length = this.actions.length; i < length; i++) {
+				const action = this.actions[i];
+				const hasPermission = this.checkPermissionAction(action);
+				if (hasPermission) {
+					this.parseAction(action);
+				}
+			}
+		},
+		refreshFavorites() {
+			this.filteredActionsFavorites = [];
+			for (let index = 0, length = this.filteredActionsAll.length; index < length; index++) {
+				const action = this.filteredActionsAll[index];
+				if (action.favorite) {
+					this.filteredActionsFavorites.push(action);
+				}
+			}
+		},
+		parseAction(action) {
+			this.internalActions.all.push(action);
+			this.filteredActionsAll.push(action);
+			if (action.favorite) {
+				this.internalActions.favorites.push(action);
+				this.filteredActionsFavorites.push(action);
+			}
+		},
+		checkPermissionAction(action) {
+			const session = this.$store.getters.getSession;
+			if (session) {
+				const functionalities = session.functionalities;
+				if (functionalities && functionalities.length > 0) {
+					for (let index = 0, length = functionalities.length; index < length; index++) {
+						const func = functionalities[index];
+						if (action.functionality === null || func === action.functionality) {
+							return true;
+						}
+					}
+				}
+			}
+			return false;
+		},
+		resizeTabSlider() {
+			var self = this;
+			setTimeout(function () {
+				if (self.tabActive === 'tab1') {
+					self.$refs.tabs.sliderWidth = self.$refs.tab1.$el.offsetWidth;
+				}
+				if (self.tabActive === 'tab2') {
+					self.$refs.tabs.sliderWidth = self.$refs.tab2.$el.offsetWidth;
+					self.$refs.tabs.sliderLeft = self.$refs.tab1.$el.offsetWidth;
+				}
+			}, 100);
+		}
+	},
+	watch: {
+		visibility(val) {
+			// HACK GET STYLE FIRST TAB
+			if (val && this.firstLoad) {
+				this.firstLoad = false;
+				this.$refs.tabs.$emit('change', 'tab1');
+			}
+		},
+		tabActive() {
+			this.resizeTabSlider();
+		},
+		searchAll(val) {
+			if (val && val.length > 0) {
+				this.filteredActionsAll = this.internalActions.all.filter((action) => {
+					var title = this.$puiI18n.t(action.label);
+					return title.toUpperCase().match(val.toUpperCase());
+				});
+			} else {
+				this.filteredActionsAll = this.internalActions.all;
+			}
+			this.resizeTabSlider();
+		},
+		searchFav(val) {
+			if (val && val.length > 0) {
+				this.filteredActionsFavorites = this.internalActions.favorites.filter((action) => {
+					var title = this.$puiI18n.t(action.label);
+					return title.toUpperCase().match(val.toUpperCase());
+				});
+			} else {
+				this.filteredActionsFavorites = this.internalActions.favorites;
+			}
+			this.resizeTabSlider();
+		}
+	}
+};

package/src/mixins/PuiActionsListItemMixin.js

@@ -0,0 +1,62 @@
+export default {
+	props: {
+		action: {
+			type: Object,
+			required: true
+		},
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		getUniqueID() {
+			return `${this.action.id}-${this.modelName}`;
+		},
+		isSingleAction() {
+			return this.action.selectionType === 'single';
+		},
+		isMultipleAction() {
+			return this.action.selectionType === 'multiple';
+		},
+		isGeneralAction() {
+			return this.action.selectionType === 'general';
+		},
+		isLockedAction() {
+			return !this.action.runnable;
+		},
+		isFavoriteAction() {
+			return this.action.favorite;
+		},
+		getTranslatedLabel() {
+			var xlabel = this.$puiI18n.t(this.action.label);
+			return xlabel;
+		},
+		getCompClass() {
+			return { 'puiGridActionListItem--locked': !this.action.runnable };
+		}
+	},
+	methods: {
+		selectItem() {
+			if (this.action.runnable) {
+				var obj = {
+					action: this.action,
+					modelName: this.modelName
+				};
+				this.$puiEvents.$emit(`onPui-action-before-running-${this.modelName}`, obj);
+			}
+		},
+		setFavorite() {
+			var obj = {
+				action: this.action
+			};
+			this.$puiEvents.$emit(`onPui-action-set-favorite-${this.modelName}`, obj);
+		},
+		unsetFavorite() {
+			var obj = {
+				action: this.action
+			};
+			this.$puiEvents.$emit(`onPui-action-unset-favorite-${this.modelName}`, obj);
+		}
+	}
+};

package/src/mixins/PuiDatatablesKeepPage.js

@@ -0,0 +1,15 @@
+export default () => ({
+	beforeRouteLeave(to, from, next) {
+		const comeFrom = this.$puiUtils.getModelFromRouter(from);
+		const goTo = this.$puiUtils.getModelFromRouter(to);
+		if (comeFrom != goTo && !to.fullPath.includes('/' + comeFrom) && (!this.parentModelName || this.parentModelName !== goTo)) {
+			// Delete grid pagination when not matching models in route
+			const currentConfig = this.$store.getters.getCurrentGridConfiguration(this.modelName);
+			if (currentConfig) {
+				currentConfig.page = 1;
+				this.$store.commit('puiModelsSetCurrentGridConfiguration', { model: this.modelName, configuration: currentConfig });
+			}
+		}
+		next();
+	}
+});

package/src/mixins/PuiGridFormMethodsMixin.js

@@ -0,0 +1,133 @@
+export default {
+	data() {
+		return {
+			rules: {
+				required: value => !!value || this.$t('pui9.error.field_required')
+			},
+			valid: true,
+			formDisabled: false,
+			urlParam: null,
+			modelsLoaded: false,
+			modelLoaded: false,
+			model: {}
+		};
+	},
+	props: {
+		pk: {
+			type: [Object, String]
+		}
+	},
+	computed: {
+		isCreatingElement() {
+			return this.method === 'create';
+		},
+		onPuiModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	},
+	watch: {
+		modelsLoaded(val) {
+			val && this.onModelsLoaded();
+			val && this.onReady();
+		},
+		onPuiModelsLoadedAndSaved() {
+			this.modelsLoaded = true;
+		}
+	},
+	created() {
+		this.modelDependency = this.$store.getters.getModelByName(this.modelDependencyName);
+	},
+	mounted() {
+		if (this.modelDependency) {
+			this.onReady();
+		}
+	},
+	destroyed() {
+		this.$puiEvents.$emit(`onPuiFormDestroyed-${this.modelDependencyName}`);
+	},
+	methods: {
+		save() {
+			this.beforeSave && this.beforeSave();
+			if (this.$refs.form && this.$refs.form.validate && !this.$refs.form.validate()) {
+				this.$puiNotify.error(this.$t('pui9.error.form_errors'));
+				return;
+			}
+
+			if (this.method === 'update') {
+				this.update(this.modelDependency.url.update);
+			} else {
+				this.insert(this.modelDependency.url.insert);
+			}
+		},
+		update(url) {
+			this.$puiRequests.putRequest(
+				url,
+				this.model,
+				response => {
+					this.$puiEvents.$emit(`onPui-updateRow-dataTable-${this.modelDependency.name}`, response.data);
+					this.afterSave && this.afterSave(response.data);
+				},
+				error => {
+					this.onSaveError && this.onSaveError();
+					this.onError(error);
+				}
+			);
+		},
+		insert(url) {
+			this.$puiRequests.postRequest(
+				url,
+				this.model,
+				response => {
+					this.$puiEvents.$emit(`onPui-insertRow-dataTable-${this.modelDependency.name}`, response.data);
+					this.afterSave && this.afterSave(response.data);
+				},
+				error => {
+					this.onSaveError && this.onSaveError();
+					this.onError(error);
+				}
+			);
+		},
+		onReady() {
+			var pk;
+
+			let param = null;
+			if (this.pk && this.pk !== 'new') {
+				pk = JSON.parse(this.$puiUtils.b64ToUtf8(this.pk));
+				param =
+					'?' +
+					Object.keys(pk)
+						.map(function(prop) {
+							return [prop, pk[prop]].map(encodeURIComponent).join('=');
+						})
+						.join('&');
+
+				if (this.method === 'read') {
+					this.formDisabled = true;
+				}
+			}
+			this.getData(param);
+		},
+		onModelsLoaded() {
+			if (!this.modelDependency) {
+				this.modelDependency = this.$store.getters.getModelByName(this.modelDependencyName);
+			}
+			const controller = this.modelDependency.url.template;
+			this.model = this.$puiRequests.getRequest(
+				controller,
+				null,
+				response => {
+					if (response && response.data) {
+						var data = response.data;
+						this.model = data;
+					}
+				},
+				error => {
+					this.onError(error);
+				}
+			);
+		},
+		onError(error) {
+			this.$store.dispatch('puiRequestShowServerError', { error });
+		}
+	}
+};

package/src/mixins/PuiModelConfigurationMixin.js

@@ -0,0 +1,15 @@
+export default {
+	methods: {
+		cloneConfiguration(gridConfiguration) {
+			const newGridConfiguration = Object.assign({}, gridConfiguration);
+			newGridConfiguration.configuration = Object.assign({}, gridConfiguration.configuration);
+			const columns = [];
+			const order = [];
+			newGridConfiguration.configuration.order && newGridConfiguration.configuration.order.forEach(sortingRule => order.push(sortingRule));
+			newGridConfiguration.configuration.order = order;
+			newGridConfiguration.configuration.columns && newGridConfiguration.configuration.columns.forEach(column => columns.push(column));
+			newGridConfiguration.configuration.columns = columns;
+			return newGridConfiguration;
+		}
+	}
+};