#216 add inline edit to tags

src/app/shared/components/inline-edit/inline-edit.component.html

@@ -1,6 +1,6 @@
 <form (ngSubmit)="onSubmit()" #inlineInputForm="ngForm" novalidate>
   <div
-    style="display: flex; justify-content: space-between"
+    style="display: flex; justify-content: space-between; align-items: center"
     *ngIf="!editing && !showContentPlaceholder"
   >
     <span

src/app/shared/components/inline-edit/inline-edit.component.scss

@@ -1,5 +1,5 @@
 :host mdl-textfield {
-  margin-top: -20px;
+  margin-top: -13px;
   margin-bottom: -10px;
 
   /deep/ div input,

src/app/vm/vm-sidebar/tags/tag-category-creation-dialog/tag-category-creation.component.ts

@@ -1,8 +1,9 @@
-import { MdlDialogReference } from '@angular-mdl/core';
 import { Component, Inject } from '@angular/core';
+import { MdlDialogReference } from '../../../../dialog/dialog-module';
 import { ResourceTypes } from '../../../../shared/models';
 import { TagService } from '../../../../shared/services';
 import { VirtualMachine } from '../../../shared/vm.model';
+import { TagCategory } from '../tag-category/vm-tag-category.component';
 
 
 const categoryTagValue = 'CS_CATEGORY';
@@ -18,11 +19,18 @@ export class TagCategoryCreationComponent {
   public categoryName: string;
 
   constructor(
+    @Inject('categories') private categories: Array<TagCategory>,
     @Inject('virtualMachine') private vm: VirtualMachine,
     private dialog: MdlDialogReference,
     private tagService: TagService
   ) {}
 
+  public get categoryAlreadyExists(): boolean {
+    return !!this.categories.find(category => {
+      return category.name === this.categoryName
+    });
+  }
+
   public onCreate(): void {
     const categoryTagName = this.categoryName + '.';
     this.loading = true;

src/app/vm/vm-sidebar/tags/tag-category/vm-tag-category.component.html

@@ -1,7 +1,3 @@
-<h3>{{ category.name }}</h3>
-
-
-
 <mdl-card mdl-shadow="2">
 
   <mdl-card-title>
@@ -23,7 +19,7 @@ <h2 mdl-card-title-text>{{ category.name }}</h2>
       [mdl-tooltip]="'ADD' | translate"
       (click)="$event.stopPropagation(); addTag()"
     >
-      <mdl-icon>attach_file</mdl-icon>
+      <mdl-icon>add</mdl-icon>
     </button>
   </mdl-card-actions>
 

src/app/vm/vm-sidebar/tags/tag-creation-dialog/vm-tag-creation-dialog.component.ts

@@ -1,15 +1,15 @@
-import { MdlDialogReference } from '@angular-mdl/core';
 import { Component, Inject } from '@angular/core';
+import { ResourceTypes } from '../../../../shared/models';
+import { TagService } from '../../../../shared/services';
 import { VirtualMachine } from '../../../shared/vm.model';
 import { TagCategory } from '../tag-category/vm-tag-category.component';
-import { TagService } from '../../../../shared/services';
-import { ResourceTypes } from '../../../../shared/models';
+import { MdlDialogReference } from '../../../../dialog/dialog-module';
 
 
 @Component({
   selector: 'cs-vm-tag-creation',
-  templateUrl: 'vm-tag-creation.component.html',
-  styleUrls: ['vm-tag-creation.component.scss']
+  templateUrl: 'vm-tag-creation-dialog.component.html',
+  styleUrls: ['vm-tag-creation-dialog.component.scss']
 })
 export class VmTagCreationDialogComponent {
   public loading: boolean;

src/app/vm/vm-sidebar/tags/vm-tags.component.html

@@ -1,7 +1,7 @@
-<div style="display: flex">
-  <cs-vm-tag-category
-    *ngFor="let category of categories"
-    [category]="category"
-    (onNewTag)="addTag($event)"
-  ></cs-vm-tag-category>
-</div>
+<cs-vm-tag-category
+  *ngFor="let category of categories"
+  [category]="category"
+  (onNewTag)="addTag($event)"
+></cs-vm-tag-category>
+
+<cs-fab (click)="addCategory()"></cs-fab>

src/app/vm/vm-sidebar/tags/vm-tags.component.scss

@@ -0,0 +1,3 @@
+/deep/ cs-vm-tag-category:last-of-type mdl-card {
+  margin-bottom: 110px;
+}

src/app/vm/vm-sidebar/tags/vm-tags.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, NgZone, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { DialogService } from '../../../dialog/dialog-module/dialog.service';
 import { VirtualMachine } from '../../shared/vm.model';
+import { TagCategoryCreationComponent } from './tag-category-creation-dialog/tag-category-creation.component';
 import { TagCategory } from './tag-category/vm-tag-category.component';
-import groupBy = require('lodash/groupBy');
-import { DialogService } from '../../../dialog/dialog-module/dialog.service';
 import { VmTagCreationDialogComponent } from './tag-creation-dialog/vm-tag-creation-dialog.component';
+import groupBy = require('lodash/groupBy');
 
 
 @Component({
@@ -35,14 +36,32 @@ export class VmTagsComponent implements OnInit {
       .subscribe();
   }
 
+  public addCategory(): void {
+    this.dialogService.showCustomDialog({
+      component: TagCategoryCreationComponent,
+      classes: 'tag-category-creation-dialog',
+      providers: [
+        { provide: 'categories', useValue: this.categories },
+        { provide: 'virtualMachine', useValue: this.vm }
+      ]
+    })
+      .switchMap(res => res.onHide())
+      .subscribe();
+  }
+
   private getCategories(): Array<TagCategory> {
     const groupedTags = groupBy(this.vm.tags, 'categoryName');
 
     return Object.keys(groupedTags)
       .map(category => {
+        const tags = groupedTags[category].filter(tag => {
+          const tagParts = tag.key.split('.');
+          return !(tagParts.length === 2 && !tagParts[1]);
+        });
+
         return {
           name: category,
-          tags: groupedTags[category]
+          tags
         }
       });
   }

src/i18n/en.json

@@ -575,5 +575,6 @@
   "TAG_KEY": "Key",
   "TAG_VALUE": "Value",
   "CREATE_NEW_TAG_CATEGORY": "Create a new category",
-  "TAG_CATEGORY_NAME": "Category name"
+  "TAG_CATEGORY_NAME": "Category name",
+  "ADD_TAG_CATEGORY": "Add new category"
 }

src/i18n/ru.json

@@ -575,5 +575,6 @@
   "TAG_KEY": "Ключ",
   "TAG_VALUE": "Значение",
   "CREATE_NEW_TAG_CATEGORY": "Создать новую категорию",
-  "TAG_CATEGORY_NAME": "Название категории"
+  "TAG_CATEGORY_NAME": "Название категории",
+  "ADD_TAG_CATEGORY": "Добавить новую категорию"
 }