pui9-datatables 1.16.4

package/src/components/mobile/PuiSimpleDatalist.vue

@@ -0,0 +1,313 @@
+<template>
+	<div>
+		<span class="pl-3">{{ totalRecordsComp }}</span>
+		<v-divider></v-divider>
+		<v-list three-line :style="listStyleComp" class="overflow-y-auto">
+			<template v-for="(item, index) in theItems">
+				<v-list-item :key="index">
+					<v-list-item-action class="puiDatalist_itemSelected" v-if="selectable">
+						<v-checkbox color="primary" v-model="selectedItems" :value="item" :disabled="disabledItems[index].disabled"></v-checkbox>
+					</v-list-item-action>
+					<v-list-item-content @click="showItem(item)">
+						<slot name="itemContent" :item="item"></slot>
+					</v-list-item-content>
+					<v-list-item-action>
+						<slot name="itemAction" :item="item"></slot>
+					</v-list-item-action>
+				</v-list-item>
+				<v-divider v-if="index + 1 < theItems.length" :key="`divider_${index}`"></v-divider>
+			</template>
+			<infinite-loading ref="infiniteLoading" @infinite="getItemsFromPuiList"></infinite-loading>
+		</v-list>
+		<pui-list-action-footer
+			v-show="actionFooter"
+			:action="actionRunning"
+			:registries="selectedItems"
+			:modelName="modelName"
+		></pui-list-action-footer>
+	</div>
+</template>
+
+<script>
+import PuiListActionFooter from './footer/PuiListActionFooter';
+
+export default {
+	name: 'PuiSimpleDatalist',
+	components: { PuiListActionFooter },
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		modelNameSuffix: {
+			type: String,
+			default: ''
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		navigableDetail: {
+			type: Boolean,
+			default: true
+		},
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		externalFilter: {
+			type: Object
+		},
+		searchTextColumns: {
+			type: Array
+		},
+		sortingRules: {
+			type: Array
+		},
+		parentModelName: {
+			type: String,
+			default: null
+		}
+	},
+	data() {
+		return {
+			internalModel: null,
+			internalController: null,
+			page: 0,
+			rows: 20,
+			totalRecords: 0,
+			theItems: [],
+			selectedItems: [],
+			disabledItems: [],
+			singleSelection: true,
+			actionFooter: false,
+			actionRunning: null
+		};
+	},
+	computed: {
+		listStyleComp() {
+			// header = 60; toolbar = 70; footer = 50;
+			const maxHeight = window.innerHeight - 60 - 70 - 50;
+			return `max-height: ${maxHeight}px`;
+		},
+		totalRecordsComp() {
+			return this.totalRecords + ' ' + this.$t('puidatatables.totalRecords');
+		}
+	},
+	watch: {
+		searchTextColumns() {
+			this.refreshDatalist();
+		},
+		sortingRules() {
+			this.refreshDatalist();
+		},
+		selectedItems() {
+			if (this.singleSelection && this.selectedItems.length > 1) {
+				this.selectedItems.shift();
+			}
+
+			const selectedRows = [];
+			if (this.selectedItems.length > 0) {
+				selectedRows.push({ not_used_property: this.selectedItems[0] });
+			}
+			this.$puiEvents.$emit(`onPui-selectItem-dataTable-${this.modelName}`, selectedRows);
+		}
+	},
+	created() {
+		this.internalModel = this.$store.getters.getModelByName(this.modelName);
+		this.internalController = this.internalModel.url.list;
+		this.hasReadFunctionality = this.$store.getters.hasFunctionality(this.internalModel.functionalities.get);
+		this.hasUpdateFunctionality = this.$store.getters.hasFunctionality(this.internalModel.functionalities.update);
+		this.subscribeToActionsEvents();
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-action-before-running-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-cancelled-${this.modelName}${this.modelNameSuffix}`);
+	},
+	methods: {
+		getItemsFromPuiList($state) {
+			this.page++;
+			const loadItems = response => {
+				if (response && response.data) {
+					this.totalRecords = response.data.totalRecords;
+					response.data.data.forEach(() => {
+						this.disabledItems.push({ disabled: false });
+					});
+					this.theItems.push(...response.data.data);
+					if (this.actionRunning && this.actionRunning.selectionType === 'multiple') {
+						this.applyDisableItemsByAction();
+					}
+					$state.loaded();
+					if (response.data.totalPages <= this.page) {
+						$state.complete();
+					}
+				}
+			};
+			const bodyRequest = this.getBodyRequest();
+			this.postRequest(bodyRequest, loadItems);
+		},
+		postRequest(body, successCallback) {
+			this.$puiRequests.postRequest(this.internalController, body, successCallback, error => {
+				console.log(error);
+			});
+		},
+		getBodyRequest() {
+			const paginateItemsParams = {
+				model: this.modelName,
+				page: this.page,
+				rows: this.rows,
+				filter: this.createFilter()
+			};
+
+			const searchOrder = this.createOrder();
+			if (searchOrder) {
+				paginateItemsParams.order = searchOrder;
+			}
+			const searchText = this.createQueryText();
+			if (searchText) {
+				paginateItemsParams.queryText = searchText;
+			}
+			const searchFields = this.createQueryFields();
+			if (searchFields.length > 0) {
+				paginateItemsParams.queryFields = searchFields;
+			}
+
+			return paginateItemsParams;
+		},
+		createFilter() {
+			return this.externalFilter;
+		},
+		createOrder() {
+			return this.sortingRules;
+		},
+		createQueryText() {
+			if (!this.searchTextColumns) {
+				return null;
+			}
+			return this.searchTextColumns[0];
+		},
+		createQueryFields() {
+			if (!this.searchTextColumns) {
+				return [];
+			}
+			const queryFields = [];
+			const searchColumns = this.searchTextColumns[1];
+			searchColumns.forEach(column => {
+				if (column.checked === true) {
+					queryFields.push(column.name);
+				}
+			});
+			return queryFields;
+		},
+		showItem(item) {
+			if (this.navigableDetail) {
+				if (this.readOnly) {
+					this.goToItem(item, 'read');
+				} else if (this.hasUpdateFunctionality) {
+					this.goToItem(item, 'update');
+				} else if (this.hasReadFunctionality) {
+					this.goToItem(item, 'read');
+				}
+			}
+		},
+		goToItem(item, method) {
+			const pk = this.getPk(item);
+			const pkStr = JSON.stringify(pk);
+			const pkB64 = this.$puiUtils.utf8ToB64(pkStr);
+			if (this.parentModelName) {
+				this.$puiEvents.$emit(`onPuiGotoTableDetail-${this.parentModelName}`);
+			}
+			const params = {
+				router: this.$router,
+				url: `${this.modelName}/${method}/${pkB64}/`,
+				params: null,
+				query: {}
+			};
+			this.$store.dispatch('puiRouterGoToUrl', params);
+		},
+		getPk(item) {
+			const pk = {};
+			if (item != null) {
+				for (var index in this.internalModel.columns) {
+					const column = this.internalModel.columns[index];
+					if (column.isPk) {
+						pk[column.name] = item[column.name];
+					}
+				}
+			}
+			return pk;
+		},
+		subscribeToActionsEvents() {
+			this.$puiEvents.$on(`onPui-action-before-running-${this.modelName}${this.modelNameSuffix}`, obj => {
+				this.actionRunning = obj.action;
+				if (this.actionRunning.selectionType === 'multiple') {
+					this.actionFooter = true;
+					this.singleSelection = false;
+					this.selectedItems = [];
+					this.applyDisableItemsByAction();
+				} else if (this.selectedItems.length > 0 || this.actionRunning.selectionType === 'general') {
+					// Run action
+					this.actionFooter = false;
+					if (this.actionRunning.selectionType === 'single') {
+						this.internalModel.selectedRows = this.selectedItems;
+					}
+					this.actionRunning.runAction.call(this, this.actionRunning, this.internalModel, this.selectedItems);
+				}
+			});
+			this.$puiEvents.$on(`onPui-action-running-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.actionFooter = false;
+			});
+			this.$puiEvents.$on(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`, () => {
+				if (this.actionRunning && this.actionRunning.selectionType === 'multiple') {
+					this.singleSelection = true;
+					this.selectedItems = [];
+					this.applyEnableItemsByAction();
+				}
+				this.actionFooter = false;
+				this.actionRunning = null;
+				this.refreshDatalist();
+			});
+			this.$puiEvents.$on(`onPui-action-running-cancelled-${this.modelName}${this.modelNameSuffix}`, () => {
+				if (this.actionRunning.selectionType === 'multiple') {
+					this.singleSelection = true;
+					this.selectedItems = [];
+					this.applyEnableItemsByAction();
+				}
+				this.actionFooter = false;
+				this.actionRunning = null;
+			});
+		},
+		applyDisableItemsByAction() {
+			for (let index = 0, itemsLength = this.theItems.length; index < itemsLength; index++) {
+				const item = this.theItems[index];
+				const itemValid = this.actionRunning.checkAvailability.call(this, item);
+				this.disabledItems[index].disabled = !itemValid;
+			}
+		},
+		applyEnableItemsByAction() {
+			for (let index = 0, itemsLength = this.theItems.length; index < itemsLength; index++) {
+				this.disabledItems[index].disabled = false;
+			}
+		},
+		refreshDatalist() {
+			this.page = 0;
+			this.totalRecords = 0;
+			this.theItems = [];
+			this.disabledItems = [];
+			this.$refs.infiniteLoading.stateChanger.reset();
+		}
+	}
+};
+</script>
+
+<style>
+.puiDatalist_itemSelected {
+	min-width: 30px;
+}
+.puiDatalist_subtitle {
+	white-space: nowrap !important;
+	display: list-item !important;
+}
+</style>

package/src/components/mobile/actions/PuiListActionListItem.vue

@@ -0,0 +1,34 @@
+<template>
+	<v-layout :id="getUniqueID" ref="theItem" wrap class="puiGridActionListItem mb-1 mt-1" :class="getCompClass" @click="selectItem()">
+		<v-flex xs12>
+			<span class="puiGridActionListItem__titleicon" v-if="isSingleAction">
+				<v-icon class="puiGridActionListItem__icon">far fa-bolt</v-icon>
+			</span>
+			<span class="puiGridActionListItem__titleicon" v-if="isMultipleAction">
+				<v-icon class="puiGridActionListItem__icon">fas fa-bolt</v-icon>
+			</span>
+			<span class="puiGridActionListItem__titleicon" v-if="isGeneralAction">
+				<v-icon class="puiGridActionListItem__icon">far fa-asterisk</v-icon>
+			</span>
+			<span class="puiGridActionListItem__title">{{ getTranslatedLabel }}</span>
+			<span class="puiGridActionListItem__titleicon__favorite" v-if="isFavoriteAction" @click.stop="unsetFavorite()">
+				<v-icon class="puiGridActionListItem__icon">fas fa-star</v-icon>
+			</span>
+			<span class="puiGridActionListItem__titleicon__nofavorite" v-else @click.stop="setFavorite()">
+				<v-icon class="puiGridActionListItem__icon">far fa-star</v-icon>
+			</span>
+			<span class="puiGridActionListItem__titleicon__lock" v-show="isLockedAction">
+				<v-icon class="puiGridActionListItem__icon">fas fa-lock</v-icon>
+			</span>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import PuiActionsListItemMixin from '../../../mixins/PuiActionsListItemMixin';
+
+export default {
+	name: 'puilistactionlistitem',
+	mixins: [PuiActionsListItemMixin]
+};
+</script>

package/src/components/mobile/actions/PuiListActionsBtn.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="pui-gridActionsBtn">
+		<v-btn
+			:id="`gridlistbtn-actions-${modelName}`"
+			class="elevation-0 pui-toolbar__btn ml-0"
+			:class="compClass"
+			@click.native.stop="showSubPanel"
+		>
+			<span>{{ $t('puidatatables.actions') }}</span>
+			<span class="ml-2">
+				<v-icon v-if="!states.active" small>fa fa-angle-down</v-icon>
+				<v-icon v-else small>fa fa-angle-up</v-icon>
+			</span>
+		</v-btn>
+		<label v-if="label">{{ label }}</label>
+		<puilistactionsdialog
+			:modelName="modelName"
+			:actions="internalActions"
+			:position="panel.position"
+			v-show="states.active"
+			:visibility="states.active"
+			:insideForm="insideForm"
+		></puilistactionsdialog>
+	</div>
+</template>
+
+<script>
+import PuiActionsBtnMixin from '../../../mixins/PuiActionsBtnMixin';
+import PuiListActionsDialog from './PuiListActionsDialog';
+
+export default {
+	name: 'puilistactionsbtn',
+	mixins: [PuiActionsBtnMixin],
+	components: {
+		puilistactionsdialog: PuiListActionsDialog
+	}
+};
+</script>

package/src/components/mobile/actions/PuiListActionsDialog.vue

@@ -0,0 +1,66 @@
+<template>
+	<div class="pui-gridActionsDialog" :class="{ 'pui-gridActionsDialog--insideForm': insideForm }" :ref="'dialog'" @click.stop>
+		<v-layout wrap class="mb-1">
+			<v-tabs centered grow v-model="tabActive" slider-color="primary" ref="tabs">
+				<v-tab href="#tab1" ref="tab1">{{ $t('puidatatables.all') }}</v-tab>
+				<v-tab href="#tab2" ref="tab2">{{ $t('puidatatables.favorites') }}</v-tab>
+
+				<v-tab-item value="tab1" class="mt-2">
+					<pui-text-field
+						id="searchFilter3"
+						class="ma-1 mr-2 ml-2"
+						:placeholder="getPlaceholder"
+						v-model="searchAll"
+						clearable
+						prepend-inner-icon="far fa-search"
+						noeditable
+						realtime
+					></pui-text-field>
+					<div>
+						<puilistactionlistitem
+							v-for="action in filteredActionsAll"
+							:key="action.id"
+							:action="action"
+							:modelName="modelName"
+							:ref="`simple-${action.id}`"
+						></puilistactionlistitem>
+					</div>
+				</v-tab-item>
+				<v-tab-item value="tab2" class="mt-2">
+					<pui-text-field
+						id="searchFilter4"
+						class="ma-1 mr-2 ml-2"
+						:placeholder="getPlaceholder"
+						v-model="searchFav"
+						clearable
+						prepend-inner-icon="far fa-search"
+						noeditable
+						realtime
+					></pui-text-field>
+					<div>
+						<puilistactionlistitem
+							v-for="action in filteredActionsFavorites"
+							:key="action.id"
+							:action="action"
+							:modelName="modelName"
+							:ref="`favorites-${action.id}`"
+						></puilistactionlistitem>
+					</div>
+				</v-tab-item>
+			</v-tabs>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiActionsDialogMixin from '../../../mixins/PuiActionsDialogMixin';
+import PuiListActionListItem from './PuiListActionListItem';
+
+export default {
+	name: 'puilistactionsdialog',
+	mixins: [PuiActionsDialogMixin],
+	components: {
+		puilistactionlistitem: PuiListActionListItem
+	}
+};
+</script>

package/src/components/mobile/footer/PuiListActionFooter.vue

@@ -0,0 +1,56 @@
+<template>
+	<div class="pui-listActionFooter">
+		<v-layout justify-space-between>
+			<v-btn text outlined @click.native="back()">{{ this.$t('form.cancel') }}</v-btn>
+			<v-btn :disabled="isDisabled" depressed color="secondary" class="elevation-0" @click.native="runAction()">{{
+				this.$t('puidatatables.applyAction')
+			}}</v-btn>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiListActionFooter',
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		action: {
+			type: Object
+		},
+		registries: {
+			type: Array
+		}
+	},
+	computed: {
+		isDisabled() {
+			if (this.registries && this.registries.length > 0) {
+				return false;
+			}
+			return true;
+		}
+	},
+	methods: {
+		runAction() {
+			this.$puiEvents.$emit(`onPui-action-running-${this.modelName}`);
+			const model = this.$store.getters.getModelByName(this.modelName);
+			this.action.runAction.call(this, this.action, model, this.registries);
+		},
+		back() {
+			this.$puiEvents.$emit(`onPui-action-running-cancelled-${this.modelName}`);
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.pui-listActionFooter {
+	position: fixed;
+	background-color: var(--N-0);
+	bottom: 0px;
+	width: 100%;
+	z-index: 100;
+}
+</style>

package/src/components/mobile/toolbar/PuiListToolbar.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class="pt-2 pb-2">
+		<v-layout class="pui-toolbar">
+			<pui-list-searcher :columns="configColumns" :modelName="modelName"></pui-list-searcher>
+			<pui-list-sort-btn :columns="configColumns" :modelName="modelName"></pui-list-sort-btn>
+			<pui-grid-filter-list-btn ref="filterListBtn" v-if="showFilterListBtn" :modelName="modelName"></pui-grid-filter-list-btn>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiListSearcher from './searching/PuiListSearcher';
+import PuiListSortBtn from './sorting/PuiListSortBtn';
+import PuiGridFilterListBtn from '../../desktop/toolbar/filtering/PuiGridFilterListBtn';
+
+export default {
+	name: 'PuiListToolbar',
+	components: { PuiListSearcher, PuiListSortBtn, PuiGridFilterListBtn },
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		showFilterListBtn: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			configColumns: null
+		};
+	},
+	created() {
+		this.splitColumns();
+	},
+	methods: {
+		splitColumns() {
+			//las columnas que se pueden ver, y por tanto son configurables
+			this.configColumns = this.columns
+				.filter((column) => {
+					return column.completelyhidden !== true;
+				})
+				.sort(function (a, b) {
+					if (a.name > b.name) {
+						return 1;
+					}
+					if (a.name < b.name) {
+						return -1;
+					}
+					return 0;
+				});
+		}
+	}
+};
+</script>

package/src/components/mobile/toolbar/searching/PuiListSearcher.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="puiListSearcher" :class="compClass" @click.stop>
+		<div class="v-btn__content puiListSearcher__icon" @click="goDialog()" :title="getTitle">
+			<v-icon style="font-size: 1.2rem" small :class="compIconClass">fa fa-search</v-icon>
+			<v-icon v-if="!active" style="font-size: 0.75rem" :class="compIconClass">fa fa-sm fa-caret-down</v-icon>
+			<v-icon v-else style="font-size: 0.75rem" :class="compIconClass">fa fa-sm fa-caret-up</v-icon>
+		</div>
+		<v-text-field
+			id="puilistsearcherinput"
+			@focus="hideDialog()"
+			v-model="input.searchingText"
+			class="puiListSearcher__textInput"
+			hide-details
+			single-line
+			solo
+			outlined
+			flat
+			:placeholder="getPlaceholder"
+			@keyup="goSearch"
+			@click:clear="goClearSearch"
+		></v-text-field>
+		<pui-list-searcher-columns-list
+			v-show="active"
+			:position="panel.position"
+			:modelName="modelName"
+			ref="searchdialog"
+		></pui-list-searcher-columns-list>
+	</div>
+</template>
+
+<script>
+import PuiSearcherMixin from '../../../../mixins/PuiSearcherMixin';
+import PuiListSearcherColumnsList from './PuiListSearcherColumnsList';
+
+export default {
+	name: 'PuiListSearcher',
+	mixins: [PuiSearcherMixin],
+	components: {
+		PuiListSearcherColumnsList
+	},
+	data() {
+		return {
+			idTool: 'listsearcher'
+		};
+	}
+};
+</script>
+
+<style>
+.puiListSearcher .v-input__control {
+	max-height: 36px !important;
+}
+</style>

package/src/components/mobile/toolbar/searching/PuiListSearcherColumnsList.vue

@@ -0,0 +1,43 @@
+<template>
+	<v-card flat class="puiSearcherColumnsList pl-3 pr-3 pt-1 pb-1 elevation-5" :style="compStyle" :ref="'dialog'" @click.stop>
+		<v-layout class="mt-1">
+			<v-flex xs8 class="puiSearcherColumnsList__textSwitch">{{ $t('puidatatables.searchAll') }}</v-flex>
+			<v-flex xs2>
+				<pui-switch label v-model="searchAll"></pui-switch>
+			</v-flex>
+		</v-layout>
+		<v-layout>
+			<v-flex xs12>{{ $t('puidatatables.columns') }}</v-flex>
+		</v-layout>
+		<v-layout class="mt-2" :style="compStyleMaxHeight">
+			<v-flex xs12>
+				<pui-checkbox
+					v-for="column in checkColumns"
+					:key="column.title"
+					:label="column.title"
+					:disabled="searchAll"
+					v-model="column.checked"
+				></pui-checkbox>
+			</v-flex>
+		</v-layout>
+	</v-card>
+</template>
+
+<script>
+import PuiSearcherColumnsListMixin from '../../../../mixins/PuiSearcherColumnsListMixin';
+
+export default {
+	name: 'PuiListSearcherColumnsList',
+	mixins: [PuiSearcherColumnsListMixin],
+	computed: {
+		// Override mixin
+		compStyle() {
+			var style = {
+				top: this.position.top + 'px',
+				left: '36px'
+			};
+			return style;
+		}
+	}
+};
+</script>