Improve add-epic form

app/modules/components/color-selector/color-selector.controller.coffee

@@ -28,14 +28,16 @@ class ColorSelectorController
         if @.initColor
             @.color = @.initColor
 
-        @.displaycolorList = false
-
-    toggleColorList: () ->
-        @.displaycolorList = !@.displaycolorList
+        @.displayColorList = false
 
+     resetColor: () ->
         if @.isRequired and not @.color
             @.color = @.initColor
 
+    toggleColorList: () ->
+        @.displayColorList = !@.displayColorList
+        @.resetColor()
+
     onSelectDropdownColor: (color) ->
         @.color = color
         @.onSelectColor({color: color})

app/modules/components/color-selector/color-selector.directive.coffee

@@ -30,7 +30,8 @@ ColorSelectorDirective = ($timeout) ->
             return if _timeout
 
             _timeout = $timeout (() ->
-                scope.vm.toggleColorList()
+                ctrl.displayColorList = false
+                ctrl.resetColor()
             ), 400
 
         el.find('.color-selector')
@@ -43,15 +44,15 @@ ColorSelectorDirective = ($timeout) ->
 
     return {
         link: link,
-        scope:{
-            isRequired: "="
-            onSelectColor: "&",
-            initColor: "="
-        },
         templateUrl:"components/color-selector/color-selector.html",
         controller: "ColorSelectorCtrl",
         controllerAs: "vm",
-        bindToController: true
+        bindToController: {
+            isRequired: "=",
+            onSelectColor: "&",
+            initColor: "="
+        },
+        scope: {},
     }
 
 

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

@@ -4,7 +4,7 @@
         ng-class="{'empty-color': !vm.color}"
         ng-style="{'background': vm.color}"
     )
-    .color-selector-dropdown(ng-if="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/epics/create-epic/create-epic.controller.coffee

@@ -21,16 +21,16 @@ taiga = @.taiga
 trim = taiga.trim
 getRandomDefaultColor = taiga.getRandomDefaultColor
 
-module = angular.module("taigaEpics")
 
 class CreateEpicController
     @.$inject = [
         "tgResources"
+        "$tgConfirm"
         "tgAttachmentsService"
         "$q"
     ]
 
-    constructor: (@rs, @attachmentsService, @q) ->
+    constructor: (@rs, @confirm, @attachmentsService, @q) ->
         @.newEpic = {
             color: getRandomDefaultColor()
             project: @.project.id
@@ -40,13 +40,22 @@ class CreateEpicController
         @.attachments = Immutable.List()
 
     createEpic: () ->
-        promise =  @rs.epics.post(@.newEpic)
+        return if not @.validateForm()
 
+        @.loading = true
+
+        promise =  @rs.epics.post(@.newEpic)
         promise.then (response) =>
             @._createAttachments(response.data)
-
-        promise.then (data) =>
+        promise.then (response) =>
             @.onCreateEpic()
+        promise.then null, (response) =>
+            @.setFormErrors(response.data)
+
+            if response.data._error_message
+                confirm.notify("error", response.data._error_message)
+        promise.finally () =>
+            @.loading = false
 
     # Color selector
     selectColor: (color) ->
@@ -71,4 +80,4 @@ class CreateEpicController
             return attachmentsService.upload(attachment.file, epic.id, epic.project, 'epic')
         return @q.all(promises)
 
-module.controller("CreateEpicCtrl", CreateEpicController)
+angular.module("taigaEpics").controller("CreateEpicCtrl", CreateEpicController)

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

@@ -20,16 +20,25 @@
 module = angular.module('taigaEpics')
 
 CreateEpicDirective = () ->
+    link = (scope, el, attrs, ctrl) ->
+        form = el.find("form").checksley()
+
+        ctrl.validateForm = =>
+            return form.validate()
+
+        ctrl.setFormErrors = (errors) =>
+            form.setErrors(errors)
 
     return {
+        link: link,
         templateUrl:"epics/create-epic/create-epic.html",
         controller: "CreateEpicCtrl",
         controllerAs: "vm",
-        bindToController: true,
-        scope: {
+        bindToController: {
             project: '=',
             onCreateEpic: '&'
-        }
+        },
+        scope: {}
     }
 
 CreateEpicDirective.$inject = []

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

@@ -14,23 +14,19 @@ tg-lightbox-close
             input.e2e-create-epic-subject(
                 type="text"
                 name="subject"
-                maxlength="140"
                 ng-model="vm.newEpic.subject"
                 tg-auto-select
                 placeholder="{{'COMMON.FIELDS.SUBJECT' | translate}}"
-                required
+                data-required="true"
+                data-maxlength="140"
             )
         fieldset
             select.e2e-create-epic-status(
                 id="epic-status"
                 name="status"
                 ng-model="vm.newEpic.status"
+                ng-options="s.id as s.name for s in vm.project.epic_statuses | orderBy:'order'"
             )
-                option(
-                    ng-repeat="status in vm.project.epic_statuses | orderBy:'order'"
-                    ng-value="::status.id"
-                    ng-selected="vm.project.default_epic_status"
-                ) {{::status.name}}
         fieldset.tags-block
             tg-tag-line-common(
                 project="vm.project"
@@ -93,7 +89,9 @@ tg-lightbox-close
                 placeholder="{{'EPICS.CREATE.BLOCKED_NOTE_PLACEHOLDER' | translate}}"
             )
         fieldset
-            input.button-green.create-epic-button.e2e-create-epic-button(
+            button.button-green.create-epic-button.e2e-create-epic-button(
                 type="submit"
+                tg-loading="vm.loading"
+                title="{{ 'EPICS.CREATE.CREATE_EPIC' | translate }}"
                 translate="EPICS.CREATE.CREATE_EPIC"
             )