Epics table

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",

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 <http://www.gnu.org/licenses/>.
 #
-# File: history.controller.coffee
+# File: epics.dashboard.controller.coffee
 ###
 
 module = angular.module("taigaEpics")
 
 class EpicsDashboardController
-    @.$inject = []
+    @.$inject = [
+        "$tgResources",
+        "$routeParams",
+        "tgErrorHandlingService"
+    ]
 
-    constructor: () ->
+    constructor: (@rs, @params, @errorHandlingService) ->
-        console.log 'Hola'
+        @.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)

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

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

@@ -0,0 +1,44 @@
+###
+# Copyright (C) 2014-2015 Taiga Agile LLC <taiga@taiga.io>
+#
+# 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 <http://www.gnu.org/licenses/>.
+#
+# 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)

app/modules/epics/dashboard/epics-table/epics-table.directive.coffee

@@ -0,0 +1,34 @@
+###
+# Copyright (C) 2014-2016 Taiga Agile LLC <taiga@taiga.io>
+#
+# 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 <http://www.gnu.org/licenses/>.
+#
+# 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)

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

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;
+        }
+    }
+}