pui9-datatables 1.16.4

package/src/components/desktop/toolbar/grid-configuration/PuiSaveConfigDialog.vue

@@ -0,0 +1,154 @@
+<template>
+	<v-dialog v-model="dialog" persistent max-width="700px">
+		<v-card flat style="border-radius: 6px" class="pa-2">
+			<v-card-title>
+				<v-layout :ref="'header'" wrap>
+					<v-toolbar class="elevation-0 pui-dialog__bar" height="50">
+						<v-toolbar-title class="pui-dialog__title pui-dialog__title--margin pui-dialog__margin">
+							{{ getEditSaveTitle }}
+						</v-toolbar-title>
+						<v-spacer></v-spacer>
+						<v-btn text class="pui-dialog__toolbarBtn elevation-0" @click="$parent.dialogs.edit = false">
+							<v-icon>far fa-times</v-icon>
+						</v-btn>
+					</v-toolbar>
+				</v-layout>
+			</v-card-title>
+			<v-card-text>
+				<v-form ref="form" v-model="valid" lazy-validation @submit.prevent>
+					<pui-switch
+						:true-value="'update'"
+						:false-value="'create'"
+						:label="$t('puidatatables.overwrite_configuration')"
+						v-model="method"
+					></pui-switch>
+					<v-layout v-if="method === 'update' && modelSetted === true">
+						<v-flex xs12>
+							<label :class="{ 'v-label--required': true }">{{ $t('puidatatables.choose_configuration') }}</label>
+						</v-flex>
+					</v-layout>
+					<v-layout v-if="method === 'update' && modelSetted === true">
+						<v-flex xs12>
+							<v-autocomplete
+								class="puiConf-dialog__select"
+								:items="availableConfigurations"
+								v-model="model"
+								solo
+								flat
+								required
+								:rules="[(value) => !!value || $t('pui9.error.field_required')]"
+								:return-object="true"
+								item-value="id"
+								:item-text="(item) => item.configuration && item.configuration.name"
+							/>
+						</v-flex>
+					</v-layout>
+					<pui-text-field
+						:disabled="method === 'update'"
+						class="pt-3"
+						:label="$t('puidatatables.name_configuration')"
+						v-model="model.configuration.name"
+						toplabel
+						maxlength="100"
+						required
+						noeditable
+					></pui-text-field>
+					<pui-text-area
+						:disabled="method === 'update'"
+						:label="$t('puidatatables.description_configuration')"
+						v-model="model.configuration.description"
+						toplabel
+						maxlength="500"
+						noeditable
+					></pui-text-area>
+					<pui-switch
+						:true-value="true"
+						:false-value="false"
+						:label="$t('puidatatables.default_configuration')"
+						v-model="model.configuration.isdefault"
+					></pui-switch>
+				</v-form>
+			</v-card-text>
+			<v-card-actions>
+				<v-btn text outlined @click="$parent.dialogs.edit = false" class="elevation-0">{{ $t('form.cancel') }}</v-btn>
+				<v-spacer />
+				<v-btn color="primary" :disabled="modelGridConfigurations.length === 0" @click="save()" class="elevation-0">
+					{{ $t('form.save') }}
+				</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+import PuiGridFormMethodsMixin from '../../../../mixins/PuiGridFormMethodsMixin';
+
+export default {
+	name: 'PuiSaveConfigDialog',
+	mixins: [PuiGridFormMethodsMixin],
+	props: ['modelName'],
+	data() {
+		return {
+			modelDependencyName: 'puiusermodelconfig',
+			dialog: true,
+			method: 'create',
+			model: {
+				configuration: {}
+			}
+		};
+	},
+	computed: {
+		getEditSaveTitle() {
+			if (this.method === 'create') {
+				return this.$t('puidatatables.new_configuration');
+			} else {
+				return this.$t('puidatatables.edit_configuration');
+			}
+		},
+		availableConfigurations() {
+			return this.modelGridConfigurations.filter((config) => {
+				return config.id !== -1;
+			});
+		}
+	},
+	watch: {
+		method(newVal) {
+			this.modelSetted = false;
+			if (newVal === 'update') {
+				const availableConfigurations = this.availableConfigurations;
+				if (availableConfigurations.length > 0) {
+					this.model = availableConfigurations[0];
+					this.modelSetted = true;
+				}
+			}
+		}
+	},
+	created() {
+		this.modelGridConfigurations = this.$store.getters.getGridConfigurationsForModel(this.modelName);
+	},
+	methods: {
+		beforeSave() {
+			if (!this.model.configuration.name) {
+				return;
+			}
+			this.model = this.$parent.beforeSave({
+				name: this.model.configuration.name,
+				description: this.model.configuration.description,
+				isdefault: this.model.configuration.isdefault
+			});
+			if (this.method === 'create') {
+				this.model.id = null;
+			}
+		},
+		afterSave(savedConfig) {
+			this.$parent.afterSave(savedConfig);
+		},
+		onSaveError() {
+			this.$parent.onSaveError();
+		},
+		getData() {
+			this.$parent.getData();
+		}
+	}
+};
+</script>

package/src/components/desktop/toolbar/row/PuiGridCreateBtn.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="pui-gridActionsBtn">
+		<v-btn
+			:id="`gridbtn-create-${modelName}`"
+			icon
+			class="elevation-0 pui-toolbar__actionBtn primary white--text"
+			:class="compClass"
+			:title="$t('puigridcreate.title')"
+			@click.native.stop="onCreateBtn"
+		>
+			<v-icon>far fa-plus-circle</v-icon>
+		</v-btn>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiGridCreateBtn',
+	data() {
+		return {};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		compClass() {
+			return this.$store.getters.isMobile ? 'pui-toolbar__actionBtn--mobile' : 'pui-toolbar__actionBtn--desktop';
+		}
+	},
+	methods: {
+		onCreateBtn() {
+			this.$parent.$parent.$refs.table.goToElement(null, 'create');
+		}
+	}
+};
+</script>

package/src/components/desktop/toolbar/row/PuiGridDeleteBtn.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="pui-gridActionsBtn">
+		<v-btn
+			:id="`gridbtn-delete-${modelName}`"
+			icon
+			class="elevation-0 pui-toolbar__actionBtn white--text secondary"
+			:class="compClass"
+			:title="$t('puigriddelete.title')"
+			@click.native.stop="onDeleteBtnShowDialog"
+		>
+			<v-icon>far fa-trash-alt</v-icon>
+		</v-btn>
+		<!-- 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';
+
+export default {
+	name: 'PuiGridDeleteBtn',
+	data() {
+		return {
+			completeGridName: null,
+			showDeleteRegistryDialog: false,
+			selectedRow: null
+		};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		compClass() {
+			return this.$store.getters.isMobile ? 'pui-toolbar__actionBtn--mobile' : 'pui-toolbar__actionBtn--desktop';
+		}
+	},
+	created() {
+		this.completeGridName = this.modelName + '_' + this.$store.getters.getGridNumberOfInstances(this.modelName);
+	},
+	mounted() {
+		// delete registry modal
+		this.$puiEvents.$on(`pui-modalDialog-deleteRegistry-${this.modelName}-ok`, () => {
+			this.$puiEvents.$emit(`onPui-apply-delete-${this.modelName}`, this.selectedRow);
+			this.showDeleteRegistryDialog = false;
+		});
+		this.$puiEvents.$on(`pui-modalDialog-deleteRegistry-${this.modelName}-cancel`, () => {
+			this.showDeleteRegistryDialog = false;
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-modalDialog-deleteRegistry-${this.modelName}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-deleteRegistry-${this.modelName}-cancel`);
+	},
+	methods: {
+		onDeleteBtnShowDialog() {
+			const selectedRows = $('#' + this.completeGridName)
+				.DataTable()
+				.rows('.selected')[0].length;
+
+			if (selectedRows > 1) {
+				this.$puiNotify.warning(this.$t('puigriddelete.notdeletemorethanone'), '', null, false);
+			} else {
+				this.selectedRow = $('#' + this.completeGridName)
+					.DataTable()
+					.row('.selected');
+				if (this.selectedRow && this.selectedRow.data()) {
+					this.showDeleteRegistryDialog = true;
+				} else {
+					this.$puiNotify.warning(this.$t('puigriddelete.notselectedrow'), '', null, false);
+				}
+			}
+		}
+	}
+};
+</script>

package/src/components/desktop/toolbar/row/PuiGridRefreshBtn.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="pui-gridActionsBtn">
+		<v-btn
+			:id="`gridbtn-refresh-${modelName}`"
+			icon
+			class="elevation-0 pui-toolbar__actionBtn white--text primary"
+			:class="compClass"
+			:title="$t('puigridrefresh.title')"
+			@click.native.stop="onRefreshBtn"
+		>
+			<v-icon>far fa-redo</v-icon>
+		</v-btn>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiGridRefreshBtn',
+	data() {
+		return {};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		compClass() {
+			return this.$store.getters.isMobile ? 'pui-toolbar__actionBtn--mobile' : 'pui-toolbar__actionBtn--desktop';
+		}
+	},
+	methods: {
+		onRefreshBtn() {
+			this.$parent.$parent.$refs.table.reloadGrid();
+		}
+	}
+};
+</script>

package/src/components/desktop/toolbar/row/PuiGridUpdateBtn.vue

@@ -0,0 +1,56 @@
+<template>
+	<div class="pui-gridActionsBtn">
+		<v-btn
+			:id="`gridbtn-update-${modelName}`"
+			icon
+			class="elevation-0 pui-toolbar__actionBtn white--text primary"
+			:class="compClass"
+			:title="$t('puigridupdate.title')"
+			@click.native.stop="onUpdateBtn"
+		>
+			<v-icon>far fa-edit</v-icon>
+		</v-btn>
+	</div>
+</template>
+
+<script>
+import $ from 'jquery';
+
+export default {
+	name: 'PuiGridUpdateBtn',
+	data() {
+		return {
+			completeGridName: null,
+			selectedRow: null
+		};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		compClass() {
+			return this.$store.getters.isMobile ? 'pui-toolbar__actionBtn--mobile' : 'pui-toolbar__actionBtn--desktop';
+		}
+	},
+	mounted() {
+		this.completeGridName = this.modelName + '_' + this.$store.getters.getGridNumberOfInstances(this.modelName);
+	},
+	methods: {
+		onUpdateBtn() {
+			this.selectedRow = $('#' + this.completeGridName)
+				.DataTable()
+				.row('.selected');
+
+			if (this.selectedRow && this.selectedRow.data()) {
+				const data = { row: this.selectedRow, method: 'update' };
+				this.$puiEvents.$emit(`onPui-apply-edit-${this.modelName}`, data);
+			} else {
+				this.$puiNotify.warning(this.$t('puigridedit.notselectedrow'), '', null, false);
+			}
+		}
+	}
+};
+</script>

package/src/components/desktop/toolbar/searching/PuiGridSearcher.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="flex-grow-1 puiGridSearcher" :class="compClass" @click.stop>
+		<div
+			class="v-btn__content flex-grow-0 puiGridSearcher__icon"
+			@click="
+				states.active = !states.active;
+				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="puigridsearcherinput"
+			@focus="
+				states.active = !states.active;
+				hideDialog();
+			"
+			v-model="input.searchingText"
+			class="puiGridSearcher__textInput"
+			hide-details
+			single-line
+			solo
+			outlined
+			flat
+			:placeholder="getPlaceholder"
+			@keyup="goSearch"
+			@click:clear="goClearSearch"
+			clearable
+		></v-text-field>
+		<pui-grid-searcher-columns-list
+			v-show="active"
+			:position="panel.position"
+			:modelName="modelName"
+			ref="searchdialog"
+		></pui-grid-searcher-columns-list>
+	</div>
+</template>
+
+<script>
+import PuiSearcherMixin from '../../../../mixins/PuiSearcherMixin';
+import PuiGridSearcherColumnsList from './PuiGridSearcherColumnsList';
+
+export default {
+	name: 'PuiGridSearcher',
+	mixins: [PuiSearcherMixin],
+	components: {
+		PuiGridSearcherColumnsList
+	},
+	data() {
+		return {
+			idTool: 'gridsearcher'
+		};
+	}
+};
+</script>
+
+<style>
+#puigridsearcherinput {
+	margin-left: 20px !important;
+}
+.puiGridSearcher .v-input__control {
+	max-height: 36px !important;
+}
+</style>

package/src/components/desktop/toolbar/searching/PuiGridSearcherColumnsList.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"
+					@input="onChange"
+				></pui-checkbox>
+			</v-flex>
+		</v-layout>
+	</v-card>
+</template>
+
+<script>
+import PuiSearcherColumnsListMixin from '../../../../mixins/PuiSearcherColumnsListMixin';
+
+export default {
+	name: 'PuiGridSearcherColumnsList',
+	mixins: [PuiSearcherColumnsListMixin],
+	methods: {
+		onChange() {
+			setTimeout(() => {
+				if (!this.checkColumns.find(c => c.checked)) {
+					this.checkFirstElement();
+				}
+			}, 100);
+		}
+	}
+};
+</script>

package/src/components/desktop/toolbar/sorting/PuiGridSortBtn.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="pui-toolbar__multiBtn ml-2" :class="compClass">
+		<div ref="btn">
+			<v-btn
+				class="elevation-0 pui-toolbar__bt pui-toolbar__btn pui-toolbar__miniBtn"
+				:class="compClass"
+				@click.native="toggleSorting()"
+				:title="$t('puidatatables.titleBtnEnableDisableSorting')"
+			>
+				<v-icon small>fa fa-sort-amount-down</v-icon>
+			</v-btn>
+			<div class="pui-toolbar__multiBtnSeparator">|</div>
+			<v-btn
+				class="elevation-0 pui-toolbar__btn pui-toolbar__superMiniBtn"
+				@click.native.stop="states.active = !states.active"
+				:class="compClass"
+				:title="$t('puidatatables.titleBtnShowHideSorting')"
+			>
+				<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>
+		<pui-grid-sort-dialog
+			:columns="columns"
+			:modelName="modelName"
+			:position="panel.position"
+			:groupedColumn="groupedColumn"
+			v-show="states.active"
+		></pui-grid-sort-dialog>
+	</div>
+</template>
+
+<script>
+import PuiSortBtnMixin from '../../../../mixins/PuiSortBtnMixin';
+import PuiGridSortDialog from './PuiGridSortDialog';
+
+export default {
+	name: 'PuiGridSortBtn',
+	mixins: [PuiSortBtnMixin],
+	components: {
+		PuiGridSortDialog
+	}
+};
+</script>

package/src/components/desktop/toolbar/sorting/PuiGridSortDialog.vue

@@ -0,0 +1,113 @@
+<template>
+	<div class="pui-dialog pui-dialog--sorting elevation-5" ref="dialog" @click.stop>
+		<v-layout wrap>
+			<v-flex xs-8 md-6 lg-4 xl-3>
+				<v-card flat>
+					<v-card-text class="pt-0 pr-2 pl-0 pb-0">
+						<!-- slot1, TODO MAKE SLOTS IN FILTER AND SORTING DIALOGS-->
+						<v-list-item>
+							<v-list-item-action-text class="pui-dialog__title">{{ $t('puidatatables.sort') }}</v-list-item-action-text>
+						</v-list-item>
+						<v-flex xs12 class="pui-dialog__ruleContainer mb-1" :style="{ height: heightPanel }">
+							<draggable v-model="rules" v-bind="{ group: 'rules' }" @end="removeSelectsFocus">
+								<div v-for="(rule, index) in rules" class="pui-dialog__rule pui-dialog__rule--small ml-1" :key="index">
+									<v-layout wrap class="rule">
+										<v-flex xs1>
+											<v-list-item class="move draggable_point" v-show="(grouped === true && index === 0) === false">
+												<v-icon small>far fa-ellipsis-v</v-icon>
+												<v-icon small>far fa-ellipsis-v</v-icon>
+											</v-list-item>
+										</v-flex>
+										<v-flex xs6 class="pr-2">
+											<v-autocomplete
+												class="font-size-12"
+												label="column"
+												append-icon="fa fa-angle-down"
+												v-model="rule.column"
+												:ref="`${index}-column`"
+												:disabled="grouped === true && index === 0"
+												solo
+												flat
+												@change="setIndex(index), onRuleNameChanged($event, index)"
+												:items="getAvailableColumns(index)"
+												item-text="title"
+												item-value="name"
+												hide-selected
+											></v-autocomplete>
+										</v-flex>
+										<v-flex xs4>
+											<v-select
+												append-icon="fa fa-angle-down"
+												class="font-size-12"
+												v-model="rule.direction"
+												:ref="`${index}-sortType`"
+												solo
+												flat
+												:items="sortingTypes"
+												:label="$t('puidatatables.ascendent')"
+											></v-select>
+										</v-flex>
+										<v-flex xs1 class="pointer" @click="removeRule(index)" v-show="(grouped === true && index === 0) === false">
+											<v-list-item>
+												<v-icon small class="trashIcon" :title="getTitleRemove">fa fa-trash-alt</v-icon>
+											</v-list-item>
+										</v-flex>
+									</v-layout>
+								</div>
+							</draggable>
+						</v-flex>
+						<v-flex xs12 v-show="showAddBtn">
+							<v-btn class="btnAdd elevation-0 mt-0 mb-1" @click="addRule()">
+								<v-icon small>far fa-plus</v-icon>
+								<span>{{ $t('puidatatables.addRule') }}</span>
+							</v-btn>
+						</v-flex>
+					</v-card-text>
+					<!-- slot1-->
+					<v-card-actions class="ma-0 pb-1 pr-1 pl-1">
+						<v-btn text outlined @click="reset()" class="pui-dialog__button">{{ $t('puidatatables.reset') }}</v-btn>
+						<v-spacer></v-spacer>
+						<v-btn color="primary" @click="publishSorting()" class="elevation-0">{{ $t('form.apply') }}</v-btn>
+					</v-card-actions>
+				</v-card>
+			</v-flex>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiSortDialogMixin from '../../../../mixins/PuiSortDialogMixin';
+
+export default {
+	name: 'PuiGridSortDialog',
+	mixins: [PuiSortDialogMixin]
+};
+</script>
+
+<style lang="postcss" scoped>
+.trashIcon {
+	top: 10px;
+	position: absolute;
+}
+.btnAdd {
+	height: 28px !important;
+	color: var(--N-500);
+	&.v-btn {
+		background-color: var(--N-0) !important;
+	}
+	& span {
+		padding-left: 6px;
+	}
+}
+
+.draggable_point .v-icon {
+	margin-top: -12px;
+	color: var(--N-50);
+}
+.draggable_btn {
+	width: 20px !important;
+	& .v-icon {
+		margin-top: -12px;
+	}
+}
+</style>