belong to epic multitemplate

app/modules/components/belong-to-epics/belong-to-epics-pill.jade

@@ -1,5 +1,5 @@
 - var hash = "#";
-.belong-to-epic-pill-wrapper(tg-repeat="epic in epics")
+.belong-to-epic-pill-wrapper(tg-repeat="epic in epics track by epic.get('id')")
     .belong-to-epic-pill(
         ng-style="{'background': epic.get('color')}"
         title="#{hash}{{epic.get('id')}} {{epic.get('subject')}}"

app/modules/components/belong-to-epics/belong-to-epics-text.jade

@@ -0,0 +1,10 @@
+- var hash = "#";
+span.belong-to-epic-text-wrapper(tg-repeat="epic in epics track by epic.get('id')")
+    .belong-to-epic-pill(
+        ng-style="{'background': epic.get('color')}"
+        title="#{hash}{{epic.get('id')}} {{epic.get('subject')}}"
+    )
+    a.belong-to-epic-text(
+        href=""
+        tg-nav="project-epics-detail:project=vm.project.get('slug')"
+    ) #{hash}{{epic.get('id')}} {{epic.get('subject')}}

app/modules/components/belong-to-epics/belong-to-epics.directive.coffee

@@ -22,15 +22,21 @@ module = angular.module('taigaEpics')
 BelongToEpicsDirective = () ->
 
     link = (scope, el, attrs) ->
-        if !scope.epics.isIterable
+        if scope.epics && !scope.epics.isIterable
           scope.epics = Immutable.fromJS(scope.epics)
 
+        if scope.project && !scope.project.isIterable
+          scope.project = Immutable.fromJS(scope.project)
+
+        scope.getTemplateUrl = () ->
+            return "components/belong-to-epics/belong-to-epics-" + attrs.format + ".html"
+
     return {
         link: link,
-        templateUrl:"components/belong-to-epics/belong-to-epics.html",
         scope: {
             epics: '='
-        }
+        },
+        template : '<span ng-include="getTemplateUrl()"></span>'
     }
 
 BelongToEpicsDirective.$inject = []

app/modules/components/belong-to-epics/belong-to-epics.scss

@@ -7,6 +7,7 @@
         }
     }
 }
+
 .belong-to-epic-pill {
     background-color: $grayer;
     border-radius: 50%;
@@ -15,3 +16,11 @@
     position: relative;
     width: .7rem;
 }
+
+.belong-to-epic-text-wrapper {
+    margin-right: 1rem;
+}
+
+.belong-to-epic-text {
+    margin-left: .25rem;
+}

app/modules/components/card/card-templates/card-title.jade

@@ -8,6 +8,7 @@ h2.card-title
         span(ng-if="vm.visible('ref')") {{::"#" + vm.item.getIn(['model', 'ref'])}}
         span.e2e-title(ng-if="vm.visible('subject')") {{vm.item.getIn(['model', 'subject'])}}
         tg-belong-to-epics(
+            format="pill"
             ng-if="vm.item.getIn(['model', 'epics'])"
             epics="vm.item.getIn(['model', 'epics'])"
         )

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

@@ -15,6 +15,7 @@
             ng-attr-title="{{::vm.story.get('subject')}}"
         ) #{hash}{{::vm.story.get('ref')}} {{::vm.story.get('subject')}}
         tg-belong-to-epics(
+            format="pill"
             ng-if="vm.story.get('epics')"
             epics="vm.story.get('epics')"
         )

app/partials/includes/components/backlog-row.jade

@@ -27,6 +27,7 @@
                 span(tg-bo-ref="us.ref")
                 span(ng-bind="us.subject")
                 tg-belong-to-epics(
+                    format="pill"
                     ng-if="us.epics"
                     epics="us.epics"
                 )

app/partials/includes/modules/sprint.jade

@@ -20,6 +20,7 @@ div.sprint-table(tg-bind-scope, ng-class="{'sprint-empty-wrapper': !sprint.user_
                 span(tg-bo-ref="us.ref")
                 span(tg-bo-bind="us.subject")
                 tg-belong-to-epics(
+                    format="pill"
                     ng-if="us.epics"
                     epics="us.epics"
                 )

app/partials/includes/modules/taskboard-table.jade

@@ -55,6 +55,7 @@ div.taskboard-table(
                             span.us-ref(tg-bo-ref="us.ref")
                             span(ng-bind="us.subject")
                             tg-belong-to-epics(
+                                format="pill"
                                 ng-if="us.epics"
                                 epics="us.epics"
                             )

app/partials/us/us-detail.jade

@@ -29,10 +29,22 @@ div.wrapper(
                 div.us-title(ng-class="{blocked: us.is_blocked}")
                     h2.us-title-text
                         span.us-number(tg-bo-ref="us.ref")
-                        span.us-name(tg-editable-subject, ng-model="us", required-perm="modify_us")
+                        span.us-name(
+                            tg-editable-subject
+                            ng-model="us"
+                            required-perm="modify_us"
+                        )
+                        
+                    p.belong-to-epics-wrapper(ng-if="us.epics")
+                        span This User Story belongs to
+                        tg-belong-to-epics(
+                            ng-if="us.epics"
+                            epics="us.epics"
+                            format="text"
+                            project="project"
+                        )
 
-                    p.us-related-task(ng-if="us.origin_issue")
+                    p.us-related-task(ng-if="us.origin_issue") {{ 'US.PROMOTED'|translate }}
-                        | {{ 'US.PROMOTED'|translate }}
                         a(
                             href=""
                             tg-check-permission="view_us"

app/styles/layout/ticket-detail.scss

@@ -142,6 +142,14 @@
             margin-right: 5rem;
         }
     }
+    .belong-to-epics-wrapper {
+        @include font-size(small);
+        color: $gray-light;
+        margin-top: .5rem;
+        a:hover {
+            color: $primary;
+        }
+    }
     .loading-spinner {
         @include loading-spinner;
         max-height: 1.5rem;