From 5a3185e69978a9bcabc34d11de4ffa99b5ac2bde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 20 Jul 2016 15:46:41 +0200 Subject: [PATCH] Epics table --- app/locales/taiga/locale-en.json | 15 ++- .../epics-dashboard.controller.coffee | 22 ++++- .../epics/dashboard/epics-dashboard.jade | 20 +++- .../epics-table/epics-table.controller.coffee | 44 +++++++++ .../epics-table/epics-table.directive.coffee | 34 +++++++ .../dashboard/epics-table/epics-table.jade | 99 +++++++++++++++++++ .../dashboard/epics-table/epics-table.scss | 74 ++++++++++++++ 7 files changed, 302 insertions(+), 6 deletions(-) create mode 100644 app/modules/epics/dashboard/epics-table/epics-table.controller.coffee create mode 100644 app/modules/epics/dashboard/epics-table/epics-table.directive.coffee create mode 100644 app/modules/epics/dashboard/epics-table/epics-table.jade create mode 100644 app/modules/epics/dashboard/epics-table/epics-table.scss diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json index 0cbd64e7..b18c8d15 100644 --- a/app/locales/taiga/locale-en.json +++ b/app/locales/taiga/locale-en.json @@ -392,7 +392,20 @@ "DASHBOARD": "Projects Dashboard" }, "EPICS": { - "TITLE": "EPICS" + "TITLE": "EPICS", + "DASHBOARD": { + "ADD": "+ ADD EPIC" + }, + "TABLE": { + "VOTES": "Votes", + "NAME": "Name", + "PROJECT": "Project", + "SPRINT": "Sprint", + "ASSIGNED_TO": "Assigned to", + "STATUS": "Status", + "PROGRESS": "Progress", + "VIEW_OPTIONS": "View options" + } }, "PROJECTS": { "PAGE_TITLE": "My projects - Taiga", diff --git a/app/modules/epics/dashboard/epics-dashboard.controller.coffee b/app/modules/epics/dashboard/epics-dashboard.controller.coffee index 529cbbc1..267b7f38 100644 --- a/app/modules/epics/dashboard/epics-dashboard.controller.coffee +++ b/app/modules/epics/dashboard/epics-dashboard.controller.coffee @@ -14,15 +14,29 @@ # You should have received a copy of the GNU Affero General Public License # along with this program. If not, see . # -# File: history.controller.coffee +# File: epics.dashboard.controller.coffee ### module = angular.module("taigaEpics") class EpicsDashboardController - @.$inject = [] + @.$inject = [ + "$tgResources", + "$routeParams", + "tgErrorHandlingService" + ] - constructor: () -> - console.log 'Hola' + constructor: (@rs, @params, @errorHandlingService) -> + @.sectionName = "Epics" + @._loadProject() + + _loadProject: () -> + return @rs.projects.getBySlug(@params.pslug).then (project) => + if not project.is_epics_activated + @errorHandlingService.permissionDenied() + @project = project + + addNewEpic: () -> + console.log 'Add new Epic' module.controller("EpicsDashboardCtrl", EpicsDashboardController) diff --git a/app/modules/epics/dashboard/epics-dashboard.jade b/app/modules/epics/dashboard/epics-dashboard.jade index d164ccf0..0ac4a42c 100644 --- a/app/modules/epics/dashboard/epics-dashboard.jade +++ b/app/modules/epics/dashboard/epics-dashboard.jade @@ -1 +1,19 @@ -p Epics +doctype html + +.wrapper() + tg-project-menu + section.main(role="main") + header.header-with-actions + h1( + tg-main-title + project-name="vm.project.name" + i18n-section-name="{{ vm.sectionName }}" + ) + .action-buttons + button.button-green( + translate="EPICS.DASHBOARD.ADD" + title="{{ EPICS.DASHBOARD.ADD_TITLE | translate }}", + ng-click="vm.addNewEpic()" + ) + + tg-epics-table diff --git a/app/modules/epics/dashboard/epics-table/epics-table.controller.coffee b/app/modules/epics/dashboard/epics-table/epics-table.controller.coffee new file mode 100644 index 00000000..9c145472 --- /dev/null +++ b/app/modules/epics/dashboard/epics-table/epics-table.controller.coffee @@ -0,0 +1,44 @@ +### +# Copyright (C) 2014-2015 Taiga Agile LLC +# +# This program is free software: you can redistribute it and/or modify +# it under the terms of the GNU Affero General Public License as +# published by the Free Software Foundation, either version 3 of the +# License, or (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU Affero General Public License for more details. +# +# You should have received a copy of the GNU Affero General Public License +# along with this program. If not, see . +# +# File: epics-table.controller.coffee +### + +module = angular.module("taigaEpics") + +class EpicsTableController + @.$inject = [] + + constructor: () -> + @.displayOptions = false + @.displayVotes = true + @.column = { + votes: true, + name: true, + project: true, + sprint: true, + assigned: true, + status: true, + progress: true + } + + toggleEpicTableOptions: () -> + @.displayOptions = !@.displayOptions + + updateEpicTableColumns: () -> + console.log @.column + +module.controller("EpicsTableCtrl", EpicsTableController) diff --git a/app/modules/epics/dashboard/epics-table/epics-table.directive.coffee b/app/modules/epics/dashboard/epics-table/epics-table.directive.coffee new file mode 100644 index 00000000..0ceef836 --- /dev/null +++ b/app/modules/epics/dashboard/epics-table/epics-table.directive.coffee @@ -0,0 +1,34 @@ +### +# Copyright (C) 2014-2016 Taiga Agile LLC +# +# This program is free software: you can redistribute it and/or modify +# it under the terms of the GNU Affero General Public License as +# published by the Free Software Foundation, either version 3 of the +# License, or (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU Affero General Public License for more details. +# +# You should have received a copy of the GNU Affero General Public License +# along with this program. If not, see . +# +# File: epics-table.directive.coffee +### + +module = angular.module('taigaEpics') + +EpicsTableDirective = () -> + + return { + templateUrl:"epics/dashboard/epics-table/epics-table.html", + controller: "EpicsTableCtrl", + controllerAs: "vm", + bindToController: true, + scope: {} + } + +EpicsTableDirective.$inject = [] + +module.directive("tgEpicsTable", EpicsTableDirective) diff --git a/app/modules/epics/dashboard/epics-table/epics-table.jade b/app/modules/epics/dashboard/epics-table/epics-table.jade new file mode 100644 index 00000000..aa0ecbd4 --- /dev/null +++ b/app/modules/epics/dashboard/epics-table/epics-table.jade @@ -0,0 +1,99 @@ +mixin epicSwitch(name, model) + div.check + input.activate-input( + id= name + name= name + type="checkbox" + ng-checked= model + ng-model= model + ng-change="vm.updateEpicTableColumns()" + ) + div + span.check-text.check-yes(translate="COMMON.YES") + span.check-text.check-no(translate="COMMON.NO") + +.epics-table + .epics-table-header + .vote( + translate="EPICS.TABLE.VOTES" + ng-if="vm.column.votes" + ) + .name( + translate="EPICS.TABLE.NAME" + ng-if="vm.column.name" + ) + .project( + translate="EPICS.TABLE.PROJECT" + ng-if="vm.column.project" + ) + .sprint( + translate="EPICS.TABLE.SPRINT" + ng-if="vm.column.sprint" + ) + .assigned( + translate="EPICS.TABLE.ASSIGNED_TO" + ng-if="vm.column.assigned" + ) + .status( + translate="EPICS.TABLE.STATUS" + ng-if="vm.column.status" + ) + .progress( + translate="EPICS.TABLE.PROGRESS" + ng-if="vm.column.progress" + ) + .epics-table-options-wrapper(ng-mouseleave="vm.displayOptions = false") + button.epics-table-option-button(ng-click="vm.displayOptions = true") + span(translate="EPICS.TABLE.VIEW_OPTIONS") + tg-svg(svg-icon="icon-arrow-down") + form.epics-table-dropdown(ng-show="vm.displayOptions") + .fieldset + label.epics-table-options-vote( + translate="EPICS.TABLE.VOTES" + for="epicSwitch-votes" + ) + +epicSwitch('switch-votes', 'vm.column.votes') + .fieldset + label.epics-table-options-vote( + translate="EPICS.TABLE.NAME" + for="switch-name" + ) + +epicSwitch('switch-name', 'vm.column.name') + .fieldset + label.epics-table-options-vote( + translate="EPICS.TABLE.PROJECT" + for="switch-project" + ) + +epicSwitch('switch-project', 'vm.column.project') + .fieldset + label.epics-table-options-vote( + translate="EPICS.TABLE.SPRINT" + for="switch-sprint" + ) + +epicSwitch('switch-sprint', 'vm.column.sprint') + .fieldset + label.epics-table-options-vote( + translate="EPICS.TABLE.ASSIGNED_TO" + for="switch-assigned" + ) + +epicSwitch('switch-assigned', 'vm.column.assigned') + .fieldset + label.epics-table-options-vote( + translate="EPICS.TABLE.STATUS" + for="switch-status" + ) + +epicSwitch('switch-status', 'vm.column.status') + .fieldset + label.epics-table-options-vote( + translate="EPICS.TABLE.PROGRESS" + for="switch-progress" + ) + +epicSwitch('switch-progress', 'vm.column.progress') + .epics-table-body + .vote + .name + .project + .sprint + .assigned + .status + .progress diff --git a/app/modules/epics/dashboard/epics-table/epics-table.scss b/app/modules/epics/dashboard/epics-table/epics-table.scss new file mode 100644 index 00000000..13e17061 --- /dev/null +++ b/app/modules/epics/dashboard/epics-table/epics-table.scss @@ -0,0 +1,74 @@ +.epics-table { + margin-top: 2rem; +} + +.epics-table-header, +.epics-table-body { + display: flex; + .assigned, + .vote { + flex-basis: 100px; + flex-grow: 0; + flex-shrink: 0; + } + .status, + .sprint { + flex-basis: 200px; + flex-grow: 0; + flex-shrink: 0; + } + .name, + .project, + .progress { + flex: 1; + } + .progress { + position: relative; + } +} + +.epics-table-header { + @include font-type(bold); + border-bottom: 1px solid $gray-light; + padding: .5rem; + position: relative; + .epics-table-options { + @include font-type(text); + @include font-size(small); + } +} + +.epics-table-options-wrapper { + position: absolute; + right: .5rem; + top: .5rem; +} + +.epics-table-option-button { + @include font-type(light); + background: none; + .icon { + @include svg-size(.7rem); + } +} + +.epics-table-dropdown { + background: $white; + box-shadow: 3px 3px 2px rgba($black, .1); + padding: .5rem; + position: absolute; + right: 0; + top: 1.25rem; + width: 250px; + .fieldset { + @include font-size(small); + border-bottom: 1px solid $whitish; + color: $gray-light; + display: flex; + justify-content: space-between; + padding: .5rem 0; + &:last-child { + border: 0; + } + } +}