diff --git a/admin/.angular-cli.json b/admin/.angular-cli.json index 8142d9edb..b1b0e4625 100644 --- a/admin/.angular-cli.json +++ b/admin/.angular-cli.json @@ -20,7 +20,8 @@ "prefix": "app", "styles": [ "../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"], "environmentSource": "environments/environment.ts", diff --git a/admin/src/app/app.module.ts b/admin/src/app/app.module.ts index f11334366..8578aad20 100644 --- a/admin/src/app/app.module.ts +++ b/admin/src/app/app.module.ts @@ -3,7 +3,7 @@ */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule, } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AlertModule } from 'ngx-bootstrap'; @@ -61,7 +61,8 @@ const MODULES = [ AlertModule.forRoot(), AngularSvgIconModule, HttpClientModule, - BrowserAnimationsModule + BrowserAnimationsModule, + ReactiveFormsModule ]; const DECLARATIONS = [ diff --git a/admin/src/app/workbasket/details/access-items/access-items.component.html b/admin/src/app/workbasket/details/access-items/access-items.component.html index 9b2294cc0..85758f04f 100644 --- a/admin/src/app/workbasket/details/access-items/access-items.component.html +++ b/admin/src/app/workbasket/details/access-items/access-items.component.html @@ -3,108 +3,112 @@
- +

{{workbasket.name}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AccessIDReadOpenAppendTransferDistributeCustom1Custom2Custom3Custom4Custom5Custom6Custom7Custom8Custom9Custom10Custom11Custom12
- - -
- -
- 		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AccessIDReadOpenAppendTransferDistributeCustom1Custom2Custom3Custom4Custom5Custom6Custom7Custom8Custom9Custom10Custom11Custom12
+ + +
+ +
+ 		+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
\ No newline at end of file diff --git a/admin/src/app/workbasket/details/access-items/access-items.component.scss b/admin/src/app/workbasket/details/access-items/access-items.component.scss index 9e1f1888b..333bcdc1f 100644 --- a/admin/src/app/workbasket/details/access-items/access-items.component.scss +++ b/admin/src/app/workbasket/details/access-items/access-items.component.scss @@ -5,7 +5,7 @@ td > input[type="checkbox"] { overflow-x: auto; } .text-width{ - min-width: 150px; + min-width: 180px; } .required-header:after { content:" *"; diff --git a/admin/src/app/workbasket/details/access-items/access-items.component.spec.ts b/admin/src/app/workbasket/details/access-items/access-items.component.spec.ts index dc0ddd0ab..ee36fed1d 100644 --- a/admin/src/app/workbasket/details/access-items/access-items.component.spec.ts +++ b/admin/src/app/workbasket/details/access-items/access-items.component.spec.ts @@ -1,12 +1,12 @@ import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { WorkbasketService } from '../../../services/workbasket.service'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AngularSvgIconModule } from 'angular-svg-icon'; import { HttpClientModule } from '@angular/common/http'; import { HttpModule, JsonpModule } from '@angular/http'; import { Workbasket } from 'app/model/workbasket'; 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 { Links } from '../../../model/links'; import { Observable } from 'rxjs/Observable'; @@ -21,7 +21,7 @@ describe('AccessItemsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [SpinnerComponent, AccessItemsComponent, GeneralMessageModalComponent], - imports: [FormsModule, AngularSvgIconModule, HttpClientModule, HttpModule], + imports: [FormsModule, AngularSvgIconModule, HttpClientModule, HttpModule, ReactiveFormsModule], providers: [WorkbasketService, AlertService] }) @@ -34,11 +34,11 @@ describe('AccessItemsComponent', () => { component.workbasket = new Workbasket('1') workbasketService = TestBed.get(WorkbasketService); alertService = TestBed.get(AlertService); - spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(Observable.of(new Array(new WorkbasketAccessItems('id1', '1', 'accessID1', false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, new Array(new Links('setWorkbasketAccessItems',''))), - new WorkbasketAccessItems('id2', '1', 'accessID2')))); + spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(Observable.of(new Array(new WorkbasketAccessItems('id1', '1', 'accessID1', false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, new Array(new Links('setWorkbasketAccessItems', ''))), + new WorkbasketAccessItems('id2', '1', 'accessID2')))); spyOn(workbasketService, 'updateWorkBasketAccessItem').and.returnValue(Observable.of(true)), - spyOn(alertService, 'triggerAlert').and.returnValue(Observable.of(true)), - debugElement = fixture.debugElement.nativeElement; + spyOn(alertService, 'triggerAlert').and.returnValue(Observable.of(true)), + debugElement = fixture.debugElement.nativeElement; fixture.detectChanges(); }); @@ -65,18 +65,21 @@ describe('AccessItemsComponent', () => { 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(); fixture.detectChanges(); - component - expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBe('has-changes'); + fixture.whenStable().then(() => { + 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', () => { debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].querySelector('input').click(); - fixture.detectChanges(); - 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); - debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button')[1].click(); - fixture.detectChanges(); - expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBeNull(); + fixture.whenStable().then(() => { + 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); + debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button')[1].click(); + fixture.detectChanges(); + 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', () => { @@ -86,16 +89,6 @@ describe('AccessItemsComponent', () => { 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', () => { component.onSave(); expect(alertService.triggerAlert).toHaveBeenCalledWith(new AlertModel(AlertType.SUCCESS, `Workbasket ${component.workbasket.key} Access items were saved successfully`)); diff --git a/admin/src/app/workbasket/details/access-items/access-items.component.ts b/admin/src/app/workbasket/details/access-items/access-items.component.ts index 00e5b0a2f..a28a233b3 100644 --- a/admin/src/app/workbasket/details/access-items/access-items.component.ts +++ b/admin/src/app/workbasket/details/access-items/access-items.component.ts @@ -35,8 +35,8 @@ export class AccessItemsComponent implements OnInit { ngOnInit() { this.accessItemsubscription = this.workbasketService.getWorkBasketAccessItems(this.workbasket.workbasketId).subscribe( (accessItems: Array) =>{ this.accessItems = accessItems; - this.accessItemsClone = this.cloneaccessItems(this.accessItems); - this.accessItemsResetClone = this.cloneaccessItems(this.accessItems); + this.accessItemsClone = this.cloneAccessItems(this.accessItems); + this.accessItemsResetClone = this.cloneAccessItems(this.accessItems); }) } @@ -47,8 +47,9 @@ export class AccessItemsComponent implements OnInit { } clear() { - this.accessItems = this.cloneaccessItems(this.accessItemsResetClone); - this.accessItemsClone = this.cloneaccessItems(this.accessItemsResetClone); + this.alertService.triggerAlert(new AlertModel(AlertType.INFO, 'Reset edited fields')) + this.accessItems = this.cloneAccessItems(this.accessItemsResetClone); + this.accessItemsClone = this.cloneAccessItems(this.accessItemsResetClone); } remove(index: number) { @@ -57,17 +58,14 @@ export class AccessItemsComponent implements OnInit { } onSave(): boolean { - if(this.validateAccessItems()){ - return; - } if(!this.accessItems[0].links){ return; } this.workbasketService.updateWorkBasketAccessItem(Utils.getTagLinkRef(this.accessItems[0].links, 'setWorkbasketAccessItems').href, this.accessItems).subscribe(response =>{ - this.accessItemsClone = 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.accessItemsClone = this.cloneAccessItems(this.accessItems); + this.accessItemsResetClone = this.cloneAccessItems(this.accessItems); + this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, `Workbasket ${this.workbasket.name} Access items were saved successfully`)); return true; }, error => { @@ -76,25 +74,14 @@ export class AccessItemsComponent implements OnInit { }) } - private validateAccessItems(): boolean { - return this.accessItems.some(element => { - if(!element.accessId || element.accessId === '') { - this.showValidationError(); - return true; - } - }); - } + setValue() { debugger; } - private showValidationError() { - this.alertService.triggerAlert(new AlertModel(AlertType.DANGER, "AccessId must not be empty", false)); - } - - private cloneaccessItems(inputAuthorization): Array{ - let authorizationClone = new Array(); - inputAuthorization.forEach(authorization => { - authorizationClone.push({... authorization}); + private cloneAccessItems(inputaccessItem): Array{ + let accessItemClone = new Array(); + inputaccessItem.forEach(accessItem => { + accessItemClone.push({... accessItem}); }); - return authorizationClone; + return accessItemClone; } private ngOnDestroy(): void { diff --git a/admin/src/app/workbasket/details/information/workbasket-information.component.html b/admin/src/app/workbasket/details/information/workbasket-information.component.html index ae4d7bea8..e4b334717 100644 --- a/admin/src/app/workbasket/details/information/workbasket-information.component.html +++ b/admin/src/app/workbasket/details/information/workbasket-information.component.html @@ -1,87 +1,103 @@ - - -
+ + +
- +
-

{{workbasket.name}}

+

{{workbasket.name}}

-
-
-
- - -
-
- - -
-
- -
- - +
+ +
+
+ + +
+ * Key is required +
+
+
+ + +
+ * Name is required +
+
+
+ + +
+ * Owner is required +
+
+
+ +
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
-
-
- - -
-
- - -
-
- -
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
diff --git a/admin/src/app/workbasket/details/information/workbasket-information.component.scss b/admin/src/app/workbasket/details/information/workbasket-information.component.scss index 20725ee04..b6f1bc259 100644 --- a/admin/src/app/workbasket/details/information/workbasket-information.component.scss +++ b/admin/src/app/workbasket/details/information/workbasket-information.component.scss @@ -1,3 +1,3 @@ .dropdown-menu { min-width: auto; -} \ No newline at end of file +} diff --git a/admin/src/app/workbasket/details/information/workbasket-information.component.spec.ts b/admin/src/app/workbasket/details/information/workbasket-information.component.spec.ts index 7672e31d7..bc79f7b16 100644 --- a/admin/src/app/workbasket/details/information/workbasket-information.component.spec.ts +++ b/admin/src/app/workbasket/details/information/workbasket-information.component.spec.ts @@ -48,9 +48,9 @@ describe('InformationComponent', () => { fixture.detectChanges(); expect(debugElement.querySelector('#wb-information')).toBeDefined(); 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(() => { - 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'); }); })); diff --git a/admin/src/app/workbasket/details/information/workbasket-information.component.ts b/admin/src/app/workbasket/details/information/workbasket-information.component.ts index fde1a0bf1..f540c41fc 100644 --- a/admin/src/app/workbasket/details/information/workbasket-information.component.ts +++ b/admin/src/app/workbasket/details/information/workbasket-information.component.ts @@ -47,6 +47,10 @@ export class WorkbasketInformationComponent implements OnInit { this.workbasket.type = type; } + onSubmit(){ + debugger; + } + onSave() { this.beforeRequest(); @@ -74,6 +78,7 @@ export class WorkbasketInformationComponent implements OnInit { this.modalSpinner = true; this.modalErrorMessage = undefined; } + private afterRequest(){ this.requestInProgress = false; this.workbasketService.triggerWorkBasketSaved(); diff --git a/admin/src/assets/_forms.scss b/admin/src/assets/_forms.scss new file mode 100644 index 000000000..856ce8a0f --- /dev/null +++ b/admin/src/assets/_forms.scss @@ -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; + } \ No newline at end of file diff --git a/admin/src/assets/_site.scss b/admin/src/assets/_site.scss index 9d07f2f22..3894f62c6 100644 --- a/admin/src/assets/_site.scss +++ b/admin/src/assets/_site.scss @@ -250,3 +250,7 @@ li > div.row > dl { .vertical-align{ vertical-align: middle; } + +.panel-heading{ + min-height: 60px; +} \ No newline at end of file