mirror of
https://github.com/goharbor/harbor.git
synced 2024-08-20 02:52:49 +02:00
replace filter with hbr-filter from harbor-ui lib
This commit is contained in:
parent
5657005701
commit
8e20e66f8c
|
@ -16,9 +16,7 @@ import {
|
|||
Output,
|
||||
EventEmitter,
|
||||
ViewChild,
|
||||
AfterViewChecked,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef
|
||||
AfterViewChecked
|
||||
} from '@angular/core';
|
||||
import { NgForm } from '@angular/forms';
|
||||
|
||||
|
@ -43,8 +41,7 @@ const FAKE_PASSWORD = 'rjGcfuRu';
|
|||
@Component({
|
||||
selector: 'create-edit-endpoint',
|
||||
template: CREATE_EDIT_ENDPOINT_TEMPLATE,
|
||||
styles: [CREATE_EDIT_ENDPOINT_STYLE],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
styles: [CREATE_EDIT_ENDPOINT_STYLE]
|
||||
})
|
||||
export class CreateEditEndpointComponent implements AfterViewChecked {
|
||||
|
||||
|
@ -89,8 +86,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked {
|
|||
constructor(
|
||||
private endpointService: EndpointService,
|
||||
private errorHandler: ErrorHandler,
|
||||
private translateService: TranslateService,
|
||||
private ref: ChangeDetectorRef) { }
|
||||
private translateService: TranslateService) { }
|
||||
|
||||
openCreateEditTarget(editable: boolean, targetId?: number | string) {
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@ export const REPLICATION_STYLE: string = `
|
|||
|
||||
.option-left {
|
||||
padding-left: 16px;
|
||||
margin-top: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.option-right {
|
||||
padding-right: 16px;
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
export const REPLICATION_TEMPLATE: string = `
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="row flex-items-xs-between" style="height:24px;">
|
||||
<div class="row flex-items-xs-between" style="height:32px;">
|
||||
<div class="flex-xs-middle option-left">
|
||||
<button *ngIf="projectId" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
|
||||
<create-edit-rule [projectId]="projectId" (reload)="reloadRules($event)"></create-edit-rule>
|
||||
</div>
|
||||
<div class="flex-xs-middle option-right">
|
||||
<div class="select" style="float: left; top: 9px;">
|
||||
<div class="select" style="float: left; top: 8px;">
|
||||
<select (change)="doFilterRuleStatus($event)">
|
||||
<option *ngFor="let r of ruleStatus" value="{{r.key}}">{{r.description | translate}}</option>
|
||||
</select>
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
.option-right {
|
||||
padding-right: 16px;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 2px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
color: #007CBB;
|
||||
}
|
|
@ -1,62 +1,64 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="row flex-items-xs-right option-right">
|
||||
<div class="flex-xs-middle">
|
||||
<button class="btn btn-link" (click)="toggleOptionalName(currentOption)">{{toggleName[currentOption] | translate}}</button>
|
||||
<grid-filter filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchAuditLogs($event)"></grid-filter>
|
||||
<a href="javascript:void(0)" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-right option-right" [hidden]="currentOption === 0">
|
||||
<clr-dropdown [clrMenuPosition]="'bottom-left'" >
|
||||
<button class="btn btn-link" clrDropdownToggle>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="top:12px;">
|
||||
<div class="row flex-items-xs-right option-right">
|
||||
<div class="flex-xs-middle">
|
||||
<button class="btn btn-link" (click)="toggleOptionalName(currentOption)">{{toggleName[currentOption] | translate}}</button>
|
||||
<hbr-filter [withDivider]="true" filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchAuditLogs($event)"></hbr-filter>
|
||||
<span class="refresh-btn" (click)="refresh()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-right option-right" [hidden]="currentOption === 0">
|
||||
<clr-dropdown [clrMenuPosition]="'bottom-left'">
|
||||
<button class="btn btn-link" clrDropdownToggle>
|
||||
{{'AUDIT_LOG.OPERATIONS' | translate}}
|
||||
<clr-icon shape="caret down"></clr-icon>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)">
|
||||
<clr-icon shape="check" [hidden]="!f.checked"></clr-icon>
|
||||
<ng-template [ngIf]="!f.checked"><span style="display: inline-block;width: 16px;"></span></ng-template>
|
||||
{{f.description | translate}}
|
||||
</a>
|
||||
</div>
|
||||
</clr-dropdown>
|
||||
<div class="flex-xs-middle">
|
||||
<clr-icon shape="date"></clr-icon>
|
||||
<label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
|
||||
<div class="dropdown-menu">
|
||||
<a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)">
|
||||
<clr-icon shape="check" [hidden]="!f.checked"></clr-icon>
|
||||
<ng-template [ngIf]="!f.checked"><span style="display: inline-block;width: 16px;"></span></ng-template>
|
||||
{{f.description | translate}}
|
||||
</a>
|
||||
</div>
|
||||
</clr-dropdown>
|
||||
<div class="flex-xs-middle">
|
||||
<clr-icon shape="date"></clr-icon>
|
||||
<label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
|
||||
<input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="queryParam.fromTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByStartTime(fromTime.value)">
|
||||
<span *ngIf="fromTimeInvalid" class="tooltip-content">
|
||||
{{'AUDIT_LOG.INVALID_DATE' | translate }}
|
||||
</span>
|
||||
</label>
|
||||
<clr-icon shape="date"></clr-icon>
|
||||
<label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
|
||||
<clr-icon shape="date"></clr-icon>
|
||||
<label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
|
||||
<input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="queryParam.toTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByEndTime(toTime.value)">
|
||||
<span *ngIf="toTimeInvalid" class="tooltip-content">
|
||||
{{'AUDIT_LOG.INVALID_DATE' | translate }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 datagrid-margin-top ">
|
||||
<clr-datagrid (clrDgRefresh)="retrieve($event)">
|
||||
<clr-dg-column>{{'AUDIT_LOG.USERNAME' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.REPOSITORY_NAME' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.TAGS' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.OPERATION' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.TIMESTAMP' | translate}}</clr-dg-column>
|
||||
<clr-dg-row *ngFor="let l of auditLogs">
|
||||
<clr-dg-cell>{{l.username}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.operation}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
<clr-dg-footer>
|
||||
{{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | translate}}
|
||||
<clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 datagrid-margin-top ">
|
||||
<clr-datagrid (clrDgRefresh)="retrieve($event)">
|
||||
<clr-dg-column>{{'AUDIT_LOG.USERNAME' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.REPOSITORY_NAME' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.TAGS' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.OPERATION' | translate}}</clr-dg-column>
|
||||
<clr-dg-column>{{'AUDIT_LOG.TIMESTAMP' | translate}}</clr-dg-column>
|
||||
<clr-dg-row *ngFor="let l of auditLogs">
|
||||
<clr-dg-cell>{{l.username}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.operation}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
<clr-dg-footer>
|
||||
{{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | translate}}
|
||||
<clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
|
@ -1,8 +1,15 @@
|
|||
.option-left {
|
||||
padding-left: 16px;
|
||||
margin-top: 24px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.option-right {
|
||||
padding-right: 16px;
|
||||
margin-top: 18px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
color: #007CBB;
|
||||
}
|
|
@ -1,15 +1,15 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="top: 8px;">
|
||||
<div class="row flex-items-xs-between">
|
||||
<div class="flex-xs-middle option-left">
|
||||
<div class="flex-xs-middle option-left" style="position: relative; top: 10px;">
|
||||
<button *ngIf="hasProjectAdminRole" class="btn btn-link" (click)="openAddMemberModal()"><clr-icon shape="add"></clr-icon> {{'MEMBER.MEMBER' | translate }}</button>
|
||||
<add-member [projectId]="projectId" (added)="addedMember($event)"></add-member>
|
||||
</div>
|
||||
<div class="flex-xs-middle option-right">
|
||||
<grid-filter filterPlaceholder='{{"MEMBER.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearch($event)" [currentValue]="searchMember"></grid-filter>
|
||||
<a href="javascript:void(0)" (click)="refresh()">
|
||||
<hbr-filter [withDivider]="true" filterPlaceholder='{{"MEMBER.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearch($event)" [currentValue]="searchMember"></hbr-filter>
|
||||
<span class="refresh-btn" (click)="refresh()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,10 +4,16 @@
|
|||
|
||||
.option-left {
|
||||
padding-left: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.option-right {
|
||||
padding-right: 16px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
color: #007CBB;
|
||||
}
|
|
@ -6,23 +6,23 @@
|
|||
<statistics-panel></statistics-panel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-between">
|
||||
<div class="row flex-items-xs-between" style="height:32px;">
|
||||
<div class="option-left">
|
||||
<button *ngIf="projectCreationRestriction" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'PROJECT.PROJECT' | translate}}</button>
|
||||
<create-project (create)="createProject($event)"></create-project>
|
||||
</div>
|
||||
<div class="option-right">
|
||||
<div class="select" style="float: left;">
|
||||
<div class="select" style="float: left; left:-6px; top:8px;">
|
||||
<select (change)="doFilterProjects($event)">
|
||||
<option value="0" [selected]="currentFilteredType === 0">{{projectTypes[0] | translate}}</option>
|
||||
<option value="1">{{projectTypes[1] | translate}}</option>
|
||||
<option value="2">{{projectTypes[2] | translate}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<grid-filter filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)" [currentValue]="projectName"></grid-filter>
|
||||
<a href="javascript:void(0)" (click)="refresh()">
|
||||
<hbr-filter [withDivider]="true" filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)" [currentValue]="projectName"></hbr-filter>
|
||||
<span class="refresh-btn" (click)="refresh()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)"></list-project>
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="row flex-items-xs-right option-right">
|
||||
<div class="flex-xs-middle">
|
||||
<grid-filter filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></grid-filter>
|
||||
<a href="javascript:void(0)" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></a>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="row flex-items-xs-right option-right">
|
||||
<div class="flex-xs-middle">
|
||||
<hbr-filter [withDivider]="true" filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></hbr-filter>
|
||||
<a href="javascript:void(0)" (click)="refresh()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<list-repository [projectId]="projectId" [repositories]="changedRepositories" (delete)="deleteRepo($event)" [hasProjectAdminRole]="hasProjectAdminRole" (paginate)="retrieve($event)"></list-repository>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<list-repository [projectId]="projectId" [repositories]="changedRepositories" (delete)="deleteRepo($event)" [hasProjectAdminRole]="hasProjectAdminRole" (paginate)="retrieve($event)"></list-repository>
|
||||
</div>
|
||||
</div>
|
|
@ -1,4 +0,0 @@
|
|||
.filter-icon {
|
||||
position: relative;
|
||||
right: -12px;
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
<span>
|
||||
<clr-icon shape="filter" size="12" class="is-solid filter-icon"></clr-icon>
|
||||
<input type="text" style="padding-left: 15px;" (keyup)="valueChange()" placeholder="{{placeHolder}}" [(ngModel)]="currentValue"/>
|
||||
</span>
|
|
@ -1,55 +0,0 @@
|
|||
// Copyright (c) 2017 VMware, Inc. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
import 'rxjs/add/operator/debounceTime';
|
||||
import 'rxjs/add/operator/distinctUntilChanged';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'grid-filter',
|
||||
templateUrl: 'filter.component.html',
|
||||
styleUrls: ['filter.component.css']
|
||||
})
|
||||
|
||||
export class FilterComponent implements OnInit {
|
||||
|
||||
placeHolder: string = "";
|
||||
filterTerms = new Subject<string>();
|
||||
|
||||
@Output("filter") private filterEvt = new EventEmitter<string>();
|
||||
|
||||
@Input() currentValue: string;
|
||||
@Input("filterPlaceholder")
|
||||
public set flPlaceholder(placeHolder: string) {
|
||||
this.placeHolder = placeHolder;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.filterTerms
|
||||
.debounceTime(500)
|
||||
//.distinctUntilChanged()
|
||||
.subscribe(terms => {
|
||||
this.filterEvt.emit(terms);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
valueChange(): void {
|
||||
//Send out filter terms
|
||||
this.filterTerms.next(this.currentValue.trim());
|
||||
}
|
||||
}
|
|
@ -20,7 +20,6 @@ import { MessageComponent } from '../global-message/message.component';
|
|||
|
||||
import { MessageService } from '../global-message/message.service';
|
||||
import { MaxLengthExtValidatorDirective } from './max-length-ext.directive';
|
||||
import { FilterComponent } from './filter/filter.component';
|
||||
import { TranslateModule } from "@ngx-translate/core";
|
||||
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
@ -81,7 +80,6 @@ const uiLibConfig: IServiceConfig = {
|
|||
declarations: [
|
||||
MessageComponent,
|
||||
MaxLengthExtValidatorDirective,
|
||||
FilterComponent,
|
||||
ConfirmationDialogComponent,
|
||||
NewUserFormComponent,
|
||||
InlineAlertComponent,
|
||||
|
@ -101,7 +99,6 @@ const uiLibConfig: IServiceConfig = {
|
|||
HarborLibraryModule,
|
||||
MessageComponent,
|
||||
MaxLengthExtValidatorDirective,
|
||||
FilterComponent,
|
||||
TranslateModule,
|
||||
ConfirmationDialogComponent,
|
||||
NewUserFormComponent,
|
||||
|
|
|
@ -27,11 +27,15 @@
|
|||
|
||||
.refresh-btn {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 12px;
|
||||
right: 6px;
|
||||
top: 17px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
color: #007CBB;
|
||||
}
|
||||
|
||||
.hide-create {
|
||||
visibility: hidden !important;
|
||||
}
|
|
@ -5,7 +5,7 @@
|
|||
<span>
|
||||
<button [class.hide-create]="!canCreateUser" type="submit" class="btn btn-link custom-add-button" (click)="addNewUser()"><clr-icon shape="add"></clr-icon> {{'USER.ADD_ACTION' | translate}}</button>
|
||||
</span>
|
||||
<grid-filter class="filter-pos" filterPlaceholder='{{"USER.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></grid-filter>
|
||||
<hbr-filter [withDivider]="true" class="filter-pos" filterPlaceholder='{{"USER.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></hbr-filter>
|
||||
<span class="refresh-btn" (click)="refresh()">
|
||||
<clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
|
||||
<span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
|
||||
|
|
Loading…
Reference in New Issue
Block a user