dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TB-72: Add ability to edit JSON additional info of relations.

Browse Source
This commit is contained in:
Igor Kulikov 2017-07-21 18:53:15 +03:00
parent 5c0c93013d
commit 5fda7a1d15
7 changed files with 224 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ui/src/app/entity/relation/add-relation-dialog.controller.js
View File

@ -1,54 +0,0 @@
/*
* Copyright © 2016-2017 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*@ngInject*/
export default function AddRelationDialogController($scope, $mdDialog, types, entityRelationService, direction, entityId) {
var vm = this;
vm.types = types;
vm.direction = direction;
vm.targetEntityId = {};
vm.relation = {};
if (vm.direction == vm.types.entitySearchDirection.from) {
vm.relation.from = entityId;
} else {
vm.relation.to = entityId;
}
vm.relation.type = types.entityRelationType.contains;
vm.add = add;
vm.cancel = cancel;
function cancel() {
$mdDialog.cancel();
}
function add() {
if (vm.direction == vm.types.entitySearchDirection.from) {
vm.relation.to = vm.targetEntityId;
} else {
vm.relation.from = vm.targetEntityId;
}
$scope.theForm.$setPristine();
entityRelationService.saveRelation(vm.relation).then(
function success() {
$mdDialog.hide();
}
);
}
}

125
ui/src/app/entity/relation/relation-dialog.controller.js Normal file
View File

@ -0,0 +1,125 @@
/*
* Copyright © 2016-2017 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import 'brace/ext/language_tools';
import 'brace/mode/json';
import 'brace/theme/github';
import beautify from 'js-beautify';
import './relation-dialog.scss';
const js_beautify = beautify.js;
/*@ngInject*/
export default function RelationDialogController($scope, $mdDialog, types, entityRelationService, isAdd, direction, relation, showingCallback) {
var vm = this;
vm.types = types;
vm.isAdd = isAdd;
vm.direction = direction;
showingCallback.onShowing = function(scope, element) {
updateEditorSize(element);
}
vm.relationAdditionalInfoOptions = {
useWrapMode: false,
mode: 'json',
showGutter: false,
showPrintMargin: false,
theme: 'github',
advanced: {
enableSnippets: false,
enableBasicAutocompletion: false,
enableLiveAutocompletion: false
},
onLoad: function (_ace) {
vm.editor = _ace;
}
};
vm.relation = relation;
if (vm.isAdd) {
vm.relation.type = types.entityRelationType.contains;
vm.targetEntityId = {};
} else {
if (vm.direction == vm.types.entitySearchDirection.from) {
vm.targetEntityId = vm.relation.to;
} else {
vm.targetEntityId = vm.relation.from;
}
}
vm.save = save;
vm.cancel = cancel;
vm.additionalInfo = '';
if (vm.relation.additionalInfo) {
vm.additionalInfo = angular.toJson(vm.relation.additionalInfo);
vm.additionalInfo = js_beautify(vm.additionalInfo, {indent_size: 4});
}
$scope.$watch('vm.additionalInfo', () => {
$scope.theForm.$setValidity("additionalInfo", true);
});
function updateEditorSize(element) {
var newWidth = 600;
var newHeight = 200;
angular.element('#tb-relation-additional-info', element).height(newHeight.toString() + "px")
.width(newWidth.toString() + "px");
vm.editor.resize();
}
function cancel() {
$mdDialog.cancel();
}
function save() {
if (vm.isAdd) {
if (vm.direction == vm.types.entitySearchDirection.from) {
vm.relation.to = vm.targetEntityId;
} else {
vm.relation.from = vm.targetEntityId;
}
}
$scope.theForm.$setPristine();
var valid = true;
if (vm.additionalInfo && vm.additionalInfo.length) {
try {
vm.relation.additionalInfo = angular.fromJson(vm.additionalInfo);
} catch(e) {
valid = false;
}
} else {
vm.relation.additionalInfo = null;
}
$scope.theForm.$setValidity("additionalInfo", valid);
if (valid) {
entityRelationService.saveRelation(vm.relation).then(
function success() {
$mdDialog.hide();
}
);
}
}
}

27
ui/src/app/entity/relation/relation-dialog.scss Normal file
View File

@ -0,0 +1,27 @@
/**
* Copyright © 2016-2017 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.tb-relation-additional-info-panel {
margin-left: 15px;
border: 1px solid #C0C0C0;
height: 100%;
#tb-relation-additional-info {
min-width: 600px;
min-height: 200px;
width: 100%;
height: 100%;
}
}

22
ui/src/app/entity/relation/add-relation-dialog.tpl.html → ui/src/app/entity/relation/relation-dialog.tpl.html
View File

@ -15,11 +15,11 @@
limitations under the License.
-->
<md-dialog aria-label="{{ 'relation.add' | translate }}" style="min-width: 400px;">
<form name="theForm" ng-submit="vm.add()">
<md-dialog aria-label="{{ (vm.isAdd ? 'relation.add' : 'relation.edit' ) | translate }}" style="min-width: 400px;">
<form name="theForm" ng-submit="vm.save()">
<md-toolbar>
<div class="md-toolbar-tools">
<h2 translate>relation.add</h2>
<h2 translate>{{ vm.isAdd ? 'relation.add' : 'relation.edit'}}</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="vm.cancel()">
<ng-md-icon icon="close" aria-label="{{ 'dialog.close' | translate }}"></ng-md-icon>
@ -32,17 +32,29 @@
<div class="md-dialog-content">
<md-content class="md-padding" layout="column">
<fieldset ng-disabled="loading">
<tb-relation-type-autocomplete ng-model="vm.relation.type"
<tb-relation-type-autocomplete ng-disabled="!vm.isAdd"
ng-model="vm.relation.type"
tb-required="true"
ng-disabled="loading">
</tb-relation-type-autocomplete>
<small>{{(vm.direction == vm.types.entitySearchDirection.from ?
'relation.to-entity' : 'relation.from-entity') | translate}}</small>
<tb-entity-select flex
ng-disabled="!vm.isAdd"
the-form="theForm"
tb-required="true"
ng-model="vm.targetEntityId">
</tb-entity-select>
<div class="md-caption" style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>relation.additional-info</div>
<div flex class="tb-relation-additional-info-panel" layout="column">
<div flex id="tb-relation-additional-info"
ui-ace="vm.relationAdditionalInfoOptions"
ng-model="vm.additionalInfo">
</div>
</div>
<div class="tb-error-messages" ng-messages="theForm.$error" role="alert">
<div translate ng-message="additionalInfo" class="tb-error-message">relation.invalid-additional-info</div>
</div>
</fieldset>
</md-content>
</div>
@ -51,7 +63,7 @@
<span flex></span>
<md-button ng-disabled="loading || theForm.$invalid || !theForm.$dirty" type="submit"
class="md-raised md-primary">
{{ 'action.add' | translate }}
{{ (vm.isAdd ? 'action.add' : 'action.save') | translate }}
</md-button>
<md-button ng-disabled="loading" ng-click="vm.cancel()" style="margin-right:20px;">{{ 'action.cancel' |
translate }}

47
ui/src/app/entity/relation/relation-table.directive.js
View File

@ -19,11 +19,11 @@ import './relation-table.scss';
/* eslint-disable import/no-unresolved, import/default */
import relationTableTemplate from './relation-table.tpl.html';
import addRelationTemplate from './add-relation-dialog.tpl.html';
import relationTemplate from './relation-dialog.tpl.html';
/* eslint-enable import/no-unresolved, import/default */
import AddRelationController from './add-relation-dialog.controller';
import RelationController from './relation-dialog.controller';
/*@ngInject*/
export default function RelationTable() {
@ -66,6 +66,7 @@ function RelationTableController($scope, $q, $mdDialog, $document, $translate, $
vm.onReorder = onReorder;
vm.onPaginate = onPaginate;
vm.addRelation = addRelation;
vm.editRelation = editRelation;
vm.deleteRelation = deleteRelation;
vm.deleteRelations = deleteRelations;
vm.reloadRelations = reloadRelations;
@ -110,18 +111,52 @@ function RelationTableController($scope, $q, $mdDialog, $document, $translate, $
if ($event) {
$event.stopPropagation();
}
openRelationDialog($event);
}
function editRelation($event, relation) {
if ($event) {
$event.stopPropagation();
}
openRelationDialog($event, relation);
}
function openRelationDialog($event, relation) {
if ($event) {
$event.stopPropagation();
}
var isAdd = false;
if (!relation) {
isAdd = true;
var entityId = {
id: vm.entityId,
entityType: vm.entityType
};
relation = {};
if (vm.direction == vm.types.entitySearchDirection.from) {
relation.from = entityId;
} else {
relation.to = entityId;
}
}
var onShowingCallback = {
onShowing: function(){}
}
$mdDialog.show({
controller: AddRelationController,
controller: RelationController,
controllerAs: 'vm',
templateUrl: addRelationTemplate,
templateUrl: relationTemplate,
parent: angular.element($document[0].body),
locals: { direction: vm.direction, entityId: entityId },
locals: { isAdd: isAdd,
direction: vm.direction,
relation: relation,
showingCallback: onShowingCallback},
targetEvent: $event,
fullscreen: true,
targetEvent: $event
skipHide: true,
onShowing: function(scope, element) {
onShowingCallback.onShowing(scope, element);
}
}).then(function () {
reloadRelations();
}, function () {

6
ui/src/app/entity/relation/relation-table.tpl.html
View File

@ -112,6 +112,12 @@
<td md-cell ng-if="vm.direction == vm.types.entitySearchDirection.from">{{ relation.toName }}</td>
<td md-cell ng-if="vm.direction == vm.types.entitySearchDirection.to">{{ relation.fromName }}</td>
<td md-cell class="tb-action-cell">
<md-button class="md-icon-button" aria-label="{{ 'action.edit' | translate }}" ng-click="vm.editRelation($event, relation)">
<md-icon aria-label="{{ 'action.edit' | translate }}" class="material-icons">edit</md-icon>
<md-tooltip md-direction="top">
{{ 'relation.edit' | translate }}
</md-tooltip>
</md-button>
<md-button class="md-icon-button" aria-label="{{ 'action.delete' | translate }}" ng-click="vm.deleteRelation($event, relation)">
<md-icon aria-label="{{ 'action.delete' | translate }}" class="material-icons">delete</md-icon>
<md-tooltip md-direction="top">

5
ui/src/app/locale/locale.constant.js
View File

@ -888,6 +888,7 @@ export default angular.module('thingsboard.locale', [])
"relation-type-required": "Relation type is required.",
"any-relation-type": "Any type",
"add": "Add relation",
"edit": "Edit relation",
"delete-to-relation-title": "Are you sure you want to delete relation to the entity '{{entityName}}'?",
"delete-to-relation-text": "Be careful, after the confirmation the entity '{{entityName}}' will be unrelated from the current entity.",
"delete-to-relations-title": "Are you sure you want to delete { count, select, 1 {1 relation} other {# relations} }?",
@ -899,7 +900,9 @@ export default angular.module('thingsboard.locale', [])
"remove-relation-filter": "Remove relation filter",
"add-relation-filter": "Add relation filter",
"any-relation": "Any relation",
"relation-filters": "Relation filters"
"relation-filters": "Relation filters",
"additional-info": "Additional info (JSON)",
"invalid-additional-info": "Unable to parse additional info json."
},
"rule": {
"rule": "Rule",