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