Merge pull request #359 from brmodeloweb/release/v0.1.4

Release/v0.1.4

app/angular/components/confirmationModal.html

@@ -7,6 +7,6 @@ <h3 class="modal-title">{{$ctrl.title}}</h3>
 </div>
 
 <div class="modal-footer">
-	<button class="br-button yellow" type="button" ng-click="$ctrl.cancel()">{{$ctrl.cancelLabel}}</button>
+	<button class="br-button warning" type="button" ng-click="$ctrl.cancel()">{{$ctrl.cancelLabel}}</button>
 	<button class="br-button" type="button" ng-click="$ctrl.confirm()">{{$ctrl.confirmLabel}}</button>
 </div>

app/angular/components/createModelModal.html

@@ -31,6 +31,6 @@ <h3 class="modal-title">{{ 'New model' | translate }}</h3>
 </div>
 
 <div class="modal-footer">
-	<button class="br-button yellow" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
+	<button class="br-button warning" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
 	<button type="button" class="br-button" ng-click="$ctrl.save($ctrl.name)">{{ 'Save' | translate }}</button>
 </div>

app/angular/components/deleteModelModal.html

@@ -7,6 +7,6 @@ <h3 class="modal-title">{{ 'Delete model' | translate }}</h3>
 </div>
 
 <div class="modal-footer">
-	<button class="br-button yellow" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
+	<button class="br-button warning" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
 	<button class="br-button" type="button" ng-click="$ctrl.delete()">{{ 'Delete' | translate }}</button>
 </div>

app/angular/components/dropdown.html

@@ -1,8 +1,8 @@
 <div class="dropdown-tmp dropdown-tmp-btn" ng-class="{expanded: $ctrl.open}">
 	<div class="dropdown-tmp-trigger" ng-click="$ctrl.toggle(true)">
-		<button class="btn ng-binding">{{$ctrl.selected.name}}</button>
+		<button class="btn ng-binding" ng-disabled="$ctrl.disabled">{{ $ctrl.selected.name | translate }}</button>
 	</div>
 	<ul class="dropdown-tmp-list" style="min-width: 140px;">
-		<li class="dropdown-tmp-item" ng-repeat="option in $ctrl.options" ng-click="$ctrl.select(option)"><span>{{option.name}}</span></li>
+		<li class="dropdown-tmp-item" ng-repeat="option in $ctrl.options" ng-click="$ctrl.select(option)"><span>{{ option.name | translate }}</span></li>
 	</ul>
 </div>

app/angular/components/dropdown.js

@@ -34,5 +34,6 @@ export default angular.module("app.dropdown", []).component("dropdown", {
 		options: "<",
 		selected: "<",
 		onSelect: "&",
+		disabled: '<'
 	},
 }).name;

app/angular/components/duplicateModelModal.html

@@ -23,6 +23,6 @@ <h3 class="modal-title">{{ 'Duplicate model' | translate }}</h3>
 </div>
 
 <div class="modal-footer">
-	<button class="br-button yellow" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
+	<button class="br-button warning" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
 	<button class="br-button" type="button" ng-click="$ctrl.save($ctrl.name)">{{ 'Save' | translate }}</button>
 </div>

app/angular/components/queryExpressionModal/index.js

@@ -0,0 +1,145 @@
+import angular from "angular";
+import template from "./template.html";
+import "./styles.scss";
+
+const app = angular.module("app.queryExpressionModalController", []);
+
+const AND_OPERATOR = 'AND';
+const OR_OPERATOR = 'OR';
+
+const Controller = function ($filter) {
+	const $ctrl = this;
+	$ctrl.submitted = false;
+	$ctrl.conditions = [];
+	$ctrl.joins = [];
+	$ctrl.tableColumns = [];
+
+	const defaultJoin = {
+		columnNameOrigin: null,
+		columnNameTarget: null,
+	}
+
+	const defaultCondition = {
+		columnName: null,
+		columnType: null,
+		type: null,
+		comparativeValue: null,
+		submitted: false,
+		logicalOperator: AND_OPERATOR,
+	};
+
+	$ctrl.selectColumnJoin = (selected, attribute, index) => {
+		const selectedJoin = $ctrl.joins[index];
+		$ctrl.joins[index] = {
+			...selectedJoin,
+			[attribute]: selected.name,
+		};
+	}
+
+	$ctrl.saveJoin = (index) => {
+		const selectedJoin = $ctrl.joins[index];
+		$ctrl.joins[index] = {
+			...selectedJoin,
+			submitted: true,
+		};
+	}
+
+	$ctrl.removeJoin = (index) => {
+		$ctrl.joins.splice(index, 1);
+	}
+
+	$ctrl.createLabel = condition => {
+		return `${condition.columnName} ${$filter('translate')(condition.name).toLowerCase()} ${condition.comparativeValue} ${condition.comparativeValue2 ? `${$filter('translate')('and')} ${condition.comparativeValue2}` : '' }`;
+	}
+
+	$ctrl.changeOperator = (index) => {
+		const selectedCondition = $ctrl.conditions[index];
+		$ctrl.conditions[index] = {
+			...selectedCondition,
+			logicalOperator: selectedCondition.logicalOperator === AND_OPERATOR ? OR_OPERATOR : AND_OPERATOR,
+		};
+	}
+
+	$ctrl.selectComparasion = (selected, index) => {
+		const selectedCondition = $ctrl.conditions[index];
+		$ctrl.conditions[index] = {
+			...selectedCondition,
+			name: selected.name,
+			type: selected.type,
+		};
+	};
+
+	$ctrl.removeCondition = (index) => {
+		$ctrl.conditions.splice(index, 1);
+	}
+
+	$ctrl.saveCondition = (index) => {
+		const selectedCondition = $ctrl.conditions[index];
+		$ctrl.conditions[index] = {
+			...selectedCondition,
+			submitted: true,
+		};
+	}
+
+	$ctrl.selectColumn = (selected, index) => {
+		const selectedCondition = $ctrl.conditions[index];
+		$ctrl.conditions[index] = {
+			...selectedCondition,
+			columnName: selected.name,
+			columnType: selected.type
+		};
+	}
+
+	$ctrl.addCondition = () => {
+		$ctrl.conditions.push(defaultCondition);
+	};
+
+	$ctrl.addJoin = () => {
+		$ctrl.joins.push(defaultJoin);
+	}
+
+	$ctrl.$onInit = () => {
+		$ctrl.showJoins = $ctrl.tables.length > 1;
+		$ctrl.tables.forEach(table => {
+			table.columns.forEach(column => {
+				$ctrl.tableColumns.push({
+					name: `${table.name}.${column.name}`,
+					type: column.type,
+				});
+			});
+		});
+	};
+
+	$ctrl.$onChanges = (changes) => {
+		if (changes.queryConditions != null && changes.queryConditions.currentValue != null) {
+			$ctrl.conditions = changes.queryConditions.currentValue.values || [];
+			$ctrl.joins = changes.queryConditions.currentValue.joins || [];
+		}
+	}
+
+	$ctrl.save = function () {
+		$ctrl.close({
+			result: {
+				conditions: $ctrl.conditions.filter(condition => condition.submitted),
+				joins: $ctrl.joins.filter(join => join.submitted),
+			}
+		});
+	};
+
+	$ctrl.cancel = function () {
+		$ctrl.dismiss({
+			reason: "cancel",
+		});
+	};
+};
+
+export default app.component("queryExpressionModal", {
+	template,
+	bindings: {
+		close: "&",
+		dismiss: "&",
+		tables: "<",
+		queryConditions: '<'
+	},
+	controller: Controller,
+}).name;

app/angular/components/queryExpressionModal/styles.scss

@@ -0,0 +1,44 @@
+.query-expression-modal {
+	.labels-wrapper {
+		margin-bottom: 12px;
+		display: flex;
+		flex-wrap: wrap;
+		row-gap: 18px;
+
+		.condition-label {
+			padding: 6px;
+			background: #3d9970;
+			color: white;
+			border-radius: 4px;
+			margin-right: 8px;
+
+			i {
+				margin-left: 4px;
+				cursor: pointer;
+			}
+		}
+	}
+	.form-content {
+		display: flex;
+		align-items: center;
+		column-gap: 8px;
+		margin-bottom: 12px;
+
+		button {
+			min-width: 180px;
+		}
+
+		.dropdown-tmp-list {
+			max-height: 400px;
+			overflow: auto;
+		}
+	}
+	.form-content-joins {
+		dropdown {
+			width: 100%;
+		}
+	}
+	.modal-message {
+		margin-top: 16px;
+	}
+}

app/angular/components/queryExpressionModal/template.html

@@ -0,0 +1,100 @@
+<div class="modal-header">
+	<h3 class="modal-title">{{ 'Create query expression' | translate }}</h3>
+</div>
+
+<div class="modal-body query-expression-modal">
+	<div ng-if="$ctrl.showJoins">
+		<p>{{ 'You have chosen multiple tables to create the View. It is necessary to select the attributes that will compose the JOIN clause.' | translate }}</p>
+
+		<div class="labels-wrapper">
+			<span ng-repeat="join in $ctrl.joins track by $index">
+				<span class="condition-label" ng-if="join.submitted">
+					{{ join.columnNameOrigin + ' = ' + join.columnNameTarget }}
+					<i title="{{ 'Delete' | translate }}" class="fa fa-close" ng-click="$ctrl.removeJoin($index)"></i>
+				</span>
+			</span>
+		</div>
+
+		<div ng-repeat="join in $ctrl.joins track by $index">
+			<div class="form-content form-content-joins" ng-if="!join.submitted">
+				<dropdown
+					on-select="$ctrl.selectColumnJoin(selected, 'columnNameOrigin', $index)"
+					selected="{ name: join.columnNameOrigin || 'Select a value' }"
+					options="$ctrl.tableColumns">
+				</dropdown>
+
+				<dropdown
+					on-select="$ctrl.selectColumnJoin(selected, 'columnNameTarget', $index)"
+					selected="{ name: join.columnNameTarget || 'Select a value' }"
+					options="$ctrl.tableColumns">
+				</dropdown>
+
+				<a class="br-button" ng-if="join.columnNameOrigin && join.columnNameTarget" data-ng-click="$ctrl.saveJoin($index)">
+					<i title="{{ 'Save' | translate }}" class="fa fa-check"></i>
+				</a>
+			</div>
+		</div>
+
+		<button class="br-button" type="button" ng-click="$ctrl.addJoin()">{{ 'Add join' | translate }}</button>
+	</div>
+
+	<p class="modal-message">{{ 'Add conditions to create query expression that will be used in the where clause when creating the view.' | translate }}</p>
+
+	<div class="labels-wrapper">
+		<span ng-repeat="condition in $ctrl.conditions track by $index">
+			<span class="condition-label" ng-if="condition.submitted">
+				{{ $ctrl.createLabel(condition) }}
+				<i title="{{ 'Delete' | translate }}" class="fa fa-close" ng-click="$ctrl.removeCondition($index)"></i>
+			</span>
+
+			<span class="condition-label" ng-if="!$last && condition.submitted">
+				{{ condition.logicalOperator | translate }}
+				<i title="{{ 'Alterar operador lógico' | translate }}" class="fa fa-exchange" ng-click="$ctrl.changeOperator($index)"></i>
+			</span>
+		</span>
+	</div>
+
+	<div ng-repeat="condition in $ctrl.conditions track by $index">
+		<div class="form-content" ng-if="!condition.submitted">
+			<dropdown
+				on-select="$ctrl.selectColumn(selected, $index)"
+				selected="{ name: condition.columnName || 'Select a value', type: condition.columnType || 'SELECT' }"
+				options="$ctrl.tableColumns">
+			</dropdown>
+
+			<sql-comparasion-dropdown
+				selected="condition"
+				on-select="$ctrl.selectComparasion(selected, $index)"
+				index="$index"
+				type="condition.columnType"
+				ng-if="condition.columnType">
+			</sql-comparasion-dropdown>
+
+			<input
+				type="text"
+				class="form-control"
+				ng-model="condition.comparativeValue"
+				ng-if="condition.type"
+			/>
+
+			<input
+				type="text"
+				class="form-control"
+				ng-model="condition.comparativeValue2"
+				ng-if="condition.type === 'BETWEEN'"
+			/>
+
+			<a class="br-button" ng-if="condition.columnName && condition.type && condition.comparativeValue" data-ng-click="$ctrl.saveCondition($index)">
+				<i title="{{ 'Save' | translate }}" class="fa fa-check"></i>
+			</a>
+		</div>
+	</div>
+
+	<button class="br-button" type="button" ng-click="$ctrl.addCondition()">{{ 'Add condition' | translate }}</button>
+
+</div>
+
+<div class="modal-footer">
+	<button class="br-button warning" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
+	<button class="br-button" type="button" ng-click="$ctrl.save()">{{ 'Confirm' | translate }}</button>
+</div>

app/angular/components/renameModelModal.html

@@ -5,13 +5,13 @@ <h3 class="modal-title">{{ 'Rename model' | translate }}</h3>
 <div class="modal-body">
 	<form class="form-horizontal" role="form" name="modelForm">
 		<div class="form-group">
-			<label for="rename-model" class="col-sm-3 control-label">{{ 'Rename' | translate }}</label>	
+			<label for="rename-model" class="col-sm-3 control-label">{{ 'Rename' | translate }}</label>
 			<div class="col-sm-7">
-				<input 
+				<input
 					class="form-control"
 					ng-class="{'error': ($ctrl.name == null || $ctrl.name == '') && $ctrl.submitted}"
-					type="text" 
-					id="rename-model" 
+					type="text"
+					id="rename-model"
 					data-ng-model="$ctrl.name"
 					placeholder="{{ 'New model name' | translate }}"
 					autocomplete="off"
@@ -22,6 +22,6 @@ <h3 class="modal-title">{{ 'Rename model' | translate }}</h3>
 </div>
 
 <div class="modal-footer">
-	<button class="br-button yellow" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
+	<button class="br-button warning" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
 	<button class="br-button" type="button" ng-click="$ctrl.rename($ctrl.name)">{{ 'Rename' | translate }}</button>
 </div>