Commit 2fdb01ef authored by AllForNothing's avatar AllForNothing
Browse files

Improve UI for add robot page


Signed-off-by: default avatarAllForNothing <sshijun@vmware.com>
parent 890200ea
......@@ -6,7 +6,7 @@
<form #robotForm="ngForm">
<section class="form-block">
<div class="clr-row">
<div class="clr-col-3 permission permission-dark">
<div class="clr-col-4 permission permission-dark">
<label class="col-md-3 required">
{{'ROBOT_ACCOUNT.NAME' | translate}}
</label>
......@@ -34,7 +34,27 @@
</div>
</div>
<div class="clr-row mt-1">
<div class="clr-col-3 permission permission-dark">
<div class="clr-col-4 permission permission-dark">
<label class="col-md-3">{{'ROBOT_ACCOUNT.EXPIRES_AT' | translate}}
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
<clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
<span>{{'ROBOT_ACCOUNT.EXPIRATION_TOOLTIP' | translate}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
</div>
<div class="clr-col padding-left-0 date">
<input class="input-width-date" type="date" readonly clrDate name="expiresAt"
[(clrDate)]="expiresDate" placeholder="{{expiresDatePlaceholder}}">
<clr-checkbox-wrapper>
<input type="checkbox" clrCheckbox name="neverExpired" [(ngModel)]="isNeverExpired" (change)="switch()" />
<label>{{"ROBOT_ACCOUNT.NEVER_EXPIRED" | translate}}</label>
</clr-checkbox-wrapper>
</div>
</div>
<div class="clr-row mt-1">
<div class="clr-col-4 permission permission-dark">
<label class="col-md-3">{{'REPLICATION.DESCRIPTION' |translate}}</label>
</div>
<div class="clr-col padding-left-0">
......@@ -48,7 +68,7 @@
</div>
</div>
<div class="clr-row mt-1">
<div class="clr-col-3 permission permission-dark">
<div class="clr-col-4 permission permission-dark">
<label class="col-md-3">
{{'ROBOT_ACCOUNT.PERMISSIONS' | translate}}
</label>
......
......@@ -37,7 +37,7 @@
}
.permission{
padding-top: 5px;
padding-top: 0.1rem;
color: #000000;
}
......@@ -46,4 +46,10 @@
}
.w-90{
width: 90%;
}
.date {
margin-top: -0.9rem;
}
.input-width-date {
width: 265px;
}
\ No newline at end of file
......@@ -19,7 +19,8 @@ import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { AppConfigService } from "../../../app-config.service";
import { ErrorHandler } from "../../../../lib/utils/error-handler";
const ONE_THOUSAND: number = 1000;
const NEVER_EXPIRED: number = -1;
@Component({
selector: "add-robot",
templateUrl: "./add-robot.component.html",
......@@ -50,6 +51,9 @@ export class AddRobotComponent implements OnInit, OnDestroy {
@Output() create = new EventEmitter<boolean>();
@ViewChild("robotForm", {static: true}) currentForm: NgForm;
@ViewChild("copyAlert", {static: false}) copyAlert: InlineAlertComponent;
private _expiresDate: Date;
isNeverExpired: boolean = false;
expiresDatePlaceholder: string = ' ';
constructor(
private robotService: RobotService,
private translate: TranslateService,
......@@ -114,6 +118,9 @@ export class AddRobotComponent implements OnInit, OnDestroy {
this.isRobotNameValid = true;
this.robot = new Robot();
this.nameTooltipText = "ROBOT_ACCOUNT.ROBOT_NAME";
this.isNeverExpired = false;
this.expiresDate = null;
this.expiresDatePlaceholder = ' ';
this.copyAlert.close();
}
......@@ -137,6 +144,18 @@ export class AddRobotComponent implements OnInit, OnDestroy {
this.robot.access.isPullImage = true;
this.robot.access.isPushOrPullImage = false;
}
if (this.isNeverExpired) {
this.robot.expires_at = NEVER_EXPIRED;
} else {
if (this.expiresDate) {
if (this.expiresDate <= new Date()) {
this.copyAlert.showInlineError("ROBOT_ACCOUNT.INVALID_VALUE");
return;
} else {
this.robot.expires_at = Math.floor(this.expiresDate.getTime() / ONE_THOUSAND);
}
}
}
this.isSubmitOnGoing = true;
this.robotService
.addRobotAccount(
......@@ -214,4 +233,23 @@ export class AddRobotComponent implements OnInit, OnDestroy {
closeModal() {
this.copyToken = false;
}
switch() {
if (this.isNeverExpired) {
this.expiresDate = null;
this.translate.get('ROBOT_ACCOUNT.NEVER_EXPIRED').subscribe(value => {
this.expiresDatePlaceholder = value;
});
} else {
this.expiresDatePlaceholder = ' ';
}
}
get expiresDate(): Date {
return this._expiresDate;
}
set expiresDate(date: Date) {
if (date) {
this.isNeverExpired = false;
}
this._expiresDate = date;
}
}
......@@ -54,7 +54,7 @@
</clr-dg-cell>
<clr-dg-cell>{{r.description}}</clr-dg-cell>
<clr-dg-cell>{{r.creation_time | date: 'short'}}</clr-dg-cell>
<clr-dg-cell>{{r.expires_at * 1000 | date: 'short'}}</clr-dg-cell>
<clr-dg-cell>{{r.expires_at === -1?("ROBOT_ACCOUNT.NEVER_EXPIRED" | translate):(r.expires_at * 1000 | date: 'short')}}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
<span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}}
......
......@@ -47,6 +47,7 @@ export class RobotService {
let param = {
name: robot.name,
expires_at: +robot.expires_at,
description: robot.description,
access
};
......
......@@ -5,6 +5,7 @@ export class Robot {
description: string;
expires_at: number;
disabled: boolean;
creation_time?: Date;
access: {
isPullImage: boolean;
isPushOrPullImage: boolean;
......
......@@ -349,7 +349,11 @@
"DELETION_TITLE": "Confirm removal of robot accounts",
"DELETION_SUMMARY": "Do you want to delete robot accounts {{param}}?",
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
"EXPORT_TO_FILE": "export to file"
"EXPORT_TO_FILE": "export to file",
"EXPIRES_AT": "Expires At",
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
"INVALID_VALUE": "The value of the expiration time is invalid",
"NEVER_EXPIRED": "Never Expired"
},
"WEBHOOK": {
"EDIT_BUTTON": "EDIT",
......
......@@ -350,7 +350,11 @@
"DELETION_TITLE": "Confirm removal of robot accounts",
"DELETION_SUMMARY": "Do you want to delete robot accounts {{param}}?",
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
"EXPORT_TO_FILE": "export to file"
"EXPORT_TO_FILE": "export to file",
"EXPIRES_AT": "Expires At",
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
"INVALID_VALUE": "The value of the expiration time is invalid",
"NEVER_EXPIRED": "Never Expired"
},
"WEBHOOK": {
"EDIT_BUTTON": "EDIT",
......
......@@ -341,7 +341,11 @@
"DELETION_TITLE": "confirmer l'enlèvement des comptes du robot ",
"DELETION_SUMMARY": "Voulez-vous supprimer la règle {{param}}?",
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
"EXPORT_TO_FILE": "export to file"
"EXPORT_TO_FILE": "export to file",
"EXPIRES_AT": "Expires At",
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
"INVALID_VALUE": "The value of the expiration time is invalid",
"NEVER_EXPIRED": "Never Expired"
},
"WEBHOOK": {
"EDIT_BUTTON": "EDIT",
......
......@@ -347,7 +347,11 @@
"DELETION_TITLE": "Confirmar a remoção do robô Contas",
"DELETION_SUMMARY": "Você quer remover a regra {{param}}?",
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
"EXPORT_TO_FILE": "export to file"
"EXPORT_TO_FILE": "export to file",
"EXPIRES_AT": "Expires At",
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
"INVALID_VALUE": "The value of the expiration time is invalid",
"NEVER_EXPIRED": "Never Expired"
},
"GROUP": {
"GROUP": "Grupo",
......
......@@ -349,7 +349,11 @@
"DELETION_TITLE": "Robot hesaplarının kaldırılmasını onaylayın",
"DELETION_SUMMARY": "Robot hesaplarını silmek istiyor musunuz {{param}}?",
"PULL_IS_MUST": "Çekme izni varsayılan olarak kontrol edilir ve değiştirilemez.",
"EXPORT_TO_FILE": "dosyayı dışarı aktar"
"EXPORT_TO_FILE": "dosyayı dışarı aktar",
"EXPIRES_AT": "Expires At",
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
"INVALID_VALUE": "The value of the expiration time is invalid",
"NEVER_EXPIRED": "Never Expired"
},
"WEBHOOK": {
"EDIT_BUTTON": "DÜZENLE",
......
......@@ -348,7 +348,11 @@
"DELETION_TITLE": "删除账户确认",
"DELETION_SUMMARY": "你确认删除机器人账户 {{param}}?",
"PULL_IS_MUST": "拉取权限默认选中且不可修改。",
"EXPORT_TO_FILE": "导出到文件中"
"EXPORT_TO_FILE": "导出到文件中",
"EXPIRES_AT": "到期日",
"EXPIRATION_TOOLTIP": "如不设置,将会使用系统设置中的过期时间。",
"INVALID_VALUE": "无效的过期日期",
"NEVER_EXPIRED": "永不过期"
},
"WEBHOOK": {
"EDIT_BUTTON": "编辑",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment