From c04e752cf375cf01a9306c77f09cf57286a28ef7 Mon Sep 17 00:00:00 2001
From: "Deng, Qian" <dengqian0826@gmail.com>
Date: Mon, 6 Aug 2018 16:29:32 +0800
Subject: [PATCH] Fix issues on the list-view of helm chart registry

1. Fix The header of version column
2. Fix word of no item placeholder
3. Fix the footer of gridview
4. Fix filter of version and chart
---
 src/ui_ng/lib/src/helm-chart/helm-chart.component.html   | 9 +++++----
 src/ui_ng/lib/src/helm-chart/helm-chart.component.ts     | 7 ++++++-
 .../versions/helm-chart-version.component.html           | 8 +++++---
 .../helm-chart/versions/helm-chart-version.component.ts  | 7 ++++++-
 src/ui_ng/src/i18n/lang/en-us-lang.json                  | 5 +++--
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
index 53d492ff7..04d507780 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
@@ -3,7 +3,9 @@
         <div class="toolbar">
             <div class="row flex-items-xs-right option-right rightPos">
                 <div class="flex-xs-middle">
-                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}" [currentValue]="lastFilteredChartName"></hbr-filter>
+                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}"
+                    [currentValue]="lastFilteredChartName"
+                    (filterEvt)="updateFilterValue($event)"></hbr-filter>
                     <span class="card-btn" (click)="showCard(true)" (mouseenter)="mouseEnter('card') " (mouseleave)="mouseLeave('card')">
                         <clr-icon [ngClass]="{'is-highlight': isCardView || isHovering('card') }" shape="view-cards"></clr-icon>
                     </span>
@@ -27,7 +29,7 @@
                     </button>
                 </clr-dg-action-bar>
                 <clr-dg-column [clrDgField]="'name'">{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
-                <clr-dg-column>{{'HELM_CHART.VERSIONS' | translate}}</clr-dg-column>
+                <clr-dg-column>{{'HELM_CHART.VERSION' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'HELM_CHART.CREATED' | translate}}</clr-dg-column>
                 <clr-dg-placeholder>{{'HELM_CHART.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                 <clr-dg-row *ngFor="let chart of charts" [clrDgItem]="chart">
@@ -39,8 +41,7 @@
                 </clr-dg-row>
                 <clr-dg-footer>
                     <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
-                        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}} {{pagination.totalItems}} {{'HELM_CHART.ITEMS'
-                        | translate}}
+                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS'| translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
index 2f4fb4d13..b367d52e8 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
@@ -76,6 +76,11 @@ export class HelmChartComponent implements OnInit {
 
   }
 
+  updateFilterValue(value: string) {
+    this.lastFilteredChartName = value;
+    this.refresh();
+  }
+
   refresh() {
     this.loading = true;
     this.helmChartService
@@ -87,7 +92,7 @@ export class HelmChartComponent implements OnInit {
     })
     .subscribe(
       charts => {
-        this.charts = charts;
+        this.charts = charts.filter(x => x.name.includes(this.lastFilteredChartName));
         this.chartsCopy = charts.map(x => Object.assign({}, x));
       },
       err => {
diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
index b1e1d4754..c5c7a8eb8 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
@@ -16,7 +16,9 @@
         <div class="toolbar">
             <div class="row flex-items-xs-right option-right rightPos">
                 <div class="flex-xs-middle">
-                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}" [currentValue]="lastFilteredVersionName"></hbr-filter>
+                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}"
+                    [currentValue]="lastFilteredVersionName"
+                    (filterEvt)="updateFilterValue($event)"></hbr-filter>
                     <span class="card-btn" (click)="showCard(true)" (mouseenter)="mouseEnter('card') " (mouseleave)="mouseLeave('card')">
                         <clr-icon [ngClass]="{'is-highlight': isCardView || isHovering('card') }" shape="view-cards"></clr-icon>
                     </span>
@@ -52,6 +54,7 @@
                 <clr-dg-column>{{'HELM_CHART.ENGINE' | translate }}</clr-dg-column>
                 <clr-dg-column>{{'HELM_CHART.MAINTAINERS' | translate }}</clr-dg-column>
                 <clr-dg-column>{{'HELM_CHART.CREATED' | translate }}</clr-dg-column>
+                <clr-dg-placeholder>{{'HELM_CHART.NO_VERSION_PLACEHOLDER' | translate }}</clr-dg-placeholder>
                 <clr-dg-row *ngFor="let v of chartVersions" [clrDgItem]="v">
                     <clr-dg-cell>
                         <span class="list-img">
@@ -65,8 +68,7 @@
                 </clr-dg-row>
                 <clr-dg-footer>
                     <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
-                        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}} {{pagination.totalItems}} {{'HELM_CHART.VERSIONS'
-                        | translate}}
+                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS' | translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>
diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
index 1d2864c02..5f1305e46 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
@@ -104,6 +104,11 @@ export class ChartVersionComponent implements OnInit {
     this.lastFilteredVersionName = "";
   }
 
+  updateFilterValue(value: string) {
+    this.lastFilteredVersionName = value;
+    this.refresh();
+  }
+
   refresh() {
     this.loading = true;
     this.helmChartService
@@ -115,7 +120,7 @@ export class ChartVersionComponent implements OnInit {
       })
       .subscribe(
         versions => {
-          this.chartVersions = versions;
+          this.chartVersions = versions.filter(x => x.version.includes(this.lastFilteredVersionName));
           this.versionsCopy = versions.map(x => Object.assign({}, x));
         },
         err => {
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index 5b73c1e5d..4074c86fc 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -506,11 +506,12 @@
         "ADD_REPO": "Add Repo",
         "SHOW_KV": "Key Value Pairs",
         "SHOW_YAML": "YAML File",
-        "PLACEHOLDER": "No Item",
+        "PLACEHOLDER": "We couldn't find any charts!",
+        "NO_VERSION_PLACEHOLDER": "We couldn't find any versions!",
         "FILE_UPLOADED": "File upload successfully",
         "SIGNED": "Signed",
         "UNSIGNED": "Unsigned",
-        "ITEMS": "charts",
+        "ITEMS": "items",
         "NO_README": "No readme file provided by this charts.",
         "SECURITY": "Security"
     },