Merge pull request #215 from thingsboard/feature/TB-72

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

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

@@ -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();
-            }
-        );
-    }
-
-}

ui/src/app/entity/relation/relation-dialog.controller.js

@@ -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();
+                }
+            );
+        }
+    }
+
+}

ui/src/app/entity/relation/relation-dialog.scss

@@ -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%;
+  }
+}

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

@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<md-dialog aria-label="{{ 'relation.add' | translate }}" style="min-width: 400px;">
+<md-dialog aria-label="{{ (vm.isAdd ? 'relation.add' : 'relation.edit' ) | translate }}" style="min-width: 400px;">
-    <form name="theForm" ng-submit="vm.add()">
+    <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 }}

ui/src/app/entity/relation/relation-table.directive.js

@@ -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();
         }
-        var entityId = {
+        openRelationDialog($event);
-            id: vm.entityId,
+    }
-            entityType: vm.entityType
+
-        };
+    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 () {

ui/src/app/entity/relation/relation-table.tpl.html

@@ -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">

ui/src/app/locale/locale.constant.js

@@ -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",