pui9-datatables 1.16.4

package/src/tests/PuiContainer.vue

@@ -0,0 +1,139 @@
+<template>
+	<v-main v-show="showContainer" :class="puiContainerClass">
+		<router-view class="pui-container__body"></router-view>
+	</v-main>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			isMobile: this.$store.state.global.isMobile,
+			showContainer: true,
+			desktopMenuOpened: false,
+			secondMenuOpened: false,
+			showLeftBar: true
+		};
+	},
+	computed: {
+		puiContainerClass() {
+			return {
+				'pui-container': true,
+				'pui-container--scroll': true,
+				'pui-container--desktop': !this.isMobile,
+				'pui-container--mobile': this.isMobile,
+				'pui-container--menu-closed': !this.desktopMenuOpened && !this.secondMenuOpened,
+				'pui-container--menu-keepExpanded': this.secondMenuOpened,
+				'pui-container--menu-opened': this.desktopMenuOpened && !this.secondMenuOpened,
+				'pui-container--menu-hidden': !this.showLeftBar
+			};
+		},
+		onPuiExpandMenu() {
+			return this.$store.state.menu.expandMenuForce;
+		},
+		onPuiHideMenu() {
+			return this.$store.state.menu.hideMenuForce;
+		},
+		onPuiSecondMenuShowed() {
+			return this.$store.state.menu.secondMenuShowedForce;
+		},
+		onPuiMenuMustColapseMenu() {
+			return this.$store.state.menu.mustColapseMenu;
+		},
+		onPuiMenuIconBarSelected() {
+			return this.$store.state.menu.iconBarSelected;
+		}
+	},
+	watch: {
+		onPuiExpandMenu() {
+			this.onExpandMenu(this.$store.state.menu.expandMenu);
+		},
+		onPuiHideMenu() {
+			this.showLeftBar = !this.$store.state.menu.hideMenu;
+		},
+		onPuiSecondMenuShowed() {
+			this.secondMenuOpened = this.$store.state.menu.secondMenuShowed;
+		},
+		onPuiMenuMustColapseMenu() {
+			this.desktopMenuOpened = false;
+		},
+		onPuiMenuIconBarSelected(obj) {
+			if (this.isMobile) {
+				this.showContainer = true;
+			} else {
+				if (obj.withMenu === undefined || obj.withMenu === null || obj.withMenu === true) {
+					this.desktopMenuOpened = false;
+				}
+			}
+		}
+	},
+	methods: {
+		onExpandMenu(expanded) {
+			if (this.isMobile) {
+				this.showContainer = !expanded;
+			} else {
+				this.desktopMenuOpened = expanded;
+				this.secondMenuOpened = false;
+			}
+		}
+	},
+	created() {
+		const menuConf = this.$store.getters.getMenuConf;
+		this.desktopMenuOpened = menuConf.expanded;
+		this.showLeftBar = menuConf.showLeftBar;
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+body {
+	--pui-container-header__heigh: 0;
+	--pui-container-footer__heigh: 0;
+	--pui-menu-bar__width: 64px;
+}
+.pui-container {
+	&--scroll {
+		overflow-y: auto;
+	}
+	&--desktop {
+		margin-left: var(--pui-menu-bar__width) !important;
+	}
+	&--menu-hidden {
+		margin-left: 0px !important;
+		width: 100% !important;
+	}
+	&--menu-opened {
+		margin-left: 304px !important;
+		width: calc(100% - 304px);
+	}
+	&--menu-closed {
+		width: calc(100% - var(--pui-menu-bar__width));
+		padding-left: 0px !important;
+	}
+	&--menu-keepExpanded {
+		margin-left: 0px !important;
+		width: calc(100% - var(--pui-menu-bar__width));
+	}
+	&--mobile {
+		padding-top: 0px !important;
+		margin-left: 0px !important;
+		width: calc(100vh - 50px) !important;
+	}
+	&__body {
+		height: calc(100vh - var(--pui-container-header__heigh) - var(--pui-container-footer__heigh));
+
+		&--withheader {
+			--pui-container-header__heigh: 7.5em;
+		}
+		&--withfooter {
+			--pui-container-footer__heigh: 1.875em;
+		}
+	}
+	&__header {
+		height: 4em;
+	}
+	&__children {
+		overflow-y: inherit;
+	}
+}
+</style>

package/src/tests/PuiProfileTestSimpleDatatable.vue

@@ -0,0 +1,66 @@
+<template>
+	<v-layout v-if="onModelsLoadedAndSaved">
+		<v-flex xs12>
+			<h2>{{ modelName }}</h2>
+			<pui-simple-datatable v-if="!isMobile" :modelName="modelName" :columns="columns"></pui-simple-datatable>
+			<pui-simple-datalist v-else :modelName="modelName">
+				<template slot="itemContent" slot-scope="{ item }">
+					<v-list-item-title>{{ item.profile }}</v-list-item-title>
+					<v-list-item-subtitle>{{ item.name }}</v-list-item-subtitle>
+				</template>
+			</pui-simple-datalist>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import PuiSimpleDatatable from '@/components/desktop/PuiSimpleDatatable';
+import PuiSimpleDatalist from '@/components/mobile/PuiSimpleDatalist';
+
+export default {
+	components: { PuiSimpleDatatable, PuiSimpleDatalist },
+	data() {
+		return {
+			isMobile: this.$store.getters.isMobile,
+			modelName: 'puiprofile',
+			columns: [
+				{
+					name: 'profile',
+					title: 'vpuiprofile.profile',
+					type: 'text',
+					isPk: true,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'profile'
+				},
+				{
+					name: 'name',
+					title: 'vpuiprofile.name',
+					type: 'text',
+					isPk: false,
+					visible: true,
+					order: 2,
+					orderable: true,
+					data: 'name'
+				},
+				{
+					name: 'lang',
+					title: 'vpuiprofile.lang',
+					type: 'text',
+					isPk: false,
+					visible: true,
+					order: 3,
+					orderable: true,
+					data: 'lang'
+				}
+			]
+		};
+	},
+	computed: {
+		onModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	}
+};
+</script>

package/src/tests/PuiUserTestCompleteDatatable.vue

@@ -0,0 +1,126 @@
+<template>
+	<v-layout v-if="onModelsLoadedAndSaved">
+		<v-flex xs12>
+			<h2>{{ modelName }}</h2>
+			<pui-datatable v-if="!isMobile" :modelName="modelName" :columns="columns"></pui-datatable>
+			<pui-datalist v-else :modelName="modelName">
+				<template slot="itemContent" slot-scope="{ item }">
+					<v-list-item-title>{{ item.usr }}</v-list-item-title>
+					<v-list-item-subtitle>{{ item.name }}</v-list-item-subtitle>
+				</template>
+			</pui-datalist>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import PuiDatatable from '@/components/desktop/PuiDatatable';
+import PuiDatalist from '@/components/mobile/PuiDatalist';
+
+export default {
+	components: { PuiDatatable, PuiDatalist },
+	data() {
+		return {
+			isMobile: this.$store.getters.isMobile,
+			modelName: 'puiuser',
+			columns: [
+				{
+					name: 'usr',
+					title: 'vpuiuser.usr',
+					type: 'text',
+					isPk: true,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'usr'
+				},
+				{
+					name: 'name',
+					title: 'vpuiuser.name',
+					type: 'text',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'name'
+				},
+				{
+					name: 'email',
+					title: 'vpuiuser.email',
+					type: 'text',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'email'
+				},
+				{
+					name: 'language',
+					title: 'vpuiuser.language',
+					type: 'text',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'language'
+				},
+				{
+					name: 'dateformat',
+					title: 'vpuiuser.dateformat',
+					type: 'text',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'dateformat'
+				},
+				{
+					name: 'disabled',
+					title: 'vpuiuser.disabled',
+					type: 'numeric',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'disabled'
+				},
+				{
+					name: 'disableddate',
+					title: 'vpuiuser.disableddate',
+					type: 'datetime',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'disableddate'
+				},
+				{
+					name: 'lastaccesstime',
+					title: 'vpuiuser.lastaccesstime',
+					type: 'datetime',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'lastaccesstime'
+				},
+				{
+					name: 'lastaccessip',
+					title: 'vpuiuser.lastaccessip',
+					type: 'text',
+					isPk: false,
+					visible: true,
+					order: 1,
+					orderable: true,
+					data: 'lastaccessip'
+				}
+			]
+		};
+	},
+	computed: {
+		onModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	}
+};
+</script>

package/src/tests/PuiVariableTestQuickEditionDatatable.vue

@@ -0,0 +1,39 @@
+<template>
+	<v-layout>
+		<v-flex xs12>
+			<h2>{{ modelName }}</h2>
+			<pui-quick-edition-datatable
+				v-if="onModelsLoadedAndSaved"
+				:modelName="modelName"
+				formPosition="right"
+				:formComponentName="formComponentName"
+				:formModelTemplate="formModelTemplate"
+				:disabled="false"
+			></pui-quick-edition-datatable>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import PuiQuickEditionDatatable from '@/components/desktop/PuiQuickEditionDatatable';
+import PuiVariableTestQuickEditionForm from './PuiVariableTestQuickEditionForm';
+
+export default {
+	components: { PuiQuickEditionDatatable },
+	data() {
+		return {
+			modelName: 'puivariable',
+			formComponentName: '',
+			formModelTemplate: {}
+		};
+	},
+	computed: {
+		onModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	},
+	created() {
+		this.$store.state.components[PuiVariableTestQuickEditionForm.name] = PuiVariableTestQuickEditionForm;
+	}
+};
+</script>

package/src/tests/PuiVariableTestQuickEditionForm.vue

@@ -0,0 +1,18 @@
+<template>
+	<v-layout>
+		<v-flex xs12>
+			<h2>{{ modelName }}</h2>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+export default {
+	name: 'PuiVariableTestQuickEditionForm',
+	data() {
+		return {
+			modelName: 'puivariable'
+		};
+	}
+};
+</script>