pui9-datatables 1.16.4

package/src/components/desktop/quickedition/PuiQuickEditionToolbar.vue

@@ -0,0 +1,144 @@
+<template>
+	<div>
+		<v-layout ml-3 mr-3>
+			<pui-quick-edition-export-btn
+				v-if="showPuiGridExportBtn"
+				:modelName="modelName"
+				:externalFilter="externalFilter"
+			></pui-quick-edition-export-btn>
+			<v-btn
+				v-if="!formDisabled"
+				icon
+				class="elevation-0 pui-toolbar__actionBtn white--text primary"
+				:class="compClass"
+				:title="$t('puigridinsert.title')"
+				@click.native.stop="onSave"
+				style="margin-right: 5px !important"
+			>
+				<v-icon>far fa-save</v-icon>
+			</v-btn>
+			<v-btn
+				v-if="!formDisabled"
+				icon
+				class="elevation-0 pui-toolbar__actionBtn white--text secondary"
+				:class="compClass"
+				:title="$t('puigriddelete.title')"
+				@click.native.stop="onDelete"
+				style="margin-right: 5px !important"
+			>
+				<v-icon>far fa-trash-alt</v-icon>
+			</v-btn>
+		</v-layout>
+		<pui-modal-dialog
+			v-if="showSaveRegistryDialog"
+			:cancelText="$t('form.cancel')"
+			:okText="$t('pui9.accept')"
+			:titleText="getTitleSaveDialog()"
+			:messageText="getMessageSaveDialog()"
+			:dialogName="`saveRegistry-${this.modelName}`"
+		></pui-modal-dialog>
+	</div>
+</template>
+
+<script>
+import PuiQuickEditionExportBtn from './PuiQuickEditionExportBtn';
+
+export default {
+	name: 'PuiQuickEditionToolbar',
+	components: {
+		PuiQuickEditionExportBtn
+	},
+	data() {
+		return {
+			showPuiGridExportBtn: false,
+			showSaveRegistryDialog: false
+		};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		formDisabled: {
+			type: Boolean,
+			required: true
+		},
+		showSaveModal: {
+			type: Object,
+			required: false
+		},
+		externalFilter: {
+			type: Object,
+			required: false
+		},
+		exportable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		compClass() {
+			return this.$store.getters.isMobile ? 'pui-toolbar__actionBtn--mobile' : 'pui-toolbar__actionBtn--desktop';
+		}
+	},
+	created() {
+		const model = this.$store.getters.getModelByName(this.modelName);
+		if (model) {
+			this.showPuiGridExportBtn = this.exportable && model.url && model.url.export;
+		}
+	},
+	mounted() {
+		this.subscribeEvents();
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-modalDialog-saveRegistry-${this.modelName}-validate`);
+		this.$puiEvents.$off(`pui-modalDialog-saveRegistry-${this.modelName}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-saveRegistry-${this.modelName}-cancel`);
+	},
+	methods: {
+		onSave() {
+			this.$puiEvents.$emit(`onPui-quickEditionForm-${this.modelName}-validate`);
+		},
+		onDelete() {
+			this.$puiEvents.$emit(`onPui-quickEditionForm-${this.modelName}-delete`);
+		},
+		subscribeEvents() {
+			// save registry validate form
+			this.$puiEvents.$on(`pui-modalDialog-saveRegistry-${this.modelName}-validate`, (valid) => {
+				if (!valid) {
+					this.$puiNotify.error(this.$t('pui9.error.form_errors'));
+				} else {
+					if (this.showSaveModal !== undefined && this.showSaveModal.indShow === true) {
+						this.showSaveRegistryDialog = true;
+					} else {
+						this.$puiEvents.$emit(`onPui-quickEditionForm-${this.modelName}-save`);
+					}
+				}
+			});
+			// save registry modal ok press
+			this.$puiEvents.$on(`pui-modalDialog-saveRegistry-${this.modelName}-ok`, () => {
+				this.$puiEvents.$emit(`onPui-quickEditionForm-${this.modelName}-save`);
+				this.showSaveRegistryDialog = false;
+			});
+			// save registry modal cancel press
+			this.$puiEvents.$on(`pui-modalDialog-saveRegistry-${this.modelName}-cancel`, () => {
+				this.showSaveRegistryDialog = false;
+			});
+		},
+		getMessageSaveDialog() {
+			if (this.showSaveModal.messageText !== undefined) {
+				return this.showSaveModal.messageText;
+			} else {
+				return this.$t('pui9.save.confirm');
+			}
+		},
+		getTitleSaveDialog() {
+			if (this.showSaveModal.titleText !== undefined) {
+				return this.showSaveModal.titleText;
+			} else {
+				return this.$t('pui9.save.title');
+			}
+		}
+	}
+};
+</script>

package/src/components/desktop/row/PuiGridRowActions.vue

@@ -0,0 +1,112 @@
+<template>
+	<div
+		class="pui-rowActions mr-2"
+		v-show="show"
+		@mouseover="(mouseInside = true), (show = true)"
+		@mouseout="mouseInside = false"
+		@mousewheel="handleScroll"
+	>
+		<v-btn icon @click.native.stop="onViewButton" class="pui-rowActions__btn">
+			<v-icon>far fa-eye</v-icon>
+		</v-btn>
+		<v-btn icon @click.native.stop="onEditButton" class="pui-rowActions__btn" v-if="showEditButton">
+			<v-icon>far fa-edit</v-icon>
+		</v-btn>
+		<v-btn icon @click.native.stop="onDeleteButton" class="pui-rowActions__btn" v-if="showDeleteButton">
+			<v-icon>far fa-trash-alt</v-icon>
+		</v-btn>
+		<!-- dialogo alerta borrado de registro -->
+		<pui-modal-dialog
+			v-if="showDeleteRegistryDialog"
+			:cancelText="$t('form.cancel')"
+			:okText="$t('pui9.accept')"
+			:titleText="$t('pui9.delete.title')"
+			:messageText="$t('pui9.delete.confirm')"
+			:dialogName="`deleteRecordAlert-${this.modelName}`"
+		></pui-modal-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiGridRowActions',
+	data() {
+		return {
+			show: false,
+			positionX: 32,
+			showDeleteRegistryDialog: false,
+			mouseInside: false
+		};
+	},
+	props: {
+		modelName: {
+			required: true,
+			type: String
+		},
+		mouseOut: {
+			type: Boolean
+		},
+		showEditButton: {
+			type: Boolean,
+			default: true
+		},
+		showDeleteButton: {
+			type: Boolean,
+			default: true
+		}
+	},
+	watch: {
+		mouseOut(newVal) {
+			if (this.mouseInside === true) {
+				return;
+			}
+			this.show = !newVal;
+		}
+	},
+	mounted() {
+		this.$el.style.right = `${this.positionX}px`;
+		this.$puiEvents.$on(`onPui-hoverRow-dataTable-${this.modelName}`, this.onHover);
+		this.$puiEvents.$on(`pui-modalDialog-deleteRecordAlert-${this.modelName}-ok`, () => {
+			this.$parent.deleteRegistry(this.row);
+			this.showDeleteRegistryDialog = false;
+		});
+		this.$puiEvents.$on(`pui-modalDialog-deleteRecordAlert-${this.modelName}-cancel`, () => {
+			this.showDeleteRegistryDialog = false;
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-modalDialog-deleteRecordAlert-${this.modelName}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-deleteRecordAlert-${this.modelName}-cancel`);
+		this.$puiEvents.$off(`onPui-hoverRow-dataTable-${this.modelName}`, this.onHover);
+	},
+	methods: {
+		handleScroll(e) {
+			this.show = false;
+			this.$parent.handleWheelRowActions(e);
+		},
+		onHover(hoverInfo) {
+			//TODO añadir clase de hover a la fila cuando se esta sobre el div de puiRowActions y quitar a la anterior fila
+			this.show = true;
+			this.positionY = hoverInfo.y + 30;
+			if (this.$store.state.global.appContainerHeader) {
+				this.positionY = this.positionY + 64;
+			}
+			this.row = hoverInfo.row;
+			this.$el.style.top = `${this.positionY}px`;
+		},
+		onViewButton() {
+			this.$parent.editRegistry(this.row, 'read');
+		},
+		onEditButton() {
+			if (this.$parent.isEditableRegistry(this.row.data())) {
+				this.$parent.editRegistry(this.row, 'update');
+			} else {
+				this.$parent.editRegistry(this.row, 'read');
+			}
+		},
+		onDeleteButton() {
+			this.showDeleteRegistryDialog = true;
+		}
+	}
+};
+</script>

package/src/components/desktop/subdialogs/PuiDatatableColumnMenu.vue

@@ -0,0 +1,186 @@
+<template>
+	<v-menu
+		transition="scale-transition"
+		v-model="headerContextMenu.opened"
+		absolute
+		:position-x="headerContextMenu.x"
+		:position-y="headerContextMenu.y"
+		:close-on-content-click="false"
+	>
+		<v-list>
+			<v-list-item
+				:class="{ 'v-list__tile--active': item.selected, 'white--text': item.selected }"
+				@click="item.click"
+				v-for="(item, index) in items"
+				:key="index"
+			>
+				<v-list-item-action>
+					<v-icon small :class="{ 'white--text': item.selected }">{{ item.icon }}</v-icon>
+				</v-list-item-action>
+				<v-list-item-content>
+					<v-list-item-title>{{ item.text }}</v-list-item-title>
+				</v-list-item-content>
+				<v-list-item-action>
+					<v-icon v-if="item.selected" small :class="{ 'white--text': item.selected }">check</v-icon>
+				</v-list-item-action>
+			</v-list-item>
+		</v-list>
+	</v-menu>
+</template>
+
+<script>
+import $ from 'jquery';
+
+export default {
+	name: 'PuiDatatableColumnMenu',
+	props: ['colHeader', 'modelName', 'fixed', 'grouped'],
+	data() {
+		return {
+			headerContextMenu: {
+				opened: false,
+				x: null,
+				y: null,
+				selectedColumnIndex: -1
+			},
+			headerActions: {
+				//sortColumnName: null,
+				//sortColumn: [-1, null],
+				groupColumn: -1,
+				fixedColumn: -1
+			}
+		};
+	},
+	computed: {
+		items() {
+			const selectedIndex = this.headerContextMenu.selectedColumnIndex;
+			const {
+				groupColumn,
+				//sortColumn: [sortIndex, sortDirection],
+				fixedColumn
+			} = this.headerActions;
+
+			return [
+				{
+					text: this.$t(selectedIndex === fixedColumn ? 'xDettachColumn' : 'xFixColumn'),
+					icon: selectedIndex === fixedColumn ? 'far fa-thumbtack' : 'fas fa-thumbtack',
+					click: () => {
+						let index = selectedIndex;
+						if (selectedIndex === fixedColumn) {
+							index = -1;
+							// eslint-disable-next-line
+							this.headerActions.fixedColumn = -1;
+						} else {
+							if (selectedIndex === 0) {
+								index = 1;
+							}
+							//desagrupamos si se fija una columna
+							this.headerActions.groupColumn !== -1 && this.$parent.setGroupColumn(-1);
+						}
+
+						this.$parent.pinColumnToLeft(index);
+						// eslint-disable-next-line
+						this.headerContextMenu.opened = false;
+					}
+				},
+				{
+					text: this.$t(selectedIndex === groupColumn ? 'xUngroupColumn' : 'xGroupColumn'),
+					icon: selectedIndex === groupColumn ? 'far fa-clone' : 'fas fa-clone',
+					click: () => {
+						let index = selectedIndex;
+						if (selectedIndex === groupColumn) {
+							index = -1;
+							// eslint-disable-next-line
+							this.headerActions.groupColumn = -1;
+						} else if (this.headerActions.fixedColumn !== -1) {
+							//desprendemos la columna fijada si la hubiera
+							this.$parent.pinColumnToLeft(-1);
+						} else {
+							// eslint-disable-next-line
+							this.headerActions.groupColumn = index;
+						}
+						this.$parent.setGroupColumn(index);
+						// eslint-disable-next-line
+						this.headerContextMenu.opened = false;
+					}
+				}
+			];
+		}
+	},
+	created() {
+		this.onTableCreated();
+	},
+	methods: {
+		onRightClick(ev, index) {
+			// prevents showing the native contextmenu
+			ev.preventDefault();
+			const wasOpened = this.headerContextMenu.opened === true;
+			// prettier-ignore
+			this.headerContextMenu.selectedColumnIndex = index;
+			this.headerContextMenu.opened = false;
+			this.headerContextMenu.x = ev.clientX;
+			this.headerContextMenu.y = ev.clientY;
+
+			this.$nextTick(() => {
+				setTimeout(
+					() => {
+						this.headerContextMenu.opened = true;
+					},
+					wasOpened ? 120 : 0
+				);
+			});
+		},
+		onClick(e) {
+			$(e.currentTarget).off('click.DT');
+			e.preventDefault();
+			e.stopPropagation();
+			const currentOrder = e.target.className.split('_')[1];
+			const direction = currentOrder === 'asc' ? 'desc' : 'asc';
+
+			if (this.grouped === true) {
+				this.$parent.orderInGroupedColumn(e.target.cellIndex, direction);
+				return;
+			}
+			const sortingRule = [];
+			this.$parent.applyOrder([[e.target.cellIndex, direction]], false);
+			sortingRule[0] = { column: this.$parent.getColumnName(e.target.cellIndex), direction };
+			this.$puiEvents.$emit(`onPui-apply-sorting-dataTable-${this.modelName}`, sortingRule);
+		},
+		onTableCreated() {
+			if (this.fixed === true) {
+				this.headerActions.fixedColumn = 1;
+				this.headerActions.groupColumn = -1;
+			} else if (this.grouped === true) {
+				this.headerActions.groupColumn = 1;
+				this.headerActions.fixedColumn = -1;
+			}
+			const addContextAndClickListeners = (th, index) => {
+				if (index === 0) {
+					return;
+				}
+				//to show the column context menu
+				th.addEventListener('contextmenu', (ev) => this.onRightClick(ev, index));
+				//to capture order event and notify the grid Configuration Manager and Sorting Dialog
+				const $th = $(th);
+				$th.off('click');
+				$th.on('click', this.onClick);
+				$th.on('keydown', (ev) => {
+					ev.keyCode === 13 && this.onClick(ev);
+				});
+			};
+
+			// Show contextmenu for each th
+			if (this.fixed === true) {
+				const fixedColumnHeader = this.colHeader.parent().parent().parent().find('.DTFC_LeftHeadWrapper');
+				addContextAndClickListeners(fixedColumnHeader.find('th')[1], 1);
+			}
+			[...this.colHeader.find('th')].forEach(addContextAndClickListeners);
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.v-list__tile__title {
+	font-size: 0.9rem;
+}
+</style>