SDNR UI don't process list which has more than one key

Issue-ID: CCSDK-3799
Signed-off-by: Projit Roy <projitr@aarnanetworks.com>
Change-Id: I79a0a028b0ff7b31740e3b83012b77e97843c806

2 files changed, 25 insertions, 9 deletions

diff --git a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts
index 2846dba06..37583787f 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts
+++ b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts
@@ -374,11 +374,12 @@ export const updateViewActionAsyncCreator = (vPath: string) => async (dispatch:
         }
         extractList = true;
       } else {
-        // normal case 
-        dataPath += `/${property}${key ? `=${key.replace(/\//ig, "%2F")}` : ""}`;
-
+        // normal case
         // in case of the root element the required namespace will be added later,
         // while extracting the data
+
+        dataPath += `/${property}${key ? `=${key.replace(/\%2C/g, ",").replace(/\//ig, "%2F")}` : ""}`;
+
         dataMember = namespace === defaultNS
           ? viewElement.label
           : `${namespace}:${viewElement.label}`;
@@ -518,8 +519,10 @@ export const updateDataActionAsyncCreator = (vPath: string, data: any) => async
           dispatch(new SetCollectingSelectionData(false));
           throw new Error("No key for list [" + property + "]");
         } else if (vPath.endsWith("[]") && pathParts.length - 1 === ind) {
-          // handle new element
-          key = viewElement.key && String(data[viewElement.key]) || "";
+          // handle new element with any number of arguments
+          let keyList = viewElement.key?.split(" ");
+          let dataPathParam = keyList?.map(id => data[id]).join(",");
+          key = viewElement.key && String(dataPathParam) || "";
           isNew = key;
           if (!key) {
             dispatch(new SetCollectingSelectionData(false));
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
index 12815a517..0e2ddb395 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
@@ -628,8 +628,15 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
               e.stopPropagation();
               e.preventDefault();
               confirm({ title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" }, cancellationButtonProps: { color:"inherit" } })
-                .then(() => removeElement(`${this.props.vPath}[${props.rowData[listKeyProperty]}]`))
-                .then(props.onReload);
+              .then(() => {
+                 let keyId = "";
+                 if (listKeyProperty && listKeyProperty.split(" ").length > 1) {
+                 keyId += listKeyProperty.split(" ").map(id => props.rowData[id]).join(",");
+                  } else {
+                   keyId = props.rowData[listKeyProperty];
+                    }
+                   return removeElement(`${this.props.vPath}[${keyId}]`)
+                }).then(props.onReload);
             }}
             size="large">
             <RemoveIcon />
@@ -667,7 +674,13 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
         }])
       } onHandleClick={(ev, row) => {
         ev.preventDefault();
-        listKeyProperty && navigate(`[${encodeURIComponent(row[listKeyProperty])}]`); // Do not navigate without key.
+        let keyId = ""
+        if (listKeyProperty && listKeyProperty.split(" ").length > 1) {
+          keyId += listKeyProperty.split(" ").map(id => row[id]).join(",");
+        } else {
+          keyId = row[listKeyProperty];
+        }
+        listKeyProperty && navigate(`[${encodeURIComponent(keyId)}]`); // Do not navigate without key.
       }} ></SelectElementTable>
     );
   }
@@ -776,7 +789,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
                         onClick={(ev: React.MouseEvent<HTMLElement>) => {
                           ev.preventDefault();
                           this.props.history.push(keyPath);
-                        }}>{`[${key}]`}</Link> || null
+                        }}>{`[${key && key.replace(/\%2C/g, ",")}]`}</Link> || null
                     }
                   </span>
                 );