tag validation #1592 (#1646)

add translation
fix placeholder #1506

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

@@ -7,13 +7,8 @@
 }
 
 .tag-input {
+    margin-right: 11px;
     float: left;
-    margin-left: 11px!important;
-}
-
-.tag-label {
-    left: 10px!important;
-    top: 12px!important;
 }
 
 .tag-container-input{
@@ -26,3 +21,7 @@
 .tag-button{
     float:left
 }
+
+.mdl-textfield__error {
+    visibility: visible !important;
+}

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

@@ -9,13 +9,14 @@
         </div>
     </li>
     <li>
-        <div class="mdl-textfield mdl-js-textfield tag-container-input">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" [(ngModel)]="newTagName"/>
+            <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" (click)="cleanErrorMsg()" [(ngModel)]="newTagName"/>
-            <label class="mdl-textfield__label tag-label" for="new-tag-text">New Tag...</label>
+            <label class="mdl-textfield__label" for="new-tag-text" > {{'TAG.LABEL.NEWTAG' | translate }}</label>
-        </div>
+            <span class="mdl-textfield__error">{{errorMsg}}</span>
             <button id="add-tag" class="mdl-button mdl-js-button mdl-button--raised button" (click)="addTag()">
-            Add tag
+                {{'TAG.BUTTON.ADD' | translate }}
             </button>
+        </div>
     </li>
 </div>
 
@@ -28,12 +29,13 @@
         </div>
     </li>
     <li>
-        <div class="mdl-textfield mdl-js-textfield tag-container-input">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" [(ngModel)]="newTagName"/>
+            <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" (click)="cleanErrorMsg()" [(ngModel)]="newTagName"/>
-            <label class="mdl-textfield__label tag-label" for="new-tag-text">New Tag...</label>
+            <label class="mdl-textfield__label" for="new-tag-text" > {{'TAG.LABEL.NEWTAG' | translate }}</label>
-        </div>
+            <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()">
-            Add tag
+                {{'TAG.BUTTON.ADD' | translate }}
             </button>
+        </div>
     </li>
 </ul>

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

@@ -153,5 +153,24 @@ describe('Test ng2-alfresco-tag Tag actions list', () => {
                 status: 200
             });
         });
+
+        it('The input box should be cleared after add tag', (done) => {
+            component.nodeId = 'fake-node-id';
+            component.newTagName = 'fake-tag-name';
+
+            fixture.detectChanges();
+
+            component.addEmitter.subscribe(() => {
+                expect(component.newTagName).toBe('');
+                done();
+            });
+
+            let addButton: any = element.querySelector('#add-tag');
+            addButton.click();
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200
+            });
+        });
     });
 });

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

@@ -17,6 +17,7 @@
 
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { TagService } from './../services/tag.service';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 
 /**
  *
@@ -49,14 +50,15 @@ export class TagActionsComponent {
 
     tagsEntries: any;
 
-    /**
+    errorMsg: string;
-     * Constructor
+
-     * @param authService
+    constructor(private tagService: TagService, private translateService: AlfrescoTranslationService) {
-     */
+        if (translateService) {
-    constructor(private tagService: TagService) {
+            translateService.addTranslationFolder('ng2-alfresco-tag', 'node_modules/ng2-alfresco-tag/src');
+        }
     }
 
-    ngOnChanges(changes) {
+    ngOnChanges() {
         return this.refreshTag();
     }
 
@@ -68,12 +70,31 @@ export class TagActionsComponent {
     }
 
     addTag() {
-        this.tagService.addTag(this.nodeId, this.newTagName).subscribe((res) => {
+        if (this.searchTag(this.newTagName)) {
+            this.translateService.get('TAG.MESSAGES.EXIST').subscribe((error) => {
+                this.errorMsg = error;
+            });
+        }
+
+        this.tagService.addTag(this.nodeId, this.newTagName).subscribe(() => {
+            this.newTagName = '';
             this.refreshTag();
             this.addEmitter.emit(this.nodeId);
         });
     }
 
+    searchTag(searchTagName: string) {
+        if (this.tagsEntries) {
+            return this.tagsEntries.find((currentTag) => {
+                return (searchTagName === currentTag.entry.tag);
+            });
+        }
+    }
+
+    cleanErrorMsg() {
+        this.errorMsg = '';
+    }
+
     removeTag(tag: string) {
         this.tagService.removeTag(this.nodeId, tag).subscribe(() => {
             this.refreshTag();

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

@@ -39,7 +39,7 @@ export class TagList {
 
     /**
      * Constructor
-     * @param authService
+     * @param tagService
      */
     constructor(private tagService: TagService) {
     }

ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts

@@ -43,12 +43,12 @@ export class TagNodeList {
 
     /**
      * Constructor
-     * @param authService
+     * @param tagService
      */
     constructor(private tagService: TagService) {
     }
 
-    ngOnChanges(changes) {
+    ngOnChanges() {
         return this.refreshTag();
     }
 

ng2-components/ng2-alfresco-tag/src/i18n/en.json

@@ -0,0 +1,13 @@
+{
+    "TAG": {
+        "LABEL": {
+            "NEWTAG": "New Tag"
+        },
+        "MESSAGES": {
+            "EXIST":"Tag already exist"
+        },
+        "BUTTON": {
+            "ADD": "Add Tag"
+        }
+    }
+}

ng2-components/ng2-alfresco-tag/src/i18n/it.json

@@ -0,0 +1,13 @@
+{
+    "TAG": {
+        "LABEL": {
+            "NEWTAG": "Nuovo Tag"
+        },
+        "MESSAGES": {
+            "EXIST":"Tag già presente"
+        },
+        "BUTTON": {
+            "ADD": "Aggiungi Tag"
+        }
+    }
+}

ng2-components/ng2-alfresco-tag/src/services/tag.service.ts

@@ -20,17 +20,11 @@ import { Observable } from 'rxjs/Rx';
 import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
 
 /**
- * @returns {TagService} .
+ * @returns {TagService}
  */
-declare let __moduleName: string;
-
 @Injectable()
 export class TagService {
 
-    /**
-     * Constructor
-     * @param apiService
-     */
     constructor(private apiService: AlfrescoApiService,
                 private logService: LogService) {
     }