Create epics lightbox

app/coffee/utils.coffee

@@ -239,6 +239,17 @@ patch = (oldImmutable, newImmutable) ->
 
     return pathObj
 
+DEFAULT_COLOR_LIST = [
+    '#fce94f', '#edd400', '#c4a000', '#8ae234', '#73d216', '#4e9a06', '#d3d7cf',
+    '#fcaf3e', '#f57900', '#ce5c00', '#729fcf', '#3465a4', '#204a87', '#888a85',
+    '#ad7fa8', '#75507b', '#5c3566', '#ef2929', '#cc0000', '#a40000'
+]
+
+getRandomDefaultColor = () ->
+    return _.sample(DEFAULT_COLOR_LIST)
+
+getDefaulColorList = () ->
+    return _.clone(DEFAULT_COLOR_LIST)
 
 taiga = @.taiga
 taiga.addClass = addClass
@@ -267,3 +278,5 @@ taiga.defineImmutableProperty = defineImmutableProperty
 taiga.isImage = isImage
 taiga.isPdf = isPdf
 taiga.patch = patch
+taiga.getRandomDefaultColor = getRandomDefaultColor
+taiga.getDefaulColorList = getDefaulColorList

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

@@ -17,41 +17,35 @@
 # File: color-selector.controller.coffee
 ###
 
-module = angular.module('taigaCommon')
+taiga = @.taiga
+getDefaulColorList = taiga.getDefaulColorList
+
 
 class ColorSelectorController
-
     constructor: () ->
-        @.colorList = [
+        @.colorList = getDefaulColorList()
-            '#fce94f',
+
-            '#edd400',
+        if @.initColor
-            '#c4a000',
+            @.color = @.initColor
-            '#8ae234',
+
-            '#73d216',
-            '#4e9a06',
-            '#d3d7cf',
-            '#fcaf3e',
-            '#f57900',
-            '#ce5c00',
-            '#729fcf',
-            '#3465a4',
-            '#204a87',
-            '#888a85',
-            '#ad7fa8',
-            '#75507b',
-            '#5c3566',
-            '#ef2929',
-            '#cc0000',
-            '#a40000'
-        ]
         @.displaycolorList = false
 
     toggleColorList: () ->
         @.displaycolorList = !@.displaycolorList
 
+        if @.isRequired and not @.color
+            @.color = @.initColor
+
     onSelectDropdownColor: (color) ->
+        @.color = color
         @.onSelectColor({color: color})
         @.toggleColorList()
 
+    onKeyDown: (event) ->
+        if event.which == 13 # ENTER
+            event.stopPropagation()
+            if @.color or not @.isRequired
+                @.onSelectDropdownColor(@.color)
 
-module.controller("ColorSelectorCtrl", ColorSelectorController)
+
+angular.module('taigaComponents').controller("ColorSelectorCtrl", ColorSelectorController)

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

@@ -29,7 +29,7 @@ describe "ColorSelector", ->
             return null
 
     beforeEach ->
-        module "taigaCommon"
+        module "taigaComponents"
 
         _mocks()
 

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

@@ -17,21 +17,20 @@
 # File: color-selector.directive.coffee
 ###
 
-module = angular.module('taigaCommon')
-
 ColorSelectorDirective = ($timeout) ->
-    link = (scope, el) ->
+    link = (scope, el, attrs, ctrl) ->
-        timeout = null
+        # Animation
+        _timeout = null
 
         cancel = () ->
-            $timeout.cancel(timeout)
+            $timeout.cancel(_timeout)
-            timeout = null
+            _timeout = null
 
         close = () ->
-            return if timeout
+            return if _timeout
 
-            timeout = $timeout (() ->
+            _timeout = $timeout (() ->
-                scope.vm.displaycolorList = false
+                scope.vm.toggleColorList()
             ), 400
 
         el.find('.color-selector')
@@ -45,17 +44,19 @@ ColorSelectorDirective = ($timeout) ->
     return {
         link: link,
         scope:{
+            isRequired: "="
             onSelectColor: "&",
-            color: "="
+            initColor: "="
         },
-        templateUrl:"components/tags/color-selector/color-selector.html",
+        templateUrl:"components/color-selector/color-selector.html",
         controller: "ColorSelectorCtrl",
         controllerAs: "vm",
         bindToController: true
     }
 
+
 ColorSelectorDirective.$inject = [
     "$timeout"
 ]
 
-module.directive("tgColorSelector", ColorSelectorDirective)
+angular.module('taigaComponents').directive("tgColorSelector", ColorSelectorDirective)

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

@@ -12,19 +12,23 @@
                 ng-title="color"
                 ng-click="vm.onSelectDropdownColor(color)"
             )
-            li.empty-color(ng-click="vm.onSelectDropdownColor(null)")
+            li.empty-color(
+                ng-if="!vm.isRequired"
+                ng-click="vm.onSelectDropdownColor(null)"
+            )
         .custom-color-selector
             .display-custom-color.empty-color(
-                ng-if="!customColor.color || customColor.color.length < 7"
+                ng-if="!vm.color"
             )
             .display-custom-color(
-                ng-if="customColor.color.length === 7"
+                ng-if="vm.color"
-                ng-style="{'background': customColor.color}"
+                ng-style="{'background': vm.color}"
-                ng-click="vm.onSelectDropdownColor(customColor.color)"
+                ng-click="vm.onSelectDropdownColor(vm.color)"
             )
             input.custom-color-input(
                 type="text"
                 maxlength="7"
-                placeholder="#000000"
+                placeholder="Type hex code"
-                ng-model="customColor.color"
+                ng-model="vm.color"
+                ng-keydown="vm.onKeyDown($event)"
             )

app/modules/components/tags/components/add-tag-input.jade

@@ -21,7 +21,6 @@
 
     tg-color-selector(
         ng-if="!vm.disableColorSelection"
-        color="vm.newTag.color",
         on-select-color="vm.selectColor(color)"
     )
 

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

@@ -19,30 +19,40 @@
 
 taiga = @.taiga
 trim = taiga.trim
+getRandomDefaultColor = taiga.getRandomDefaultColor
 
 module = angular.module("taigaEpics")
 
 class CreateEpicController
     @.$inject = [
         "tgResources"
+        "tgAttachmentsService"
+        "$q"
     ]
 
-    constructor: (@rs) ->
+    constructor: (@rs, @attachmentsService, @q) ->
         @.newEpic = {
-            color: null
+            color: getRandomDefaultColor()
-            projecti: @.project.id
+            project: @.project.id
             status: @.project.default_epic_status
             tags: []
         }
         @.attachments = Immutable.List()
 
     createEpic: () ->
-        return @rs.epics.post(@.newEpic).then () =>
+        promise =  @rs.epics.post(@.newEpic)
-            @.onReloadEpics()
 
+        promise.then (response) =>
+            @._createAttachments(response.data)
+
+        promise.then (data) =>
+            @.onCreateEpic()
+
+    # Color selector
     selectColor: (color) ->
         @.newEpic.color = color
 
+    # Tags
     addTag: (name, color) ->
         name = trim(name.toLowerCase())
 
@@ -52,5 +62,13 @@ class CreateEpicController
     deleteTag: (tag) ->
         _.remove @.newEpic.tags, (it) -> it[0] == tag[0]
 
+    # Attachments
+    addAttachment: (attachment) ->
+        @.attachments.push(attachment)
+
+    _createAttachments: (epic) ->
+        promises = _.map @.attachments.toJS(), (attachment) ->
+            return attachmentsService.upload(attachment.file, epic.id, epic.project, 'epic')
+        return @q.all(promises)
 
 module.controller("CreateEpicCtrl", CreateEpicController)

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

@@ -28,7 +28,7 @@ CreateEpicDirective = () ->
         bindToController: true,
         scope: {
             project: '=',
-            onReloadEpics: '&'
+            onCreateEpic: '&'
         }
     }
 

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

@@ -7,7 +7,8 @@ tg-lightbox-close
     )
         fieldset
             tg-color-selector(
-                color="vm.newEpic.color",
+                is-required="true"
+                init-color="vm.newEpic.color"
                 on-select-color="vm.selectColor(color)"
             )
             input.e2e-create-epic-subject(
@@ -46,6 +47,7 @@ tg-lightbox-close
         fieldset
             tg-attachments-simple(
                 attachments="vm.attachments"
+                on-add="vm.addAttachment(attachment)"
             )
         .settings
             fieldset.team-requirement

app/modules/epics/dashboard/epics-dashboard.controller.coffee

@@ -55,10 +55,10 @@ class EpicsDashboardController
         @lightboxFactory.create('tg-create-epic', {
             "class": "lightbox lightbox-create-epic open"
             "project": "project"
-            "on-reload-epics": "reloadEpics()"
+            "on-create-epic": "onCreateEpic()"
         }, {
             "project": @.project
-            "reloadEpics": @._onCreateEpic.bind(this)
+            "onCreateEpic": @._onCreateEpic.bind(this)
         })
 
 module.controller("EpicsDashboardCtrl", EpicsDashboardController)

app/partials/epic/epic-detail.jade

@@ -20,7 +20,8 @@ div.wrapper(
 
                 .detail-header-container
                     tg-color-selector(
-                        color="epic.color",
+                        is-required="true"
+                        init-color="epic.color"
                         on-select-color="ctrl.onSelectColor(color)"
                     )
                     tg-detail-header(