pui9-datatables 1.16.4

package/src/components/desktop/datatables.net-plugins/pagination/input.js

@@ -0,0 +1,213 @@
+/**
+ * Sometimes for quick navigation, it can be useful to allow an end user to
+ * enter which page they wish to jump to manually. This paging control uses a
+ * text input box to accept new paging numbers (arrow keys are also allowed
+ * for), and four standard navigation buttons are also presented to the end
+ * user.
+ *
+ *  @name Navigation with text input
+ *  @summary Shows an input element into which the user can type a page number
+ *  @author [Allan Jardine](http://sprymedia.co.uk)
+ *  @author [Gordey Doronin](http://github.com/GDoronin)
+ *
+ *  @author [Miguel Llacer]
+ *  Adaptation from the original Datatables pagination input plug-in for using
+ *  with VueJS (https://datatables.net/plug-ins/pagination/input)
+ *
+ */
+
+var firstClassName = 'first';
+var previousClassName = 'previous';
+var nextClassName = 'next';
+var lastClassName = 'last';
+
+var paginateClassName = 'paginate';
+var paginateInputClassName = 'paginate_input';
+
+import $ from 'jquery';
+
+/* eslint-disable */
+$.fn.dataTableExt.oPagination.input = {
+	fnInit: function(oSettings, nPaging, fnCallbackDraw) {
+		var nFirst = document.createElement('span');
+		var nPrevious = document.createElement('span');
+		var nNext = document.createElement('span');
+		var nLast = document.createElement('span');
+		var nInput = document.createElement('input');
+
+		var language = oSettings.oLanguage.oPaginate;
+		var classes = oSettings.oClasses;
+
+		nFirst.innerHTML = language.sFirst;
+		nPrevious.innerHTML = language.sPrevious;
+		nNext.innerHTML = language.sNext;
+		nLast.innerHTML = language.sLast;
+
+		nFirst.className = firstClassName + ' ' + classes.sPageButton;
+		nPrevious.className = previousClassName + ' ' + classes.sPageButton;
+		nNext.className = nextClassName + ' ' + classes.sPageButton;
+		nLast.className = lastClassName + ' ' + classes.sPageButton;
+
+		nInput.className = paginateInputClassName;
+
+		if (oSettings.sTableId !== '') {
+			nPaging.setAttribute('id', oSettings.sTableId + '_' + paginateClassName);
+			nFirst.setAttribute('id', oSettings.sTableId + '_' + firstClassName);
+			nPrevious.setAttribute('id', oSettings.sTableId + '_' + previousClassName);
+			nNext.setAttribute('id', oSettings.sTableId + '_' + nextClassName);
+			nLast.setAttribute('id', oSettings.sTableId + '_' + lastClassName);
+		}
+
+		nInput.type = 'text';
+
+		nPaging.appendChild(nFirst);
+		nPaging.appendChild(nPrevious);
+		nPaging.appendChild(nInput);
+		nPaging.appendChild(nNext);
+		nPaging.appendChild(nLast);
+
+		$(nFirst).click(function() {
+			var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
+			if (iCurrentPage !== 1) {
+				oSettings.oApi._fnPageChange(oSettings, 'first');
+				fnCallbackDraw(oSettings);
+			}
+		});
+
+		$(nPrevious).click(function() {
+			var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
+			if (iCurrentPage !== 1) {
+				oSettings.oApi._fnPageChange(oSettings, 'previous');
+				fnCallbackDraw(oSettings);
+			}
+		});
+
+		$(nNext).click(function() {
+			var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
+			if (iCurrentPage !== Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)) {
+				oSettings.oApi._fnPageChange(oSettings, 'next');
+				fnCallbackDraw(oSettings);
+			}
+		});
+
+		$(nLast).click(function() {
+			var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
+			if (iCurrentPage !== Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)) {
+				oSettings.oApi._fnPageChange(oSettings, 'last');
+				fnCallbackDraw(oSettings);
+			}
+		});
+
+		$(nInput).keyup(function(e) {
+			// 38 = up arrow, 39 = right arrow
+			if (e.which === 38 || e.which === 39) {
+				this.value++;
+			}
+			// 37 = left arrow, 40 = down arrow
+			else if ((e.which === 37 || e.which === 40) && this.value > 1) {
+				this.value--;
+			}
+
+			if (this.value === '' || this.value.match(/[^0-9]/)) {
+				/* Nothing entered or non-numeric character */
+				this.value = this.value.replace(/[^\d]/g, ''); // don't even allow anything but digits
+				return;
+			}
+
+			var iNewStart = oSettings._iDisplayLength * (this.value - 1);
+			if (iNewStart < 0) {
+				iNewStart = 0;
+			}
+			if (iNewStart >= oSettings.fnRecordsDisplay()) {
+				iNewStart = (Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
+			}
+
+			oSettings._iDisplayStart = iNewStart;
+			fnCallbackDraw(oSettings);
+		});
+
+		// Take the brutal approach to cancelling text selection.
+		$('span', nPaging).bind('mousedown', function() {
+			return false;
+		});
+		$('span', nPaging).bind('selectstart', function() {
+			return false;
+		});
+
+		// If we can't page anyway, might as well not show it.
+		var iPages = Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength);
+		if (iPages <= 1) {
+			$(nPaging).hide();
+		}
+	},
+
+	fnUpdate: function(oSettings) {
+		if (!oSettings.aanFeatures.p) {
+			return;
+		}
+
+		var iPages = Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength);
+		var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
+
+		var an = oSettings.aanFeatures.p;
+		if (iPages <= 1) {
+			// hide paging when we can't page
+			$(an).hide();
+			return;
+		}
+
+		var calcDisableClasses = function(oSettings) {
+			var start = oSettings._iDisplayStart;
+			var length = oSettings._iDisplayLength;
+			var visibleRecords = oSettings.fnRecordsDisplay();
+			var all = length === -1;
+
+			// Gordey Doronin: Re-used this code from main jQuery.dataTables source code. To be consistent.
+			var page = all ? 0 : Math.ceil(start / length);
+			var pages = all ? 1 : Math.ceil(visibleRecords / length);
+
+			var disableFirstPrevClass = page > 0 ? '' : oSettings.oClasses.sPageButtonDisabled;
+			var disableNextLastClass = page < pages - 1 ? '' : oSettings.oClasses.sPageButtonDisabled;
+
+			return {
+				first: disableFirstPrevClass,
+				previous: disableFirstPrevClass,
+				next: disableNextLastClass,
+				last: disableNextLastClass
+			};
+		};
+
+		var disableClasses = calcDisableClasses(oSettings);
+
+		$(an).show();
+
+		// Enable/Disable `first` button.
+		$(an)
+			.children('.' + firstClassName)
+			.removeClass(oSettings.oClasses.sPageButtonDisabled)
+			.addClass(disableClasses[firstClassName]);
+
+		// Enable/Disable `prev` button.
+		$(an)
+			.children('.' + previousClassName)
+			.removeClass(oSettings.oClasses.sPageButtonDisabled)
+			.addClass(disableClasses[previousClassName]);
+
+		// Enable/Disable `next` button.
+		$(an)
+			.children('.' + nextClassName)
+			.removeClass(oSettings.oClasses.sPageButtonDisabled)
+			.addClass(disableClasses[nextClassName]);
+
+		// Enable/Disable `last` button.
+		$(an)
+			.children('.' + lastClassName)
+			.removeClass(oSettings.oClasses.sPageButtonDisabled)
+			.addClass(disableClasses[lastClassName]);
+
+		// Current page numer input value
+		$(an)
+			.children('.' + paginateInputClassName)
+			.val(iCurrentPage);
+	}
+};

package/src/components/desktop/footer/PuiDatatableFooter.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="pa-1 pl-3 pr-3 elevation-2" :class="getComp">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiDatatableFooter',
+	data: () => ({
+		isMobile: false,
+		desktopMenuOpened: false
+	}),
+	computed: {
+		getComp() {
+			return {
+				'pui-datatableFooter--menuexpanded': this.desktopMenuOpened,
+				'pui-datatableFooter': !this.isMobile,
+				'pui-datatableFooter_mobile': this.isMobile
+			};
+		},
+		onPuiExpandMenu() {
+			return this.$store.state.menu.expandMenuForce;
+		}
+	},
+	watch: {
+		onPuiExpandMenu() {
+			this.desktopMenuOpened = this.$store.state.menu.expandMenu;
+		}
+	},
+	created() {
+		this.isMobile = this.$store.getters.isMobile;
+		this.desktopMenuOpened = this.$store.state.menu.expanded === true;
+	},
+	mounted() {
+		if (this.isMobile) {
+			const nav = document.getElementsByClassName('puimenubottombar');
+			const actionFooter = document.getElementsByClassName('pui-datatableFooter_mobile')[0];
+			if (nav.length !== 0) actionFooter.style.marginBottom = nav[0].offsetHeight + 'px';
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.pui-datatableFooter {
+	position: fixed;
+	background-color: var(--N-0);
+	bottom: 0px;
+	width: calc(100% - 64px);
+	z-index: 100;
+	&--menuexpanded {
+		width: calc(100% - 304px);
+	}
+}
+.pui-datatableFooter_mobile {
+	position: fixed;
+	background-color: var(--N-0);
+	bottom: 0px;
+	width: 100%;
+	z-index: 100;
+	margin-left: -4px !important;
+	box-shadow: none !important;
+}
+</style>

package/src/components/desktop/footer/PuiGridActionFooter.vue

@@ -0,0 +1,132 @@
+<template>
+	<pui-datatable-footer class="pui-gridActionFooter">
+		<v-layout align-center justify-space-between:fill-height="!isMobile">
+			<v-btn text outlined @click.native="back()">{{ this.$t('form.cancel') }}</v-btn>
+			<div>
+				<p v-if="!showCurrentFilterDialog && !isMobile" class="ml-2 pui-gridActionFooter_message">
+					{{ this.$t('puidatatables.selectmulti') }}
+				</p>
+			</div>
+			<v-spacer></v-spacer>
+			<v-btn v-if="isAplicableToCurrentFilter" depressed color="secondary" class="elevation-0" @click.native="showCurrentFilterDialog = true">{{
+				isMobile ? this.$t('puidatatables.applytocurrentfiltermobile') : this.$t('puidatatables.applytocurrentfilter')
+			}}</v-btn>
+			<v-btn :disabled="isDisabled" depressed color="secondary" class="elevation-0" @click.native="runAction()">{{
+				isMobile ? this.$t('puidatatables.applyactionmobile') : this.$t('puidatatables.applyActionToSelected')
+			}}</v-btn>
+		</v-layout>
+		<pui-modal-dialog
+			v-if="showCurrentFilterDialog"
+			:cancelText="$t('form.cancel')"
+			:okText="$t('pui9.accept')"
+			:titleText="$t('puidatatables.applytocurrentfilter')"
+			:messageText="$t('puidatatables.applytocurrentfilter.message')"
+			:dialogName="`applyToCurrentFilter-${this.modelName}`"
+		></pui-modal-dialog>
+	</pui-datatable-footer>
+</template>
+
+<script>
+import PuiDatatableFooter from './PuiDatatableFooter';
+
+export default {
+	name: 'PuiGridActionFooter',
+	components: {
+		PuiDatatableFooter
+	},
+	props: {
+		modelName: {
+			type: String
+		},
+		action: {
+			type: Object,
+			required: false
+		},
+		registries: {
+			type: Array,
+			required: false
+		}
+	},
+	data() {
+		return {
+			showCurrentFilterDialog: false,
+			isMobile: false
+		};
+	},
+	computed: {
+		isDisabled() {
+			if (this.registries && this.registries.length > 0) {
+				return false;
+			}
+			return true;
+		},
+		isAplicableToCurrentFilter() {
+			if (this.action && this.action.applicableToCurrentFilter) {
+				return true;
+			}
+			return false;
+		}
+	},
+	created() {
+		this.isMobile = this.$store.getters.isMobile;
+	},
+	mounted() {
+		this.$puiEvents.$on(`pui-modalDialog-applyToCurrentFilter-${this.modelName}-ok`, () => {
+			this.runActionWithCurrentFilter();
+			this.showCurrentFilterDialog = false;
+		});
+		this.$puiEvents.$on(`pui-modalDialog-applyToCurrentFilter-${this.modelName}-cancel`, () => {
+			this.showCurrentFilterDialog = false;
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-modalDialog-applyToCurrentFilter-${this.modelName}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-applyToCurrentFilter-${this.modelName}-cancel`);
+	},
+	methods: {
+		runAction() {
+			this.$puiEvents.$emit(`onPui-action-running-${this.modelName}`);
+			const model = this.$store.getters.getModelByName(this.modelName);
+			const selectedRows = this.registries.map((registries) => {
+				return Object.values(registries)[0];
+			});
+			this.action.runAction.call(this, this.action, model, selectedRows);
+		},
+		runActionWithCurrentFilter() {
+			this.$puiEvents.$emit(`onPui-action-running-${this.modelName}`);
+			const model = this.$store.getters.getModelByName(this.modelName);
+			const parameters = this.getParameters();
+			this.action.runAction.call(this, this.action, model, null, parameters);
+		},
+		getParameters() {
+			const currentSearch = this.$parent.$parent.getCurrentSearch();
+			let queryText = '';
+			let queryFields = [];
+			if (currentSearch !== undefined && currentSearch !== null) {
+				queryText = currentSearch[0];
+				queryFields = currentSearch[1].map((field) => {
+					return field.name;
+				});
+			}
+			return {
+				queryText: queryText,
+				queryFields: queryFields,
+				queryLang: this.$store.getters.getUserLanguage,
+				filter: this.$parent.$parent.getCurrentFilter(),
+				order: this.$parent.$parent.getCurrentSorting()
+			};
+		},
+		back() {
+			this.$puiEvents.$emit(`onPui-action-running-cancelled-${this.modelName}`);
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.pui-gridActionFooter {
+	&_message {
+		margin-bottom: 0px !important;
+	}
+}
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+	<div>
+		<div ref="btn">
+			<v-btn class="elevation-0 pui-toolbar__btn pui-toolbar__actionBtn" @click.native.stop="states.active = !states.active">
+				<v-icon class="pr-3" small>fa fa-file-export</v-icon>
+				<v-icon v-if="!states.active" small>fa fa-angle-down</v-icon>
+				<v-icon v-else small>fa fa-angle-up</v-icon>
+			</v-btn>
+		</div>
+		<div v-show="states.active" class="pui-dialog--export elevation-5 pl-0 pr-0" :ref="'dialog'" @click.stop>
+			<v-layout wrap class="mb-1">
+				<v-list>
+					<v-list-item
+						v-for="format in formats"
+						:key="format.extension"
+						@click="exportData(format)"
+						tabindex="0"
+						@keydown.native.enter="exportData(format)"
+					>
+						<v-list-item-action>
+							<v-icon style="font-size: 16px">{{ `fa fa-${format.icon}` }}</v-icon>
+						</v-list-item-action>
+
+						<v-list-item-content>
+							<v-list-item-title v-text="`${$t('puidatatables.export_to')} ${format.name}`"></v-list-item-title>
+						</v-list-item-content>
+					</v-list-item>
+				</v-list>
+			</v-layout>
+		</div>
+	</div>
+</template>
+
+<script>
+import PuiToolbarBtnMixin from '../../../mixins/PuiToolbarBtnMixin';
+
+export default {
+	name: 'PuiQuickEditionExportBtn',
+	mixins: [PuiToolbarBtnMixin],
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		externalFilter: {
+			type: Object
+		}
+	},
+	data() {
+		return {
+			idTool: 'export',
+			panel: {
+				position: {}
+			},
+			formats: {
+				pdf: {
+					name: 'PDF',
+					type: 'direct',
+					extension: '.pdf',
+					icon: 'file-pdf'
+				},
+				csv: {
+					name: 'CSV',
+					type: 'direct',
+					extension: '.csv',
+					icon: 'file-csv'
+				},
+				excel: {
+					name: 'Excel',
+					type: 'direct',
+					extension: '.xls',
+					icon: 'file-excel'
+				}
+			}
+		};
+	},
+	mounted() {
+		this.calculateDialogPosition();
+		this.$puiEvents.$on(`onPui-apply-sorting-dataTable-${this.modelName}`, (sortingRule) => {
+			this.externalOrder = sortingRule;
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-sorting-dataTable-${this.modelName}`);
+	},
+	methods: {
+		exportData(format) {
+			this.$puiNotify.info(this.$t('puidatatables.downloading'));
+			const currentConfiguration = this.$store.getters.getCurrentGridConfiguration(this.modelName);
+			const currentColumns = currentConfiguration.configuration.columns
+				.filter((column) => {
+					return column.visible === undefined || column.visible === true || column.visibility === 'visible';
+				})
+				.map((column, index) => {
+					let dateformat = this.$store.getters.javaDateFormat;
+					if (
+						!(
+							this.$parent.$parent.modelColumnDefs &&
+							this.$parent.$parent.modelColumnDefs[column.name] &&
+							this.$parent.$parent.modelColumnDefs[column.name].withoutHours
+						)
+					) {
+						dateformat += ' ' + this.$store.getters.timeFormat;
+					}
+					return {
+						order: index,
+						title: this.$t(column.title),
+						name: column.name,
+						dateformat: dateformat
+					};
+				});
+			const currentFilter = this.externalFilter;
+			const currentOrder = this.externalOrder || currentConfiguration.configuration.order;
+
+			this.$puiRequests.downloadFileRequest(
+				'post',
+				`/${this.modelName}/export`,
+				{
+					model: this.modelName,
+					exportTitle: this.$t(this.modelName),
+					exportType: format.name.toLowerCase(),
+					exportColumns: currentColumns,
+					filter: currentFilter,
+					order: currentOrder,
+					queryFlexible: false,
+					queryLang: this.$store.getters.getUserLanguage
+				},
+				(response) => {
+					const link = document.createElement('a');
+					link.href = window.URL.createObjectURL(new window.Blob([response.data]));
+					link.download = this.$puiUtils.getFilenameFromHeaders(response.headers);
+					link.click();
+				}
+			);
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+	<v-form v-model="valid" lazy-validation :ref="quickEditionForm">
+		<v-layout wrap>
+			<v-flex xs12>
+				<component
+					v-if="formComponent && formModel"
+					:is="formComponent"
+					:model="formModel"
+					:formDisabled="formDisabled"
+					:parentModel="parentModel"
+				/>
+			</v-flex>
+		</v-layout>
+	</v-form>
+</template>
+
+<script>
+export default {
+	name: 'PuiQuickEditionForm',
+	data() {
+		return {
+			valid: true,
+			quickEditionForm: `${this.modelName}_quickeditionform`
+		};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		formComponent: {
+			type: String,
+			required: true
+		},
+		formModel: {
+			type: Object,
+			required: true
+		},
+		formDisabled: {
+			type: Boolean,
+			required: true
+		},
+		parentModel: {
+			type: Object
+		}
+	},
+	mounted() {
+		this.$puiEvents.$on(`onPui-quickEditionForm-${this.modelName}-validate`, () => {
+			if (this.$refs[this.quickEditionForm] && this.$refs[this.quickEditionForm].validate && !this.$refs[this.quickEditionForm].validate()) {
+				this.$puiEvents.$emit(`pui-modalDialog-saveRegistry-${this.modelName}-validate`, false);
+			} else {
+				this.$puiEvents.$emit(`pui-modalDialog-saveRegistry-${this.modelName}-validate`, true);
+			}
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-quickEditionForm-${this.modelName}-validate`);
+	}
+};
+</script>