mirror of
https://github.com/goharbor/harbor.git
synced 2024-09-14 15:07:46 +02:00
Refine the access level of project creation
This commit is contained in:
Steven Zou
parent
4f66279c33
commit
153d807fca
@ -1,12 +1,12 @@
|
||||
<clr-modal [(clrModalOpen)]="createProjectOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
|
||||
<h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
|
||||
<inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
|
||||
<div class="modal-body" style="height: 12.8em; overflow-y: hidden;">
|
||||
<form #projectForm="ngForm">
|
||||
<section class="form-block">
|
||||
<div class="form-group" style="padding-left: 135px;">
|
||||
<label for="create_project_name" class="col-md-3 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
|
||||
<label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
|
||||
<h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
|
||||
<inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
|
||||
<div class="modal-body" style="height: 16.8em; overflow-y: hidden;">
|
||||
<form #projectForm="ngForm">
|
||||
<section class="form-block">
|
||||
<div class="form-group" style="padding-left: 135px;">
|
||||
<label for="create_project_name" class="col-md-3 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
|
||||
<label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
|
||||
<input type="text" id="create_project_name" [(ngModel)]="project.name" name="name" size="38" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
|
||||
<span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.required && (projectName.dirty || projectName.touched)">
|
||||
{{'PROJECT.NAME_IS_REQUIRED' | translate}}
|
||||
@ -18,23 +18,24 @@
|
||||
{{'PROJECT.NAME_ALREADY_EXISTS' | translate}}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 form-group-label-override">{{'PROJECT.PUBLIC' | translate}}</label>
|
||||
<div class="checkbox-inline">
|
||||
<input type="checkbox" id="create_project_public" [(ngModel)]="project.public" name="public">
|
||||
<label for="create_project_public"></label>
|
||||
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right" style="top:-8px; left:-8px;">
|
||||
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
|
||||
<span class="tooltip-content" style="margin-left: 5px;">{{'PROJECT.INLINE_HELP_PUBLIC' | translate }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
|
||||
<button type="button" class="btn btn-primary" [disabled]="projectForm.form.invalid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</div>
|
||||
<div class="form-group" style="padding-left: 135px;">
|
||||
<label class="col-md-4 form-group-label-override">{{'PROJECT.ACCESS_LEVEL' | translate}}</label>
|
||||
<div class="checkbox-inline">
|
||||
<input type="checkbox" id="create_project_public" [(ngModel)]="project.public" name="public">
|
||||
<label for="create_project_public"></label>
|
||||
<span class="access-level-label">{{ accessLevelDisplayText | translate}}</span>
|
||||
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-bottom-right" style="top:-8px; left:-8px;">
|
||||
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
|
||||
<span class="tooltip-content" style="margin-left: 5px;">{{'PROJECT.INLINE_HELP_PUBLIC' | translate }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
|
||||
<button type="button" class="btn btn-primary" [disabled]="projectForm.form.invalid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
@ -26,10 +26,10 @@ import { TranslateService } from '@ngx-translate/core';
|
||||
@Component({
|
||||
selector: 'create-project',
|
||||
templateUrl: 'create-project.component.html',
|
||||
styleUrls: [ 'create-project.css' ]
|
||||
styleUrls: ['create-project.css']
|
||||
})
|
||||
export class CreateProjectComponent implements AfterViewChecked {
|
||||
|
||||
|
||||
projectForm: NgForm;
|
||||
|
||||
@ViewChild('projectForm')
|
||||
@ -39,7 +39,7 @@ export class CreateProjectComponent implements AfterViewChecked {
|
||||
initVal: Project = new Project();
|
||||
|
||||
createProjectOpened: boolean;
|
||||
|
||||
|
||||
hasChanged: boolean;
|
||||
|
||||
staticBackdrop: boolean = true;
|
||||
@ -49,60 +49,64 @@ export class CreateProjectComponent implements AfterViewChecked {
|
||||
@ViewChild(InlineAlertComponent)
|
||||
inlineAlert: InlineAlertComponent;
|
||||
|
||||
constructor(private projectService: ProjectService,
|
||||
private translateService: TranslateService,
|
||||
private messageHandlerService: MessageHandlerService) {}
|
||||
constructor(private projectService: ProjectService,
|
||||
private translateService: TranslateService,
|
||||
private messageHandlerService: MessageHandlerService) { }
|
||||
|
||||
public get accessLevelDisplayText(): string {
|
||||
return this.project.public ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE';
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.projectService
|
||||
.createProject(this.project.name, this.project.public ? 1 : 0)
|
||||
.subscribe(
|
||||
status=>{
|
||||
this.create.emit(true);
|
||||
this.messageHandlerService.showSuccess('PROJECT.CREATED_SUCCESS');
|
||||
.createProject(this.project.name, this.project.public ? 1 : 0)
|
||||
.subscribe(
|
||||
status => {
|
||||
this.create.emit(true);
|
||||
this.messageHandlerService.showSuccess('PROJECT.CREATED_SUCCESS');
|
||||
this.createProjectOpened = false;
|
||||
},
|
||||
error => {
|
||||
let errorMessage: string;
|
||||
if (error instanceof Response) {
|
||||
switch (error.status) {
|
||||
case 409:
|
||||
this.translateService.get('PROJECT.NAME_ALREADY_EXISTS').subscribe(res => errorMessage = res);
|
||||
break;
|
||||
case 400:
|
||||
this.translateService.get('PROJECT.NAME_IS_ILLEGAL').subscribe(res => errorMessage = res);
|
||||
break;
|
||||
default:
|
||||
this.translateService.get('PROJECT.UNKNOWN_ERROR').subscribe(res => errorMessage = res);
|
||||
}
|
||||
if (this.messageHandlerService.isAppLevel(error)) {
|
||||
this.messageHandlerService.handleError(error);
|
||||
this.createProjectOpened = false;
|
||||
},
|
||||
error=>{
|
||||
let errorMessage: string;
|
||||
if (error instanceof Response) {
|
||||
switch(error.status) {
|
||||
case 409:
|
||||
this.translateService.get('PROJECT.NAME_ALREADY_EXISTS').subscribe(res=>errorMessage = res);
|
||||
break;
|
||||
case 400:
|
||||
this.translateService.get('PROJECT.NAME_IS_ILLEGAL').subscribe(res=>errorMessage = res);
|
||||
break;
|
||||
default:
|
||||
this.translateService.get('PROJECT.UNKNOWN_ERROR').subscribe(res=>errorMessage = res);
|
||||
}
|
||||
if(this.messageHandlerService.isAppLevel(error)) {
|
||||
this.messageHandlerService.handleError(error);
|
||||
this.createProjectOpened = false;
|
||||
} else {
|
||||
this.inlineAlert.showInlineError(errorMessage);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.inlineAlert.showInlineError(errorMessage);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
if(this.hasChanged) {
|
||||
this.inlineAlert.showInlineConfirmation({message: 'ALERT.FORM_CHANGE_CONFIRMATION'});
|
||||
if (this.hasChanged) {
|
||||
this.inlineAlert.showInlineConfirmation({ message: 'ALERT.FORM_CHANGE_CONFIRMATION' });
|
||||
} else {
|
||||
this.createProjectOpened = false;
|
||||
this.projectForm.reset();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewChecked(): void {
|
||||
this.projectForm = this.currentForm;
|
||||
if(this.projectForm) {
|
||||
this.projectForm.valueChanges.subscribe(data=>{
|
||||
for(let i in data) {
|
||||
let origin = this.initVal[i];
|
||||
if (this.projectForm) {
|
||||
this.projectForm.valueChanges.subscribe(data => {
|
||||
for (let i in data) {
|
||||
let origin = this.initVal[i];
|
||||
let current = data[i];
|
||||
if(current && current !== origin) {
|
||||
if (current && current !== origin) {
|
||||
this.hasChanged = true;
|
||||
break;
|
||||
} else {
|
||||
|
||||
@ -1,4 +1,13 @@
|
||||
.form-group-label-override {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.access-level-label {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: -4px;
|
||||
margin-right: 12px;
|
||||
top: -6px;
|
||||
position: relative;
|
||||
}
|
||||
@ -126,6 +126,7 @@
|
||||
"PUBLIC_OR_PRIVATE": "Access Level",
|
||||
"REPO_COUNT": "Repositories Count",
|
||||
"CREATION_TIME": "Creation Time",
|
||||
"ACCESS_LEVEL": "Access Level",
|
||||
"PUBLIC": "Public",
|
||||
"PRIVATE": "Private",
|
||||
"MAKE": "Make",
|
||||
|
||||
@ -126,6 +126,7 @@
|
||||
"PUBLIC_OR_PRIVATE": "访问级别",
|
||||
"REPO_COUNT": "镜像仓库数",
|
||||
"CREATION_TIME": "创建时间",
|
||||
"ACCESS_LEVEL": "访问级别",
|
||||
"PUBLIC": "公开",
|
||||
"PRIVATE": "私有",
|
||||
"MAKE": "设为",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user