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
This commit is contained in:
Deng, Qian 2018-08-06 16:29:32 +08:00
parent 91da5f015c
commit c04e752cf3
5 changed files with 25 additions and 11 deletions

View File

@ -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>

View File

@ -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 => {

View File

@ -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>

View File

@ -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 => {

View File

@ -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"
},