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

TSK-712 Fix access items bug when opening a group

This commit is contained in:
Martin Rojas Miguel Angel 2018-09-17 11:33:56 +02:00 committed by Holger Hagen
parent 1e6fc73f7d
commit 3790fb6327
10 changed files with 103 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/app/administration/workbasket/details/access-items/access-items.component.html
View File

@ -1,8 +1,8 @@
<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="pull-right btn-group"> <div class="pull-right btn-group">
<button type="button" (click)="onSubmit()" [disabled]="action === 'COPY'" class="btn btn-default btn-primary" data-toggle="tooltip" <button type="button" (click)="onSubmit()" [disabled]="action === 'COPY'" class="btn btn-default btn-primary"
title="Save"> data-toggle="tooltip" title="Save">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> <span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
</button> </button>
<button type="button" (click)="clear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes"> <button type="button" (click)="clear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
@ -47,18 +47,20 @@
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button> </button>
</td> </td>
<td *ngIf="accessIdField.lookupField else accessIdInput" class="input-group text-align text-width taskana-type-ahead" [ngClass]="{ <td *ngIf="accessIdField.lookupField else accessIdInput" class="input-group text-align text-width taskana-type-ahead"
[ngClass]="{
'has-warning': (accessItemsClone[index].accessId !== accessItem.value.accessId), 'has-warning': (accessItemsClone[index].accessId !== accessItem.value.accessId),
'has-error': !accessItem.value.accessId }"> 'has-error': !accessItem.value.accessId }">
<taskana-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required" <taskana-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required" [validationValue]="toogleValidationAccessIdMap.get(index)"
[validationValue]="toogleValidationAccessIdMap.get(index)" [displayError]="!isFieldValid('accessItem.value.accessId', index)"></taskana-type-ahead> [displayError]="!isFieldValid('accessItem.value.accessId', index)" (onSelect)="accessItemSelected($event, index)"></taskana-type-ahead>
</td> </td>
<ng-template #accessIdInput> <ng-template #accessIdInput>
<td class="input-group text-align text-width"> <td class="input-group text-align text-width">
<div [ngClass]="{ 'has-warning': (accessItemsClone[index].accessId !==accessItem.value.accessId), 'has-error': <div [ngClass]="{ 'has-warning': (accessItemsClone[index].accessId !==accessItem.value.accessId), 'has-error':
!accessItem.value.accessId && formSubmitAttempt}"> !accessItem.value.accessId && formSubmitAttempt}">
<input type="text" class="form-control" formControlName="accessId" placeholder="{{accessItem.invalid? <input type="text" class="form-control" formControlName="accessId" placeholder="{{accessItem.invalid?
'* Access id is required': ''}}" [@validation]="toogleValidationAccessIdMap.get(index)"> '* Access id is required': ''}}"
[@validation]="toogleValidationAccessIdMap.get(index)">
</div> </div>
</td> </td>
</ng-template> </ng-template>

34
web/src/app/administration/workbasket/details/access-items/access-items.component.spec.ts
View File

@ -49,19 +49,19 @@ describe('AccessItemsComponent', () => {
spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(of(new WorkbasketAccessItemsResource( spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(of(new WorkbasketAccessItemsResource(
{ {
'accessItems': new Array<WorkbasketAccessItems>( 'accessItems': new Array<WorkbasketAccessItems>(
new WorkbasketAccessItems('id1', '1', 'accessID1', false, false, false, false, false, false, false, false, new WorkbasketAccessItems('id1', '1', 'accessID1', '', false, false, false, false, false, false, false, false,
false, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false),
new WorkbasketAccessItems('id2', '1', 'accessID2')) new WorkbasketAccessItems('id2', '1', 'accessID2'))
}, new Links({ 'href': 'someurl' }) }, new Links({ 'href': 'someurl' })
))); )));
spyOn(workbasketService, 'updateWorkBasketAccessItem').and.returnValue(of(true)), spyOn(workbasketService, 'updateWorkBasketAccessItem').and.returnValue(of(true)),
spyOn(alertService, 'triggerAlert').and.returnValue(of(true)), spyOn(alertService, 'triggerAlert').and.returnValue(of(true)),
debugElement = fixture.debugElement.nativeElement; debugElement = fixture.debugElement.nativeElement;
accessIdsService = TestBed.get(AccessIdsService); accessIdsService = TestBed.get(AccessIdsService);
spyOn(accessIdsService, 'getAccessItemsInformation').and.returnValue(of(new Array<string>( spyOn(accessIdsService, 'getAccessItemsInformation').and.returnValue(of(new Array<string>(
'accessID1', 'accessID2' 'accessID1', 'accessID2'
))); )));
formsValidatorService = TestBed.get(FormsValidatorService); formsValidatorService = TestBed.get(FormsValidatorService);
component.ngOnChanges({ component.ngOnChanges({
active: new SimpleChange(undefined, 'accessItems', true) active: new SimpleChange(undefined, 'accessItems', true)
}); });
@ -96,17 +96,17 @@ describe('AccessItemsComponent', () => {
}); });
it('should show alert successfull after saving', async(() => { it('should show alert successfull after saving', async(() => {
fixture.detectChanges(); fixture.detectChanges();
spyOn(formsValidatorService, 'validateFormAccess').and.returnValue(Promise.resolve(true)); spyOn(formsValidatorService, 'validateFormAccess').and.returnValue(Promise.resolve(true));
component.onSubmit(); component.onSubmit();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(alertService.triggerAlert).toHaveBeenCalledWith( expect(alertService.triggerAlert).toHaveBeenCalledWith(
new AlertModel(AlertType.SUCCESS, `Workbasket ${component.workbasket.key} Access items were saved successfully`)); new AlertModel(AlertType.SUCCESS, `Workbasket ${component.workbasket.key} Access items were saved successfully`));
}) })
fixture.detectChanges(); fixture.detectChanges();
})); }));
it('should keep accessItemsClone length to previous value after clearing the form.', () => { it('should keep accessItemsClone length to previous value after clearing the form.', () => {
expect(component.accessItemsClone.length).toBe(2); expect(component.accessItemsClone.length).toBe(2);

27
web/src/app/administration/workbasket/details/access-items/access-items.component.ts
View File

@ -17,8 +17,8 @@ import { RequestInProgressService } from 'app/services/requestInProgress/request
import { CustomFieldsService } from 'app/services/custom-fields/custom-fields.service'; import { CustomFieldsService } from 'app/services/custom-fields/custom-fields.service';
import { highlight } from 'app/shared/animations/validation.animation'; import { highlight } from 'app/shared/animations/validation.animation';
import { FormsValidatorService } from 'app/shared/services/forms/forms-validator.service'; import { FormsValidatorService } from 'app/shared/services/forms/forms-validator.service';
import { AccessIdDefinition } from 'app/models/access-id';
declare const $: any;
@Component({ @Component({
selector: 'taskana-workbasket-access-items', selector: 'taskana-workbasket-access-items',
templateUrl: './access-items.component.html', templateUrl: './access-items.component.html',
@ -67,7 +67,7 @@ export class AccessItemsComponent implements OnChanges, OnDestroy {
setAccessItemsGroups(accessItems: Array<WorkbasketAccessItems>) { setAccessItemsGroups(accessItems: Array<WorkbasketAccessItems>) {
const AccessItemsFormGroups = accessItems.map(accessItem => this.formBuilder.group(accessItem)); const AccessItemsFormGroups = accessItems.map(accessItem => this.formBuilder.group(accessItem));
AccessItemsFormGroups.map(accessItemGroup => { AccessItemsFormGroups.map(accessItemGroup => {
accessItemGroup.controls['accessId'].setValidators(Validators.required); accessItemGroup.controls['accessId'].setValidators(Validators.required);
}); });
const AccessItemsFormArray = this.formBuilder.array(AccessItemsFormGroups); const AccessItemsFormArray = this.formBuilder.array(AccessItemsFormGroups);
this.AccessItemsForm.setControl('accessItemsGroups', AccessItemsFormArray); this.AccessItemsForm.setControl('accessItemsGroups', AccessItemsFormArray);
@ -85,7 +85,7 @@ export class AccessItemsComponent implements OnChanges, OnDestroy {
private requestInProgressService: RequestInProgressService, private requestInProgressService: RequestInProgressService,
private customFieldsService: CustomFieldsService, private customFieldsService: CustomFieldsService,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private formsValidatorService: FormsValidatorService) { private formsValidatorService: FormsValidatorService) {
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
@ -124,10 +124,10 @@ export class AccessItemsComponent implements OnChanges, OnDestroy {
addAccessItem() { addAccessItem() {
const newForm = this.formBuilder.group( const newForm = this.formBuilder.group(
new WorkbasketAccessItems(undefined, this.workbasket.workbasketId, '', true)); new WorkbasketAccessItems(undefined, this.workbasket.workbasketId, '', '', true));
newForm.controls['accessId'].setValidators(Validators.required); newForm.controls['accessId'].setValidators(Validators.required);
this.accessItemsGroups.push(newForm); this.accessItemsGroups.push(newForm);
this.accessItemsClone.push(new WorkbasketAccessItems(undefined, this.workbasket.workbasketId, '', true)); this.accessItemsClone.push(new WorkbasketAccessItems(undefined, this.workbasket.workbasketId, '', '', true));
} }
clear() { clear() {
@ -148,12 +148,12 @@ export class AccessItemsComponent implements OnChanges, OnDestroy {
} }
onSubmit() { onSubmit() {
this.formsValidatorService.formSubmitAttempt = true; this.formsValidatorService.formSubmitAttempt = true;
this.formsValidatorService.validateFormAccess(this.accessItemsGroups, this.toogleValidationAccessIdMap).then(value => { this.formsValidatorService.validateFormAccess(this.accessItemsGroups, this.toogleValidationAccessIdMap).then(value => {
if (value) { if (value) {
this.onSave(); this.onSave();
} }
}); });
} }
checkAll(row: number, value: any) { checkAll(row: number, value: any) {
@ -166,6 +166,11 @@ export class AccessItemsComponent implements OnChanges, OnDestroy {
} }
} }
accessItemSelected(accessItem: AccessIdDefinition, row: number) {
this.accessItemsGroups.controls[row].get('accessId').setValue(accessItem.accessId);
this.accessItemsGroups.controls[row].get('accessName').setValue(accessItem.name);
}
private onSave() { private onSave() {
this.requestInProgressService.setRequestInProgress(true); this.requestInProgressService.setRequestInProgress(true);
this.workbasketService.updateWorkBasketAccessItem(this.accessItemsResource._links.self.href, this.AccessItemsForm.value.accessItemsGroups) this.workbasketService.updateWorkBasketAccessItem(this.accessItemsResource._links.self.href, this.AccessItemsForm.value.accessItemsGroups)

64
web/src/app/administration/workbasket/details/information/workbasket-information.component.html
View File

@ -8,7 +8,8 @@
<button type="button" (click)="onClear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes"> <button type="button" (click)="onClear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
<span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span> <span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span>
</button> </button>
<button type="button" (click)="removeDistributionTargets()" data-toggle="tooltip" title="Remove workbasket as distribuition target" class="btn btn-default remove"> <button type="button" (click)="removeDistributionTargets()" data-toggle="tooltip" title="Remove workbasket as distribuition target"
class="btn btn-default remove">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button> </button>
<button type="button" (click)="copyWorkbasket()" data-toggle="tooltip" title="Copy" class="btn btn-default"> <button type="button" (click)="copyWorkbasket()" data-toggle="tooltip" title="Copy" class="btn btn-default">
@ -27,42 +28,43 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group required"> <div class="form-group required">
<label for="wb-key" class="control-label">Key</label> <label for="wb-key" class="control-label">Key</label>
<input type="text" required #key="ngModel" class="form-control" id="wb-key" placeholder="Key" [(ngModel)]="workbasket.key" <input type="text" required #key="ngModel" class="form-control" id="wb-key" placeholder="Key"
name="workbasket.key"> [(ngModel)]="workbasket.key" name="workbasket.key">
<taskana-field-error-display [displayError]="!isFieldValid('workbasket.key')" [validationTrigger]="this.toogleValidationMap.get('workbasket.key')" <taskana-field-error-display [displayError]="!isFieldValid('workbasket.key')" [validationTrigger]="this.toogleValidationMap.get('workbasket.key')"
errorMessage="* Key is required" > errorMessage="* Key is required">
</taskana-field-error-display> </taskana-field-error-display>
</div> </div>
<div class="form-group required"> <div class="form-group required">
<label for="wb-name" class="control-label">Name</label> <label for="wb-name" class="control-label">Name</label>
<input type="text" required #name="ngModel" class="form-control" id="wb-name" placeholder="Name" [(ngModel)]="workbasket.name" <input type="text" required #name="ngModel" class="form-control" id="wb-name" placeholder="Name"
name="workbasket.name"> [(ngModel)]="workbasket.name" name="workbasket.name">
<taskana-field-error-display [displayError]="!isFieldValid('workbasket.name')" [validationTrigger]="this.toogleValidationMap.get('workbasket.name')" <taskana-field-error-display [displayError]="!isFieldValid('workbasket.name')" [validationTrigger]="this.toogleValidationMap.get('workbasket.name')"
errorMessage="* Name is required"> errorMessage="* Name is required">
</taskana-field-error-display> </taskana-field-error-display>
</div> </div>
<div class="input-group form-group required"> <div class="input-group form-group col-xs-12 required">
<label for="wb-owner" class="control-label ">Owner</label> <label for="wb-owner" class="control-label ">Owner</label>
<taskana-type-ahead *ngIf="ownerField.lookupField else ownerInput" required #owner="ngModel" name="workbasket.owner" [(ngModel)]="workbasket.owner" <taskana-type-ahead *ngIf="ownerField.lookupField else ownerInput" required #owner="ngModel" name="workbasket.owner"
placeHolderMessage="* Owner is required" [validationValue]="this.toogleValidationMap.get('workbasket.owner')" [(ngModel)]="workbasket.owner" placeHolderMessage="* Owner is required" [validationValue]="this.toogleValidationMap.get('workbasket.owner')"
[displayError]="!isFieldValid('workbasket.owner')" width="100%"></taskana-type-ahead> [displayError]="!isFieldValid('workbasket.owner')" width="100%"></taskana-type-ahead>
<ng-template #ownerInput> <ng-template #ownerInput>
<input type="text" required #owner="ngModel" class="form-control" id="wb-owner" placeholder="Owner" [(ngModel)]="workbasket.owner" <input type="text" required #owner="ngModel" class="form-control" id="wb-owner" placeholder="Owner"
name="workbasket.owner"> [(ngModel)]="workbasket.owner" name="workbasket.owner">
<taskana-field-error-display [displayError]="!isFieldValid('workbasket.owner')" [validationTrigger]="this.toogleValidationMap.get('workbasket.owner')" <taskana-field-error-display [displayError]="!isFieldValid('workbasket.owner')"
errorMessage="* Owner is required"> [validationTrigger]="this.toogleValidationMap.get('workbasket.owner')" errorMessage="* Owner is required">
</taskana-field-error-display> </taskana-field-error-display>
</ng-template> </ng-template>
</div> </div>
<div class="form-group "> <div class="form-group ">
<label for="wb-domain" class="control-label">Domain</label> <label for="wb-domain" class="control-label">Domain</label>
<input type="text" #domain="ngModel" class="form-control" disabled id="wb-domain" placeholder="Domain" [(ngModel)]="workbasket.domain" <input type="text" #domain="ngModel" class="form-control" disabled id="wb-domain" placeholder="Domain"
name="workbasket.domain"> [(ngModel)]="workbasket.domain" name="workbasket.domain">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="wb-type" class="control-label">Type</label> <label for="wb-type" class="control-label">Type</label>
<div class="dropdown clearfix btn-group"> <div class="dropdown clearfix btn-group">
<button class="btn btn-default" type="button" id="dropdownMenu24" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <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> <taskana-icon-type class="vertical-align" [type]='workbasket.type'></taskana-icon-type>
{{allTypes.get(workbasket.type)}} {{allTypes.get(workbasket.type)}}
<span class="caret"></span> <span class="caret"></span>
@ -85,41 +87,45 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="wb-org-level-1" class="control-label">OrgLevel 1</label> <label for="wb-org-level-1" class="control-label">OrgLevel 1</label>
<input type="text" class="form-control" id="wb-org-level-1" placeholder="OrgLevel 1" [(ngModel)]="workbasket.orgLevel1" name="workbasket.orgLevel1"> <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-org-level-2" class="control-label">OrgLevel 2</label> <label for="wb-org-level-2" class="control-label">OrgLevel 2</label>
<input type="text" class="form-control" id="wb-org-level-2" placeholder="OrgLevel 2" [(ngModel)]="workbasket.orgLevel2" name="workbasket.orgLevel2"> <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-org-level-3" class="control-label">OrgLevel 3</label> <label for="wb-org-level-3" class="control-label">OrgLevel 3</label>
<input type="text" class="form-control" id="wb-org-level-3" placeholder="OrgLevel 3" [(ngModel)]="workbasket.orgLevel3" name="workbasket.orgLevel3"> <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-org-level-4" class="control-label">OrgLevel 4</label> <label for="wb-org-level-4" class="control-label">OrgLevel 4</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-4" placeholder="OrgLevel 4" [(ngModel)]="workbasket.orgLevel4"
name="workbasket.orgLevel4">
</div> </div>
<div *ngIf="custom1Field.visible" class="form-group"> <div *ngIf="custom1Field.visible" class="form-group">
<label for="wb-custom-1" class="control-label">{{custom1Field.field}}</label> <label for="wb-custom-1" class="control-label">{{custom1Field.field}}</label>
<input type="text" class="form-control" id="wb-custom-1" [placeholder]="custom1Field.field" [(ngModel)]="workbasket.custom1" <input type="text" class="form-control" id="wb-custom-1" [placeholder]="custom1Field.field"
name="workbasket.custom1"> [(ngModel)]="workbasket.custom1" name="workbasket.custom1">
</div> </div>
<div *ngIf="custom2Field.visible" class="form-group"> <div *ngIf="custom2Field.visible" class="form-group">
<label for="wb-custom-2" class="control-label">{{custom2Field.field}}</label> <label for="wb-custom-2" class="control-label">{{custom2Field.field}}</label>
<input type="text" class="form-control" id="wb-custom-2" [placeholder]="custom2Field.field" [(ngModel)]="workbasket.custom2" <input type="text" class="form-control" id="wb-custom-2" [placeholder]="custom2Field.field"
name="workbasket.custom2"> [(ngModel)]="workbasket.custom2" name="workbasket.custom2">
</div> </div>
<div *ngIf="custom3Field.visible" class="form-group"> <div *ngIf="custom3Field.visible" class="form-group">
<label for="wb-custom-3" class="control-label">{{custom3Field.field}}</label> <label for="wb-custom-3" class="control-label">{{custom3Field.field}}</label>
<input type="text" class="form-control" id="wb-custom-3" [placeholder]="custom3Field.field" [(ngModel)]="workbasket.custom3" <input type="text" class="form-control" id="wb-custom-3" [placeholder]="custom3Field.field"
name="workbasket.custom3"> [(ngModel)]="workbasket.custom3" name="workbasket.custom3">
</div> </div>
<div *ngIf="custom4Field.visible" class="form-group"> <div *ngIf="custom4Field.visible" class="form-group">
<label for="wb-custom-4" class="control-label">{{custom4Field.field}}</label> <label for="wb-custom-4" class="control-label">{{custom4Field.field}}</label>
<input type="text" class="form-control" id="wb-custom-4" [placeholder]="custom4Field.field" [(ngModel)]="workbasket.custom4" <input type="text" class="form-control" id="wb-custom-4" [placeholder]="custom4Field.field"
name="workbasket.custom4"> [(ngModel)]="workbasket.custom4" name="workbasket.custom4">
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>

11
web/src/app/administration/workbasket/details/information/workbasket-information.component.ts
View File

@ -273,15 +273,18 @@ export class WorkbasketInformationComponent
private onRemoveConfirmed() { private onRemoveConfirmed() {
this.requestInProgressService.setRequestInProgress(true); this.requestInProgressService.setRequestInProgress(true);
this.workbasketService this.workbasketService
.markWorkbasketForDeletion( .markWorkbasketForDeletion(this.workbasket._links.self.href)
this.workbasket._links.self.href
)
.subscribe( .subscribe(
response => { response => {
this.requestInProgressService.setRequestInProgress(false); this.requestInProgressService.setRequestInProgress(false);
this.workbasketService.triggerWorkBasketSaved(); this.workbasketService.triggerWorkBasketSaved();
this.alertService.triggerAlert( this.alertService.triggerAlert(
new AlertModel(AlertType.SUCCESS, 'The Workbasket ' + this.workbasket.workbasketId + ' has been marked for deletion') new AlertModel(
AlertType.SUCCESS,
'The Workbasket ' +
this.workbasket.workbasketId +
' has been marked for deletion'
)
); );
this.router.navigate(['administration/workbaskets']); this.router.navigate(['administration/workbaskets']);
}, },

1
web/src/app/models/workbasket-access-items.ts
View File

@ -5,6 +5,7 @@ export class WorkbasketAccessItems {
public accessItemId: string = '', public accessItemId: string = '',
public workbasketId: string = '', public workbasketId: string = '',
public accessId: string = '', public accessId: string = '',
public accessName: string = '',
public permRead: boolean = false, public permRead: boolean = false,
public permOpen: boolean = false, public permOpen: boolean = false,
public permAppend: boolean = false, public permAppend: boolean = false,

13
web/src/app/shared/spinner/spinner.component.scss
View File

@ -18,7 +18,7 @@
margin: 0 auto; margin: 0 auto;
width: 15%; width: 15%;
height: 15%; height: 15%;
background-color: #33b784; background-color: #36bcee;
border-radius: 100%; border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
@ -68,36 +68,47 @@
-ms-transform: rotate(330deg); -ms-transform: rotate(330deg);
transform: rotate(330deg); } transform: rotate(330deg); }
.sk-circle .sk-circle2:before { .sk-circle .sk-circle2:before {
background-color: #35b9ea;
-webkit-animation-delay: -1.1s; -webkit-animation-delay: -1.1s;
animation-delay: -1.1s; } animation-delay: -1.1s; }
.sk-circle .sk-circle3:before { .sk-circle .sk-circle3:before {
background-color: #33b0df;
-webkit-animation-delay: -1s; -webkit-animation-delay: -1s;
animation-delay: -1s; } animation-delay: -1s; }
.sk-circle .sk-circle4:before { .sk-circle .sk-circle4:before {
background-color: #36bbed;
-webkit-animation-delay: -0.9s; -webkit-animation-delay: -0.9s;
animation-delay: -0.9s; } animation-delay: -0.9s; }
.sk-circle .sk-circle5:before { .sk-circle .sk-circle5:before {
background-color: #46b9cc;
-webkit-animation-delay: -0.8s; -webkit-animation-delay: -0.8s;
animation-delay: -0.8s; } animation-delay: -0.8s; }
.sk-circle .sk-circle6:before { .sk-circle .sk-circle6:before {
background-color: #4fbbbd;
-webkit-animation-delay: -0.7s; -webkit-animation-delay: -0.7s;
animation-delay: -0.7s; } animation-delay: -0.7s; }
.sk-circle .sk-circle7:before { .sk-circle .sk-circle7:before {
background-color: #51b9b5;
-webkit-animation-delay: -0.6s; -webkit-animation-delay: -0.6s;
animation-delay: -0.6s; } animation-delay: -0.6s; }
.sk-circle .sk-circle8:before { .sk-circle .sk-circle8:before {
background-color: #5fbca1;
-webkit-animation-delay: -0.5s; -webkit-animation-delay: -0.5s;
animation-delay: -0.5s; } animation-delay: -0.5s; }
.sk-circle .sk-circle9:before { .sk-circle .sk-circle9:before {
background-color: #5db99e;
-webkit-animation-delay: -0.4s; -webkit-animation-delay: -0.4s;
animation-delay: -0.4s; } animation-delay: -0.4s; }
.sk-circle .sk-circle10:before { .sk-circle .sk-circle10:before {
background-color: #5ebba0;
-webkit-animation-delay: -0.3s; -webkit-animation-delay: -0.3s;
animation-delay: -0.3s; } animation-delay: -0.3s; }
.sk-circle .sk-circle11:before { .sk-circle .sk-circle11:before {
background-color: #5db99e;
-webkit-animation-delay: -0.2s; -webkit-animation-delay: -0.2s;
animation-delay: -0.2s; } animation-delay: -0.2s; }
.sk-circle .sk-circle12:before { .sk-circle .sk-circle12:before {
background-color: #5fbba0;
-webkit-animation-delay: -0.1s; -webkit-animation-delay: -0.1s;
animation-delay: -0.1s; } animation-delay: -0.1s; }

10
web/src/app/shared/type-ahead/type-ahead.component.html
View File

@ -15,14 +15,11 @@
'disable': disable}" class="wrapper-text" (click)="setTyping(true)"> 'disable': disable}" class="wrapper-text" (click)="setTyping(true)">
<span> <span>
<label> <label>
{{dataSource.selected?.accessId}} {{dataSource.selected?.name}}
</label> </label>
</span> </span>
<div class="input-group"> <div class="input-group">
<div>{{dataSource.selected?.name}}</div> <div>{{dataSource.selected?.accessId}}</div>
<button *ngIf="!disable" type="button" (click)="clear()" title="clear search" class="btn rounded remove">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
</button>
</div> </div>
</div> </div>
<div [ngClass]="{'hidden': dataSource.selected && !typing}"> <div [ngClass]="{'hidden': dataSource.selected && !typing}">
@ -31,13 +28,12 @@
{{dataSource.selected?.name}} {{dataSource.selected?.name}}
</label> </label>
</span> </span>
<div class="input-group"> <div class="input-group">
<input #inputTypeAhead class=" form-control input-text" [ngClass]="{'invalid': dataSource.length == null}" (blur)="typeaheadOnSelect({'item':dataSource.selected})" name="accessItem-{{index}}" <input #inputTypeAhead class=" form-control input-text" [ngClass]="{'invalid': dataSource.length == null}" (blur)="typeaheadOnSelect({'item':dataSource.selected})" name="accessItem-{{index}}"
required #accessItemName="ngModel" [(ngModel)]="value" [typeahead]="dataSource" typeaheadOptionField="name" [typeaheadItemTemplate]="customItemTemplate" required #accessItemName="ngModel" [(ngModel)]="value" [typeahead]="dataSource" typeaheadOptionField="name" [typeaheadItemTemplate]="customItemTemplate"
(typeaheadOnSelect)="typeaheadOnSelect($event, index)" [typeaheadScrollable]="true" [typeaheadOptionsInScrollableView]="typeaheadOptionsInScrollableView" (typeaheadOnSelect)="typeaheadOnSelect($event, index)" [typeaheadScrollable]="true" [typeaheadOptionsInScrollableView]="typeaheadOptionsInScrollableView"
[typeaheadMinLength]="typeaheadMinLength" [typeaheadWaitMs]="typeaheadWaitMs" (typeaheadLoading)="changeTypeaheadLoading($event)" [typeaheadMinLength]="typeaheadMinLength" [typeaheadWaitMs]="typeaheadWaitMs" (typeaheadLoading)="changeTypeaheadLoading($event)"
placeholder="{{displayError? placeHolderMessage: ''}}" [@validation]="validationValue"> placeholder="{{displayError? placeHolderMessage: ''}}" [@validation]="validationValue" >
<button *ngIf="!typeaheadLoading" type="button" title="search" class="btn rounded blue"> <button *ngIf="!typeaheadLoading" type="button" title="search" class="btn rounded blue">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button> </button>

6
web/src/app/shared/type-ahead/type-ahead.component.scss
View File

@ -5,14 +5,14 @@
height: 47px; height: 47px;
& label { & label {
margin-bottom: 0px; margin-bottom: 0px;
padding-left: 12px; padding: 0px 12px;
font-style: italic; font-style: italic;
overflow: hidden; overflow: hidden;
} }
&> div{ &> div{
&> div { &> div {
border-bottom: 1px solid $light-grey; border-bottom: 1px solid $light-grey;
margin-top:6px; margin-top:3px;
padding-left: 12px; padding-left: 12px;
min-width: 175px; min-width: 175px;
} }
@ -21,7 +21,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
padding-right: 35px; margin-right: 35px;
} }
} }

10
web/src/app/shared/type-ahead/type-ahead.component.ts
View File

@ -103,7 +103,7 @@ export class TypeAheadComponent implements OnInit, ControlValueAccessor {
}).pipe(mergeMap((token: string) => this.getUsersAsObservable(token))); }).pipe(mergeMap((token: string) => this.getUsersAsObservable(token)));
this.accessIdsService.getAccessItemsInformation(this.value).subscribe(items => { this.accessIdsService.getAccessItemsInformation(this.value).subscribe(items => {
if (items.length > 0) { if (items.length > 0) {
this.dataSource.selected = items.find(item => item.accessId === this.value); this.dataSource.selected = items.find(item => item.accessId.toLowerCase() === this.value.toLowerCase());
} }
}); });
} }
@ -139,12 +139,4 @@ export class TypeAheadComponent implements OnInit, ControlValueAccessor {
join(text: string, str: string) { join(text: string, str: string) {
return text.toLocaleLowerCase().split(str).join(`<strong>${str}</strong>`); return text.toLocaleLowerCase().split(str).join(`<strong>${str}</strong>`);
} }
clear() {
this.value = null;
this.innerValue = null;
this.dataSource.selected = null
this.onSelect.emit(this.dataSource.selected)
}
} }