#216 move tags to separate module

src/app/shared/components/autocomplete/mdl-autocomplete.component.html

@@ -10,6 +10,7 @@
     (focus)="open($event); addFocus()"
     (blur)="close(); removeFocus()"
   ></span>
+
   <input
     #autocompleteInput
     tabindex="-1"
@@ -23,6 +24,7 @@
     (ngModelChange)="filterResults($event)"
     [(ngModel)]="text"
     (blur)="removeFocus()"
+    [maxlength]="maxLength"
   >
   <span
     class="mdl-select__toggle material-icons"

src/app/shared/components/autocomplete/mdl-autocomplete.component.ts

@@ -48,6 +48,7 @@ export class MdlAutocompleteComponent implements ControlValueAccessor, OnInit, A
   @Input() public placeholder = '';
   @Input() public options: Array<string> = [];
   @Input() public text = '';
+  @Input() public maxLength: number;
 
   @Output() public change = new EventEmitter();
   @HostBinding('class.mdl-select') public mdlSelectClass = true;

src/app/shared/components/character-count-textfield/character-count.component.html

@@ -0,0 +1,3 @@
+<span class="character-count" *ngIf="maxLength">
+  {{ value?.length || 0 }}/{{ maxLength }}
+</span>

src/app/shared/components/character-count-textfield/character-count.component.scss

@@ -0,0 +1,11 @@
+:host {
+  position: relative;
+  display: block;
+}
+
+.character-count {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-size: 0.9em;
+}

src/app/shared/components/character-count-textfield/character-count.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'cs-character-count',
+  templateUrl: 'character-count.component.html',
+  styleUrls: ['character-count.component.scss']
+})
+export class CharacterCountComponent {
+  @Input() public maxLength: number;
+  @Input() public value: string;
+}

src/app/shared/directives/forbidden-values-validator.ts

@@ -0,0 +1,19 @@
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+
+
+export function forbiddenValuesValidator(
+  forbiddenValues: Array<string>
+): ValidatorFn {
+  return (c: AbstractControl) => {
+    const isValid = !forbiddenValues.find(_ => _ === c.value);
+
+    if (isValid) {
+      return null;
+    }
+    return {
+      forbiddenValuesValidator: {
+        valid: false
+      }
+    };
+  };
+}

src/app/shared/directives/forbidden-values.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, Input, OnInit } from '@angular/core';
+import { FormControl, NG_VALIDATORS, Validator, Validators } from '@angular/forms';
+import { forbiddenValuesValidator } from './forbidden-values-validator';
+
+
+@Directive({
+  // tslint:disable-next-line
+  selector: '[forbiddenValues]',
+  providers: [
+    { provide: NG_VALIDATORS, useExisting: ForbiddenValuesDirective, multi: true }
+  ]
+})
+export class ForbiddenValuesDirective implements OnInit, Validator {
+  @Input() public forbiddenValues: Array<string>;
+  private validator = Validators.nullValidator;
+
+  public ngOnInit(): void {
+    this.validator = forbiddenValuesValidator(this.forbiddenValues);
+  }
+
+  public validate(c: FormControl): { [key: string]: any; } {
+    return this.validator(c);
+  }
+}

src/app/shared/interfaces/taggable.interface.ts

@@ -0,0 +1,9 @@
+import { Tag } from '../models';
+
+
+export interface Taggable {
+  id: string;
+  resourceType: string;
+  tags: Array<Tag>;
+  [key: string]: any;
+}

src/app/shared/models/tag.model.ts

@@ -12,7 +12,7 @@ export const DeletionMark = {
   VALUE: 'removed'
 };
 
-const defaultCategoryName = 'Common';
+export const defaultCategoryName = 'Common';
 
 @FieldMapper({
   domainid: 'domainId',
@@ -34,4 +34,14 @@ export class Tag extends BaseModel {
 
     return categoryNameIsPresent ? tagParts[0] : defaultCategoryName;
   }
+
+  public get keyWithoutCategory(): string {
+    const tagParts = this.key.split('.');
+
+    if (tagParts.length > 1) {
+      return tagParts.splice(1).join('.');
+    }
+
+    return tagParts.join('.');
+  }
 }

src/app/shared/services/utils.service.ts

@@ -26,4 +26,8 @@ export class UtilsService {
     }
     return value / Math.pow(2, 30);
   }
+
+  public matchLower(string: string, subString: string): boolean {
+    return string.toLowerCase().includes(subString.toLowerCase());
+  }
 }

src/app/shared/shared.module.ts

@@ -86,9 +86,8 @@ import { VolumeService } from './services/volume.service';
 import { MdlTextAreaAutoresizeDirective } from './directives/mdl-textarea-autoresize.directive';
 import { VolumeOfferingService } from './services/volume-offering.service';
 import { ReloadComponent } from './components/reload/reload.component';
-import {
-  CharacterCountTextfieldComponent
-} from './components/character-count-textfield/character-count-textfield.component';
+import { CharacterCountComponent } from './components/character-count-textfield/character-count.component';
+import { ForbiddenValuesDirective } from './directives/forbidden-values.directive';
 
 
 @NgModule({
@@ -103,13 +102,14 @@ import {
     TranslateModule
   ],
   exports: [
-    CharacterCountTextfieldComponent,
+    CharacterCountComponent,
     ColorPickerComponent,
     DatePickerComponent,
     DescriptionComponent,
     DiskOfferingComponent,
     FabComponent,
     FancySelectComponent,
+    ForbiddenValuesDirective,
     InlineEditComponent,
     InlineEditAutocompleteComponent,
     InputGroupComponent,
@@ -140,7 +140,7 @@ import {
     LoaderComponent
   ],
   declarations: [
-    CharacterCountTextfieldComponent,
+    CharacterCountComponent,
     CalendarComponent,
     CalendarMonthComponent,
     CalendarYearComponent,
@@ -152,6 +152,7 @@ import {
     DiskOfferingComponent,
     FabComponent,
     FancySelectComponent,
+    ForbiddenValuesDirective,
     InlineEditComponent,
     InlineEditAutocompleteComponent,
     InputGroupComponent,

src/app/spare-drive/spare-drive-creation/spare-drive-creation.component.html

@@ -3,16 +3,22 @@ <h3 class="mdl-dialog__title">{{ 'VOLUME_CREATION_FORM.NEW_VOLUME' | translate }
 <form (ngSubmit)="onCreate()" #volumeCreationForm="ngForm" novalidate>
   <div class="mdl-dialog__content">
     <div class="flex-column">
-      <cs-character-count-textfield
+      <mdl-textfield
         type="text"
         label="{{ 'NAME' | translate }}"
         name="name"
         floating-label
         autofocus
-        required
         maxlength="255"
+        required
         [(ngModel)]="name"
-      ></cs-character-count-textfield>
+        #nameField="ngModel"
+        [class.is-invalid]="nameField.invalid && !nameField.pristine"
+      ></mdl-textfield>
+      <cs-character-count
+        [maxLength]="255"
+        [value]="name"
+      ></cs-character-count>
       <div>
         <h5>{{ 'ZONE' | translate }}</h5>
         <mdl-select

src/app/tags/tag-category-creation-dialog/tag-category-creation.component.html

@@ -0,0 +1,49 @@
+<h3 class="mdl-dialog__title">{{ 'CREATE_NEW_TAG_CATEGORY' | translate }}</h3>
+<form
+  (ngSubmit)="onCreate()"
+  #categoryForm="ngForm"
+  novalidate
+>
+  <div class="mdl-dialog__content">
+
+    <mdl-textfield
+      type="text"
+      name="domain"
+      autofocus
+      floating-label
+      #categoryField="ngModel"
+      [maxlength]="maxLength"
+      [(ngModel)]="categoryName"
+      [forbiddenValues]="categoryNames"
+      [label]="'TAG_CATEGORY_NAME' | translate"
+      [error-msg]="categoryNameErrorMessage | translate"
+      [class.is-invalid]="categoryField.invalid && !categoryField.pristine"
+    ></mdl-textfield>
+    <cs-character-count
+      [value]="categoryName"
+      [maxLength]="maxLength"
+    ></cs-character-count>
+
+  </div>
+
+  <div class="mdl-dialog__actions">
+    <button
+      mdl-button
+      mdl-colored="primary"
+      mdl-ripple
+      type="submit"
+      [disabled]="!categoryForm.valid"
+    >
+      {{ 'CREATE' | translate }}
+    </button>
+    <button
+      mdl-button
+      mdl-colored="primary"
+      mdl-ripple
+      type="button"
+      (click)="onCancel()"
+    >
+      {{ 'CANCEL' | translate }}
+    </button>
+  </div>
+</form>