pui9-components 1.17.3 → 2.0.7

package/src/components/PuiFilterGroup.vue

@@ -1,92 +1,75 @@
 <template>
-	<v-layout wrap class="pb-1 pt-1 mb-1 puiFilterGroup" @mouseover.stop="showGroupBtns = true" @mouseout="showGroupBtns = false">
-		<v-flex xs12 v-if="isGroup0">
-			<v-toolbar height="48" class="elevation-0 bottomtoolbar pt-1 pb-1">
-				<v-btn v-if="disabled === false" class="btnAddGroup elevation-0" @click="addSubGroup()">
-					<v-icon small>fa fa-layer-group</v-icon>
-					<span>{{ $t('addGroup') }}</span>
-				</v-btn>
-				<v-spacer></v-spacer>
-			</v-toolbar>
-		</v-flex>
-		<v-flex xs12 v-if="(isGroup0 && groups.length > 1) || !isGroup0">
-			<v-layout wrap class="puiFilterGroup__groupOperator pt-1 pl-3">
-				<v-flex xs4 align-self-center>
-					<span>{{ $t('labelGroup') }}</span>
-				</v-flex>
-				<v-flex xs2>
-					<v-select
-						:label="$t('or')"
-						append-icon="fa fa-angle-down"
-						solo
-						flat
-						hide-details
-						:items="groupOperators"
-						v-model="groupOp"
+	<v-container class="pa-2 mb-2 puiFilterGroup" @mouseover.stop="showGroupBtns = true" @mouseout="showGroupBtns = false">
+		<!-- Operador lógico para el grupo -->
+		<v-col xs="12" class="pa-0 mb-n2 d-flex">
+			<span class="pa-0 pt-2 pr-3">{{ $t('labelGroup') }}</span>
+			<v-select
+				v-model="filterGroupModel.groupOp"
+				class="pr-2"
+				style="max-width: 100px !important"
+				:items="groupOperators"
+				:label="$t('or')"
+				append-icon="fa fa-angle-down"
+				:disabled="disabled"
+				solo
+				flat
+				hide-details
+			></v-select>
+		</v-col>
+
+		<!-- Selects reglas -->
+		<v-col cols="12" v-if="filterGroupModel.rules && filterGroupModel.rules.length > 0">
+			<v-row v-for="(rule, index) in filterGroupModel.rules" :key="index">
+				<v-col xs12 class="pt-2 pa-0 pl-0 pr-2 d-flex">
+					<pui-filter-rule
+						:ref="`rule${index}`"
+						:ruleIndexProp="index"
+						:groupName="groupName"
+						:columnsProp="columnsProp"
+						:filterColumnValues="filterColumnValues"
+						:filterRuleProp="rule"
 						:disabled="disabled"
-					></v-select>
-				</v-flex>
-			</v-layout>
-		</v-flex>
-		<v-layout v-if="!isGroup0" wrap>
-			<v-flex xs12>
-				<v-layout v-for="(rule, i) in rules" :key="i">
-					<v-flex xs11>
-						<pui-filter-rule
-							:ref="`rule${i}`"
-							:ruleIndex="i"
-							:columns="columns"
-							:fieldProp="rule.field"
-							:opProp="rule.op"
-							:dataProp="rule.data"
-							:group="groupName"
-							:ruleOperators="groupOperators"
-							:disabled="disabled"
-						></pui-filter-rule>
-					</v-flex>
-					<v-flex xs1 v-if="disabled === false">
-						<v-list-item>
-							<v-icon class="pointer" small @click.native="removeRule(i)">fa fa-trash-alt</v-icon>
-						</v-list-item>
-					</v-flex>
-				</v-layout>
-			</v-flex>
-		</v-layout>
-		<v-layout wrap v-if="groups.length > 0" class="full-width">
+						@change="onFilterRuleChanges(index)"
+					></pui-filter-rule>
+					<v-icon v-if="disabled === false" class="mt-2 ml-2 mr-n1" small v-ripple="false" @click="removeRule(index)"
+						>fa fa-trash-alt</v-icon
+					>
+				</v-col>
+			</v-row>
+		</v-col>
+
+		<!-- Filter group -->
+		<v-col cols="12" v-if="filterGroupModel.groups.length > 0" class="pa-0 pt-4">
 			<pui-filter-group
-				v-for="(group, i) in groups"
-				:groupOperators="groupOperators"
-				:columns="columns"
-				:groupName="groupName + '-' + i"
-				:rulesProp="groupsProp ? groupsProp[i].rules : undefined"
-				:groupOpProp="groupsProp ? groupsProp[i].groupOp : undefined"
-				:groupsProp="groupsProp ? groupsProp[i].groups : undefined"
-				:ref="`group${i}`"
-				:key="i"
-				:disabled="disabled"
+				v-for="(group, index) in filterGroupModel.groups"
+				:ref="`group${index}`"
+				:groupIndexProp="index"
+				:filterGroupProp="group"
+				:columnsProp="columnsProp"
+				:filterColumnValues="filterColumnValues"
 				:showSubgroupBtn="showSubgroupBtn"
+				:disabled="disabled"
+				:key="index"
+				@change="onFilterGroupChanges(index)"
 			></pui-filter-group>
-		</v-layout>
-		<v-layout v-if="!isGroup0" wrap>
-			<v-flex xs12>
-				<v-toolbar height="32" class="elevation-0 puiFilterGroup__bottombar">
-					<v-btn v-if="disabled === false" class="btnGroup btnAddRule elevation-0 ml-3" @click="addRule()">
-						<v-icon small>far fa-plus</v-icon>
-						<span>{{ $t('addRule') }}</span>
-					</v-btn>
-					<v-btn v-if="showSubgroupBtn && disabled === false" class="btnGroup btnAddGroup elevation-0" @click="addSubGroup()">
-						<v-icon small>fa fa-layer-group</v-icon>
-						<span>{{ $t('addSubGroup') }}</span>
-					</v-btn>
-					<v-btn v-if="!isFirstGroup && disabled === false" class="btnGroup btnRemGroup elevation-0" @click="removeGroup()">
-						<v-icon small>fa fa-trash-alt</v-icon>
-						<span>{{ $t('removeGroup') }}</span>
-					</v-btn>
-					<v-spacer></v-spacer>
-				</v-toolbar>
-			</v-flex>
-		</v-layout>
-	</v-layout>
+		</v-col>
+
+		<!-- Buttons acciones -->
+		<v-col cols="12" class="elevation-0" :class="isRootGroup && filterGroupModel.groups.length > 0 ? 'pa-0 pt-0' : 'pa-0 pt-3'">
+			<v-btn v-if="disabled === false" class="btnGroup btnAddRule elevation-0" @click="addRule">
+				<v-icon small>far fa-plus</v-icon>
+				<span>{{ $t('addRule') }}</span>
+			</v-btn>
+			<v-btn v-if="showSubgroupBtn && disabled === false" class="btnGroup btnAddGroup elevation-0 ml-1" @click="addSubGroup">
+				<v-icon small>fa fa-layer-group</v-icon>
+				<span>{{ $t('addSubGroup') }}</span>
+			</v-btn>
+			<v-btn v-if="!isRootGroup && disabled === false" class="btnGroup btnRemGroup elevation-0 ml-1" @click="removeGroup">
+				<v-icon small>fa fa-trash-alt</v-icon>
+				<span>{{ $t('removeGroup') }}</span>
+			</v-btn>
+		</v-col>
+	</v-container>
 </template>
 
 <script>
@@ -98,21 +81,24 @@ export default {
 		PuiFilterRule
 	},
 	props: {
-		columns: {
-			type: Array,
-			required: true
+		isRootGroup: {
+			type: Boolean,
+			default: false
 		},
-		groupName: {
-			type: String
+		groupIndexProp: {
+			type: Number,
+			default: 0
 		},
-		rulesProp: {
-			type: Array
+		filterGroupProp: {
+			required: true
 		},
-		groupOpProp: {
-			type: String
+		columnsProp: {
+			type: Array,
+			required: true
 		},
-		groupsProp: {
-			type: Array
+		filterColumnValues: {
+			type: Object,
+			required: false,
 		},
 		disabled: {
 			type: Boolean,
@@ -124,9 +110,7 @@ export default {
 	},
 	data() {
 		return {
-			rules: [],
-			groups: [],
-			groupOp: 'or',
+			filterGroupModel: this.getDefaultFilterGroupModel(),
 			showDeleteRule: null,
 			showGroupBtns: null,
 			groupOperators: [
@@ -142,93 +126,111 @@ export default {
 		};
 	},
 	computed: {
-		isFirstGroup() {
-			if (this.groups.length === 1) {
-				return true;
+		groupName() {
+			return this.isRootGroup ? this.groupIndexProp.toString() : this.$parent.groupName + '-' + this.groupIndexProp;
+		},
+		parentGroupName() {
+			return this.isRootGroup ? null : this.$parent.groupName;
+		}
+	},
+	watch: {
+		filterGroupProp() {
+			if (this.filterGroupProp) {
+				this.filterGroupModel = this.filterGroupProp;
+				this.filterGroupModel.groupOp ? '':this.filterGroupModel.groupOp = 'and';
+				this.filterGroupModel.groups ? '':this.filterGroupModel.groups = [];
+				this.filterGroupModel.rules ? '':this.filterGroupModel.rules = [];
 			}
-			return false;
 		},
-		isGroup0() {
-			return this.groupName === '0';
+		filterGroupModel: {
+			deep: true,
+			handler() {
+				this.$emit('change', this.filterGroupModel);
+			}
 		}
 	},
 	created() {
 		this.translateGroupOperators();
-		if (this.groupOpProp && this.groupsProp && this.rulesProp) {
-			this.groupOp = this.groupOpProp;
-			this.groups = this.groupsProp;
-			this.rules = this.rulesProp;
-		}
+		if (this.filterGroupProp) {
+				this.filterGroupModel = this.filterGroupProp;
+				this.filterGroupModel.groupOp ? '':this.filterGroupModel.groupOp = 'and';
+				this.filterGroupModel.groups ? '':this.filterGroupModel.groups = [];
+				this.filterGroupModel.rules ? '':this.filterGroupModel.rules = [];
+			}
 	},
 	mounted() {
 		this.$puiEvents.$on('reset-filtering', this.reset);
 		this.$puiEvents.$on(`groupRemoved-${this.groupName}`, this.onGroupRemoved);
-		if (!this.groupsProp && this.isGroup0 === true && !this.groupComp) {
-			this.addSubGroup();
-		} else if (!this.groupsProp && this.groupName === '0-0' && this.rules.length === 0) {
+		this.$puiEvents.$on(`subGroupAdded-${this.groupName}`, this.onSubGroupAdded);
+
+		if (this.filterGroupModel.rules.length === 0 && this.filterGroupModel.groups.length === 0) {
 			this.addRule();
 		}
 	},
 	destroyed() {
-		this.$puiEvents.$off('reset-filtering', this.reset);
+		this.$puiEvents.$off('reset-filtering');
 		this.$puiEvents.$off(`groupRemoved-${this.groupName}`);
+		this.$puiEvents.$off(`subGroupAdded-${this.groupName}`);
 	},
 	methods: {
+		getUniqueIndex() {
+			let numberSTR = Math.random().toString().replace('.', Math.random().toString().replace('.', '').substring(0, 10)).substring(0, 20);
+			let numberInt = parseInt(numberSTR).toFixed();
+			let integer = parseInt(numberInt);
+			return integer;
+		},
 		translateGroupOperators() {
 			for (let i = 0, length = this.groupOperators.length; i < length; i++) {
 				this.groupOperators[i].text = this.$t(this.groupOperators[i].text);
 			}
 		},
 		reset() {
-			this.rules = [];
-			this.groups = [];
-			for (var ruleOrGroup in this.$refs) {
-				delete this.$refs[ruleOrGroup];
+			if(this.isRootGroup) {
+				this.filterGroupModel = this.getDefaultFilterGroupModel();
+				this.addRule();
 			}
+			
 		},
-		addRule() {
-			this.rules.push({});
+		onGroupRemoved(index) {
+			//alert('soy el grupo ' + this.groupName + ` recibo el evento en el grupo ${this.groupName} con el indice ${index}`);
+			this.filterGroupModel.groups.splice(index, 1);
 		},
-		addSubGroup() {
-			this.groups.push({});
+		onFilterGroupChanges(index) {
+			this.filterGroupModel.groups[index] = this.$refs[`group${index}`][0].filterGroupModel;
 		},
-		removeRule(i) {
-			this.rules.splice(i, 1);
-			delete this.$refs[`rule${i}`];
+		onFilterRuleChanges(index) {
+			this.filterGroupModel.rules[index] = this.$refs[`rule${index}`][0].filterRuleModel;
 		},
-		onGroupRemoved(i) {
-			this.groups.splice(i, 1);
-			delete this.$refs[`group${i}`];
-			if (this.isGroup0 && this.groupsProp) {
-				this.groups = this.groupsProp;
-			}
+		addSubGroup() {
+			this.filterGroupModel.groups.push(this.getDefaultFilterGroupModel());
+			this.filterGroupModel.groups.at(-1).rules.push(PuiFilterRule.methods.getDefaultFilterRuleModel());
 		},
 		removeGroup() {
-			//Obtenemos el indice de grupo de sí mismo
-			const array = this.groupName.split('-');
-			//el indice de grupo es el numero más a la derecha del nombre (separados por -)
-			const index = array[array.length - 1];
-			//el nombre del padre es el groupName quitandole '-' + index
-			const parentGroupName = array.slice(0, -1).join('-') || array[0];
-			//publicamos el evento y el grupo padre se encargará de borrar este grupo
-			this.$puiEvents.$emit(`groupRemoved-${parentGroupName}`, index);
+			// alert('soy el grupo ' + this.groupName + ` mando el evento al grupo ${this.parentGroupName} con el indice ${this.groupIndexProp}`);
+			if (!this.isRootGroup) {
+				this.$puiEvents.$emit(`groupRemoved-${this.parentGroupName}`, this.groupIndexProp);
+			} else {
+				this.groupFilterModel.groups = [];
+			}
+		},
+		addRule() {
+			this.filterGroupModel.rules.push(PuiFilterRule.methods.getDefaultFilterRuleModel());
+		},
+		removeRule(index) {
+			this.filterGroupModel.rules.splice(index, 1);
+		},
+		getDefaultFilterGroupModel() {
+			return {
+                rules: [],
+                groups: [],
+                groupOp: 'and',
+            }
 		}
 	}
 };
 </script>
 
 <style lang="postcss" scoped>
-.dragger {
-	height: 24px !important;
-	width: 20px !important;
-	min-width: 20px !important;
-	padding-left: 3px !important;
-	padding-right: 3px !important;
-	color: var(--N-100) !important;
-	cursor: move !important;
-	&:hover {
-	}
-}
 .btnGroup {
 	height: 28px !important;
 	color: var(--N-500);
@@ -237,51 +239,49 @@ export default {
 	}
 }
 .puiFilterGroup {
-	background-color: var(--N-10);
+	background-color: var(--N-0);
+	border-color: var(--N-100);
+	border-style: solid;
 	border-radius: 5px;
+	border-width: 1px;
+
 	&__groupOperator {
 		height: 50px;
 	}
 	&__bottombar {
-	}
-	& .bottomtoolbar {
 		background-color: transparent !important;
 	}
 	& .puiFilterGroup {
-		background-color: var(--N-0);
-		margin-left: 11px;
-		margin-right: 5px;
-		border-width: 1px;
-		border-style: solid;
-		border-color: var(--N-100);
-		& .v-toolbar,
-		.v-btn {
-			background-color: var(--N-0);
+		background-color: var(--N-10);
+		& .v-btn {
+			background-color: var(--N-10);
 		}
-
 		& .puiFilterGroup {
-			background-color: var(--N-10);
-			margin-left: 11px;
-			margin-right: 5px;
-			& .v-toolbar,
-			.v-btn {
-				background-color: var(--N-10);
+			background-color: var(--N-0);
+			& .v-btn {
+				background-color: var(--N-0);
 			}
 			& .puiFilterGroup {
-				background-color: var(--N-0);
-				margin-left: 11px;
-				margin-right: 5px;
-				& .v-toolbar,
-				.v-btn {
-					background-color: var(--N-0);
+				background-color: var(--N-10);
+				& .v-btn {
+					background-color: var(--N-10);
 				}
 				& .puiFilterGroup {
-					background-color: var(--N-10);
-					margin-left: 11px;
-					margin-right: 5px;
-					& .v-toolbar,
-					.v-btn {
+					background-color: var(--N-0);
+					& .v-btn {
+						background-color: var(--N-0);
+					}
+					& .puiFilterGroup {
 						background-color: var(--N-10);
+						& .v-btn {
+							background-color: var(--N-10);
+						}
+						& .puiFilterGroup {
+							background-color: var(--N-0);
+							& .v-btn {
+								background-color: var(--N-0);
+							}
+						}
 					}
 				}
 			}