From 7070f181ac7579ed7b6e4e0d0d12a21e1e075cfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Barrag=C3=A1n=20Merino?= Date: Mon, 29 Aug 2016 12:58:17 +0200 Subject: [PATCH] Create epics lightbox --- app/coffee/utils.coffee | 13 ++++++ .../color-selector.controller.coffee | 44 ++++++++----------- .../color-selector.controller.spec.coffee | 2 +- .../color-selector.directive.coffee | 25 ++++++----- .../color-selector/color-selector.jade | 18 +++++--- .../color-selector/color-selector.scss | 0 .../tags/components/add-tag-input.jade | 1 - .../create-epic/create-epic.controller.coffee | 28 +++++++++--- .../create-epic/create-epic.directive.coffee | 2 +- .../epics/create-epic/create-epic.jade | 4 +- .../epics-dashboard.controller.coffee | 4 +- app/partials/epic/epic-detail.jade | 3 +- 12 files changed, 88 insertions(+), 56 deletions(-) rename app/modules/components/{tags => }/color-selector/color-selector.controller.coffee (63%) rename app/modules/components/{tags => }/color-selector/color-selector.controller.spec.coffee (98%) rename app/modules/components/{tags => }/color-selector/color-selector.directive.coffee (73%) rename app/modules/components/{tags => }/color-selector/color-selector.jade (64%) rename app/modules/components/{tags => }/color-selector/color-selector.scss (100%) diff --git a/app/coffee/utils.coffee b/app/coffee/utils.coffee index 1bffd7c7..b4580029 100644 --- a/app/coffee/utils.coffee +++ b/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 diff --git a/app/modules/components/tags/color-selector/color-selector.controller.coffee b/app/modules/components/color-selector/color-selector.controller.coffee similarity index 63% rename from app/modules/components/tags/color-selector/color-selector.controller.coffee rename to app/modules/components/color-selector/color-selector.controller.coffee index 2d817a15..d9779606 100644 --- a/app/modules/components/tags/color-selector/color-selector.controller.coffee +++ b/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 = [ - '#fce94f', - '#edd400', - '#c4a000', - '#8ae234', - '#73d216', - '#4e9a06', - '#d3d7cf', - '#fcaf3e', - '#f57900', - '#ce5c00', - '#729fcf', - '#3465a4', - '#204a87', - '#888a85', - '#ad7fa8', - '#75507b', - '#5c3566', - '#ef2929', - '#cc0000', - '#a40000' - ] + @.colorList = getDefaulColorList() + + if @.initColor + @.color = @.initColor + @.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) diff --git a/app/modules/components/tags/color-selector/color-selector.controller.spec.coffee b/app/modules/components/color-selector/color-selector.controller.spec.coffee similarity index 98% rename from app/modules/components/tags/color-selector/color-selector.controller.spec.coffee rename to app/modules/components/color-selector/color-selector.controller.spec.coffee index ec212331..7456195c 100644 --- a/app/modules/components/tags/color-selector/color-selector.controller.spec.coffee +++ b/app/modules/components/color-selector/color-selector.controller.spec.coffee @@ -29,7 +29,7 @@ describe "ColorSelector", -> return null beforeEach -> - module "taigaCommon" + module "taigaComponents" _mocks() diff --git a/app/modules/components/tags/color-selector/color-selector.directive.coffee b/app/modules/components/color-selector/color-selector.directive.coffee similarity index 73% rename from app/modules/components/tags/color-selector/color-selector.directive.coffee rename to app/modules/components/color-selector/color-selector.directive.coffee index 67e02f57..9652fb33 100644 --- a/app/modules/components/tags/color-selector/color-selector.directive.coffee +++ b/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) -> - timeout = null + link = (scope, el, attrs, ctrl) -> + # Animation + _timeout = null cancel = () -> - $timeout.cancel(timeout) - timeout = null + $timeout.cancel(_timeout) + _timeout = null close = () -> - return if timeout + return if _timeout - timeout = $timeout (() -> - scope.vm.displaycolorList = false + _timeout = $timeout (() -> + 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) diff --git a/app/modules/components/tags/color-selector/color-selector.jade b/app/modules/components/color-selector/color-selector.jade similarity index 64% rename from app/modules/components/tags/color-selector/color-selector.jade rename to app/modules/components/color-selector/color-selector.jade index 54402386..7ffccb49 100644 --- a/app/modules/components/tags/color-selector/color-selector.jade +++ b/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-style="{'background': customColor.color}" - ng-click="vm.onSelectDropdownColor(customColor.color)" + ng-if="vm.color" + ng-style="{'background': vm.color}" + ng-click="vm.onSelectDropdownColor(vm.color)" ) input.custom-color-input( type="text" maxlength="7" - placeholder="#000000" - ng-model="customColor.color" + placeholder="Type hex code" + ng-model="vm.color" + ng-keydown="vm.onKeyDown($event)" ) diff --git a/app/modules/components/tags/color-selector/color-selector.scss b/app/modules/components/color-selector/color-selector.scss similarity index 100% rename from app/modules/components/tags/color-selector/color-selector.scss rename to app/modules/components/color-selector/color-selector.scss diff --git a/app/modules/components/tags/components/add-tag-input.jade b/app/modules/components/tags/components/add-tag-input.jade index 7e1b11ca..5e8de537 100644 --- a/app/modules/components/tags/components/add-tag-input.jade +++ b/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)" ) diff --git a/app/modules/epics/create-epic/create-epic.controller.coffee b/app/modules/epics/create-epic/create-epic.controller.coffee index 638a2480..eb78e615 100644 --- a/app/modules/epics/create-epic/create-epic.controller.coffee +++ b/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 - projecti: @.project.id + color: getRandomDefaultColor() + project: @.project.id status: @.project.default_epic_status tags: [] } @.attachments = Immutable.List() createEpic: () -> - return @rs.epics.post(@.newEpic).then () => - @.onReloadEpics() + promise = @rs.epics.post(@.newEpic) + 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) diff --git a/app/modules/epics/create-epic/create-epic.directive.coffee b/app/modules/epics/create-epic/create-epic.directive.coffee index 6fd7883a..3e9e8f36 100644 --- a/app/modules/epics/create-epic/create-epic.directive.coffee +++ b/app/modules/epics/create-epic/create-epic.directive.coffee @@ -28,7 +28,7 @@ CreateEpicDirective = () -> bindToController: true, scope: { project: '=', - onReloadEpics: '&' + onCreateEpic: '&' } } diff --git a/app/modules/epics/create-epic/create-epic.jade b/app/modules/epics/create-epic/create-epic.jade index 7d1e7e73..99efc7f9 100644 --- a/app/modules/epics/create-epic/create-epic.jade +++ b/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 diff --git a/app/modules/epics/dashboard/epics-dashboard.controller.coffee b/app/modules/epics/dashboard/epics-dashboard.controller.coffee index 26c2edbf..d6f23146 100644 --- a/app/modules/epics/dashboard/epics-dashboard.controller.coffee +++ b/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) diff --git a/app/partials/epic/epic-detail.jade b/app/partials/epic/epic-detail.jade index b03ec020..edee4440 100644 --- a/app/partials/epic/epic-detail.jade +++ b/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(