Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-07-03 02:05:49 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #13401 from AllForNothing/label-selection

Browse Source 
Improve label selection for artifact list page
This commit is contained in:
Will Sun 2020-11-02 13:44:28 +08:00 committed by GitHub
commit 9a38dca1a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/portal/src/app/base/harbor-shell/harbor-shell.component.html
View File

@ -87,7 +87,7 @@
<div class="mb-1">
<ng-container *ngFor="let theme of themeArray;let i=index">
<ng-container *ngIf="theme.showStyle === styleMode">
<a clrVerticalNavLink (click)="themeChanged(theme)">
<a class="pointer" clrVerticalNavLink (click)="themeChanged(theme)">
<clr-icon clrVerticalNavIcon size="20" *ngIf="styleMode ==='DARK'" shape="sun"
class="is-solid"></clr-icon>
<clr-icon clrVerticalNavIcon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon"

3
src/portal/src/app/base/harbor-shell/harbor-shell.component.scss
View File

@ -66,3 +66,6 @@ clr-vertical-nav {
.right {
text-align: right;
}
.pointer {
cursor: pointer;
}

2
src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
View File

@ -47,7 +47,7 @@
</div>
<div class="flex-xs-middle">
<hbr-filter [withDivider]="true" [readonly]="isFilterReadonly"
filterPlaceholder="{{'ARTIFACT.FILTER_FOR_ARTIFACTS' | translate}}"
filterPlaceholder="{{getFilterPlaceholder() | translate}}"
(filterEvt)="doSearchArtifactByFilter($event)" (openFlag)="openFlagEvent($event)"
[currentValue]="lastFilteredTagName">
</hbr-filter>

55
src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
View File

@ -250,11 +250,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
if (this.filterName.length) {
this.filterOnGoing = true;
this.imageFilterLabels.forEach(data => {
if (data.label.name.indexOf(this.filterName) !== -1) {
data.show = true;
} else {
data.show = false;
}
data.show = data.label.name.indexOf(this.filterName) !== -1;
});
}
});
@ -267,11 +263,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
if (this.stickName.length) {
this.filterOnGoing = true;
this.imageStickLabels.forEach(data => {
if (data.label.name.indexOf(this.stickName) !== -1) {
data.show = true;
} else {
data.show = false;
}
data.show = data.label.name.indexOf(this.stickName) !== -1;
});
}
});
@ -562,21 +554,9 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
filterLabel(labelInfo: LabelState): void {
let labelId = labelInfo.label.id;
// insert the unselected label to groups with the same icons
let preLabelInfo = this.imageFilterLabels.find(data => data.label.id === this.filterOneLabel.id);
if (preLabelInfo) {
this.sortOperation(this.imageFilterLabels, preLabelInfo);
}
this.imageFilterLabels.filter(data => {
if (data.label.id !== labelId) {
data.iconsShow = false;
} else {
data.iconsShow = true;
}
data.iconsShow = data.label.id === labelId;
});
this.imageFilterLabels.splice(this.imageFilterLabels.indexOf(labelInfo), 1);
this.imageFilterLabels.unshift(labelInfo);
this.filterOneLabel = labelInfo.label;
// reload data
@ -595,12 +575,8 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
}
unFilterLabel(labelInfo: LabelState): void {
// insert the unselected label to groups with the same icons
this.sortOperation(this.imageFilterLabels, labelInfo);
this.filterOneLabel = this.initFilter;
labelInfo.iconsShow = false;
// reload data
this.currentPage = 1;
let st: ClrDatagridStateInterface = this.currentState;
@ -618,20 +594,31 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
closeFilter(): void {
this.openLabelFilterPanel = false;
}
reSortImageFilterLabels() {
if (this.imageFilterLabels && this.imageFilterLabels.length) {
for (let i = 0; i < this.imageFilterLabels.length; i++) {
if (this.imageFilterLabels[i].iconsShow) {
const arr: LabelState[] = this.imageFilterLabels.splice(i, 1);
this.imageFilterLabels.unshift(...arr);
break;
}
}
}
}
getFilterPlaceholder(): string {
return this.showlabel ? "" : 'ARTIFACT.FILTER_FOR_ARTIFACTS';
}
openFlagEvent(isOpen: boolean): void {
if (isOpen) {
this.openLabelFilterPanel = true;
// every time when filer panel opens, resort imageFilterLabels labels
this.reSortImageFilterLabels();
this.openLabelFilterPiece = true;
this.openSelectFilterPiece = true;
this.filterName = '';
// redisplay all labels
this.imageFilterLabels.forEach(data => {
if (data.label.name.indexOf(this.filterName) !== -1) {
data.show = true;
} else {
data.show = false;
}
data.show = data.label.name.indexOf(this.filterName) !== -1;
});
} else {
this.openLabelFilterPanel = false;
@ -957,6 +944,8 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
this.lastFilteredTagName = '';
if (this.filterByType === 'labels') {
this.openLabelFilterPanel = true;
// every time when filer panel opens, resort imageFilterLabels labels
this.reSortImageFilterLabels();
this.openLabelFilterPiece = true;
} else {
this.openLabelFilterPiece = false;