Empty epics

app/locales/taiga/locale-en.json

@@ -398,6 +398,11 @@
             "ADD": "+ ADD EPIC",
             "UNASSIGNED": "Unassigned"
         },
+        "EMPTY": {
+            "TITLE": "It looks like you have not created any epics yet",
+            "EXPLANATION": "Create an epic to have a superior level of User Stories. Epics can contain or be composed by User Stories from this or any other project",
+            "HELP": "Learn more about epics"
+        },
         "TABLE": {
             "VOTES": "Votes",
             "NAME": "Name",

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

@@ -59,7 +59,6 @@ class EpicRowController
                 @.epicStories = data
                 console.log @.epicStories.toJS()
                 @.displayUserStories = true
-                @confirm.notify('success')
 
             onError = (data) =>
                 @confirm.notify('error')

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

@@ -22,11 +22,12 @@ module = angular.module("taigaEpics")
 class EpicsDashboardController
     @.$inject = [
         "$tgResources",
+        "tgResources",
         "$routeParams",
         "tgErrorHandlingService"
     ]
 
-    constructor: (@rs, @params, @errorHandlingService) ->
+    constructor: (@rs, @resources, @params, @errorHandlingService) ->
         @.sectionName = "Epics"
         @._loadProject()
 
@@ -35,6 +36,12 @@ class EpicsDashboardController
             if not project.is_epics_activated
                 @errorHandlingService.permissionDenied()
             @.project = project
+            @._loadEpics()
+
+    _loadEpics: () ->
+        projectId = @.project.id
+        return @resources.epics.list(projectId).then (epics) =>
+            @.epics = epics
 
     addNewEpic: () ->
         console.log 'Add new Epic'

app/modules/epics/dashboard/epics-dashboard.jade

@@ -9,7 +9,7 @@ doctype html
                 project-name="vm.project.name"
                 i18n-section-name="{{ vm.sectionName }}"
             )
-            .action-buttons
+            .action-buttons(ng-if="vm.epics.size")
                 button.button-green(
                     translate="EPICS.DASHBOARD.ADD"
                     title="{{ EPICS.DASHBOARD.ADD_TITLE | translate }}",
@@ -17,6 +17,26 @@ doctype html
                 )
                 
         tg-epics-table(
-            ng-if="vm.project"
+            ng-if="vm.project && vm.epics.size"
             project="vm.project"
+            epics="vm.epics"
         )
+        
+        section.empty-epics(ng-if="!vm.epics.size")
+            img(
+                src="/#{v}/images/epics-empty.png"
+                ng-title="EPICS.EMPTY.HELP | translate"
+            )
+            h1.title(translate="EPICS.EMPTY.TITLE")
+            p(translate="EPICS.EMPTY.EXPLANATION")
+            a(
+                translate="EPICS.EMPTY.HELP"
+                href="https://tree.taiga.io/support/frequently-asked-questions/who-is-taiga-for/"
+                target="_blank"
+                ng-title="EPICS.EMPTY.HELP | translate"
+            )
+            button.create-epic.button-green(
+                translate="EPICS.DASHBOARD.ADD"
+                title="{{ EPICS.DASHBOARD.ADD_TITLE | translate }}",
+                ng-click="vm.addNewEpic()"
+            )

app/modules/epics/dashboard/epics-dashboard.scss

@@ -0,0 +1,26 @@
+.empty-epics {
+    margin: 0 auto;
+    padding: 5vh;
+    text-align: center;
+    width: 650px;
+    .title {
+        @include font-type(normal);
+        @include font-size(larger);
+        color: $gray-light;
+        margin-bottom: .5rem;
+        text-transform: none;
+    }
+    img {
+        margin: 2rem auto;
+        text-align: center;
+        width: 6rem;
+    }
+    p {
+        color: $gray-light;
+    }
+    a {
+        color: $primary;
+        display: block;
+        margin-bottom: 2rem;
+    }
+}

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

@@ -20,11 +20,9 @@
 module = angular.module("taigaEpics")
 
 class EpicsTableController
-    @.$inject = [
+    @.$inject = []
-        "tgResources"
-    ]
 
-    constructor: (@rs) ->
+    constructor: () ->
         @.displayOptions = false
         @.displayVotes = true
         @.column = {
@@ -36,7 +34,6 @@ class EpicsTableController
             status: true,
             progress: true
         }
-        @.loadEpics()
         @._checkPermissions()
 
     toggleEpicTableOptions: () ->
@@ -47,11 +44,6 @@ class EpicsTableController
             canEdit: _.includes(@.project.my_permissions, 'modify_epic')
         }
 
-    loadEpics: () ->
-        projectId = @.project.id
-        promise = @rs.epics.list(projectId).then (epics) =>
-            @.epics = epics
-
     reorderEpics: (epic, index) ->
         console.log epic, index
 

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

@@ -27,6 +27,7 @@ EpicsTableDirective = () ->
         controllerAs: "vm",
         bindToController: true,
         scope: {
+            epics: "="
             project: "="
         }
     }