disable add button when no valid ID is provided #1591 (#1747)

* disable add button when no valid ID is provided #1591

* fix test

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html

@@ -13,7 +13,7 @@
             <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" (keypress)="cleanErrorMsg()" [(ngModel)]="newTagName"/>
             <label class="mdl-textfield__label" for="new-tag-text" > {{'TAG.LABEL.NEWTAG' | translate }}</label>
             <span class="mdl-textfield__error">{{errorMsg}}</span>
-            <button id="add-tag" class="mdl-button mdl-js-button mdl-button--raised button" (click)="addTag()">
+            <button id="add-tag" class="mdl-button mdl-js-button mdl-button--raised button" (click)="addTag()" [disabled]="disableAddTag">
                 {{'TAG.BUTTON.ADD' | translate }}
             </button>
         </div>
@@ -33,7 +33,7 @@
             <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" (keypress)="cleanErrorMsg()" [(ngModel)]="newTagName"/>
             <label class="mdl-textfield__label" for="new-tag-text" > {{'TAG.LABEL.NEWTAG' | translate }}</label>
             <span  *ngIf="errorMsg" class="mdl-textfield__error">{{errorMsg}}</span>
-            <button id="add-tag" class="mdl-button mdl-js-button mdl-button--raised button" (click)="addTag()">
+            <button id="add-tag" class="mdl-button mdl-js-button mdl-button--raised button" (click)="addTag()" [disabled]="disableAddTag">
                 {{'TAG.BUTTON.ADD' | translate }}
             </button>
         </div>

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.spec.ts

@@ -146,12 +146,25 @@ describe('Test ng2-alfresco-tag Tag actions list', () => {
                 done();
             });
 
-            let addButton: any = element.querySelector('#add-tag');
+            component.resultsEmitter.subscribe(() => {
-            addButton.click();
+                fixture.detectChanges();
+
+                let addButton: any = element.querySelector('#add-tag');
+                addButton.click();
+
+                jasmine.Ajax.requests.mostRecent().respondWith({
+                    status: 200
+                });
+            });
+
+            component.ngOnChanges();
 
             jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200
+                status: 200,
+                contentType: 'json',
+                responseText: dataTag
             });
+
         });
 
         it('The input box should be cleared after add tag', (done) => {
@@ -165,11 +178,70 @@ describe('Test ng2-alfresco-tag Tag actions list', () => {
                 done();
             });
 
-            let addButton: any = element.querySelector('#add-tag');
+            component.resultsEmitter.subscribe(() => {
-            addButton.click();
+                fixture.detectChanges();
+
+                let addButton: any = element.querySelector('#add-tag');
+                addButton.click();
+
+                jasmine.Ajax.requests.mostRecent().respondWith({
+                    status: 200
+                });
+            });
+
+            component.ngOnChanges();
 
             jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200
+                status: 200,
+                contentType: 'json',
+                responseText: dataTag
+            });
+        });
+
+        it('Add tag should be disabled by default', (done) => {
+            component.nodeId = 'fake-node-id';
+            component.newTagName = 'fake-tag-name';
+
+            let addButton: any = element.querySelector('#add-tag');
+            expect(addButton.disabled).toEqual(true);
+            done();
+        });
+
+        it('Add tag should be disabled if the node id is not a correct node', (done) => {
+            component.nodeId = 'fake-node-id';
+            component.newTagName = 'fake-tag-name';
+
+            component.resultsEmitter.subscribe(() => {
+                let addButton: any = element.querySelector('#add-tag');
+                expect(addButton.disabled).toEqual(true);
+                done();
+            });
+
+            component.ngOnChanges();
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 404
+            });
+        });
+
+        it('Add tag should be enable if the node id is a correct node', (done) => {
+            component.nodeId = 'fake-node-id';
+            component.newTagName = 'fake-tag-name';
+
+            component.resultsEmitter.subscribe(() => {
+                fixture.detectChanges();
+
+                let addButton: any = element.querySelector('#add-tag');
+                expect(addButton.disabled).toEqual(false);
+                done();
+            });
+
+            component.ngOnChanges();
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: dataTag
             });
         });
     });

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts

@@ -52,6 +52,8 @@ export class TagActionsComponent {
 
     errorMsg: string;
 
+    disableAddTag: boolean = true;
+
     constructor(private tagService: TagService, private translateService: AlfrescoTranslationService) {
         if (translateService) {
             translateService.addTranslationFolder('ng2-alfresco-tag', 'node_modules/ng2-alfresco-tag/src');
@@ -65,6 +67,11 @@ export class TagActionsComponent {
     refreshTag() {
         this.tagService.getTagsByNodeId(this.nodeId).subscribe((data) => {
             this.tagsEntries = data.list.entries;
+            this.disableAddTag = false;
+            this.resultsEmitter.emit(this.tagsEntries);
+        }, () => {
+            this.tagsEntries = null;
+            this.disableAddTag = true;
             this.resultsEmitter.emit(this.tagsEntries);
         });
     }