Fix credential links and labels

Signed-off-by: Akiff Manji <[email protected]>
bcgov · Dec 30, 2020 · 2e2a698 · 2e2a698
1 parent 428d06b
commit 2e2a698
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 32 deletions.
diff --git a/client/themes/base/cred/list.component.html b/client/themes/base/cred/list.component.html
@@ -1,11 +1,13 @@
+<!-- Credential cards -->
 <div class="creds-grid" *ngIf="format==='cards' && records?.length">
   <div class="cred-card" *ngFor="let cred of records">
     <div class="cred-icon" *ngIf="cred.issuer.has_logo">
       <img [src]="cred.issuer.logo_url | resolveUrl" [alt]="'issuer.logo-image' | translate">
     </div>
     <div class="cred-detail">
       <p class="cred-title">
-        <a class="body-link cred-link" [routerLink]="cred.extLink('cred', cred.id) | localize">{{cred.credential_type.description}}</a>
+        <a class="body-link cred-link"
+          [routerLink]="cred.topic.extLink('cred', cred.id) | localize">{{cred.credential_type.description}}</a>
       </p>
       <p class="cred-date" *ngIf="cred.effective_date && cred.effective_date > '0100-01-01'; else ifBlank">
         <span class="claim-info date">{{cred.effective_date | dateFormat: 'effectiveDate'}}</span>
@@ -20,11 +22,13 @@
     </div>
   </div>
 </div>
+<!-- Credential list -->
 <div class="creds-list" *ngIf="format==='rows'">
   <div class="row cred-row" *ngFor="let cred of records">
     <div class="col-sm-4">
       <div class="cred-title">
-        <a class="body-link cred-link" [routerLink]="cred.extLink('cred', cred.id) | localize">{{cred.credential_type.description}}</a>
+        <a class="body-link cred-link"
+          [routerLink]="cred.topic.extLink('cred', cred.id) | localize">{{cred.credential_type.description}}</a>
       </div>
       <div class="cred-date" *ngIf="cred.effective_date && cred.effective_date > '0100-01-01'; else ifBlank">
         <span class="claim-info date">{{cred.effective_date | dateFormat: 'effectiveDate'}}</span>
@@ -41,12 +45,12 @@
     </div>
   </div>
 </div>
+<!-- Topic search. TODO: Move into it's own component -->
 <div class="creds-list creds-search" *ngIf="format==='search'">
   <div class="row cred-row" *ngFor="let cred of records">
     <div class="col-md-7">
       <label>{{cred.typeLabel | translate}}:</label>
-      <a [routerLink]="cred.link | localize"
-        class="body-link cred-link name ml-1">{{cred.names[0].text}}</a>
+      <a [routerLink]="cred.link | localize" class="body-link cred-link name ml-1">{{cred.names[0].text}}</a>
       <br>
       <small *ngIf="cred.issuer">
         <label>
@@ -78,4 +82,4 @@
       </small>
     </div>
   </div>
-</div>
+</div>
diff --git a/client/themes/bcgov/cred/list.component.html b/client/themes/bcgov/cred/list.component.html
@@ -1,11 +1,12 @@
+<!-- Credential cards -->
 <div class="creds-grid" *ngIf="format === 'cards' && records?.length">
   <div class="cred-card" *ngFor="let cred of records">
     <div class="cred-icon" *ngIf="cred.issuer.has_logo">
       <img [src]="cred.issuer.logo_url | resolveUrl" [alt]="'issuer.logo-image' | translate" />
     </div>
     <div class="cred-detail">
       <p class="cred-title">
-        <a class="body-link cred-link" [routerLink]="cred.extLink('cred', cred.id) | localize">
+        <a class="body-link cred-link" [routerLink]="cred.topic.extLink('cred', cred.id) | localize">
           {{ 'name.' + cred.credential_type.description | translate }}
         </a>
       </p>
@@ -20,11 +21,11 @@
         ">
         <span class="claim-info date">{{
           cred.effective_date | dateFormat: 'effectiveDate'
-        }}</span>
+          }}</span>
       </p>
       <p class="cred-issuer" *ngIf="cred.issuer">
-        <a class="body-link issuer-link"
-          [routerLink]="['/issuer', cred.issuer.id] | localize">{{ cred.issuer.name }}</a>
+        <a class="body-link issuer-link" [routerLink]="['/issuer', cred.issuer.id] | localize">{{ cred.issuer.name
+          }}</a>
       </p>
       <div class="cred-status">
         <div class="badge badge-warning" *ngIf="cred.inactive" translate>
@@ -37,12 +38,13 @@
     </div>
   </div>
 </div>
+<!-- Credential list -->
 <div class="creds-list" *ngIf="format === 'rows'">
   <ng-container *ngIf="stateSvc.filterActive === 'true'; else archiveTemplate">
     <div class="row cred-row" *ngFor="let cred of records">
       <div class="col-sm-4">
         <div class="cred-title">
-          <a class="body-link cred-link" [routerLink]="cred.extLink('cred', cred.id) | localize">
+          <a class="body-link cred-link" [routerLink]="cred.topic.extLink('cred', cred.id) | localize">
             {{ 'name.' + cred.credential_type.description | translate }}
           </a>
         </div>
@@ -52,13 +54,13 @@
           ">
           <span class="claim-info date">{{
             cred.effective_date | dateFormat: 'effectiveDate'
-          }}</span>
+            }}</span>
         </div>
       </div>
       <div class="col-sm-4">
         <div class="cred-issuer" *ngIf="cred.issuer">
-          <a class="body-link issuer-link"
-            [routerLink]="['/issuer', cred.issuer.id] | localize">{{ cred.issuer.name }}</a>
+          <a class="body-link issuer-link" [routerLink]="['/issuer', cred.issuer.id] | localize">{{ cred.issuer.name
+            }}</a>
         </div>
       </div>
       <div class="col-sm-4">
@@ -71,8 +73,8 @@
           </a>
         </ng-template>
         <ng-template #topicName>
-          <a [routerLink]="cred.link | localize" class="body-link cred-link name">
-            {{ cred.local_name.text }}
+          <a [routerLink]="cred.topic.link | localize" class="body-link cred-link name">
+            {{ cred.topic.local_name.text }}
           </a>
         </ng-template>
         <div class="badge badge-warning" *ngIf="cred.inactive" translate>
@@ -92,6 +94,7 @@
     </ng-container>
   </ng-template>
 </div>
+<!-- Topic search. TODO: Move into it's own component -->
 <div class="creds-list creds-search" *ngIf="format === 'search'">
   <div class="row cred-row" *ngFor="let cred of records; index as idx">
     <div class="col-lg-8">
@@ -114,16 +117,16 @@
     <div class="col-lg-4">
       <small *ngIf="cred.issuer">
         <label> <span translate>cred.issuer</span>: </label>
-        <a [routerLink]="['/issuer', cred.issuer.id] | localize"
-          class="body-link issuer-link">{{ cred.issuer.name }}</a>
+        <a [routerLink]="['/issuer', cred.issuer.id] | localize" class="body-link issuer-link">{{ cred.issuer.name
+          }}</a>
       </small>
       <br />
       <small>
         <label> <span translate>cred.start-date</span>: </label>
         <div *ngIf="cred.effective_date > '0100-01-01'; else ifBlank">
           <span class="claim-info date">{{
             cred.effective_date | dateFormat: 'effectiveDate'
-          }}</span>
+            }}</span>
         </div>
         <ng-template #ifBlank>
           <div class="col-sm-8">{{ 'cred.empty-attribute' | translate }}</div>

diff --git a/client/themes/ongov/cred/list.component.html b/client/themes/ongov/cred/list.component.html
@@ -1,28 +1,34 @@
+<!-- Credential list -->
 <div class="creds-list" *ngIf="format !='search'">
     <div *ngFor="let cred of records">
-    <div class="cred" *ngIf="cred.credential_type.schema.name.indexOf('registration') != -1">
-        <div class="card name-panel">
-            <div class="card-header panel-heading" >
-                <a [title]="[cred.issuer.name]" tabindex="0" class="header-link"  [routerLink]="['/issuer', cred.issuer.id] | localize">{{cred.issuer.abbreviation}} </a>
-            </div>
+        <div class="cred" *ngIf="cred.credential_type.schema.name.indexOf('registration') != -1">
+            <div class="card name-panel">
+                <div class="card-header panel-heading">
+                    <a [title]="[cred.issuer.name]" tabindex="0" class="header-link"
+                        [routerLink]="['/issuer', cred.issuer.id] | localize">{{cred.issuer.abbreviation}} </a>
+                </div>
 
-            <div class="card-body form-body">
-                <a tabindex="0" [title]="'cred.business_registration' | translate" class="body-link control-label"  [routerLink]="cred.extLink('cred', cred.id) | localize" translate>cred.business_registration</a>
-                <div class="form-field cert-image w-25 ml-auto">
-                    <img [alt]="'cred.verify-info'| translate" src="assets/cert.svg">
+                <div class="card-body form-body">
+                    <a tabindex="0" [title]="'cred.business_registration' | translate" class="body-link control-label"
+                        [routerLink]="cred.topic.extLink('cred', cred.id) | localize"
+                        translate>cred.business_registration</a>
+                    <div class="form-field cert-image w-25 ml-auto">
+                        <img [alt]="'cred.verify-info'| translate" src="assets/cert.svg">
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-    </div>
 </div>
+<!-- Topic search. TODO: Move into it's own component -->
 <div class="creds-list creds-search" *ngIf="format==='search'">
     <div class="row cred-row" *ngFor="let cred of records">
-        <div class="col" *ngIf="cred.names.length > 0"> <!-- temp issue with search returning blank topics -->
+        <div class="col" *ngIf="cred.names.length > 0">
+            <!-- temp issue with search returning blank topics -->
             <div class="row">
                 <div class="col">
-                    <a tabindex="0" [title]="cred.names[0].text"  [routerLink]="cred.link | localize"
-                      class="body-link cred-link name">{{cred.names[0].text}}</a>
+                    <a tabindex="0" [title]="cred.names[0].text" [routerLink]="cred.link | localize"
+                        class="body-link cred-link name">{{cred.names[0].text}}</a>
                 </div>
             </div>
             <div class="row">
@@ -39,4 +45,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>