pui9-datatables 1.16.4

package/src/components/mobile/PuiDatalist.vue

@@ -0,0 +1,477 @@
+<template>
+	<div>
+		<pui-list-toolbar v-if="ready" :columns="columns" :modelName="modelName" :showFilterListBtn="showFilterListBtn"></pui-list-toolbar>
+		<!-- list actions Master Detail-->
+		<v-layout v-if="masterDetail" wrap class="ml-3 mr-2 mb-2" ref="actionsInToolbarDetail">
+			<v-flex grow :class="getCompClass">
+				<pui-list-actions-btn :modelName="modelName" :actions="actions" insideForm v-if="showActions"></pui-list-actions-btn>
+			</v-flex>
+			<v-flex shrink class="pui-gridActionsBtn text-center">
+				<v-btn
+					v-if="showPuiGridCreateBtn"
+					:id="`gridlistbtn-create-${modelName}`"
+					icon
+					class="ml-2 elevation-0 pui-toolbar__actionBtn pui-toolbar__actionBtn--mobile"
+					color="primary"
+					@click.native="onCreate()"
+				>
+					<v-icon>far fa-plus-circle</v-icon>
+				</v-btn>
+			</v-flex>
+		</v-layout>
+		<pui-simple-datalist
+			v-if="ready"
+			ref="datalist"
+			:modelName="modelName"
+			:modelNameSuffix="modelNameSuffix"
+			:readOnly="readOnly"
+			:navigableDetail="navigableDetail"
+			:selectable="showActions"
+			:externalFilter="getCurrentFilter()"
+			:searchTextColumns="searchTextColumns"
+			:sortingRules="sortingRules"
+			:parentModelName="parentModelName"
+		>
+			<template slot="itemContent" slot-scope="{ item }">
+				<slot name="itemContent" :item="item" :config="configToShow"></slot>
+			</template>
+			<template slot="itemAction" slot-scope="{ item }">
+				<slot name="itemAction" :item="item" :config="configToShow"></slot>
+			</template>
+		</pui-simple-datalist>
+		<v-btn
+			v-if="!masterDetail && showPuiGridCreateBtn"
+			:id="`gridlistbtn-create-${modelName}`"
+			fixed
+			bottom
+			right
+			fab
+			dark
+			color="primary"
+			class="puiDatalist_createBtn"
+			@click.native="onCreate()"
+		>
+			<v-icon>far fa-plus-circle</v-icon>
+		</v-btn>
+		<!-- list actions -->
+		<v-layout v-if="!masterDetail" wrap :class="getCompClass" ref="actionsInToolbar">
+			<v-spacer></v-spacer>
+			<pui-list-actions-btn :modelName="modelName" :actions="actions" insideForm v-if="showActions"></pui-list-actions-btn>
+		</v-layout>
+		<!-- delete registry modal dialog -->
+		<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="`deleteRegistry-${this.modelName}`"
+		></pui-modal-dialog>
+	</div>
+</template>
+
+<script>
+import $ from 'jquery';
+import PuiModelConfigurationMixin from '../../mixins/PuiModelConfigurationMixin';
+import PuiListToolbar from './toolbar/PuiListToolbar';
+import PuiListActionsBtn from './actions/PuiListActionsBtn';
+import PuiSimpleDatalist from './PuiSimpleDatalist';
+
+export default {
+	name: 'PuiDatalist',
+	mixins: [PuiModelConfigurationMixin],
+	components: {
+		PuiListToolbar,
+		PuiListActionsBtn,
+		PuiSimpleDatalist
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		modelNameSuffix: {
+			type: String,
+			default: ''
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		navigableDetail: {
+			type: Boolean,
+			default: true
+		},
+		externalFilter: {
+			type: Object
+		},
+		actions: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		showCreateBtn: {
+			type: Boolean,
+			default: true
+		},
+		showDeleteBtn: {
+			type: Boolean,
+			default: true
+		},
+		showFilterListBtn: {
+			type: Boolean,
+			default: false
+		},
+		parentModelName: {
+			type: String,
+			default: null
+		},
+		masterDetail: {
+			type: Boolean,
+			default: false
+		},
+		filterCombo: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			ready: false,
+			model: null,
+			columns: [],
+			showActions: false,
+			searchTextColumns: null,
+			sortingRules: null,
+			showPuiGridCreateBtn: false,
+			showPuiGridDeleteBtn: false,
+			showDeleteRegistryDialog: false,
+			configToShow: {}
+		};
+	},
+	computed: {
+		getCompClass() {
+			return {
+				'pui-toolbar': true,
+				puiDatalist_actions: !this.masterDetail,
+				puiDatalist_actions_detail: this.masterDetail
+			};
+		},
+		onPuiModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	},
+	watch: {
+		onPuiModelsLoadedAndSaved() {
+			this.model = this.$store.getters.getModelByName(this.modelName);
+			this.onReady();
+		}
+	},
+	mounted() {
+		this.model = this.$store.getters.getModelByName(this.modelName);
+		if (this.model) {
+			this.onReady();
+		}
+		this.subscribeToToolbarEvents();
+		this.subscribeDeleteEvents();
+	},
+	beforeDestroy() {
+		$(this.$refs.actionsInToolbar).remove();
+		this.showActions = false;
+	},
+	destroyed() {
+		this.unsubscribeToToolbarEvents();
+		this.unsubscribeDeleteEvents();
+	},
+	methods: {
+		onReady() {
+			if (this.model.functionalities) {
+				this.showPuiGridCreateBtn =
+					this.showCreateBtn && this.$store.getters.hasFunctionality(this.model.functionalities.insert) && this.readOnly === false;
+				this.showPuiGridDeleteBtn =
+					this.showDeleteBtn && this.$store.getters.hasFunctionality(this.model.functionalities.delete) && this.readOnly === false;
+			}
+
+			if (!this.existDeleteAction() && this.showPuiGridDeleteBtn) {
+				var self = this;
+				const datalistDeleteAction = {
+					id: 'datalistDeleteAction',
+					selectionType: 'single',
+					label: 'puiaction.deleteregistry',
+					functionality: this.model.functionalities.delete,
+					checkAvailability: function () {
+						return true;
+					},
+					runAction: function (action, model, registries) {
+						this.$store.state.puiDatalistSelectedItem = Object.assign({}, registries[0]);
+						this.$puiEvents.$emit(`pui-modalDialog-deleteRegistry-${self.modelName}${self.modelNameSuffix}-show`);
+					}
+				};
+				this.actions.unshift(datalistDeleteAction);
+			}
+
+			if (this.actions.length > 0) {
+				if (!this.masterDetail) {
+					try {
+						const containerHeaderActions = $('.pui-containerHeader')[1];
+						containerHeaderActions.append(this.$refs.actionsInToolbar);
+					} catch (e) {
+						$(this.$refs.actionsInToolbar).remove();
+					}
+				}
+				this.showActions = true;
+			} else {
+				if (!this.masterDetail) {
+					$(this.$refs.actionsInToolbar).remove();
+				} else {
+					$(this.$refs.actionsInToolbarDetail).remove();
+				}
+			}
+
+			if (!this.$store.getters.gridIsInitialized(this.modelName)) {
+				this.setColumnsAndGridConfigurationForDatatable(true, false);
+			} else {
+				// If the grid was created and we are coming back
+				this.setColumnsAndGridConfigurationForDatatable(false, true);
+			}
+
+			this.ready = true;
+		},
+		setColumnsAndGridConfigurationForDatatable(loadDefaultConfiguration, loadCurrentConfiguration) {
+			this.columns = [];
+
+			// Get the current configuration
+			if (loadCurrentConfiguration) {
+				this.gridConfiguration = this.cloneConfiguration(this.$store.getters.getDefaultGridConfiguration(this.modelName));
+			} else if (loadDefaultConfiguration) {
+				// Or load the default
+				const defaultConfig = this.$store.getters.getDefaultGridConfiguration(this.modelName);
+				if (defaultConfig) {
+					this.$store.commit('puiModelsSetCurrentGridConfiguration', { model: this.modelName, configuration: defaultConfig });
+					this.gridConfiguration = this.cloneConfiguration(defaultConfig);
+				}
+			}
+
+			// If there is no configuration (first time in the grid) a new one should be created to work with on runtime
+			if (!this.gridConfiguration || this.gridConfiguration === -1) {
+				this.gridConfiguration = {
+					model: this.modelName,
+					usr: this.$store.getters.getUser,
+					configuration: {
+						grouped: false,
+						columnSearch: false
+					}
+				};
+				this.model.columns.forEach((colObj, index) => {
+					if (colObj.visibility !== 'completelyhidden') {
+						const columnConfig = {
+							order: colObj.order || index,
+							title: this.$puiI18n.t(colObj.title),
+							name: colObj.name,
+							data: colObj.name,
+							visible: colObj.visibility === 'visible',
+							type: colObj.type,
+							orderable: true
+						};
+						this.columns.push(columnConfig);
+						this.setConfigToShow(columnConfig);
+					}
+				});
+			} else {
+				this.gridConfiguration = this.cloneConfiguration(this.gridConfiguration);
+				this.gridConfiguration.configuration.columns
+					.sort((a, b) => {
+						return a.order - b.order;
+					})
+					.forEach((colObj, index) => {
+						delete colObj.bVisible;
+						colObj.title = this.$puiI18n.t(colObj.title);
+						const columnConfig = {
+							order: colObj.order || index,
+							title: colObj.title,
+							name: colObj.name,
+							data: colObj.name,
+							visible: colObj.visible,
+							type: colObj.type,
+							orderable: true
+						};
+						this.columns.push(columnConfig);
+						this.setConfigToShow(columnConfig);
+					});
+			}
+		},
+		setConfigToShow(columnConfig) {
+			this.configToShow[columnConfig.name] = {
+				visible: columnConfig.visible
+			};
+		},
+		subscribeToToolbarEvents() {
+			this.$puiEvents.$on(`onPui-apply-searching-${this.modelName}${this.modelNameSuffix}`, (columnsAndElement) => {
+				this.searchTextColumns = JSON.parse(JSON.stringify(columnsAndElement));
+			});
+			this.$puiEvents.$on(`onPui-apply-sorting-${this.modelName}${this.modelNameSuffix}`, (sortingRules) => {
+				this.sortingRules = JSON.parse(JSON.stringify(sortingRules));
+			});
+		},
+		subscribeDeleteEvents() {
+			this.$puiEvents.$on(`pui-modalDialog-deleteRegistry-${this.modelName}${this.modelNameSuffix}-show`, () => {
+				this.showDeleteRegistryDialog = true;
+			});
+			// delete registry modal
+			this.$puiEvents.$on(`pui-modalDialog-deleteRegistry-${this.modelName}${this.modelNameSuffix}-ok`, () => {
+				this.showDeleteRegistryDialog = false;
+				this.onDelete(this.$store.state.puiDatalistSelectedItem);
+				this.$store.state.puiDatalistSelectedItem = null;
+			});
+			this.$puiEvents.$on(`pui-modalDialog-deleteRegistry-${this.modelName}${this.modelNameSuffix}-cancel`, () => {
+				this.showDeleteRegistryDialog = false;
+				this.$store.state.puiDatalistSelectedItem = null;
+				this.$puiEvents.$emit(`onPui-action-running-cancelled-${this.modelName}${this.modelNameSuffix}`);
+			});
+		},
+		unsubscribeToToolbarEvents() {
+			this.$puiEvents.$off(`onPui-apply-searching-${this.modelName}${this.modelNameSuffix}`);
+			this.$puiEvents.$off(`onPui-apply-sorting-${this.modelName}${this.modelNameSuffix}`);
+		},
+		unsubscribeDeleteEvents() {
+			this.$puiEvents.$off(`pui-modalDialog-deleteRegistry-${this.modelName}${this.modelNameSuffix}-show`);
+			this.$puiEvents.$off(`pui-modalDialog-deleteRegistry-${this.modelName}${this.modelNameSuffix}-ok`);
+			this.$puiEvents.$off(`pui-modalDialog-deleteRegistry-${this.modelName}${this.modelNameSuffix}-cancel`);
+		},
+		getCurrentFilter() {
+			const filter = { groupOp: 'and', groups: [], rules: [] };
+			if (this.filterCombo) {
+				const currentFilterCombo = this.getCurrentFilterCombo();
+				if (currentFilterCombo) {
+					filter.groups.push(currentFilterCombo);
+				}
+			}
+			if (this.externalFilter) {
+				filter.groups.push(this.externalFilter);
+			}
+			return filter;
+		},
+		getCurrentFilterCombo() {
+			const filterCombo = this.gridConfiguration && this.gridConfiguration.configuration && this.gridConfiguration.configuration.filterCombo;
+			if (!filterCombo) {
+				return null;
+			}
+
+			const gridFilterProperties = [];
+			let gridFilterName = null;
+
+			for (let i = 0, length = filterCombo.length; i < length; i++) {
+				if (!Array.isArray(filterCombo[i].local.value)) {
+					gridFilterProperties.push(filterCombo[i].local.value);
+				} else {
+					for (let j = 0; j < filterCombo[i].local.value.length; j++) {
+						gridFilterProperties.push(filterCombo[i].local.value[j]);
+					}
+				}
+				if (!gridFilterName) {
+					gridFilterName = filterCombo[i].search.model;
+				} else {
+					gridFilterName += '_' + filterCombo[i].search.model;
+				}
+			}
+
+			const gridFilterModel = this.$store.getters.getGridFilterComboModelByName(gridFilterName);
+
+			if (!gridFilterModel) {
+				return null;
+			}
+
+			this.$store.commit('saveModelNameWithGridFilterComboName', {
+				modelName: this.modelName,
+				gridFilterComboName: gridFilterName
+			});
+
+			const rules = [];
+			for (const property in gridFilterModel) {
+				for (let j = 0; j < gridFilterProperties.length; j++) {
+					const gridProperty = gridFilterProperties[j];
+					if (property === gridProperty) {
+						const value = gridFilterModel[property];
+						if (value) {
+							rules.push({ field: property, op: 'eq', data: value });
+						}
+					}
+				}
+			}
+
+			if (rules.length > 0) {
+				return { groups: [], groupOp: 'and', rules: rules };
+			}
+		},
+		existDeleteAction() {
+			for (let index = 0, actionsLength = this.actions.length; index < actionsLength; index++) {
+				const action = this.actions[index];
+				if (action.id === 'datalistDeleteAction') {
+					return true;
+				}
+			}
+			return false;
+		},
+		onCreate() {
+			this.$refs.datalist.goToItem(null, 'create');
+		},
+		onDelete(item) {
+			const pk = this.$refs.datalist.getPk(item);
+
+			this.$puiRequests.deleteRequest(
+				`/${this.modelName}/delete`,
+				null,
+				() => {
+					this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`);
+					this.$puiNotify.success(this.$puiI18n.t('pui9.delete.success'));
+				},
+				(error) => {
+					this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`);
+					this.$store.dispatch('puiRequestShowServerError', { error });
+				},
+				pk
+			);
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.puiDatalist_createBtn {
+	border-radius: 50% !important;
+	bottom: 55px !important;
+}
+.puiDatalist_actions {
+	padding-top: 10px;
+	padding-right: 8px;
+}
+.puiDatalist_actions_detail {
+	& .pui-toolbar__btn {
+		width: 100%;
+		border: solid 1px var(--N-50) !important;
+		min-height: 36px !important;
+		border-radius: 3px !important;
+	}
+	& .pui-toolbar__btn {
+		width: 100%;
+		border: solid 1px var(--N-50) !important;
+		min-height: 36px !important;
+		border-radius: 4px !important;
+	}
+	& .pui-toolbar__btn:not(.pui-toolbar__btn--active) {
+		background-color: transparent !important;
+	}
+	& .v-btn__content {
+		justify-content: space-between;
+	}
+	& .pui-gridActionsDialog--insideForm {
+		right: 0px;
+		width: 100%;
+		min-width: initial;
+		& .v-tabs {
+			width: 100%;
+		}
+	}
+}
+</style>