Use new tag-line-common component in Add-Epic form

app/modules/components/tags/color-selector/color-selector.jade

@@ -4,7 +4,7 @@
         ng-class="{'empty-color': !vm.color}"
         ng-style="{'background': vm.color}"
     )
-    .color-selector-dropdown(ng-show="vm.displaycolorList")
+    .color-selector-dropdown(ng-if="vm.displaycolorList")
         ul.color-selector-dropdown-list.e2e-color-dropdown
             li.color-selector-option(
                 ng-repeat="color in vm.colorList"

app/modules/components/tags/tag-line-common/tag-line-common.directive.coffee

@@ -33,7 +33,7 @@ TagLineCommonDirective = () ->
                 ctrl.colorArray = ctrl._createColorsArray(ctrl.project.tags_colors)
 
         el.on "keydown", ".tag-input", (event) ->
-            if event.keyCode == 27 && ctrl.newTag.name.length
+            if event.keyCode == 27
                 ctrl.addTag = false
 
                 ctrl.newTag.name = ""

app/modules/epics/create-epic/create-epic.controller.coffee

@@ -17,6 +17,9 @@
 # File: create-epic.controller.coffee
 ###
 
+taiga = @.taiga
+trim = taiga.trim
+
 module = angular.module("taigaEpics")
 
 class CreateEpicController
@@ -25,11 +28,29 @@ class CreateEpicController
     ]
 
     constructor: (@rs) ->
+        @.newEpic = {
+            color: null
+            projecti: @.project.id
+            status: @.project.default_epic_status
+            tags: []
+        }
         @.attachments = Immutable.List()
 
     createEpic: () ->
-        @.newEpic.project = @.project.id
         return @rs.epics.post(@.newEpic).then () =>
             @.onReloadEpics()
 
+    selectColor: (color) ->
+        @.newEpic.color = color
+
+    addTag: (name, color) ->
+        name = trim(name.toLowerCase())
+
+        if not _.find(@.newEpic.tags, (it) -> it[0] == name)
+            @.newEpic.tags.push([name, color])
+
+    deleteTag: (tag) ->
+        _.remove @.newEpic.tags, (it) -> it[0] == tag[0]
+
+
 module.controller("CreateEpicCtrl", CreateEpicController)

app/modules/epics/create-epic/create-epic.jade

@@ -6,8 +6,10 @@ tg-lightbox-close
         ng-submit="vm.createEpic()"
     )
         fieldset
-            // TODO ADD COLOR SELECTOR
+            tg-color-selector(
-            tg-color-selector(on-select-dropdown-color="vm.newEpic.color = color")
+                color="vm.newEpic.color",
+                on-select-color="vm.selectColor(color)"
+            )
             input.e2e-create-epic-subject(
                 type="text"
                 name="subject"
@@ -25,13 +27,17 @@ tg-lightbox-close
             )
                 option(
                     ng-repeat="status in vm.project.epic_statuses | orderBy:'order'"
-                    ng-value="status.id"
+                    ng-value="::status.id"
                     ng-selected="vm.project.default_epic_status"
-                ) {{status.name}}
+                ) {{::status.name}}
-        fieldset.tags-block(
+        fieldset.tags-block
-            tg-lb-tag-line
+            tg-tag-line-common(
-            ng-model="vm.newEpic.tags"
+                project="vm.project"
-        )
+                tags="vm.newEpic.tags"
+                permissions="add_epic"
+                on-add-tag="vm.addTag(name, color)"
+                on-delete-tag="vm.deleteTag(tag)"
+            )
         fieldset
             textarea.e2e-create-epic-description(
                 ng-attr-placeholder="{{'COMMON.FIELDS.DESCRIPTION' | translate}}"