You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/06/11 10:57:23 UTC
[incubator-dlab] 04/05: [DLAB-743]: extended project creation
wizard/form
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch DLAB-743_wizard
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit abceb3bda15074520f32835dc0b087e2ec08f16f
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Mon Jun 10 17:22:08 2019 +0300
[DLAB-743]: extended project creation wizard/form
---
.../webapp/src/app/administration/project/index.ts | 4 +-
.../project-form/project-form.component.html | 182 +++++++++++++++++----
.../project-form/project-form.component.scss | 2 +-
.../project/project-form/project-form.component.ts | 34 +++-
.../administration/project/project.component.ts | 2 +-
5 files changed, 179 insertions(+), 45 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts
index 1c086d0..b3ca7d0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts
@@ -29,6 +29,7 @@ import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectComponent, EditProjectComponent } from './project.component';
import { ProjectDataService } from './project-data.service';
+import { DirectivesModule } from '../../core/directives';
@NgModule({
imports: [
@@ -36,7 +37,8 @@ import { ProjectDataService } from './project-data.service';
FormsModule,
ReactiveFormsModule,
MaterialModule,
- FormControlsModule
+ FormControlsModule,
+ DirectivesModule
],
declarations: [ProjectComponent, EditProjectComponent, ProjectFormComponent, ProjectListComponent],
entryComponents: [EditProjectComponent],
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html
index 92c003e..3413d0a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html
@@ -22,69 +22,128 @@
<mat-step>
<ng-template matStepLabel>Project</ng-template>
<section class="inner-step mat-reset">
-
- <div class="form-block">
+ <div class="form-block split">
<div>
<div class="control-group">
<label class="label">Project name</label>
<div class="control">
<input type="text" formControlName="name" placeholder="Enter project name"
(blur)="generateProjectTag($event)" [ngClass]="{ 'not-allowed' : item }">
- <span class="error" *ngIf="projectForm?.controls.name.hasError('duplication')">This project name already exists.</span>
+ <span class="error" *ngIf="projectForm?.controls.name.hasError('duplication')">This project name already
+ exists.</span>
<span class="error" *ngIf="!projectForm?.controls.name.valid
&& !projectForm?.controls.name.hasError('duplication')
- && projectForm?.controls.name.dirty">Project name can only contain letters, numbers, hyphens and '_' but can not end with special characters
+ && projectForm?.controls.name.dirty">Project name can only contain letters, numbers, hyphens and '_'
+ but can not end with special characters
</span>
</div>
</div>
<div class="control-group">
<label class="label">Project tag</label>
<div class="control">
- <input type="text" formControlName="tag" placeholder="dlab-{ project name }" [ngClass]="{ 'not-allowed' : item }">
+ <input type="text" formControlName="tag" placeholder="dlab-{ project name }"
+ [ngClass]="{ 'not-allowed' : item }">
</div>
</div>
- <div class="control-group">
- <div class="selector-wrapper">
- <mat-form-field [ngClass]="{ 'not-allowed' : item }">
- <mat-select multiple formControlName="endpoints" placeholder="Select endpoints">
- <mat-option class="multiple-select" disabled>
- <a class="select ani" (click)="selectOptions(endpointsList, 'endpoints', 'all')">
- <i class="material-icons">playlist_add_check</i> All
- </a>
- <a class="deselect ani" (click)="selectOptions(endpointsList, 'endpoints')">
- <i class="material-icons">clear</i> None
- </a>
- </mat-option>
- <mat-option *ngFor="let endpoint of endpointsList" [value]="endpoint.name">
- {{ endpoint.name }}
- </mat-option>
- <mat-option *ngIf="!endpointsList.length" class="multiple-select empty ml-10" disabled>Endpoints list is empty</mat-option>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
+ </div>
+
+ <div class="text-center m-bott-10">
+ <button mat-raised-button type="button" class="butt" [disabled]="item" (click)="reset()">Clear</button>
+ <button mat-raised-button type="button" class="butt next" matStepperNext>Next
+ <i class="material-icons">keyboard_arrow_right</i></button>
+ </div>
+ </div>
+ </section>
+ </mat-step>
+
+ <mat-step>
+ <ng-template matStepLabel>Endpoint</ng-template>
+ <section class="inner-step mat-reset">
+ <div class="form-block split">
+ <div class="control-group">
+ <label class="label">Select existing endpoint</label>
+ <div class="selector-wrapper control">
+ <mat-form-field [ngClass]="{ 'not-allowed' : item }">
+ <mat-select multiple formControlName="endpoints" placeholder="Select endpoints">
+ <mat-option class="multiple-select" disabled>
+ <a class="select ani" (click)="selectOptions(endpointsList, 'endpoints', 'all')">
+ <i class="material-icons">playlist_add_check</i> All
+ </a>
+ <a class="deselect ani" (click)="selectOptions(endpointsList, 'endpoints')">
+ <i class="material-icons">clear</i> None
+ </a>
+ </mat-option>
+ <mat-option *ngFor="let endpoint of endpointsList" [value]="endpoint.name">
+ {{ endpoint.name }}
+ </mat-option>
+ <mat-option *ngIf="!endpointsList.length" class="multiple-select empty ml-10" disabled>Endpoints list
+ is
+ empty</mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
+
+ <div>
+ <div class="control-group">
+ <label class="label">Name</label>
+ <div class="control">
+ <input type="text" formControlName="endpoint_name" placeholder="Enter endpoint name">
+ <span class="error"
+ *ngIf="!projectForm?.controls.endpoint_name.valid && projectForm?.controls.endpoint_name.touched">
+ Endpoint name can only contain letters, numbers, hyphens and '_' but can not end with special
+ characters
+ </span>
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="label">Endpoint url</label>
+ <div class="control">
+ <input type="text" formControlName="endpoint_url" placeholder="Enter endpoint url">
+ <span class="error"
+ *ngIf="!projectForm?.controls.endpoint_url.valid && projectForm.controls.endpoint_url.touched">
+ Endpoint url can only contain letters, numbers, hyphens and '_' but can not end with special
+ characters
+ </span>
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="label">Account ID</label>
+ <div class="control">
+ <input type="text" formControlName="endpoint_account" placeholder="Enter account">
+ <span class="error"
+ *ngIf="!projectForm?.controls.endpoint_account.valid && projectForm.controls.endpoint_account.touched">
+ Endpoint account can only contain letters, numbers, hyphens and '_' but can not end with special
+ characters
+ </span>
</div>
+ </div>
</div>
</div>
<div class="text-center m-bott-10">
<button mat-raised-button type="button" class="butt" [disabled]="item" (click)="reset()">Clear</button>
- <button mat-raised-button type="button" class="butt next" matStepperNext>Next<i
- class="material-icons">keyboard_arrow_right</i></button>
+ <button mat-raised-button matStepperPrevious class="butt">
+ <i class="material-icons">keyboard_arrow_left</i>Back</button>
+ <button mat-raised-button type="button" class="butt next" matStepperNext>
+ Next <i class="material-icons">keyboard_arrow_right</i>
+ </button>
</div>
</div>
-
</section>
</mat-step>
+
<mat-step>
<ng-template matStepLabel>Groups</ng-template>
- <div class="inner-step mat-reset">
+ <section class="inner-step mat-reset">
<div class="form-block split">
<div class="control-group">
- <div class="selector-wrapper">
+ <label class="label">Users group</label>
+ <div class="control selector-wrapper">
<mat-form-field>
- <mat-select multiple formControlName="groups" placeholder="Select user groups">
+ <mat-select multiple formControlName="groups" placeholder="Select existing user groups">
<mat-option class="multiple-select" disabled>
<a class="select ani" (click)="selectOptions(groupsList, 'groups', 'all')">
<i class="material-icons">playlist_add_check</i> All
@@ -96,7 +155,8 @@
<mat-option *ngFor="let group of groupsList" [value]="group">
{{ group }}
</mat-option>
- <mat-option *ngIf="!groupsList.length" class="multiple-select ml-10" disabled>Groups list is empty</mat-option>
+ <mat-option *ngIf="!groupsList.length" class="multiple-select ml-10" disabled>Groups list is empty
+ </mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -104,17 +164,69 @@
</mat-form-field>
</div>
</div>
+
+ <div class="control-group">
+ <label class="label">Group name</label>
+ <div class="control">
+ <!-- <input [validator]="groupValidarion()" type="text" placeholder="Enter group name" formControlName="group_name"> -->
+ <input type="text" placeholder="Enter group name" formControlName="group_name">
+ </div>
+
+ </div>
+
+ <div class="control-group">
+ <label class="label">Select roles</label>
+ <div class="selector-wrapper control">
+ <mat-form-field>
+ <mat-select multiple formControlName="group_roles" name="roles" [(value)]="setupRoles"
+ placeholder="Select roles">
+ <mat-option class="multiple-select" disabled>
+ <a class="select ani" (click)="selectOptions(rolesList, 'group_roles', 'all')">
+ <i class="material-icons">playlist_add_check</i> All
+ </a>
+ <a class="deselect ani" (click)="selectOptions(rolesList, 'group_roles')">
+ <i class="material-icons">clear</i> None
+ </a>
+ </mat-option>
+ <mat-option *ngFor="let role of rolesList" [value]="role">{{ role }}</mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
+ </div>
+
+ <!-- <mat-form-field class="chip-list">
+ <input #user matInput placeholder="Enter user login" pattern="[@.-_0-9a-zA-Z]"
+ (keydown.enter)="addUser(user.value, element); user.value = ''">
+ <button mat-icon-button matSuffix (click)="addUser(user.value, element); user.value = ''">
+ <mat-icon>person_add</mat-icon>
+ </button>
+ </mat-form-field> -->
+ <div class="control-group">
+ <label class="label">Users list</label>
+ <div class="list-selected list-container ani control">
+ <mat-chip-list>
+ <!-- <mat-chip *ngFor="let user of element.users">
+ {{ user }}
+ <a class="material-icons" (click)="removeUser(element.users, user)">clear</a>
+ </mat-chip> -->
+ </mat-chip-list>
+ </div>
+ </div>
<div class="text-center m-bott-10">
<button mat-raised-button type="button" class="butt" [disabled]="item" (click)="reset()">Clear</button>
<button mat-raised-button matStepperPrevious class="butt"><i
class="material-icons">keyboard_arrow_left</i>Back</button>
<button mat-raised-button type="button" class="butt butt-success" [disabled]="!projectForm.valid"
(click)="confirm(projectForm.value)">
- <span *ngIf="item; else update">Update</span><ng-template #update>Create</ng-template>
+ <span *ngIf="item; else update">Update</span>
+ <ng-template #update>Create</ng-template>
</button>
</div>
</div>
- </div>
+ </section>
</mat-step>
</mat-horizontal-stepper>
</form>
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss
index bbdf8cd..6a5a2ec 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss
@@ -23,7 +23,7 @@
flex-direction: column;
display: flex;
justify-content: space-between;
- height: 210px;
+ // height: 210px;
}
.mat-raised-button {
&.butt {
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
index 5a1e2ea..62b4549 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
@@ -37,6 +37,8 @@ export class ProjectFormComponent implements OnInit {
public projectForm: FormGroup;
public groupsList: any = [];
public endpointsList: any = [];
+ public roles: any = [];
+ public rolesList: any = [];
public projectList: Project[] = [];
@Input() item: any;
@@ -67,6 +69,17 @@ export class ProjectFormComponent implements OnInit {
this.editSpecificProject(this.item);
this.stepper.selectedIndex = 1;
}
+
+ this.rolesService.getGroupsData().subscribe(groups => {
+ this.rolesService.getRolesData().subscribe(
+ (roles: any) => {
+ this.roles = roles;
+ this.rolesList = roles.map(role => role.description);
+
+ },
+ error => this.toastr.error(error.message, 'Oops!'));
+ },
+ error => this.toastr.error(error.message, 'Oops!'));
}
public confirm(data) {
@@ -76,12 +89,13 @@ export class ProjectFormComponent implements OnInit {
this.update.emit();
}, error => this.toastr.error(error.message || 'Project update failed!', 'Oops!'));
} else {
- this.projectService.createProject(data).subscribe(() => {
- this.toastr.success('Project created successfully!', 'Success!');
- this.projectDataService.updateProjects();
- this.update.emit();
- this.reset();
- }, error => this.toastr.error(error.message || 'Project creation failed!', 'Oops!'));
+ debugger;
+ // this.projectService.createProject(data).subscribe(() => {
+ // this.toastr.success('Project created successfully!', 'Success!');
+ // this.projectDataService.updateProjects();
+ // this.update.emit();
+ // this.reset();
+ // }, error => this.toastr.error(error.message || 'Project creation failed!', 'Oops!'));
}
}
@@ -104,7 +118,13 @@ export class ProjectFormComponent implements OnInit {
'name': ['', Validators.compose([Validators.required, Validators.pattern(PATTERNS.namePattern), this.checkDuplication.bind(this)])],
'endpoints': [[], Validators.required],
'tag': ['', Validators.compose([Validators.required, Validators.pattern(PATTERNS.namePattern)])],
- 'groups': [[], Validators.required]
+ 'endpoint_name': [[]],
+ 'endpoint_url': [[]],
+ 'endpoint_account': [[]],
+ 'groups': [[], Validators.required],
+ 'group_name': ['', Validators.required],
+ 'group_roles': [[], Validators.required],
+ 'group_users': [[], Validators.required],
});
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
index c41ab27..afe3468 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
@@ -115,7 +115,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
`,
styles: [`
.content { color: #718ba6; padding: 0; font-size: 14px; font-weight: 400; margin: 0; overflow: hidden; }
- .edit-form { height: 380px; }
+ .edit-form { height: 500px; }
`]
})
export class EditProjectComponent {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org