From 3c9c40d7ca12d0f5ed5e1ca53aa28db465d48b75 Mon Sep 17 00:00:00 2001
From: Mathias Brunkow Moser <mathias.brunkowmoser@cgi.com>
Date: Mon, 13 May 2024 16:37:58 +0200
Subject: [PATCH] fix(frontend): fixed bug from selection of multiple policies

---
 dpp-frontend/package-lock.json          |   4 +-
 dpp-frontend/package.json               |   2 +-
 dpp-frontend/src/views/PassportView.vue | 192 +++++++++++++++---------
 3 files changed, 124 insertions(+), 74 deletions(-)

diff --git a/dpp-frontend/package-lock.json b/dpp-frontend/package-lock.json
index fb1ba1026..e0e5c78da 100644
--- a/dpp-frontend/package-lock.json
+++ b/dpp-frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "digital-product-pass-frontend",
-  "version": "2.3.0",
+  "version": "3.0.0-rc1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "digital-product-pass-frontend",
-      "version": "2.3.0",
+      "version": "3.0.0-rc1",
       "dependencies": {
         "@mdi/font": "5.9.55",
         "@popperjs/core": "^2.11.2",
diff --git a/dpp-frontend/package.json b/dpp-frontend/package.json
index b4875803e..fbba6f587 100644
--- a/dpp-frontend/package.json
+++ b/dpp-frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "digital-product-pass-frontend",
-  "version": "2.3.0",
+  "version": "3.0.0-rc1",
   "private": true,
   "scripts": {
     "serve": "vite --host localhost",
diff --git a/dpp-frontend/src/views/PassportView.vue b/dpp-frontend/src/views/PassportView.vue
index 48aacf783..769d85fc4 100644
--- a/dpp-frontend/src/views/PassportView.vue
+++ b/dpp-frontend/src/views/PassportView.vue
@@ -51,7 +51,10 @@
     <v-container v-if="loading && !error">
       <LoadingComponent :id="id" />
     </v-container>
-    <v-container class="container-policy-selection" v-else-if="showOverlay && !error">
+    <v-container
+      class="container-policy-selection"
+      v-else-if="showOverlay && !error"
+    >
       <div class="loading-container">
         <v-col class="v-col-auto dpp-id-container contract-modal">
           <v-card class="contract-container">
@@ -66,9 +69,9 @@
                 :key="contractId"
               >
                 <v-row class="policy-group-label">
-                  <v-col cols="auto">{{contractIndex+1}}. {{
-                    $t("passportView.policyAgreement.contractId")
-                  }}
+                  <v-col cols="auto"
+                    >{{ contractIndex + 1 }}.
+                    {{ $t("passportView.policyAgreement.contractId") }}
                   </v-col>
                   <v-col>
                     <span class="contractid-title"> {{ contractId }}</span>
@@ -78,7 +81,7 @@
                   v-for="(item, index) in group"
                   :key="`${contractId}_${index}`"
                   color="#0F71CB"
-                  @click="chooseContract(contractId, item)"
+                  @click="chooseContract(contractId, item['@id'])"
                   :value="`${contractIndex}.${index}`"
                 >
                   <template v-slot:label>
@@ -91,10 +94,14 @@
                                 index + 1
                               }}</strong
                             ></span
-                          >                           
+                          >
                           <div>
                             <v-row>
-                              <v-col cols="auto" justify-content="center" align-content="center">
+                              <v-col
+                                cols="auto"
+                                justify-content="center"
+                                align-content="center"
+                              >
                                 <div class="policy-label">ID</div>
                               </v-col>
                               <v-col>
@@ -105,28 +112,69 @@
                             </v-row>
                             <v-divider></v-divider>
                             <div>
-                            <v-row v-for="(attributes, policyKey, policyIndex) in parsedPolicyConstraints[item['@id']]" :key="`${policyIndex}`">
-                              <template v-if="attributes.length != 0">
-                                <v-col cols="auto" justify-content="center" align-content="center">
-                                  <div class="policy-second-label">{{policyKey}}</div>
-                                </v-col>
-                                <v-col>
-                                  <div class="policy-second-value">
-                                      <v-row class="field-container" v-for="(attribute, attrIndex) in attributes" :key="`${attrIndex}`" >
-                                        <p class="policy-second-value">Action Type: {{ attribute.actionType }}</p>
+                              <v-row
+                                v-for="(
+                                  attributes, policyKey, policyIndex
+                                ) in parsedPolicyConstraints[item['@id']]"
+                                :key="`${policyIndex}`"
+                              >
+                                <template v-if="attributes.length != 0">
+                                  <v-col
+                                    cols="auto"
+                                    justify-content="center"
+                                    align-content="center"
+                                  >
+                                    <div class="policy-second-label">
+                                      {{ policyKey }}
+                                    </div>
+                                  </v-col>
+                                  <v-col>
+                                    <div class="policy-second-value">
+                                      <v-row
+                                        class="field-container"
+                                        v-for="(
+                                          attribute, attrIndex
+                                        ) in attributes"
+                                        :key="`${attrIndex}`"
+                                      >
+                                        <p class="policy-second-value">
+                                          Action Type:
+                                          {{ attribute.actionType }}
+                                        </p>
                                         <div>
                                           <ul>
-                                              <li v-for="(constraint, constraintIndex) in attribute.constraints.constraint" :key="`${constraintIndex}`" >
-                                                <span v-if="attribute.constraints.operator" class="attribute-operator">{{attribute.constraints.operator}}</span>
-                                                <span class="attribute-constraint">- [{{constraint.leftOperand}}] [{{constraint.operator}}] [{{constraint.rightOperand}}]</span>
-                                              </li>
+                                            <li
+                                              v-for="(
+                                                constraint, constraintIndex
+                                              ) in attribute.constraints
+                                                .constraint"
+                                              :key="`${constraintIndex}`"
+                                            >
+                                              <span
+                                                v-if="
+                                                  attribute.constraints.operator
+                                                "
+                                                class="attribute-operator"
+                                                >{{
+                                                  attribute.constraints.operator
+                                                }}</span
+                                              >
+                                              <span class="attribute-constraint"
+                                                >- [{{
+                                                  constraint.leftOperand
+                                                }}] [{{ constraint.operator }}]
+                                                [{{
+                                                  constraint.rightOperand
+                                                }}]</span
+                                              >
+                                            </li>
                                           </ul>
-                                          </div>
-                                      </v-row > 
-                                  </div>
-                                </v-col>
-                              </template>
-                            </v-row>
+                                        </div>
+                                      </v-row>
+                                    </div>
+                                  </v-col>
+                                </template>
+                              </v-row>
                             </div>
                           </div>
                         </div>
@@ -497,9 +545,10 @@ export default {
               let policyId = policy["@id"];
               policyEntry[key] = policy;
               contractPolicies.push(policyEntry);
-              try{
-              this.parsedPolicyConstraints[policyId] =edcUtil.parsePolicyConstraints(policy);
-              }catch(e){
+              try {
+                this.parsedPolicyConstraints[policyId] =
+                  edcUtil.parsePolicyConstraints(policy);
+              } catch (e) {
                 console.error(e);
               }
             });
@@ -510,9 +559,10 @@ export default {
             let policyId = policy["@id"];
             policyEntry[key] = policy;
             contractPolicies.push(policyEntry);
-            try{
-            this.parsedPolicyConstraints[policyId] = edcUtil.parsePolicyConstraints(policy);
-            }catch(e){
+            try {
+              this.parsedPolicyConstraints[policyId] =
+                edcUtil.parsePolicyConstraints(policy);
+            } catch (e) {
               console.error(e);
               return false;
             }
@@ -577,7 +627,7 @@ export default {
             "The request took too long... Please retry or try again later.";
           this.status = 408;
           this.statusText = "Request Timeout";
-          this.error= true;
+          this.error = true;
         }
         this.searchResponse = result;
       } catch (e) {
@@ -601,49 +651,49 @@ export default {
               "data.contracts",
               this.searchResponse
             );
-            if(!this.contractItems){
-                this.errorObj.title =
-                  "No contract items found!";
-                this.errorObj.description =
-                  "It was not possible to display the policies and contracts.";
-                this.status = 500;
-                this.statusText = "Internal Server Error";
-                this.error= true;
+            if (!this.contractItems) {
+              this.errorObj.title = "No contract items found!";
+              this.errorObj.description =
+                "It was not possible to display the policies and contracts.";
+              this.status = 500;
+              this.statusText = "Internal Server Error";
+              this.error = true;
             }
 
             // Extract policies
             let res = this.extractPolicies(this.contractItems);
-            if(!res){
-                this.errorObj.title =
-                  "It was not possible to parse policies!";
-                this.errorObj.description =
-                  "It was not possible to display the policies and contracts.";
-                this.status = 500;
-                this.statusText = "Internal Server Error";
-                this.error= true;
-            }else{
+            if (!res) {
+              this.errorObj.title = "It was not possible to parse policies!";
+              this.errorObj.description =
+                "It was not possible to display the policies and contracts.";
+              this.status = 500;
+              this.statusText = "Internal Server Error";
+              this.error = true;
+            } else {
               // Check if policies array has elements and then access the @id of the first element
               const firstPolicyObj = this.policies[0];
               const initialContractToSign = Object.keys(firstPolicyObj)[0];
               const initialPolicyToSign =
                 firstPolicyObj[initialContractToSign]["@id"];
 
-              if(!this.parsedPolicyConstraints || Object.keys(this.parsedPolicyConstraints).length == 0){
-                  this.errorObj.title =
-                    "No contract policies found!";
-                  this.errorObj.description =
-                    "It was not possible to display the policies and contracts.";
-                  this.status = 500;
-                  this.statusText = "Internal Server Error";
-                  this.error= true;
-              }else{
+              if (
+                !this.parsedPolicyConstraints ||
+                Object.keys(this.parsedPolicyConstraints).length == 0
+              ) {
+                this.errorObj.title = "No contract policies found!";
+                this.errorObj.description =
+                  "It was not possible to display the policies and contracts.";
+                this.status = 500;
+                this.statusText = "Internal Server Error";
+                this.error = true;
+              } else {
                 // Commit the contract ID to the store
                 this.$store.commit("setContractToSign", {
                   contract: initialContractToSign,
                   policy: initialPolicyToSign,
                 });
 
-              this.shouldShowOverlay();
+                this.shouldShowOverlay();
               }
             }
           }
@@ -673,7 +723,7 @@ export default {
             "The request took too long... Please retry or try again later.";
           this.status = 408;
           this.statusText = "Request Timeout";
-          this.error= true;
+          this.error = true;
         }
         this.data = result;
       } catch (e) {
@@ -726,7 +776,7 @@ export default {
             "The request took too long... Please retry or try again later.";
           this.errorObj.status = 408;
           this.errorObj.statusText = "Request Timeout";
-          this.error= true;
+          this.error = true;
         }
         this.data = result;
       } catch (e) {
@@ -824,7 +874,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Internal Server Error";
-        this.error= true;
+        this.error = true;
         return response;
       }
 
@@ -835,7 +885,7 @@ export default {
           "It was not possible to complete the passport transfer.";
         this.errorObj.status = 400;
         this.errorObj.statusText = "Bad Request";
-        this.error= true;
+        this.error = true;
         return null;
       }
       // Check if reponse content was successfull and if not print error comming message from backend
@@ -852,7 +902,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Not found";
-        this.error= true;
+        this.error = true;
       }
 
       return response;
@@ -894,7 +944,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Internal Server Error";
-        this.error= true;
+        this.error = true;
         return response;
       }
 
@@ -905,7 +955,7 @@ export default {
           "It was not possible to complete the passport transfer.";
         this.errorObj.status = 400;
         this.errorObj.statusText = "Bad Request";
-        this.error= true;
+        this.error = true;
         return null;
       }
 
@@ -923,7 +973,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Not found";
-        this.error= true;
+        this.error = true;
       }
 
       return response;
@@ -956,7 +1006,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Internal Server Error";
-        this.error= true;
+        this.error = true;
         return response;
       }
 
@@ -967,7 +1017,7 @@ export default {
           "It was not possible to complete the passport transfer.";
         this.errorObj.status = 400;
         this.errorObj.statusText = "Bad Request";
-        this.error= true;
+        this.error = true;
         return null;
       }
 
@@ -985,7 +1035,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Not found";
-        this.error= true;
+        this.error = true;
       }
 
       return response;