Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-22 18:25:56 +01:00
Code Issues Projects Releases Wiki Activity

Refactor upload modal

Browse Source 
Using customized button to replace file input

Signed-off-by: Qian Deng <dengq@vmware.com>
This commit is contained in:
Qian Deng 2018-08-16 22:22:55 +08:00
parent 8cf7d4f822
commit d5da3862b2
13 changed files with 99 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/ui_ng/lib/src/helm-chart/helm-chart.component.html
View File

@ -86,26 +86,35 @@
<span class="spinner"></span>
</div>
</div>
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate}}</h3>
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
<h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate | titlecase}}</h3>
<div class="modal-body">
<form #chartUploadForm="ngForm" enctype="multipart/form-data" (ngSubmit)="upload()">
<section class="form-block">
<div class="form-group">
<label for="chart"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
<input type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
<label class="filename-label"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
<input class="filename-input" type="text" placeholder="{{this.chartFile?.name || 'BUTTON.NO_FILE' | translate}}" disabled>
<label for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}</label>
<input class="file-input" type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
</div>
<div class="form-group">
<label for="prov"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
<input type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
<label class="filename-label"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
<input class="filename-input" type="text" placeholder="{{this.provFile?.name || 'BUTTON.NO_FILE' | translate}}" disabled>
<label for="prov" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}</label>
<input class="file-input" type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
</div>
</section>
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
<span>{{'HELM_CHART.UPLOAD' | translate}}</span>
<div class="row flex-items-xs-right">
<button class="btn btn-secondary" [disabled]="isUploading" (click)="cancelUpload()">
<span>{{'BUTTON.CANCEL' | translate}}</span>
</button>
<button type="submit" class="btn btn-primary" [disabled]="isUploading">
<span>{{'HELM_CHART.UPLOAD' | translate}}</span>
<span *ngIf="isUploading" class="spinner spinner-inline">
Loading...
</span>
</button>
</div>
</form>
</div>
</clr-modal>

31
src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
View File

@ -77,3 +77,34 @@ $size60:60px;
.margin-right-12 {
margin-right:12px;
}
.file-input {
display: none;
}
.filename-span {
@include text-overflow;
display: inline-block;
width: 50%;
vertical-align: top;
}
clr-modal {
.form-group {
padding-left: 6rem;
.filename-label {
padding-top: 9px;
}
.filename-input {
margin-top: 12px;
width: 68%;
}
.file-browser-btn {
margin-left: 15px;
max-width: 25%;
}
}
}

17
src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
View File

@ -17,6 +17,7 @@ import { ErrorHandler } from "../error-handler/error-handler";
import { toPromise, DEFAULT_PAGE_SIZE } from "../utils";
import { HelmChartService } from "../service/helm-chart.service";
import { DefaultHelmIcon} from "../shared/shared.const";
import { Roles } from './../shared/shared.const';
@Component({
selector: "hbr-helm-chart",
@ -30,7 +31,7 @@ export class HelmChartComponent implements OnInit {
@Input() projectName = "unknown";
@Input() urlPrefix: string;
@Input() hasSignedIn: boolean;
@Input() projectRoleID = 0;
@Input() projectRoleID = Roles.OTHER;
@Input() hasProjectAdminRole: boolean;
@Output() chartClickEvt = new EventEmitter<any>();
@Output() chartDownloadEve = new EventEmitter<string>();
@ -74,8 +75,7 @@ export class HelmChartComponent implements OnInit {
}
public get developerRoleOrAbove(): boolean {
// 1: admin, 2: developer, 3: guest
return this.projectRoleID === 2 || this.hasProjectAdminRole;
return this.projectRoleID === Roles.DEVELOPER || this.hasProjectAdminRole;
}
ngOnInit(): void {
@ -117,13 +117,22 @@ export class HelmChartComponent implements OnInit {
this.chartClickEvt.emit(item.name);
}
onChartUpload() {
resetUploadForm() {
this.chartFile = null;
this.provFile = null;
this.uploadForm.reset();
}
onChartUpload() {
this.resetUploadForm();
this.isUploadModalOpen = true;
}
cancelUpload() {
this.resetUploadForm();
this.isUploadModalOpen = false;
}
upload() {
if (!this.chartFile && !this.provFile) {
return;

7
src/ui_ng/lib/src/shared/shared.const.ts
View File

@ -92,3 +92,10 @@ export const LabelColor = [
export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' };
export const DefaultHelmIcon = '/static/images/helm-gray.png';
export enum Roles {
PROJECT_ADMIN = 1,
DEVELOPER = 2,
GUEST = 3,
OTHER = 0,
}

1
src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
View File

@ -5,7 +5,6 @@ import { Component, OnInit } from '@angular/core';
import { Project } from './../project';
import { SessionUser } from './../../shared/session-user';
import { SessionService } from './../../shared/session.service';
import { RoleMapping } from '../../shared/shared.const';
@Component({
selector: 'list-chart-version',

1
src/ui_ng/src/app/project/member/add-group/add-group.component.ts
View File

@ -89,6 +89,7 @@ export class AddGroupComponent implements OnInit {
}
resetModaldata() {
this.createGroupMode = false;
this.group = new UserGroup();
this.selectedRole = 1;
this.selectedGroups = [];

1
src/ui_ng/src/app/project/project-detail/project-detail.component.ts
View File

@ -19,7 +19,6 @@ import { Project } from '../project';
import { SessionService } from '../../shared/session.service';
import { ProjectService } from '../../project/project.service';
import { RoleMapping } from '../../shared/shared.const';
import {AppConfigService} from "../../app-config.service";
@Component({

4
src/ui_ng/src/app/project/project-routing-resolver.service.ts
View File

@ -20,6 +20,8 @@ import { ProjectService } from './project.service';
import { SessionService } from '../shared/session.service';
import 'rxjs/add/operator/mergeMap';
import { Roles } from '../shared/shared.const'
@Injectable()
export class ProjectRoutingResolver implements Resolve<Project> {
@ -46,7 +48,7 @@ export class ProjectRoutingResolver implements Resolve<Project> {
project.is_member = true;
project.role_name = 'MEMBER.SYS_ADMIN';
} else {
project.has_project_admin_role = (project.current_user_role_id === 1);
project.has_project_admin_role = (project.current_user_role_id === Roles.PROJECT_ADMIN);
project.is_member = (project.current_user_role_id > 0);
project.role_name = RoleInfo[project.current_user_role_id];
}

7
src/ui_ng/src/app/shared/shared.const.ts
View File

@ -83,3 +83,10 @@ export const ProjectRoles = [
{ id: 2, value: "MEMBER.DEVELOPER" },
{ id: 3, value: "MEMBER.GUEST" }
];
export enum Roles {
PROJECT_ADMIN = 1,
DEVELOPER = 2,
GUEST = 3,
OTHER = 0,
}

5
src/ui_ng/src/i18n/lang/en-us-lang.json
View File

@ -36,7 +36,10 @@
"EDIT": "EDIT",
"SWITCH": "SWITCH",
"REPLICATE": "REPLICATE",
"ACTIONS": "Actions"
"ACTIONS": "Actions",
"BROWSE": "Browse",
"UPLOAD": "Upload",
"NO_FILE": "No file selected"
},
"BATCH": {
"DELETED_SUCCESS": "Deleted successfully",

6
src/ui_ng/src/i18n/lang/es-es-lang.json
View File

@ -36,8 +36,10 @@
"EDIT": "EDITAR",
"SWITCH": "SWITCH",
"REPLICATE": "REPLICATE",
"ACTIONS": "Actions"
"ACTIONS": "Actions",
"BROWSE": "Browse",
"UPLOAD": "Upload",
"NO_FILE": "No file selected"
},
"BATCH": {
"DELETED_SUCCESS": "Deleted successfully",

5
src/ui_ng/src/i18n/lang/fr-fr-lang.json
View File

@ -33,7 +33,10 @@
"NO": "NON",
"NEGATIVE": "NEGATIF",
"COPY": "COPIER",
"ACTIONS": "Actions"
"ACTIONS": "Actions",
"BROWSE": "Browse",
"UPLOAD": "Upload",
"NO_FILE": "No file selected"
},
"TOOLTIP": {
"EMAIL": "L'email doit être une adresse email valide comme name@example.com.",

5
src/ui_ng/src/i18n/lang/zh-cn-lang.json
View File

@ -36,7 +36,10 @@
"EDIT": "编辑",
"SWITCH": "切换",
"REPLICATE": "复制",
"ACTIONS": "操作"
"ACTIONS": "操作",
"BROWSE": "选择文件",
"UPLOAD": "上传",
"NO_FILE": "未选择文件"
},
"BATCH": {
"DELETED_SUCCESS": "删除成功",