mirror of
https://github.com/goharbor/harbor.git
synced 2024-10-04 08:18:03 +02:00
Merge pull request #13401 from AllForNothing/label-selection
Improve label selection for artifact list page
This commit is contained in:
commit
9a38dca1a6
@ -87,7 +87,7 @@
|
|||||||
<div class="mb-1">
|
<div class="mb-1">
|
||||||
<ng-container *ngFor="let theme of themeArray;let i=index">
|
<ng-container *ngFor="let theme of themeArray;let i=index">
|
||||||
<ng-container *ngIf="theme.showStyle === styleMode">
|
<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"
|
<clr-icon clrVerticalNavIcon size="20" *ngIf="styleMode ==='DARK'" shape="sun"
|
||||||
class="is-solid"></clr-icon>
|
class="is-solid"></clr-icon>
|
||||||
<clr-icon clrVerticalNavIcon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon"
|
<clr-icon clrVerticalNavIcon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon"
|
||||||
|
@ -66,3 +66,6 @@ clr-vertical-nav {
|
|||||||
.right {
|
.right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
@ -47,7 +47,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex-xs-middle">
|
<div class="flex-xs-middle">
|
||||||
<hbr-filter [withDivider]="true" [readonly]="isFilterReadonly"
|
<hbr-filter [withDivider]="true" [readonly]="isFilterReadonly"
|
||||||
filterPlaceholder="{{'ARTIFACT.FILTER_FOR_ARTIFACTS' | translate}}"
|
filterPlaceholder="{{getFilterPlaceholder() | translate}}"
|
||||||
(filterEvt)="doSearchArtifactByFilter($event)" (openFlag)="openFlagEvent($event)"
|
(filterEvt)="doSearchArtifactByFilter($event)" (openFlag)="openFlagEvent($event)"
|
||||||
[currentValue]="lastFilteredTagName">
|
[currentValue]="lastFilteredTagName">
|
||||||
</hbr-filter>
|
</hbr-filter>
|
||||||
|
@ -250,11 +250,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
|
|||||||
if (this.filterName.length) {
|
if (this.filterName.length) {
|
||||||
this.filterOnGoing = true;
|
this.filterOnGoing = true;
|
||||||
this.imageFilterLabels.forEach(data => {
|
this.imageFilterLabels.forEach(data => {
|
||||||
if (data.label.name.indexOf(this.filterName) !== -1) {
|
data.show = data.label.name.indexOf(this.filterName) !== -1;
|
||||||
data.show = true;
|
|
||||||
} else {
|
|
||||||
data.show = false;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -267,11 +263,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
|
|||||||
if (this.stickName.length) {
|
if (this.stickName.length) {
|
||||||
this.filterOnGoing = true;
|
this.filterOnGoing = true;
|
||||||
this.imageStickLabels.forEach(data => {
|
this.imageStickLabels.forEach(data => {
|
||||||
if (data.label.name.indexOf(this.stickName) !== -1) {
|
data.show = data.label.name.indexOf(this.stickName) !== -1;
|
||||||
data.show = true;
|
|
||||||
} else {
|
|
||||||
data.show = false;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -562,21 +554,9 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
filterLabel(labelInfo: LabelState): void {
|
filterLabel(labelInfo: LabelState): void {
|
||||||
let labelId = labelInfo.label.id;
|
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 => {
|
this.imageFilterLabels.filter(data => {
|
||||||
if (data.label.id !== labelId) {
|
data.iconsShow = data.label.id === labelId;
|
||||||
data.iconsShow = false;
|
|
||||||
} else {
|
|
||||||
data.iconsShow = true;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
this.imageFilterLabels.splice(this.imageFilterLabels.indexOf(labelInfo), 1);
|
|
||||||
this.imageFilterLabels.unshift(labelInfo);
|
|
||||||
this.filterOneLabel = labelInfo.label;
|
this.filterOneLabel = labelInfo.label;
|
||||||
|
|
||||||
// reload data
|
// reload data
|
||||||
@ -595,12 +575,8 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
unFilterLabel(labelInfo: LabelState): void {
|
unFilterLabel(labelInfo: LabelState): void {
|
||||||
// insert the unselected label to groups with the same icons
|
|
||||||
this.sortOperation(this.imageFilterLabels, labelInfo);
|
|
||||||
|
|
||||||
this.filterOneLabel = this.initFilter;
|
this.filterOneLabel = this.initFilter;
|
||||||
labelInfo.iconsShow = false;
|
labelInfo.iconsShow = false;
|
||||||
|
|
||||||
// reload data
|
// reload data
|
||||||
this.currentPage = 1;
|
this.currentPage = 1;
|
||||||
let st: ClrDatagridStateInterface = this.currentState;
|
let st: ClrDatagridStateInterface = this.currentState;
|
||||||
@ -618,20 +594,31 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
|
|||||||
closeFilter(): void {
|
closeFilter(): void {
|
||||||
this.openLabelFilterPanel = false;
|
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 {
|
openFlagEvent(isOpen: boolean): void {
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
this.openLabelFilterPanel = true;
|
this.openLabelFilterPanel = true;
|
||||||
|
// every time when filer panel opens, resort imageFilterLabels labels
|
||||||
|
this.reSortImageFilterLabels();
|
||||||
this.openLabelFilterPiece = true;
|
this.openLabelFilterPiece = true;
|
||||||
this.openSelectFilterPiece = true;
|
this.openSelectFilterPiece = true;
|
||||||
this.filterName = '';
|
this.filterName = '';
|
||||||
// redisplay all labels
|
// redisplay all labels
|
||||||
this.imageFilterLabels.forEach(data => {
|
this.imageFilterLabels.forEach(data => {
|
||||||
if (data.label.name.indexOf(this.filterName) !== -1) {
|
data.show = data.label.name.indexOf(this.filterName) !== -1;
|
||||||
data.show = true;
|
|
||||||
} else {
|
|
||||||
data.show = false;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.openLabelFilterPanel = false;
|
this.openLabelFilterPanel = false;
|
||||||
@ -957,6 +944,8 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
|
|||||||
this.lastFilteredTagName = '';
|
this.lastFilteredTagName = '';
|
||||||
if (this.filterByType === 'labels') {
|
if (this.filterByType === 'labels') {
|
||||||
this.openLabelFilterPanel = true;
|
this.openLabelFilterPanel = true;
|
||||||
|
// every time when filer panel opens, resort imageFilterLabels labels
|
||||||
|
this.reSortImageFilterLabels();
|
||||||
this.openLabelFilterPiece = true;
|
this.openLabelFilterPiece = true;
|
||||||
} else {
|
} else {
|
||||||
this.openLabelFilterPiece = false;
|
this.openLabelFilterPiece = false;
|
||||||
|
Loading…
Reference in New Issue
Block a user