[brooklyn-ui] 01/02: make sure md-field updates if data updates, and update that from tables

[he...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git

commit d7fd07567fde4fafee8df2622485b1b654231eaf
Author: Alex Heneveld <al...@cloudsoft.io>
AuthorDate: Thu Jul 14 17:19:53 2022 +0100

    make sure md-field updates if data updates, and update that from tables
    
    previously the catalog config table, when you searched, the descriptions for the item which was previuouly on that line remains present even though the rest of the line is changed
---
 .../catalog/app/views/bundle/type/type.state.js    |  2 +-
 ui-modules/utils/md-helper/index.js                | 29 ++++++++++++----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/ui-modules/catalog/app/views/bundle/type/type.state.js b/ui-modules/catalog/app/views/bundle/type/type.state.js
index 06251c9d..c84d32cd 100644
--- a/ui-modules/catalog/app/views/bundle/type/type.state.js
+++ b/ui-modules/catalog/app/views/bundle/type/type.state.js
@@ -185,7 +185,7 @@ export function typeController($scope, $state, $stateParams, $q, $uibModal, brBr
         field: 'description',
         width: 150,
         colspan: 6,
-        template: '<div class="mozilla-td-scroll-fix"><md-field raw-data="::item[column.field]"></md-field></div>',
+        template: '<div class="mozilla-td-scroll-fix"><md-field raw-data="item[column.field]"></md-field></div>',
         tdClass: 'column-for-description',
     });
 
diff --git a/ui-modules/utils/md-helper/index.js b/ui-modules/utils/md-helper/index.js
index a8f077aa..46cdc6b8 100644
--- a/ui-modules/utils/md-helper/index.js
+++ b/ui-modules/utils/md-helper/index.js
@@ -35,9 +35,9 @@ export function mdFieldDirective() {
     return {
         restrict: 'E',
         scope: {
-            data: '<',
-            rawData: '<',
-            rawItem: '<',
+            data: '=?',
+            rawData: '=?',
+            rawItem: '=?',
         },
         controller: ['$scope', populateData],
         template: `
@@ -54,9 +54,9 @@ export function mdFirstLineDirective() {
     return {
         restrict: 'E',
         scope: {
-            data: '<',
-            rawData: '<',
-            rawItem: '<',
+            data: '=?',
+            rawData: '=?',
+            rawItem: '=?',
         },
         controller: ['$scope', populateData],
         template: `
@@ -70,9 +70,9 @@ export function mdIfOnelineDirective() {
     return {
         restrict: 'E',
         scope: {
-            data: '<',
-            rawData: '<',
-            rawItem: '<',
+            data: '=?',
+            rawData: '=?',
+            rawItem: '=?',
         },
         controller: ['$scope', populateData],
         template: `
@@ -89,9 +89,9 @@ export function mdIfMultilineDirective() {
     return {
         restrict: 'E',
         scope: {
-            data: '<',
-            rawData: '<',
-            rawItem: '<',
+            data: '=?',
+            rawData: '=?',
+            rawItem: '=?',
         },
         controller: ['$scope', populateData],
         // for multiline, collapse margin from children eg an <h1> first element, inserting then removing a 24px margin
@@ -114,7 +114,10 @@ function populateData($scope) {
         if (!$scope.rawData && $scope.rawItem) {
             $scope.rawData = $scope.rawItem.description;
         }
-        $scope.data = analyze($scope.rawData, nameFieldValues($scope.rawItem));
+        const updateData = () => $scope.data = analyze($scope.rawData, nameFieldValues($scope.rawItem));
+        $scope.$watch('rawData', updateData);
+        $scope.$watch('rawItem', updateData);
+        updateData();
     }
 }