upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor synced 2024-09-21 15:30:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change Datapicker on replication to clarity widget

Browse Source 
Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>
This commit is contained in:
FangyuanCheng 2018-10-30 10:14:13 +08:00
parent 13b40e6074
commit ae71673cf0
9 changed files with 51 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/portal/lib/src/datetime-picker/date-validator.directive.ts
View File

@ -50,7 +50,8 @@ export function dateValidator(): ValidatorFn {
if (controlValue) {
const regYMD = /^(19|20)\d\d([- /.])(0[1-9]|1[012])\2(0[1-9]|[12][0-9]|3[01])$/g;
const regDMY = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/g;
valid = regYMD.test(controlValue) || regDMY.test(controlValue);
const regMDY = /^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$/g;
valid = regYMD.test(controlValue) || regDMY.test(controlValue) || regMDY.test(controlValue);
}
return valid
? Validators.nullValidator

7
src/portal/lib/src/datetime-picker/datetime-picker.component.html
View File

@ -1,7 +1,6 @@
<clr-icon shape="date"></clr-icon>
<label aria-haspopup="true" role="tooltip" [class.invalid]="dateInvalid" class="tooltip tooltip-validation tooltip-sm">
<input type="date" #searchTime="ngModel" [(ngModel)]="dateInput" name="searchTime" placeholder="dd/mm/yyyy" dateValidator (change)="doSearch()">
<div aria-haspopup="true" role="tooltip" [class.invalid]="dateInvalid" class="tooltip tooltip-validation tooltip-sm">
<input clrDate type="date" #searchTime="ngModel" [(ngModel)]="dateInput" name="searchTime" placeholder="mm/dd/yyyy" dateValidator (ngModelChange)="doSearch()">
<span *ngIf="dateInvalid" class="tooltip-content">
{{'AUDIT_LOG.INVALID_DATE' | translate }}
</span>
</label>
</div>

14
src/portal/lib/src/datetime-picker/datetime-picker.component.scss Normal file
View File

@ -0,0 +1,14 @@
.tooltip {
&.tooltip-validation.invalid {
&::before{
top: 0.7em;
right: 3em;
}
}
>.tooltip-content{
opacity: 1;
visibility: visible;
left: 75%;
background-color: #c92100;
}
}

5
src/portal/lib/src/datetime-picker/datetime-picker.component.ts
View File

@ -10,7 +10,8 @@ import { NgModel } from "@angular/forms";
@Component({
selector: "hbr-datetime",
templateUrl: "./datetime-picker.component.html"
templateUrl: "./datetime-picker.component.html",
styleUrls: ["./datetime-picker.component.scss"]
})
export class DatePickerComponent implements OnChanges {
@Input() dateInput: string;
@ -41,7 +42,7 @@ export class DatePickerComponent implements OnChanges {
) {
let parts = strDate.split(/[-\/]/);
strDate =
parts[2] /*Year*/ + "-" + parts[1] /*Month*/ + "-" + parts[0] /*Date*/;
parts[2] /*Year*/ + "-" + parts[0] /*Month*/+ "-" + parts[1] /*Date*/;
}
return strDate;
}

4
src/portal/lib/src/replication/replication.component.html
View File

@ -28,8 +28,8 @@
</span>
</div>
</div>
<div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
<div class="select" style="float: left;">
<div class="row flex-items-xs-right row-right" [hidden]="currentJobSearchOption === 0">
<div class="select select-status">
<select (change)="doFilterJobStatus($event)">
<option *ngFor="let j of jobStatus" value="{{j.key}}" [selected]="currentJobStatus.key === j.key">{{j.description | translate}}</option>
</select>

10
src/portal/lib/src/replication/replication.component.scss
View File

@ -28,3 +28,13 @@
z-index: 100;
height: 32px;
}
.select-status {
float: left;
margin-top: 6px;
margin-right: 5px;
}
.row-right {
padding-right: 50px;
}

18
src/portal/src/app/log/audit-log.component.html
View File

@ -9,7 +9,7 @@
</span>
</div>
</div>
<div class="row flex-items-xs-right option-right" [hidden]="currentOption === 0">
<div class="row flex-items-xs-right row-right" [hidden]="currentOption === 0">
<clr-dropdown>
<button class="btn btn-link" clrDropdownToggle>
{{'AUDIT_LOG.OPERATIONS' | translate}}
@ -24,20 +24,8 @@
</clr-dropdown-menu>
</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">
<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>
<hbr-datetime [dateInput]="search.startTime" (search)="doSearchByStartTime($event)"></hbr-datetime>
<hbr-datetime [dateInput]="search.endTime" [oneDayOffset]="true" (search)="doSearchByEndTime($event)"></hbr-datetime>
</div>
</div>
</div>

4
src/portal/src/app/log/audit-log.component.scss
View File

@ -8,4 +8,8 @@
.refresh-btn:hover {
color: #007CBB;
}
.row-right {
padding-right: 60px;
}

43
src/portal/src/app/log/audit-log.component.ts
View File

@ -41,13 +41,18 @@ class FilterOption {
}
}
export class SearchOption {
startTime: string = "";
endTime: string = "";
}
@Component({
selector: 'audit-log',
templateUrl: './audit-log.component.html',
styleUrls: ['./audit-log.component.scss']
})
export class AuditLogComponent implements OnInit {
search: SearchOption = new SearchOption();
currentUser: SessionUser;
projectId: number;
queryParam: AuditLog = new AuditLog();
@ -70,17 +75,6 @@ export class AuditLogComponent implements OnInit {
currentPage = 1;
totalPage = 0;
@ViewChild('fromTime') fromTimeInput: NgModel;
@ViewChild('toTime') toTimeInput: NgModel;
get fromTimeInvalid(): boolean {
return this.fromTimeInput.errors && this.fromTimeInput.errors.dateValidator && (this.fromTimeInput.dirty || this.fromTimeInput.touched);
}
get toTimeInvalid(): boolean {
return this.toTimeInput.errors && this.toTimeInput.errors.dateValidator && (this.toTimeInput.dirty || this.toTimeInput.touched);
}
get showPaginationIndex(): boolean {
return this.totalRecordCount > 0;
}
@ -125,30 +119,13 @@ export class AuditLogComponent implements OnInit {
this.retrieve();
}
convertDate(strDate: string): string {
if (/^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/.test(strDate)) {
let parts = strDate.split(/[-\/]/);
strDate = parts[2] /*Year*/ + '-' + parts[1] /*Month*/ + '-' + parts[0] /*Date*/;
}
return strDate;
}
doSearchByStartTime(strDate: string): void {
this.queryParam.begin_timestamp = 0;
if (this.fromTimeInput.valid && strDate) {
strDate = this.convertDate(strDate);
this.queryParam.begin_timestamp = new Date(strDate).getTime() / 1000;
}
doSearchByStartTime(fromTimestamp: string): void {
this.queryParam.begin_timestamp = fromTimestamp;
this.retrieve();
}
doSearchByEndTime(strDate: string): void {
this.queryParam.end_timestamp = 0;
if (this.toTimeInput.valid && strDate) {
strDate = this.convertDate(strDate);
let oneDayOffset = 3600 * 24;
this.queryParam.end_timestamp = new Date(strDate).getTime() / 1000 + oneDayOffset;
}
doSearchByEndTime(toTimestamp: string): void {
this.queryParam.end_timestamp = toTimestamp;
this.retrieve();
}