pui9-components 2.0.7 → 3.0.0

package/src/components/PuiSelectDetailDialog.vue

@@ -1,113 +0,0 @@
-<template>
-	<pui-modal-dialog
-		:titleText="titleText"
-		:messageText="messageText"
-		:okText="okText"
-		:cancelText="cancelText"
-		:widthDialog="widthDialog"
-		:dialogName="dialogName"
-		ref="modalForm"
-	>
-		<template slot="message">
-			<component :is="componentName" :pk="componentPk" :method="componentMethod" isModalDialog></component>
-		</template>
-	</pui-modal-dialog>
-</template>
-
-<script>
-export default {
-	name: 'PuiSelectDetailDialog',
-	props: {
-		parentId: {
-			type: String,
-			required: true
-		},
-		componentLabel: {
-			type: String,
-			required: true
-		},
-		componentName: {
-			type: String,
-			required: true
-		},
-		componentPk: {
-			type: String,
-			required: true
-		},
-		componentMethod: {
-			type: String,
-			required: true
-		},
-		modelName: {
-			type: String,
-			default: null,
-			required: false
-		}
-	},
-	data() {
-		return {
-			titleText: this.componentLabel,
-			messageText: '',
-			okText: this.componentMethod !== 'read' ? this.$t('form.save') : this.$t('form.ok'),
-			cancelText: this.componentMethod !== 'read' ? this.$t('form.cancel') : null,
-			widthDialog: window.innerWidth * 0.9,
-			dialogName: this.componentName + '_' + this.parentId + '_popup'
-		};
-	},
-	mounted() {
-		var self = this;
-		this.$puiEvents.$on(`pui-modalDialog-${this.dialogName}-ok`, () => {
-			if (self.componentMethod === 'read') {
-				this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`);
-			} else {
-				const form = self.getFormComponent(self.$refs.modalForm.$children[0]);
-				if (form) {
-					form.save(true);
-					this.$puiEvents.$on(`onPui-insertRow-dataTable-${self.modelName}`, (data) => {
-						this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`, data);
-					});
-					this.$puiEvents.$on(`onPui-editRow-dataTable-${self.modelName}`, (data) => {
-						this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`, data);
-					});
-				} else {
-					this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`);
-				}
-			}
-		});
-		this.$puiEvents.$on(`pui-modalDialog-${this.dialogName}-cancel`, () => {
-			this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`);
-		});
-	},
-	destroyed() {
-		this.$puiEvents.$off(`pui-modalDialog-${this.dialogName}-ok`);
-		this.$puiEvents.$off(`pui-modalDialog-${this.dialogName}-cancel`);
-		if (this.modelName) {
-			this.$puiEvents.$off(`onPui-insertRow-dataTable-${this.modelName}`);
-			this.$puiEvents.$off(`onPui-editRow-dataTable-${this.modelName}`);
-		}
-	},
-	methods: {
-		getFormComponent(component) {
-			if (!component) {
-				return null;
-			}
-			if (
-				component.$options &&
-				(component.$options._componentTag === `${this.modelName}form` || component.$options._componentTag === `${this.modelName}-form`)
-			) {
-				return component;
-			}
-			for (let i = 0, childrenLength = component.$children.length; i < childrenLength; i++) {
-				const child = this.getFormComponent(component.$children[i]);
-				if (
-					child &&
-					child.$options &&
-					(child.$options._componentTag === `${this.modelName}form` || child.$options._componentTag === `${this.modelName}-form`)
-				) {
-					return child;
-				}
-			}
-		}
-	}
-};
-</script>

package/src/components/PuiSelectTextService.vue

@@ -1,61 +0,0 @@
-<template>
-	<v-list-item-title v-if="type === 'item'" v-html="text" :title="text" :style="'white-space: unset !important;'"></v-list-item-title>
-	<span v-else class="pr-2" :class="compClass">{{ text }}</span>
-</template>
-
-<script>
-export default {
-	name: 'PuiSelectTextService',
-	data: () => ({}),
-	props: {
-		item: {
-			type: [Object, String, Number],
-			required: true
-		},
-		type: {
-			type: String,
-			default: 'item',
-			required: false
-		},
-		itemText: {
-			type: [Function, String, Array],
-			required: true
-		},
-		truncate: {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		writing: {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-			required: false
-		}
-	},
-	computed: {
-		text() {
-			let customText;
-			if (this.itemText instanceof Function) {
-				customText = this.itemText(this.item);
-			} else if (Array.isArray(this.itemText)) {
-				customText = this.itemText.slice(1).reduce((a, b) => {
-					return `${a} - ${b}`;
-				}, this.itemText[0]);
-			}
-
-			return customText || this.item[this.itemText];
-		},
-		compClass() {
-			return {
-				'puiselect-text-truncate': this.truncate && !this.writing && !this.disabled,
-				'puiselect-text': !this.writing
-			};
-		}
-	}
-};
-</script>

package/src/components/PuiSelectorList.vue

@@ -1,169 +0,0 @@
-<template>
-	<div>
-		<v-row>
-			<v-col>
-				<div :style="{ 'max-height': '336px', 'overflow-y': 'auto' }">
-					<v-list v-if="hasCols">
-						<v-list-item-group v-model="columnId" color="primary" mandatory>
-							<!-- <v-list-item link v-for="(column, index) in confReactive.columns" :key="`gridColumn-${index}`" @click="columnId = index"> -->
-							<v-list-item
-								link
-								v-for="(column, index) in columns"
-								:key="`gridColumn-${index}`"
-								@click="
-									columnId = index;
-									columnValue = column;
-									handleClick();
-								"
-							>
-								<v-list-item-content>
-									<v-list-item-title v-if="dataType == 'Object'"> {{ column[nameProp] }} </v-list-item-title>
-									<v-list-item-title v-else> {{ column }} </v-list-item-title>
-								</v-list-item-content>
-							</v-list-item>
-						</v-list-item-group>
-					</v-list>
-				</div>
-			</v-col>
-			<v-col>
-				<v-row>
-					<v-col>
-						<v-btn depressed @click="addColumn()"><v-icon small>far fa-plus</v-icon></v-btn>
-					</v-col>
-				</v-row>
-				<v-row class="mb-2">
-					<v-col>
-						<v-btn depressed @click="removeColumn()"><v-icon small>far fa-minus</v-icon></v-btn>
-					</v-col>
-				</v-row>
-				<v-select toplabel clearable :items="currentItemsToSelect" v-model="selected"></v-select>
-			</v-col>
-		</v-row>
-		<slot name="below"></slot>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'PuiSelectorList',
-	data() {
-		return {
-			columnId: this.value,
-			columnValue: '',
-			selected: '',
-			currentItemsToSelect: []
-		};
-	},
-	props: {
-		confReactive: {
-			required: true
-		},
-
-		objName: {
-			type: String,
-			required: true
-		},
-		dataType: {
-			type: String,
-			default: 'Object'
-		},
-		nameProp: {
-			type: String,
-			default: 'name'
-		},
-		dataTemplate: {},
-		itemsToSelect: {
-			type: Array
-		},
-		colsNames: {
-			type: Array
-		}
-	},
-	methods: {
-		addColumn() {
-			if (this.selected != '') {
-				let data = '';
-
-				if (this.dataType == 'Object') {
-					data = { ...this.dataTemplate };
-					this.$set(data, this.nameProp, this.selected);
-				} else {
-					data = this.selected;
-				}
-				if (!(this.objName in this.confReactive)) {
-					//add = [add];
-					this.$set(this.confReactive, this.objName, [data]);
-				} else {
-					this.confReactive[this.objName].push(data);
-				}
-				this.currentItemsToSelect = this.currentItemsToSelect.filter((v) => v != this.selected);
-				this.selected = '';
-			}
-		},
-		removeColumn() {
-			if (this.confReactive[this.objName].length == 0) {
-				return;
-			}
-			let v = this.columnValue;
-			if (v == '') {
-				v = this.confReactive[this.objName][this.columnId];
-			}
-			if (this.dataType == 'Object') {
-				v = v[this.nameProp];
-			}
-			this.currentItemsToSelect.push(v);
-			this.columnValue = '';
-			let colDelete = this.columnId;
-			if (this.columnId > 0) {
-				this.columnId--;
-			}
-			this.handleClick(); // Update the value on the parent before removing the value from the array. It may give undefined errors without this line.
-			this.confReactive[this.objName].splice(colDelete, 1);
-		},
-		handleClick() {
-			this.$emit('input', this.columnId);
-		}
-	},
-	computed: {
-		hasCols() {
-			if (typeof this.confReactive === 'undefined') {
-				return false;
-			}
-
-			if (typeof this.confReactive != undefined) {
-				return Object.prototype.hasOwnProperty.call(this.confReactive, this.objName);
-			}
-			return false;
-		},
-		columns() {
-			if (typeof this.objName != undefined && Object.prototype.hasOwnProperty.call(this.confReactive, this.objName)) {
-				return this.confReactive[this.objName];
-			}
-			return this.confReactive;
-		}
-	},
-	created() {
-		if (this.itemsToSelect != undefined) {
-			if (this.itemsToSelect.length != 0) {
-				this.currentItemsToSelect = [...this.itemsToSelect];
-			}
-		}
-		if (this.hasCols && Array.isArray(this.confReactive[this.objName])) {
-			this.confReactive[this.objName] = this.confReactive[this.objName].map((v) => {
-				if (!(typeof v === 'object' && v !== null)) {
-					return { name: v };
-				}
-				return v;
-			});
-			for (let item of this.confReactive[this.objName]) {
-				if (this.dataType == 'Object') {
-					const value = item[this.nameProp];
-					this.currentItemsToSelect = this.currentItemsToSelect.filter((v) => v != value);
-				} else {
-					this.currentItemsToSelect = this.currentItemsToSelect.filter((v) => v != item);
-				}
-			}
-		}
-	}
-};
-</script>

package/src/components/PuiSort.vue

@@ -1,98 +0,0 @@
-<template>
-	<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 :list="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="name"
-								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>
-</template>
-<script>
-import PuiSortMixin from '../mixins/PuiSortMixin';
-
-export default {
-	name: 'PuiSort',
-	mixins: [PuiSortMixin]
-};
-</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>