pui9-components 1.16.4

package/src/components/PuiField.vue

@@ -0,0 +1,30 @@
+<template>
+	<div>
+		<v-layout>
+			<v-flex xs12>
+				<span style="font-weight: 500">{{ label }}</span>
+			</v-flex>
+		</v-layout>
+		<v-layout>
+			<v-flex xs12>{{ value }}</v-flex>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiField',
+	props: {
+		label: {
+			type: String,
+			required: true,
+			default: ''
+		},
+		value: {
+			type: [String, Number],
+			required: true,
+			default: ''
+		}
+	}
+};
+</script>

package/src/components/PuiFieldSet.vue

@@ -0,0 +1,27 @@
+<template>
+	<fieldset class="pt-1 pb-1 pl-2 pr-2 ml-1 mr-1 mb-1" :class="getStyleComp">
+		<legend>{{ title }}</legend>
+		<slot></slot>
+	</fieldset>
+</template>
+
+<script>
+export default {
+	name: 'PuiFieldSet',
+	props: {
+		title: {
+			type: String,
+			default: ''
+		},
+		highlighted: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		getStyleComp() {
+			return { highlighted: this.highlighted };
+		}
+	}
+};
+</script>

package/src/components/PuiFormFooter.vue

@@ -0,0 +1,64 @@
+<template>
+	<div v-if="!isMobile" class="pui-formFooter pa-1 pl-3 pr-3 elevation-2" :class="getComp" ref="puiFormFooter">
+		<slot></slot>
+	</div>
+	<div v-else class="pa-1 pl-3 pr-3 elevation-2" :class="getComp">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiFormFooter',
+	data: () => ({
+		isMobile: false,
+		desktopMenuOpened: false,
+		secondMenuOpened: false
+	}),
+	computed: {
+		getComp() {
+			return {
+				'pui-formFooter--menuexpanded': this.desktopMenuOpened || this.secondMenuOpened,
+				'pui-formFooter--menuhidden': !this.desktopMenuOpened && !this.secondMenuOpened
+			};
+		},
+		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;
+		}
+	},
+	watch: {
+		onPuiExpandMenu() {
+			this.desktopMenuOpened = this.$store.state.menu.expandMenu;
+			this.secondMenuOpened = false;
+		},
+		onPuiHideMenu() {
+			this.desktopMenuOpened = !this.$store.state.menu.hideMenu;
+		},
+		onPuiSecondMenuShowed() {
+			this.secondMenuOpened = this.$store.state.menu.secondMenuShowed;
+		},
+		onPuiMenuMustColapseMenu() {
+			this.desktopMenuOpened = false;
+		}
+	},
+	created() {
+		this.isMobile = this.$store.getters.isMobile;
+		this.desktopMenuOpened = this.$store.state.menu.expanded || this.$store.state.menu.expandMenu;
+	},
+	mounted() {
+		this.$store.dispatch('puiFormShowFooter', true);
+	},
+	destroyed() {
+		this.$store.dispatch('puiFormShowFooter', false);
+	}
+};
+</script>

package/src/components/PuiFormFooterBtns.vue

@@ -0,0 +1,118 @@
+<template>
+	<v-layout v-if="!isMobile" justify-space-between class="pui-form-footer-btns">
+		<v-btn text outlined @click.native="back()">{{ $t('form.cancel') }}</v-btn>
+
+		<div>
+			<slot></slot>
+			<v-btn
+				v-if="!formDisabled && enableSaveAndNew"
+				color="secondary"
+				class="pui-form-footer-btns__desktop"
+				@click.native="saveAndNew()"
+				:disabled="saveDisabled"
+				>{{ $t('form.save&new') }}</v-btn
+			>
+			<v-btn
+				v-if="!formDisabled && enableSaveAndUpdate"
+				color="secondary"
+				class="pui-form-footer-btns__desktop"
+				@click.native="saveAndUpdate()"
+				:disabled="saveDisabled"
+				>{{ $t('form.save&update') }}</v-btn
+			>
+			<v-btn v-if="!formDisabled" color="secondary" class="pui-form-footer-btns__desktop" @click.native="save(false)" :disabled="saveDisabled">
+				{{ enableSaveAndNew || enableSaveAndUpdate ? $t('form.save&back') : $t('form.save') }}
+			</v-btn>
+		</div>
+	</v-layout>
+	<v-speed-dial
+		v-else-if="!formDisabled && (enableSaveAndNew || enableSaveAndUpdate)"
+		v-model="fab"
+		:top="top"
+		:bottom="bottom"
+		:right="right"
+		:left="left"
+		:direction="direction"
+		:transition="transition"
+		class="pui-form-footer-btns"
+		fixed
+	>
+		<template v-slot:activator>
+			<v-btn v-model="fab" fab dark class="white--text primary">
+				<v-icon v-if="fab">far fa-times-circle</v-icon>
+				<v-icon v-else>far fa-save</v-icon>
+			</v-btn>
+		</template>
+		<v-btn fab dark small class="white--text primary" @click.native="save(false)" :disabled="saveDisabled">
+			<v-icon>far fa-save</v-icon>
+		</v-btn>
+		<v-btn fab dark small icon class="white--text secondary" @click.native="saveAndUpdate()" :disabled="saveDisabled">
+			<v-icon>far fa-edit</v-icon>
+		</v-btn>
+		<v-btn fab dark small icon class="white--text secondary" @click.native="saveAndNew()" :disabled="saveDisabled">
+			<v-icon>far fa-plus-circle</v-icon>
+		</v-btn>
+		<slot></slot>
+	</v-speed-dial>
+	<v-btn v-else-if="!formDisabled" fab dark bottom right fixed class="white--text primary" @click.native="save(false)" :disabled="saveDisabled">
+		<v-icon>far fa-save</v-icon>
+	</v-btn>
+</template>
+
+<script>
+export default {
+	name: 'PuiFormFooterBtns',
+	data() {
+		return {
+			isMobile: false,
+			fab: false,
+			top: false,
+			bottom: true,
+			left: false,
+			right: true,
+			direction: 'top',
+			transition: 'slide-y-reverse-transition'
+		};
+	},
+	props: {
+		formDisabled: {
+			type: Boolean,
+			required: true
+		},
+		saveDisabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		saveAndNew: {
+			type: Function,
+			default: null,
+			required: false
+		},
+		saveAndUpdate: {
+			type: Function,
+			default: null,
+			required: false
+		},
+		save: {
+			type: Function,
+			required: true
+		},
+		back: {
+			type: Function,
+			required: true
+		}
+	},
+	computed: {
+		enableSaveAndNew() {
+			return this.$store.state.form.showSaveAndNew && this.saveAndNew;
+		},
+		enableSaveAndUpdate() {
+			return this.$store.state.form.showSaveAndUpdate && this.saveAndUpdate;
+		}
+	},
+	created() {
+		this.isMobile = this.$store.getters.isMobile;
+	}
+};
+</script>

package/src/components/PuiFormHeader.vue

@@ -0,0 +1,25 @@
+<template>
+	<v-layout v-if="showHeader" class="pui-form-header mt-1 ml-3 mr-3 mb-3">
+		<v-flex xs12 class="pa-2">
+			<slot></slot>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+export default {
+	name: 'PuiFormHeader',
+	data: () => ({
+		isMobile: false
+	}),
+	props: {
+		showHeader: {
+			type: Boolean,
+			default: false
+		}
+	},
+	created() {
+		this.isMobile = this.$store.getters.isMobile;
+	}
+};
+</script>

package/src/components/PuiFormLoading.vue

@@ -0,0 +1,12 @@
+<template>
+	<v-row align="center" justify="center">
+		<v-progress-circular indeterminate color="primary"></v-progress-circular>
+		<span class="ml-3">{{ $t('form.loading') }}</span>
+	</v-row>
+</template>
+
+<script>
+export default {
+	name: 'PuiFormLoading'
+};
+</script>

package/src/components/PuiFormMiniAudit.vue

@@ -0,0 +1,53 @@
+<template>
+	<v-layout wrap class="puiminiaudit mt-2 mb-4">
+		<v-flex xs12>
+			<label>{{ $t('form.miniaudit.created') }}</label>
+			<label>{{ returnData(internalValue.usralta) }}{{ $t('form.miniaudit.at') }}</label>
+			<label>{{ returnData(internalValue.fecalta) }}</label>
+		</v-flex>
+		<v-flex xs12>
+			<label>{{ $t('form.miniaudit.modified') }}</label>
+			<label>{{ returnData(internalValue.usrmodif) }}{{ $t('form.miniaudit.at') }}</label>
+			<label>{{ returnData(internalValue.fecmodif) }}</label>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import dateTimeUtils from '../dateTimeUtils';
+
+export default {
+	name: 'PuiFormMiniAudit',
+	props: {
+		model: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			internalValue: {}
+		};
+	},
+	created() {
+		this.internalValue = Object.assign({}, this.model);
+		const dateFormat = this.$store.getters.dateFormat;
+		const timeFormat = this.$store.getters.timeFormat;
+
+		if (this.model.fecmodif !== null && this.model.fecmodif !== undefined) {
+			this.internalValue.fecmodif = dateTimeUtils.getLocalFormattedDate(this.model.fecmodif, `${dateFormat} ${timeFormat}`);
+		}
+		if (this.model.fecalta !== null && this.model.fecalta !== undefined) {
+			this.internalValue.fecalta = dateTimeUtils.getLocalFormattedDate(this.model.fecalta, `${dateFormat} ${timeFormat}`);
+		}
+	},
+	methods: {
+		returnData(value) {
+			if (!value) {
+				return '#####';
+			}
+			return value;
+		}
+	}
+};
+</script>

package/src/components/PuiMasterDetail.vue

@@ -0,0 +1,96 @@
+<template>
+	<div class="pui-masterdetail">
+		<component
+			:is="component"
+			v-if="component"
+			:parentModelName="parentModelName"
+			:parentModel="parentModel"
+			:parentPk="parentPk"
+			:parentPkChildFk="parentPkChildFk"
+			:masterDetail="masterDetail"
+			:showCreateBtn="showCreateBtn"
+			:showDeleteBtn="showDeleteBtn"
+			:showFilterListBtn="showFilterListBtn"
+			:showMasterDetailFilterListBtn="showMasterDetailFilterListBtn"
+			:showMasterDetailFilterBtn="showMasterDetailFilterBtn"
+			:showMasterDetailSortBtn="showMasterDetailSortBtn"
+			:showMasterDetailConfBtn="showMasterDetailConfBtn"
+			:readOnly="formDisabled"
+			:modalDialog="modalDialog"
+		/>
+		<br />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiMasterDetail',
+	data() {
+		return {
+			component: null,
+			masterDetail: true
+		};
+	},
+	props: {
+		componentName: {
+			type: String,
+			required: true
+		},
+		parentModelName: {
+			type: String,
+			required: true
+		},
+		parentModel: {
+			type: Object
+		},
+		parentPk: {
+			type: String,
+			required: true
+		},
+		parentPkChildFk: {
+			type: Object,
+			required: false
+		},
+		showCreateBtn: {
+			type: Boolean,
+			default: true
+		},
+		showDeleteBtn: {
+			type: Boolean,
+			default: true
+		},
+		showFilterListBtn: {
+			type: Boolean,
+			default: false
+		},
+		showMasterDetailFilterListBtn: {
+			type: Boolean,
+			default: false
+		},
+		showMasterDetailFilterBtn: {
+			type: Boolean,
+			default: false
+		},
+		showMasterDetailSortBtn: {
+			type: Boolean,
+			default: false
+		},
+		showMasterDetailConfBtn: {
+			type: Boolean,
+			default: false
+		},
+		formDisabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		modalDialog: {
+			type: Boolean,
+			default: false
+		}
+	},
+	mounted() {
+		this.component = this.componentName;
+	}
+};
+</script>

package/src/components/PuiModalDialog.vue

@@ -0,0 +1,87 @@
+<template>
+	<v-layout wrap>
+		<v-flex xs10 md8 lg6 xl4>
+			<div class="text-center">
+				<v-dialog :id="`${dialogName}-modal-container`" persistent eager v-model="showDialog" :width="widthDialog">
+					<v-card class="pa-2">
+						<v-card-title class="pl-3 headline lighten-2" primary-title>{{ titleText }}</v-card-title>
+						<v-card-text class="pl-3" v-if="messageText">{{ messageText }}</v-card-text>
+						<slot name="message"></slot>
+						<v-card-actions ref="actions">
+							<v-spacer></v-spacer>
+							<v-btn
+								v-if="cancelText"
+								:id="`${dialogName}-btn-cancel`"
+								depressed
+								@click="
+									showDialog = false;
+									publishCancel();
+								"
+								>{{ cancelText }}</v-btn
+							>
+							<v-btn :id="`${dialogName}-btn-ok`" color="primary" depressed @click="publishOk()" :disabled="disableOk">{{
+								okText
+							}}</v-btn>
+						</v-card-actions>
+					</v-card>
+				</v-dialog>
+			</div>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+export default {
+	name: 'PuiModalDialog',
+	props: {
+		titleText: {
+			type: String,
+			required: true
+		},
+		messageText: {
+			type: String,
+			required: true
+		},
+		okText: {
+			type: String,
+			required: true
+		},
+		cancelText: {
+			type: String
+		},
+		dialogName: {
+			type: String,
+			required: true
+		},
+		disableOk: {
+			type: Boolean,
+			default: false
+		},
+		widthDialog: {
+			type: Number,
+			default: 500
+		},
+		onShow: {
+			type: Function,
+			default: null
+		}
+	},
+	data() {
+		return {
+			disabled: false,
+			showDialog: true
+		};
+	},
+	mounted() {
+		this.onShow && this.onShow();
+	},
+	methods: {
+		publishOk() {
+			this.$puiEvents.$emit(`pui-modalDialog-${this.dialogName}-ok`);
+		},
+		publishCancel() {
+			this.$puiEvents.$emit(`pui-modalDialog-${this.dialogName}-cancel`);
+		}
+	}
+};
+</script>