integrate team members

app/coffee/modules/team/main.coffee

@@ -20,61 +20,174 @@
 ###
 
 taiga = @.taiga
+
 mixOf = @.taiga.mixOf
-groupBy = @.taiga.groupBy
 
 module = angular.module("taigaTeam")
 
 #############################################################################
-## Task Detail Controller
+## Team Controller
 #############################################################################
 
 class TeamController extends mixOf(taiga.Controller, taiga.PageMixin)
     @.$inject = [
         "$scope",
-        "$rootScope",
         "$tgRepo",
-        "$tgConfirm",
         "$tgResources",
         "$routeParams",
         "$q",
-        "$tgLocation",
-        "$log",
         "$appTitle",
-        "$tgNavUrls",
+        "$tgAuth"
-        "$tgAnalytics",
         "tgLoader"
     ]
 
-    constructor: (@scope, @rootscope, @repo, @confirm, @rs, @params, @q, @location,
+    constructor: (@scope, @repo, @rs, @params, @q, @appTitle, @auth, tgLoader) ->
-                  @log, @appTitle, @navUrls, @analytics, tgLoader) ->
-        @scope.taskRef = @params.taskref
         @scope.sectionName = "Team"
 
         promise = @.loadInitialData()
 
-        promise.then () =>
+        # On Success
-            @appTitle.set(@scope.project.name + " - Team")
+        promise.then =>
+            @appTitle.set("Team - " + @scope.project.name)
             tgLoader.pageLoaded()
 
+        # On Error
+        promise.then null, @.onInitialDataError.bind(@)
+
+        @scope.currentUser = @auth.getUser()
+
+    setRole: (role) ->
+        if role
+            @scope.filtersRole = role
+        else
+            @scope.filtersRole = ""
+
+    loadMembers: ->
+        return @rs.memberships.list(@scope.projectId).then (data) =>
+            @scope.memberships = data.models
+            return data
+
     loadProject: ->
         return @rs.projects.get(@scope.projectId).then (project) =>
             @scope.project = project
             @scope.$emit('project:loaded', project)
-            @scope.statusList = project.task_statuses
+
-            @scope.statusById = groupBy(project.task_statuses, (x) -> x.id)
-            @scope.membersById = groupBy(project.memberships, (x) -> x.user)
             return project
 
     loadInitialData: ->
-        params = {
+        promise = @repo.resolve({pslug: @params.pslug}).then (data) =>
-            pslug: @params.pslug
-        }
-
-        promise = @repo.resolve(params).then (data) =>
             @scope.projectId = data.project
             return data
 
         return promise.then(=> @.loadProject())
+                      .then(=> @.loadUsersAndRoles())
+                      .then(=> @.loadMembers())
 
 module.controller("TeamController", TeamController)
+
+#############################################################################
+## Team Filters Directive
+#############################################################################
+
+TeamFiltersDirective = () ->
+    template = """
+    <ul>
+        <li>
+            <a ng-class="{active: !filtersRole.id}" ng-click="ctrl.setRole()" href="">
+                <span class="title">All</span>
+                <span class="icon icon-arrow-right"></span>
+            </a>
+        </li>
+        <li ng-repeat="role in roles">
+            <a ng-class="{active: role.id == filtersRole.id}" ng-click="ctrl.setRole(role)" href="">
+                <span class="title" tg-bo-bind="role.name"></span>
+                <span class="icon icon-arrow-right"></span>
+            </a>
+        </li>
+    </ul>
+    """
+
+    return {
+        template: template
+    }
+
+module.directive("tgTeamFilters", [TeamFiltersDirective])
+
+#############################################################################
+## Team Members Directive
+#############################################################################
+
+TeamMembersDirective = () ->
+    template = """
+        <div class="row" ng-repeat="user in memberships | filter:filtersQ | filter:{role: filtersRole.id}">
+            <div class="username">
+                <figure class="avatar">
+                    <img tg-bo-src="user.photo", tg-bo-alt="user.full_name" />
+                    <figcaption>
+                        <span class="name" tg-bo-bind="user.full_name"></span>
+                        <span class="position" tg-bo-bind="user.role_name"></span>
+                        <tg-leave-project ng-if="currentUser"></tg-leave-project>
+                    </figcaption>
+                </figure>
+            </div>
+            <div class="attribute">
+                <span class="icon icon-github"></span>
+            </div>
+            <div class="attribute">
+                <span class="icon icon-github"></span>
+            </div>
+            <div class="attribute">
+                <span class="icon icon-github"></span>
+            </div>
+            <div class="attribute">
+                <span class="icon icon-github"></span>
+            </div>
+            <div class="attribute">
+                <span class="icon icon-github top"></span>
+            </div>
+            <div class="attribute">
+                <span class="points">666</span>
+            </div>
+        </div>
+    """
+    return {
+        link: (scope) ->
+            if !_.isArray(scope.memberships)
+                scope.memberships = [scope.memberships]
+
+        template: template
+        scope: {
+            memberships: "=",
+            filtersQ: "=filtersq",
+            filtersRole: "=filtersrole",
+            currentUser: "@currentuser"
+        }
+    }
+
+module.directive("tgTeamMembers", TeamMembersDirective)
+
+#############################################################################
+## Leave project Directive
+#############################################################################
+
+LeaveProjectDirective = ($repo, $confirm, $location) ->
+    template= """
+        <a ng-click="leave()" href="" class="leave-project">
+            <span class="icon icon-delete"></span>Leave this project
+        </a>
+    """ #TODO: i18n
+
+    link = ($scope) ->
+        $scope.leave = () ->
+            $confirm.ask("Leave this project", "Are you sure you want to leave the project?")#TODO: i18n
+                .then (finish) =>
+                    console.log "TODO"
+    return {
+        scope: {},
+        restrict: "EA",
+        replace: true,
+        template: template,
+        link: link
+    }
+
+module.directive("tgLeaveProject", ["$tgRepo", "$tgConfirm", "$tgLocation", LeaveProjectDirective])

app/partials/views/modules/team/team-filters.jade

@@ -5,36 +5,7 @@ section.team-filters
 
         form.search-in
             fieldset
-                input(type="text", placeholder="Search by username or role...")
+                input(type="text", placeholder="Search by username or role...", ng-model="filtersQ")
                 a.icon.icon-search(href="", title="search")
 
-        nav
+        nav(tg-team-filters)
-            ul
-                li
-                    a(href="", title="")
-                        span.title Team
-                        span.icon.icon-arrow-right
-                li
-                    a(href="", title="")
-                        span.title UX
-                        span.icon.icon-arrow-right
-                li
-                    a(href="", title="")
-                        span.title Design
-                        span.icon.icon-arrow-right
-                li
-                    a(href="", title="")
-                        span.title Front
-                        span.icon.icon-arrow-right
-                li
-                    a(href="", title="")
-                        span.title Back
-                        span.icon.icon-arrow-right
-                li
-                    a(href="", title="")
-                        span.title Product Owner
-                        span.icon.icon-arrow-right
-                li
-                    a(href="", title="")
-                        span.title StakeHolders
-                        span.icon.icon-arrow-right

app/partials/views/modules/team/team-table.jade

@@ -25,48 +25,11 @@ section.table-team.basic-table
             Total Power
             div.popover.attribute-explanation
                 span How far did you go into this Taiga?
-    div.row.hero
+
-        div.username
+    div.hero(tg-team-members, memberships="currentUser" currentuser=true)
-            figure.avatar
-                img(src="https://s3.amazonaws.com/uifaces/faces/twitter/bermonpainter/128.jpg", alt="username")
-                figcaption
-                    span.name Xavier Julián Olmos
-                    span.position The Fucking Master
-        div.attribute
-            span.icon.icon-github(style="opacity: .3;")
-        div.attribute
-            span.icon.icon-github(style="opacity: .1;")
-        div.attribute
-            span.icon.icon-github(style="opacity: .3;")
-        div.attribute
-            span.icon.icon-github(style="opacity: .1;")
-        div.attribute
-            span.icon.icon-github.top
-        div.attribute
-            span.points 666
 
 h2
     span Team >
-    span  All
+    span  {{filtersRole.name || "All"}}
 
-section.table-team.basic-table
+section.table-team.basic-table(tg-team-members, memberships="memberships", filtersq="filtersQ", filtersrole="filtersRole")
-    - for (var x = 0; x < 10; x++)
-        div.row
-            div.username
-                figure.avatar
-                    img(src="https://s3.amazonaws.com/uifaces/faces/twitter/jackiesaik/128.jpg", alt="username")
-                    figcaption
-                        span.name Oompa Loompa
-                        span.position Role
-            div.attribute
-                span.icon.icon-github(style="opacity: .1;")
-            div.attribute
-                span.icon.icon-github(style="opacity: .2;")
-            div.attribute
-                span.icon.icon-github(style="opacity: .3;")
-            div.attribute
-                span.icon.icon-github(style="opacity: .3;")
-            div.attribute
-                span.icon.icon-github(style="opacity: .1;")
-            div.attribute
-                span.points 666

app/styles/modules/team/team-filters.scss

@@ -16,7 +16,10 @@
         a {
             display: block;
             padding: 1rem 0 1rem 1rem;
-            &:hover {
+            &:hover,
+            &.active {
+                @include transition (color .3s linear);
+                color: $green-taiga;
                 .icon {
                     @include transition (opacity .3s linear);
                     opacity: 1;

app/styles/modules/team/team-table.scss

@@ -28,15 +28,31 @@
             }
         }
     }
+    .leave-project {
+        display: block;
+        margin-top: .3rem;
+        .icon {
+            margin-right: .2rem;
+        }
+        &:hover {
+            .icon {
+                @include transition (color .3s linear);
+                color: $red;
+            }
+        }
+    }
     .team-header {
         @extend %title;
         @extend %bold;
         border-bottom: 0;
     }
     .hero {
-        background: $very-light-gray;
+        width: 100%;
-        border-bottom: 0;
+        .row {
-        margin: 1rem 0;
+            background: $very-light-gray;
+            border-bottom: 0;
+            margin: 1rem 0;
+        }
     }
     .avatar {
         @include table-flex(stretch, center, flex, row, wrap, flex-start);