nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-192 include ngForm validations for workbasket information and access items

This commit is contained in:
Martin Rojas Miguel Angel 2018-03-06 15:52:52 +01:00 committed by Holger Hagen
parent d25e846fd5
commit 4a2476360d
12 changed files with 256 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
admin/.angular-cli.json
View File

@ -20,7 +20,8 @@
"prefix": "app", "prefix": "app",
"styles": [ "styles": [
"../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss", "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss",
"./assets/_site.scss" "./assets/_site.scss",
"./assets/_forms.scss"
], ],
"scripts": ["../node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.min.js"], "scripts": ["../node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.min.js"],
"environmentSource": "environments/environment.ts", "environmentSource": "environments/environment.ts",

5
admin/src/app/app.module.ts
View File

@ -3,7 +3,7 @@
*/ */
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule, } from '@angular/core'; import { NgModule, } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AlertModule } from 'ngx-bootstrap'; import { AlertModule } from 'ngx-bootstrap';
@ -61,7 +61,8 @@ const MODULES = [
AlertModule.forRoot(), AlertModule.forRoot(),
AngularSvgIconModule, AngularSvgIconModule,
HttpClientModule, HttpClientModule,
BrowserAnimationsModule BrowserAnimationsModule,
ReactiveFormsModule
]; ];
const DECLARATIONS = [ const DECLARATIONS = [

200
admin/src/app/workbasket/details/access-items/access-items.component.html
View File

@ -3,108 +3,112 @@
<div *ngIf="workbasket" id="wb-information" class="panel panel-default"> <div *ngIf="workbasket" id="wb-information" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button type="button" (click)="onSave()" class="btn btn-default btn-primary">Save</button> <button type="button" (click)="onSave()" [disabled]="!AccessItemsForm.form.valid" class="btn btn-default btn-primary">Save</button>
<button type="button" (click)="clear()" class="btn btn-default">Undo changes</button> <button type="button" (click)="clear()" class="btn btn-default">Undo changes</button>
</div> </div>
<h4 class="panel-header">{{workbasket.name}}</h4> <h4 class="panel-header">{{workbasket.name}}</h4>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<table id="table-access-items"class="table table-striped table-center"> <form #AccessItemsForm="ngForm">
<thead> <table id="table-access-items" class="table table-striped table-center">
<tr> <thead>
<th></th> <tr>
<th class="text-align required-header">AccessID</th> <th></th>
<th>Read</th> <th class="text-align required-header">AccessID</th>
<th>Open</th> <th>Read</th>
<th>Append</th> <th>Open</th>
<th>Transfer</th> <th>Append</th>
<th>Distribute</th> <th>Transfer</th>
<th>Custom1</th> <th>Distribute</th>
<th>Custom2</th> <th>Custom1</th>
<th>Custom3</th> <th>Custom2</th>
<th>Custom4</th> <th>Custom3</th>
<th>Custom5</th> <th>Custom4</th>
<th>Custom6</th> <th>Custom5</th>
<th>Custom7</th> <th>Custom6</th>
<th>Custom8</th> <th>Custom7</th>
<th>Custom9</th> <th>Custom8</th>
<th>Custom10</th> <th>Custom9</th>
<th>Custom11</th> <th>Custom10</th>
<th>Custom12</th> <th>Custom11</th>
</tr> <th>Custom12</th>
</thead> </tr>
<tbody> </thead>
<tr *ngFor="let authorization of accessItems; let index = index;"> <tbody>
<td> <tr *ngFor="let accessItem of accessItems; let index = index;" ngModelGroup="accessItems">
<button type="button" (click)="remove(index)" data-toggle="tooltip" title="Remove" class="btn btn-default remove"> <td>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <button type="button" (click)="remove(index)" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
</button> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</td> </button>
<td class="text-align text-width "> </td>
<div class ="input-group" <td class="text-align text-width ">
[ngClass]="{ <div class="input-group" [ngClass]="{
'has-warning': (accessItemsClone[index].accessId !== authorization.accessId), 'has-warning': (accessItemsClone[index].accessId !== accessItem.accessId),
'has-error': !authorization.accessId }"> 'has-error': !accessItem.accessId }">
<input type="text" class="form-control" [(ngModel)]="authorization.accessId"> <input type="text" required #accessItemName="ngModel" class="form-control" name="accessItem.accessId-{{index}}" [(ngModel)]="accessItem.accessId" placeholder="{{accessItemName.invalid? 'Access id is required': ''}}">
</div> </div>
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permRead !== authorization.permRead)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permRead !== accessItem.permRead)}">
<input type="checkbox" disabled="disabled" [(ngModel)]="authorization.permRead"> <input type="checkbox" disabled="disabled" name="accessItem.permRead-{{index}}" [(ngModel)]="accessItem.permRead">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permOpen !== authorization.permOpen)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permOpen !== accessItem.permOpen)}">
<input type="checkbox" [(ngModel)]="authorization.permOpen"> <input type="checkbox" name="accessItem.permOpen-{{index}}" [(ngModel)]="accessItem.permOpen">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permAppend !== authorization.permAppend)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permAppend !== accessItem.permAppend)}">
<input type="checkbox" [(ngModel)]="authorization.permAppend"> <input type="checkbox" name="accessItem.permAppend-{{index}}" [(ngModel)]="accessItem.permAppend">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permTransfer !== authorization.permTransfer)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permTransfer != accessItem.permTransfer)}">
<input type="checkbox" [(ngModel)]="authorization.permTransfer"> <input type="checkbox" name="accessItem.permTransfer-{{index}}" [(ngModel)]="accessItem.permTransfer">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permDistribute !== authorization.permDistribute)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permDistribute !== accessItem.permDistribute)}">
<input type="checkbox" [(ngModel)]="authorization.permDistribute"> <input type="checkbox" name="accessItem.permDistribute-{{index}}" [(ngModel)]="accessItem.permDistribute">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom1 !== authorization.permCustom1)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom1 !== accessItem.permCustom1)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom1"> <input type="checkbox" name="accessItem.permCustom1-{{index}}" [(ngModel)]="accessItem.permCustom1">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom2 !== authorization.permCustom2)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom2 !== accessItem.permCustom2)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom2"> <input type="checkbox" name="accessItem.permCustom2-{{index}}" [(ngModel)]="accessItem.permCustom2">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom3 !== authorization.permCustom3)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom3 !== accessItem.permCustom3)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom3"> <input type="checkbox" name="accessItem.permCustom3-{{index}}" [(ngModel)]="accessItem.permCustom3">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom4 !== authorization.permCustom4)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom4 !== accessItem.permCustom4)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom4"> <input type="checkbox" name="accessItem.permCustom4-{{index}}" [(ngModel)]="accessItem.permCustom4">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom5 !== authorization.permCustom5)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom5 !== accessItem.permCustom5)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom5"> <input type="checkbox" name="accessItem.permCustom5-{{index}}" [(ngModel)]="accessItem.permCustom5">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom6 !== authorization.permCustom6)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom6 !== accessItem.permCustom6)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom6"> <input type="checkbox" name="accessItem.permCustom6-{{index}}" [(ngModel)]="accessItem.permCustom6">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom7 !== authorization.permCustom7)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom7 !== accessItem.permCustom7)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom7"> <input type="checkbox" name="accessItem.permCustom7-{{index}}" [(ngModel)]="accessItem.permCustom7">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom8 !== authorization.permCustom8)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom8 !== accessItem.permCustom8)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom8"> <input type="checkbox" name="accessItem.permCustom8-{{index}}" [(ngModel)]="accessItem.permCustom8">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom9 !== authorization.permCustom9)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom9 !== accessItem.permCustom9)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom9"> <input type="checkbox" name="accessItem.permCustom9-{{index}}" [(ngModel)]="accessItem.permCustom9">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom10 !== authorization.permCustom10)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom10 !== accessItem.permCustom10)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom10"> <input type="checkbox" name="accessItem.permCustom10-{{index}}" [(ngModel)]="accessItem.permCustom10">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom11 !== authorization.permCustom11)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom11 !== accessItem.permCustom11)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom11"> <input type="checkbox" name="accessItem.permCustom11-{{index}}" [(ngModel)]="accessItem.permCustom11">
</td> </td>
<td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom12 !== authorization.permCustom12)}"> <td [ngClass]="{'has-changes': (accessItemsClone[index].permCustom12 !== accessItem.permCustom12)}">
<input type="checkbox" [(ngModel)]="authorization.permCustom12"> <input type="checkbox" name="accessItem.permCustom12-{{index}}" [(ngModel)]="accessItem.permCustom12">
</td> </td>
</tr> </tr>
</tbody>
</table> </tbody>
<button id="button-add-access-item" type="button" (click)="addAccessItem()" class="btn btn-default"> </table>
<span><svg-icon class="green small" src="./assets/icons/wb-add.svg"></svg-icon></span> </form>
Add new access <button id="button-add-access-item" type="button" (click)="addAccessItem()" class="btn btn-default">
</button> <span>
<svg-icon class="green small" src="./assets/icons/wb-add.svg"></svg-icon>
</span>
Add new access
</button>
</div> </div>
</div> </div>

2
admin/src/app/workbasket/details/access-items/access-items.component.scss
View File

@ -5,7 +5,7 @@ td > input[type="checkbox"] {
overflow-x: auto; overflow-x: auto;
} }
.text-width{ .text-width{
min-width: 150px; min-width: 180px;
} }
.required-header:after { .required-header:after {
content:" *"; content:" *";

43
admin/src/app/workbasket/details/access-items/access-items.component.spec.ts
View File

@ -1,12 +1,12 @@
import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { WorkbasketService } from '../../../services/workbasket.service'; import { WorkbasketService } from '../../../services/workbasket.service';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularSvgIconModule } from 'angular-svg-icon'; import { AngularSvgIconModule } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { HttpModule, JsonpModule } from '@angular/http'; import { HttpModule, JsonpModule } from '@angular/http';
import { Workbasket } from 'app/model/workbasket'; import { Workbasket } from 'app/model/workbasket';
import { SpinnerComponent } from '../../../shared/spinner/spinner.component'; import { SpinnerComponent } from '../../../shared/spinner/spinner.component';
import { AlertService, AlertModel , AlertType } from '../../../services/alert.service'; import { AlertService, AlertModel, AlertType } from '../../../services/alert.service';
import { GeneralMessageModalComponent } from '../../../shared/general-message-modal/general-message-modal.component'; import { GeneralMessageModalComponent } from '../../../shared/general-message-modal/general-message-modal.component';
import { Links } from '../../../model/links'; import { Links } from '../../../model/links';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
@ -21,7 +21,7 @@ describe('AccessItemsComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [SpinnerComponent, AccessItemsComponent, GeneralMessageModalComponent], declarations: [SpinnerComponent, AccessItemsComponent, GeneralMessageModalComponent],
imports: [FormsModule, AngularSvgIconModule, HttpClientModule, HttpModule], imports: [FormsModule, AngularSvgIconModule, HttpClientModule, HttpModule, ReactiveFormsModule],
providers: [WorkbasketService, AlertService] providers: [WorkbasketService, AlertService]
}) })
@ -34,11 +34,11 @@ describe('AccessItemsComponent', () => {
component.workbasket = new Workbasket('1') component.workbasket = new Workbasket('1')
workbasketService = TestBed.get(WorkbasketService); workbasketService = TestBed.get(WorkbasketService);
alertService = TestBed.get(AlertService); alertService = TestBed.get(AlertService);
spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(Observable.of(new Array<WorkbasketAccessItems>(new WorkbasketAccessItems('id1', '1', 'accessID1', false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, new Array<Links>(new Links('setWorkbasketAccessItems',''))), spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(Observable.of(new Array<WorkbasketAccessItems>(new WorkbasketAccessItems('id1', '1', 'accessID1', false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, new Array<Links>(new Links('setWorkbasketAccessItems', ''))),
new WorkbasketAccessItems('id2', '1', 'accessID2')))); new WorkbasketAccessItems('id2', '1', 'accessID2'))));
spyOn(workbasketService, 'updateWorkBasketAccessItem').and.returnValue(Observable.of(true)), spyOn(workbasketService, 'updateWorkBasketAccessItem').and.returnValue(Observable.of(true)),
spyOn(alertService, 'triggerAlert').and.returnValue(Observable.of(true)), spyOn(alertService, 'triggerAlert').and.returnValue(Observable.of(true)),
debugElement = fixture.debugElement.nativeElement; debugElement = fixture.debugElement.nativeElement;
fixture.detectChanges(); fixture.detectChanges();
}); });
@ -65,18 +65,21 @@ describe('AccessItemsComponent', () => {
expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBeNull(); expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBeNull();
debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].querySelector('input').click(); debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].querySelector('input').click();
fixture.detectChanges(); fixture.detectChanges();
component fixture.whenStable().then(() => {
expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBe('has-changes'); expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBe('has-changes');
});
}); });
it('should undo changes if undo changes button is clicked', () => { it('should undo changes if undo changes button is clicked', () => {
debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].querySelector('input').click(); debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].querySelector('input').click();
fixture.detectChanges(); fixture.whenStable().then(() => {
expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBe('has-changes'); expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBe('has-changes');
expect(debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button').length).toBe(2); expect(debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button').length).toBe(2);
debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button')[1].click(); debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button')[1].click();
fixture.detectChanges(); fixture.detectChanges();
expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBeNull(); expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBeNull();
});
}); });
it('should remove an access item if remove button is clicked', () => { it('should remove an access item if remove button is clicked', () => {
@ -86,16 +89,6 @@ describe('AccessItemsComponent', () => {
expect(debugElement.querySelectorAll('#table-access-items > tbody > tr').length).toBe(1); expect(debugElement.querySelectorAll('#table-access-items > tbody > tr').length).toBe(1);
}); });
it('should validate access-items before saving', () => {
debugElement.querySelector('#button-add-access-item').click();
fixture.detectChanges();
expect(component.onSave()).toBeUndefined();
component.accessItems[2].accessId = 'someText';
component.onSave();
expect(workbasketService.updateWorkBasketAccessItem).toHaveBeenCalled();
});
it('should show alert successfull after saving', () => { it('should show alert successfull after saving', () => {
component.onSave(); component.onSave();
expect(alertService.triggerAlert).toHaveBeenCalledWith(new AlertModel(AlertType.SUCCESS, `Workbasket ${component.workbasket.key} Access items were saved successfully`)); expect(alertService.triggerAlert).toHaveBeenCalledWith(new AlertModel(AlertType.SUCCESS, `Workbasket ${component.workbasket.key} Access items were saved successfully`));

41
admin/src/app/workbasket/details/access-items/access-items.component.ts
View File

@ -35,8 +35,8 @@ export class AccessItemsComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.accessItemsubscription = this.workbasketService.getWorkBasketAccessItems(this.workbasket.workbasketId).subscribe( (accessItems: Array<WorkbasketAccessItems>) =>{ this.accessItemsubscription = this.workbasketService.getWorkBasketAccessItems(this.workbasket.workbasketId).subscribe( (accessItems: Array<WorkbasketAccessItems>) =>{
this.accessItems = accessItems; this.accessItems = accessItems;
this.accessItemsClone = this.cloneaccessItems(this.accessItems); this.accessItemsClone = this.cloneAccessItems(this.accessItems);
this.accessItemsResetClone = this.cloneaccessItems(this.accessItems); this.accessItemsResetClone = this.cloneAccessItems(this.accessItems);
}) })
} }
@ -47,8 +47,9 @@ export class AccessItemsComponent implements OnInit {
} }
clear() { clear() {
this.accessItems = this.cloneaccessItems(this.accessItemsResetClone); this.alertService.triggerAlert(new AlertModel(AlertType.INFO, 'Reset edited fields'))
this.accessItemsClone = this.cloneaccessItems(this.accessItemsResetClone); this.accessItems = this.cloneAccessItems(this.accessItemsResetClone);
this.accessItemsClone = this.cloneAccessItems(this.accessItemsResetClone);
} }
remove(index: number) { remove(index: number) {
@ -57,17 +58,14 @@ export class AccessItemsComponent implements OnInit {
} }
onSave(): boolean { onSave(): boolean {
if(this.validateAccessItems()){
return;
}
if(!this.accessItems[0].links){ if(!this.accessItems[0].links){
return; return;
} }
this.workbasketService.updateWorkBasketAccessItem(Utils.getTagLinkRef(this.accessItems[0].links, 'setWorkbasketAccessItems').href, this.accessItems).subscribe(response =>{ this.workbasketService.updateWorkBasketAccessItem(Utils.getTagLinkRef(this.accessItems[0].links, 'setWorkbasketAccessItems').href, this.accessItems).subscribe(response =>{
this.accessItemsClone = this.cloneaccessItems(this.accessItems); this.accessItemsClone = this.cloneAccessItems(this.accessItems);
this.accessItemsResetClone = this.cloneaccessItems(this.accessItems); this.accessItemsResetClone = this.cloneAccessItems(this.accessItems);
this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, `Workbasket ${this.workbasket.key} Access items were saved successfully`)); this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, `Workbasket ${this.workbasket.name} Access items were saved successfully`));
return true; return true;
}, },
error => { error => {
@ -76,25 +74,14 @@ export class AccessItemsComponent implements OnInit {
}) })
} }
private validateAccessItems(): boolean { setValue() { debugger; }
return this.accessItems.some(element => {
if(!element.accessId || element.accessId === '') {
this.showValidationError();
return true;
}
});
}
private showValidationError() { private cloneAccessItems(inputaccessItem): Array<WorkbasketAccessItems>{
this.alertService.triggerAlert(new AlertModel(AlertType.DANGER, "AccessId must not be empty", false)); let accessItemClone = new Array<WorkbasketAccessItems>();
} inputaccessItem.forEach(accessItem => {
accessItemClone.push({... accessItem});
private cloneaccessItems(inputAuthorization): Array<WorkbasketAccessItems>{
let authorizationClone = new Array<WorkbasketAccessItems>();
inputAuthorization.forEach(authorization => {
authorizationClone.push({... authorization});
}); });
return authorizationClone; return accessItemClone;
} }
private ngOnDestroy(): void { private ngOnDestroy(): void {

164
admin/src/app/workbasket/details/information/workbasket-information.component.html
View File

@ -1,86 +1,102 @@
<taskana-spinner [isRunning]="requestInProgress" [isModal]= "modalSpinner" class = "centered-horizontally floating"></taskana-spinner> <taskana-spinner [isRunning]="requestInProgress" [isModal]="modalSpinner" class="centered-horizontally floating"></taskana-spinner>
<taskana-general-message-modal *ngIf="modalErrorMessage" [message]="modalErrorMessage" [title]="modalTitle" error = "true" ></taskana-general-message-modal> <taskana-general-message-modal *ngIf="modalErrorMessage" [message]="modalErrorMessage" [title]="modalTitle" error="true"></taskana-general-message-modal>
<div id = "wb-information" class="panel panel-default"> <div id="wb-information" class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button type="button" (click)="onSave()" class="btn btn-default btn-primary">Save</button> <button type="button" [disabled]="!WorkbasketForm.form.valid" (click)="onSave()" class="btn btn-default btn-primary">Save</button>
<button type="button" (click)="onClear()" class="btn btn-default">Undo changes</button> <button type="button" (click)="onClear()" class="btn btn-default">Undo changes</button>
</div> </div>
<h4 class="panel-header">{{workbasket.name}}</h4> <h4 class="panel-header">{{workbasket.name}}</h4>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<form class="col-md-6"> <form #WorkbasketForm="ngForm">
<div class="form-group required"> <div class="col-md-6">
<label for="wb-key" class="control-label">Key</label> <div class="form-group required">
<input type="text" class="form-control" id="wb-key" placeholder="key" [(ngModel)]="workbasket.key" name ="workbasket.key"> <label for="wb-key" class="control-label">Key</label>
</div> <input type="text" required #key="ngModel" class="form-control" id="wb-key" placeholder="Key" [(ngModel)]="workbasket.key"
<div class="form-group required"> name="workbasket.key">
<label for="wb-name" class="control-label">Name</label> <div [hidden]="key.valid" class="required-text">
<input type="text" class="form-control" id="wb-name" placeholder="Name" [(ngModel)]="workbasket.name" name ="workbasket.name"> * Key is required
</div> </div>
<div class="form-group required"> </div>
<label for="wb-type" class="control-label">Type</label> <div class="form-group required">
<div class="dropdown clearfix btn-group"> <label for="wb-name" class="control-label">Name</label>
<button class="btn btn-default" type="button" id="dropdownMenu24" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <input type="text" required #name="ngModel" class="form-control" id="wb-name" placeholder="Name" [(ngModel)]="workbasket.name"
<taskana-icon-type class="vertical-align" [type] ='workbasket.type'></taskana-icon-type> name="workbasket.name">
{{allTypes.get(workbasket.type)}} <div [hidden]="name.valid" class="required-text">
<span class="caret"></span> * Name is required
</button> </div>
<ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu1"> </div>
<li> <div class="form-group required">
<a *ngFor="let type of allTypes | mapValues | removeEmptyType" (click)="selectType(type.key)"> <label for="wb-owner" class="control-label">Owner</label>
<taskana-icon-type class="vertical-align" [type] ='type.key'></taskana-icon-type> <input type="text" required #owner="ngModel" class="form-control" id="wb-owner" placeholder="Owner" [(ngModel)]="workbasket.owner"
{{type.value}} name="workbasket.owner">
</a> <div [hidden]="owner.valid" class="required-text">
</li> * Owner is required
</ul> </div>
</div>
<div class="form-group">
<label for="wb-type" class="control-label">Type</label>
<div class="dropdown clearfix btn-group">
<button class="btn btn-default" type="button" id="dropdownMenu24" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<taskana-icon-type class="vertical-align" [type]='workbasket.type'></taskana-icon-type>
{{allTypes.get(workbasket.type)}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a *ngFor="let type of allTypes | mapValues | removeEmptyType" (click)="selectType(type.key)">
<taskana-icon-type class="vertical-align" [type]='type.key'></taskana-icon-type>
{{type.value}}
</a>
</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="wb-domain" class="control-label">Domain</label>
<input type="text" class="form-control" id="wb-domain" placeholder="Domain" [(ngModel)]="workbasket.domain" name="workbasket.domain"
disabled="">
</div>
<div class="form-group">
<label for="wb-description" class="control-label">Description</label>
<textarea class="form-control" rows="5" id="wb-description" placeholder="Description" [(ngModel)]="workbasket.description"
name="workbasket.description"></textarea>
</div> </div>
</div> </div>
<div class="form-group required"> <div class="col-md-6">
<label for="wb-owner" class="control-label">Owner</label> <div class="form-group">
<input type="text" class="form-control" id="wb-owner" placeholder="Owner" [(ngModel)]="workbasket.owner" name ="workbasket.owner"> <label for="wb-org-level-1" class="control-label">OrgLevel 1</label>
</div> <input type="text" class="form-control" id="wb-org-level-1" placeholder="OrgLevel 1" [(ngModel)]="workbasket.orgLevel1" name="workbasket.orgLevel1">
<div class="form-group"> </div>
<label for="wb-domain" class="control-label">Domain</label> <div class="form-group">
<input type="text" class="form-control" id="wb-domain" placeholder="Domain" [(ngModel)]="workbasket.domain" name ="workbasket.domain" disabled=""> <label for="wb-org-level-2" class="control-label">OrgLevel 2</label>
</div> <input type="text" class="form-control" id="wb-org-level-2" placeholder="OrgLevel 2" [(ngModel)]="workbasket.orgLevel2" name="workbasket.orgLevel2">
<div class="form-group"> </div>
<label for="wb-description" class="control-label">Description</label> <div class="form-group">
<textarea class="form-control" rows="5" id="wb-description" placeholder="Description" [(ngModel)]="workbasket.description" name ="workbasket.description"></textarea> <label for="wb-org-level-3" class="control-label">OrgLevel 3</label>
</div> <input type="text" class="form-control" id="wb-org-level-3" placeholder="OrgLevel 3" [(ngModel)]="workbasket.orgLevel3" name="workbasket.orgLevel3">
</form> </div>
<form class="col-md-6"> <div class="form-group">
<div class="form-group"> <label for="wb-org-level-4" class="control-label">OrgLevel 4</label>
<label for="wb-org-level-1" class="control-label">OrgLevel 1</label> <input type="text" class="form-control" id="wb-org-level-4" placeholder="OrgLevel 4" [(ngModel)]="workbasket.orgLevel4" name="workbasket.orgLevel4">
<input type="text" class="form-control" id="wb-org-level-1" placeholder="OrgLevel 1" [(ngModel)]="workbasket.orgLevel1" name ="workbasket.orgLevel1"> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="wb-custom-1" class="control-label">Custom 1</label>
<label for="wb-org-level-2" class="control-label">OrgLevel 2</label> <input type="text" class="form-control" id="wb-custom-1" placeholder="Custom 1" [(ngModel)]="workbasket.custom1" name="workbasket.custom1">
<input type="text" class="form-control" id="wb-org-level-2" placeholder="OrgLevel 2" [(ngModel)]="workbasket.orgLevel2" name ="workbasket.orgLevel2"> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="wb-custom-2" class="control-label">Custom 2</label>
<label for="wb-org-level-3" class="control-label">OrgLevel 3</label> <input type="text" class="form-control" id="wb-custom-2" placeholder="Custom 2" [(ngModel)]="workbasket.custom2" name="workbasket.custom2">
<input type="text" class="form-control" id="wb-org-level-3" placeholder="OrgLevel 3" [(ngModel)]="workbasket.orgLevel3" name ="workbasket.orgLevel3"> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="wb-custom-3" class="control-label">Custom 3</label>
<label for="wb-org-level-4" class="control-label">OrgLevel 4</label> <input type="text" class="form-control" id="wb-custom-3" placeholder="Custom 3" [(ngModel)]="workbasket.custom3" name="workbasket.custom3">
<input type="text" class="form-control" id="wb-org-level-4" placeholder="OrgLevel 4" [(ngModel)]="workbasket.orgLevel4" name ="workbasket.orgLevel4"> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="wb-custom-4" class="control-label">Custom 4</label>
<label for="wb-custom-1" class="control-label">Custom 1</label> <input type="text" class="form-control" id="wb-custom-4" placeholder="Custom 4" [(ngModel)]="workbasket.custom4" name="workbasket.custom4">
<input type="text" class="form-control" id="wb-custom-1" placeholder="Custom 1" [(ngModel)]="workbasket.custom1" name ="workbasket.custom1"> </div>
</div>
<div class="form-group">
<label for="wb-custom-2" class="control-label">Custom 2</label>
<input type="text" class="form-control" id="wb-custom-2" placeholder="Custom 2" [(ngModel)]="workbasket.custom2" name ="workbasket.custom2">
</div>
<div class="form-group">
<label for="wb-custom-3" class="control-label">Custom 3</label>
<input type="text" class="form-control" id="wb-custom-3" placeholder="Custom 3" [(ngModel)]="workbasket.custom3" name ="workbasket.custom3">
</div>
<div class="form-group">
<label for="wb-custom-4" class="control-label">Custom 4</label>
<input type="text" class="form-control" id="wb-custom-4" placeholder="Custom 4" [(ngModel)]="workbasket.custom4" name ="workbasket.custom4">
</div> </div>
</form> </form>
</div> </div>

4
admin/src/app/workbasket/details/information/workbasket-information.component.spec.ts
View File

@ -48,9 +48,9 @@ describe('InformationComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(debugElement.querySelector('#wb-information')).toBeDefined(); expect(debugElement.querySelector('#wb-information')).toBeDefined();
expect(debugElement.querySelector('#wb-information > .panel-heading > h4').textContent).toBe('name'); expect(debugElement.querySelector('#wb-information > .panel-heading > h4').textContent).toBe('name');
expect(debugElement.querySelectorAll('#wb-information > .panel-body > form').length).toBe(2); expect(debugElement.querySelectorAll('#wb-information > .panel-body > form').length).toBe(1);
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
expect(debugElement.querySelector('#wb-information > .panel-body > form:first-child > div:first-child > input').value).toBe('keyModified'); expect(debugElement.querySelector('#wb-information > .panel-body > form > div > div > input ').value).toBe('keyModified');
}); });
})); }));

5
admin/src/app/workbasket/details/information/workbasket-information.component.ts
View File

@ -47,6 +47,10 @@ export class WorkbasketInformationComponent implements OnInit {
this.workbasket.type = type; this.workbasket.type = type;
} }
onSubmit(){
debugger;
}
onSave() { onSave() {
this.beforeRequest(); this.beforeRequest();
@ -74,6 +78,7 @@ export class WorkbasketInformationComponent implements OnInit {
this.modalSpinner = true; this.modalSpinner = true;
this.modalErrorMessage = undefined; this.modalErrorMessage = undefined;
} }
private afterRequest(){ private afterRequest(){
this.requestInProgress = false; this.requestInProgress = false;
this.workbasketService.triggerWorkBasketSaved(); this.workbasketService.triggerWorkBasketSaved();

11
admin/src/assets/_forms.scss Normal file
View File

@ -0,0 +1,11 @@
.ng-invalid:not(form) {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.required-text {
padding-left: 15px;
color: #a94442;
}

4
admin/src/assets/_site.scss
View File

@ -250,3 +250,7 @@ li > div.row > dl {
.vertical-align{ .vertical-align{
vertical-align: middle; vertical-align: middle;
} }
.panel-heading{
min-height: 60px;
}