pui9-datatables 1.16.4

package/src/components/mobile/toolbar/sorting/PuiListSortBtn.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="pui-toolbar__multiBtn ml-2 mr-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
+				:small="$store.getters.isMobile"
+				:style="$store.getters.isMobile ? 'padding: 0px 3px' : ''"
+				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-list-sort-dialog
+			:columns="columns"
+			:modelName="modelName"
+			:position="panel.position"
+			:groupedColumn="groupedColumn"
+			v-show="states.active"
+		></pui-list-sort-dialog>
+	</div>
+</template>
+
+<script>
+import PuiSortBtnMixin from '../../../../mixins/PuiSortBtnMixin';
+import PuiListSortDialog from './PuiListSortDialog';
+
+export default {
+	name: 'PuiListSortBtn',
+	mixins: [PuiSortBtnMixin],
+	components: {
+		PuiListSortDialog
+	}
+};
+</script>

package/src/components/mobile/toolbar/sorting/PuiListSortDialog.vue

@@ -0,0 +1,140 @@
+<template>
+	<div class="pui-dialog pui-dialog--sorting" ref="dialog" @click.stop>
+		<v-layout wrap>
+			<v-flex xs12>
+				<v-card flat>
+					<v-card-text class="pt-0 pr-0 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" :key="index">
+									<v-layout class="rule" wrap align-center>
+										<v-flex xs1>
+											<v-list-item class="move draggable_point" pl-2 pr-2 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 xs9>
+											<v-layout wrap>
+												<v-flex xs12>
+													<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
+														hide-details
+													></v-autocomplete>
+												</v-flex>
+											</v-layout>
+											<v-layout wrap>
+												<v-flex xs12>
+													<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')"
+														hide-details
+													></v-select>
+												</v-flex>
+											</v-layout>
+										</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>
+									<v-divider />
+								</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: 'PuiListSortDialog',
+	mixins: [PuiSortDialogMixin],
+	watch: {
+		// Override mixin
+		rules(val) {
+			var size = 100;
+			if (val.length > 0) {
+				this.height = val.length * size;
+			} else {
+				this.height = size;
+			}
+		}
+	},
+	methods: {
+		// Override mixin
+		calculatePosition() {
+			this.$refs.dialog.style.right = '5px';
+			this.$refs.dialog.style.width = `${window.innerWidth - 10}px`;
+		}
+	}
+};
+</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>

package/src/components/puiaudit/PuiAuditForm.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="table_wrapper">
+		<table>
+			<thead>
+				<tr>
+					<th>{{ $t('puiaudit.attribute') }}</th>
+					<th v-if="type === 'update'">{{ $t('puiaudit.oldValue') }}</th>
+					<th>{{ $t('puiaudit.newValue') }}</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(item, index) in content" :key="index">
+					<td>
+						<span>{{ item.attribute }}</span>
+					</td>
+					<td v-if="type === 'update'">
+						<table v-if="item.oldValue && Array.isArray(item.oldValue)">
+							<tr>
+								<th>{{ $t('puiaudit.attribute') }}</th>
+								<th>{{ $t('puiaudit.value') }}</th>
+							</tr>
+							<tr v-for="(internalItem, internalIndex) in item.oldValue" :key="internalIndex">
+								<td>
+									<span>{{ internalItem[0].attribute }}</span>
+								</td>
+								<td>
+									<span>{{ internalItem[0].value }}</span>
+								</td>
+							</tr>
+						</table>
+
+						<span v-else>{{ item.oldValue }}</span>
+					</td>
+
+					<td v-if="item.value && Array.isArray(item.value)">
+						<table>
+							<tr>
+								<th>{{ $t('puiaudit.attribute') }}</th>
+								<th>{{ $t('puiaudit.value') }}</th>
+							</tr>
+							<tr v-for="(internalItem, internalIndex) in item.value" :key="internalIndex">
+								<td>
+									<span>{{ internalItem[0].attribute }}</span>
+								</td>
+								<td>
+									<span>{{ internalItem[0].value }}</span>
+								</td>
+							</tr>
+						</table>
+					</td>
+					<td v-else>
+						<span>{{ item.value }}</span>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiAuditForm',
+	data() {
+		return {
+			type: 'insert',
+			content: []
+		};
+	},
+	props: {
+		model: {
+			type: Object,
+			required: true
+		},
+		formDisabled: {
+			type: Boolean,
+			required: true
+		}
+	},
+	watch: {
+		model(newValue) {
+			this.type = newValue.type;
+			this.content = JSON.parse(newValue.content);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.table_wrapper {
+	height: 600px;
+	overflow-y: scroll;
+}
+table {
+	width: 100%;
+}
+table,
+th,
+td {
+	border: 1px solid #dddddd;
+	border-collapse: collapse;
+}
+th,
+td {
+	padding: 8px 10px;
+	text-align: left;
+}
+</style>

package/src/generalActions.js

@@ -0,0 +1,135 @@
+const puiGridImport = {
+	id: 'puiImportAction',
+	selectionType: 'general',
+	label: 'puiaction.import',
+	functionality: 'EXECUTE_IMPORT_EXPORT',
+	showInForm: false,
+	checkAvailability: function () {
+		return true;
+	},
+	runAction: function (action, model) {
+		const modelName = `${model.name}_importexport`;
+		this.$puiEvents.$emit(`pui-show-importDialog-${modelName}`);
+	}
+};
+
+const puiGridExport = {
+	id: 'puiExportAction',
+	selectionType: 'general',
+	label: 'puiaction.export',
+	functionality: 'EXECUTE_IMPORT_EXPORT',
+	showInForm: false,
+	checkAvailability: function () {
+		return true;
+	},
+	runAction: function (action, model) {
+		const modelName = `${model.name}_importexport`;
+		this.$puiEvents.$emit(`pui-show-exportDialog-${modelName}`);
+	}
+};
+
+const puiGridCopy = {
+	id: 'copyAction',
+	selectionType: 'single',
+	label: 'puiaction.copy',
+	functionality: 'EXECUTE_COPY',
+	showInForm: true,
+	checkAvailability: function () {
+		return true;
+	},
+	runAction: function (action, model, registries) {
+		const copyObjectPk = {};
+
+		for (var index in model.columns) {
+			const column = model.columns[index];
+			if (column.isPk) {
+				copyObjectPk[column.name] = registries[0][column.name];
+			}
+		}
+
+		const pk = this.$puiUtils.utf8ToB64(JSON.stringify(copyObjectPk));
+
+		if (this.$router.currentRoute.params.method) {
+			// action executed inside form so, replace route
+			const params = {
+				router: this.$router,
+				url: `/${model.name}/copy/${pk}`,
+				params: null,
+				query: {},
+				replace: true
+			};
+			this.$store.dispatch('puiRouterGoToUrl', params);
+		} else {
+			// action executed in datatable
+			const params = {
+				router: this.$router,
+				url: `${model.name}/copy/${pk}`,
+				params: null,
+				query: {}
+			};
+			this.$store.dispatch('puiRouterGoToUrl', params);
+		}
+	}
+};
+
+const puiDocgenMatchingTemplates = {
+	id: 'puiDocgenAction',
+	selectionType: 'multiple',
+	label: 'puiaction.docgen.generate',
+	functionality: 'GEN_PUI_DOCGEN',
+	showInForm: false,
+	applicableToCurrentFilter: true,
+	checkAvailability: function () {
+		return true;
+	},
+	runAction: function (action, model, registries, parameters) {
+		const pkRegistries = [];
+
+		if (registries) {
+			for (let i = 0; i < registries.length; i++) {
+				const pkRegistry = {};
+				for (var index in model.columns) {
+					const column = model.columns[index];
+					if (column.isPk) {
+						pkRegistry[column.name] = registries[i][column.name];
+					}
+				}
+				pkRegistries.push(pkRegistry);
+			}
+		}
+
+		const data = { isAction: true, model: model, registries: pkRegistries, parameters: parameters };
+		this.$puiEvents.$emit(`pui-modalDialogForm-puiDocgenTemplateMatching-${model.name}-show`, data);
+	}
+};
+
+const puiAudit = {
+	id: 'puiAuditAction',
+	selectionType: 'single',
+	label: 'puiaction.audit',
+	functionality: 'ACTION_PUI_AUDIT',
+	showInForm: true,
+	checkAvailability: function () {
+		return true;
+	},
+	runAction: function (action, model, registries) {
+		let pk = '';
+
+		for (var index in model.columns) {
+			const column = model.columns[index];
+			if (column.isPk) {
+				pk += registries[0][column.name] + '#';
+			}
+		}
+		pk = pk.substr(0, pk.length - 1);
+
+		let tableName = this.$store.getters.getModelByName(model.name).table;
+
+		this.$store.commit('setPuiAuditData', { tableName: tableName, tablePk: pk });
+		this.$puiEvents.$emit('pui-modalDialog-puiaudit-show');
+	}
+};
+
+export default {
+	actions: [puiGridImport, puiGridExport, puiGridCopy, puiDocgenMatchingTemplates, puiAudit]
+};

package/src/index.js

@@ -0,0 +1,31 @@
+import PuiDocgenTemplateParametersDialog from './components/desktop/toolbar/actions/docgen/PuiDocgenTemplateParametersDialog';
+import PuiGridActionsBtn from './components/desktop/toolbar/actions/PuiGridActionsBtn';
+import PuiGridFilterDialog from './components/desktop/toolbar/filtering/PuiGridFilterDialog';
+import PuiSimpleDatatable from './components/desktop/PuiSimpleDatatable';
+import PuiDatatable from './components/desktop/PuiDatatable';
+import PuiQuickEditionDatatable from './components/desktop/PuiQuickEditionDatatable';
+import PuiSimpleDatalist from './components/mobile/PuiSimpleDatalist';
+import PuiDatalist from './components/mobile/PuiDatalist';
+import PuiAuditForm from './components/puiaudit/PuiAuditForm';
+import PuiDatatablesKeepPage from './mixins/PuiDatatablesKeepPage';
+
+const Components = {
+	PuiDocgenTemplateParametersDialog,
+	PuiGridActionsBtn,
+	PuiGridFilterDialog,
+	PuiSimpleDatatable,
+	PuiDatatable,
+	PuiQuickEditionDatatable,
+	PuiSimpleDatalist,
+	PuiDatalist,
+	PuiAuditForm
+};
+
+export default {
+	install(Vue) {
+		Object.keys(Components).forEach((name) => {
+			Vue.component(name, Components[name]);
+			Vue.mixin(PuiDatatablesKeepPage());
+		});
+	}
+};

package/src/main.js

@@ -0,0 +1,67 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import VueI18n from 'vue-i18n';
+import Vuetify from 'vuetify/lib';
+
+import Pui9Basics from 'pui9-components';
+import Pui9Notify from 'pui9-notifications';
+import Pui9Requests from 'pui9-requests';
+import Pui9Utils from 'pui9-utils';
+
+import App from './App.vue';
+
+import '@fortawesome/fontawesome-pro/css/all.css';
+import 'vuetify/dist/vuetify.min.css';
+import '../../pui9-styles/pui9.css';
+
+import colors from 'vuetify/es5/util/colors';
+import es from 'vuetify/es5/locale/es';
+import ca from 'vuetify/es5/locale/ca';
+import en from 'vuetify/es5/locale/en';
+import fr from 'vuetify/es5/locale/fr';
+
+import storeObj from '../../pui9-store/store';
+import routerObj from './router';
+
+Vue.config.productionTip = false;
+
+Vue.use(Vuex);
+Vue.use(VueRouter);
+Vue.use(VueI18n);
+Vue.use(Vuetify, {
+	theme: {
+		primary: '#166bf2',
+		secondary: '#e56208',
+		accent: colors.orange.darken1,
+		error: colors.red.darken1
+	},
+	iconfont: 'fa',
+	lang: {
+		locales: { en, es, ca, fr },
+		current: 'es'
+	}
+});
+Vue.use(Pui9Basics, storeObj);
+Vue.use(Pui9Notify);
+Vue.use(Pui9Utils);
+
+const bus = new Vue();
+const store = new Vuex.Store(storeObj);
+const router = new VueRouter(routerObj);
+const i18n = new VueI18n({
+	locale: 'es',
+	messages: { en: {}, es: {} }
+});
+const requests = new Pui9Requests(store);
+
+Object.defineProperty(Vue.prototype, '$puiEvents', { value: bus });
+Object.defineProperty(Vue.prototype, '$puiI18n', { value: i18n });
+Object.defineProperty(Vue.prototype, '$puiRequests', { value: requests });
+
+new Vue({
+	store,
+	router,
+	i18n,
+	render: (h) => h(App)
+}).$mount('#app');