Merge branch 'tasks' into 'master'

Add components that display tasks and allow accept/reject See merge request !55

Merge branch 'tasks' into 'master'
Add components that display tasks and allow accept/reject See merge request !55
Michel Felipe
2 parents f3cb9503 d6d5bae0
Showing 41 changed files with 1001 additions and 30 deletions Show diff stats
src/app/known-events.ts
src/app/layout/navbar/navbar.html
src/app/main/main.component.spec.ts
src/app/main/main.component.ts
src/app/profile/profile.component.ts
src/app/shared/services/events-hub.service.ts
src/app/task/task-list/accept.html
src/app/task/task-list/reject.html
src/app/task/task-list/task-accept.component.spec.ts
src/app/task/task-list/task-accept.component.ts
src/app/task/task-list/task-list.component.spec.ts
src/app/task/task-list/task-list.component.ts
src/app/task/task-list/task-list.html
src/app/task/task-list/task-list.scss
src/app/task/tasks-menu/tasks-menu.component.spec.ts
src/app/task/tasks-menu/tasks-menu.component.ts
src/app/task/tasks-menu/tasks-menu.html
src/app/task/tasks-menu/tasks-menu.scss
src/app/task/tasks/tasks.component.spec.ts
src/app/task/tasks/tasks.component.ts
 import { EventsHubKnownEventNames } from './shared/services/events-hub.service';
  
-export class NoosferoKnownEvents implements EventsHubKnownEventNames  {
+export class NoosferoKnownEvents implements EventsHubKnownEventNames {
     IMAGE_PROFILE_UPDATED: string = 'IMAGE_PROFILE_UPDATED';
     PROFILE_INFO_UPDATED: string = 'PROFILE_INFO_UPDATED';
     ARTICLE_UPDATED: string = 'ARTICLE_UPDATED';
+    TASK_CLOSED: string = 'TASK_CLOSED';
  
     constructor() {
     }
@@ -11,4 +12,4 @@ export class NoosferoKnownEvents implements EventsHubKnownEventNames  {
     getNames() {
         return Object.getOwnPropertyNames(this);
     }
-}
 \ No newline at end of file
+}
@@ -45,10 +45,12 @@
           </ul>
         </li>
       </ul>
-
       <ul class="nav navbar-nav navbar-right">
         <language-selector class="nav navbar-nav navbar-right"></language-selector>
       </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <tasks-menu class="nav navbar-nav navbar-right"></tasks-menu>
+      </ul>
       <div ui-view="actions"></div>
       <div class="nav navbar-nav search navbar-right">
         <search-form></search-form>
@@ -40,7 +40,8 @@ describe(&quot;MainComponent&quot;, function () {
                     useValue: [
                         'IMAGE_PROFILE_UPDATED',
                         'PROFILE_INFO_UPDATED',
-                        'ARTICLE_UPDATED'
+                        'ARTICLE_UPDATED',
+                        'TASK_CLOSED'
                     ]
                 }),
         ]
@@ -49,9 +49,11 @@ import { HtmlEditorComponent } from &quot;../shared/components/html-editor/html-edito
 import { PermissionDirective } from "../shared/components/permission/permission.directive";
 import { SearchComponent } from "../search/search.component";
 import { SearchFormComponent } from "../search/search-form/search-form.component";
-
 import { EVENTS_HUB_KNOW_EVENT_NAMES, EventsHubService } from "../shared/services/events-hub.service";
 import { NoosferoKnownEvents } from "../known-events";
+import { TasksMenuComponent } from "../task/tasks-menu/tasks-menu.component";
+import { TaskListComponent } from "../task/task-list/task-list.component";
+
 /**
  * @ngdoc controller
  * @name main.MainContentComponent
@@ -118,16 +120,16 @@ export class EnvironmentContent {
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
         LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
         PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent,
-        ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent
+        ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent, TasksMenuComponent, TaskListComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
-    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService, RegisterService,
+    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
         "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
         "ngSanitize", "ngMessages", "ngAria", "restangular",
         "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
         "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
         "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
         "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
-        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch", "ngPassword"]
+        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch"]
 })
 @StateConfig([
     {
@@ -148,6 +150,7 @@ export class EnvironmentContent {
         url: '/',
         component: EnvironmentComponent,
         name: 'main.environment',
+        abstract: true,
         views: {
             "content": {
                 templateUrl: "app/environment/environment.html",
-import {StateConfig, Component, Inject, provide} from 'ng-forward';
-import {ProfileInfoComponent} from './info/profile-info.component';
-import {ProfileHomeComponent} from './profile-home.component';
-import {BasicEditorComponent} from '../article/cms/basic-editor/basic-editor.component';
-import {CmsComponent} from '../article/cms/cms.component';
-import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
-import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
-import {ActivitiesComponent} from "./activities/activities.component";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-import {NotificationService} from "../shared/services/notification.service";
-import {MyProfileComponent} from "./myprofile.component";
-import {ProfileActionsComponent} from "./profile-actions.component";
-import {ConfigBarComponent} from "./config-bar.component";
+import { StateConfig, Component, Inject, provide } from 'ng-forward';
+import { ProfileInfoComponent } from './info/profile-info.component';
+import { ProfileHomeComponent } from './profile-home.component';
+import { BasicEditorComponent } from '../article/cms/basic-editor/basic-editor.component';
+import { CmsComponent } from '../article/cms/cms.component';
+import { ContentViewerComponent } from "../article/content-viewer/content-viewer.component";
+import { ContentViewerActionsComponent } from "../article/content-viewer/content-viewer-actions.component";
+import { ActivitiesComponent } from "./activities/activities.component";
+import { ProfileService } from "../../lib/ng-noosfero-api/http/profile.service";
+import { NotificationService } from "../shared/services/notification.service";
+import { MyProfileComponent } from "./myprofile.component";
+import { ProfileActionsComponent } from "./profile-actions.component";
+import { ConfigBarComponent } from "./config-bar.component";
+import { TasksComponent } from "../task/tasks/tasks.component";
+
 /**
  * @ngdoc controller
  * @name profile.Profile
@@ -92,6 +94,18 @@ import {ConfigBarComponent} from &quot;./config-bar.component&quot;;
         }
     },
     {
+        name: 'main.profile.tasks',
+        url: "^/myprofile/:profile/tasks",
+        component: TasksComponent,
+        views: {
+            "mainBlockContent": {
+                templateUrl: "app/task/tasks/tasks.html",
+                controller: TasksComponent,
+                controllerAs: "vm"
+            }
+        }
+    },
+    {
         name: 'main.profile.home',
         url: "",
         component: ProfileHomeComponent,
@@ -31,13 +31,13 @@ export class EventsHubService {
     emitEvent(eventType: string, payload?: any) {
         this.checkKnownEvent(eventType);
         let event = this.emitters.get(eventType);
-        if ( event ) this.emitters.get(eventType).next(payload);
+        if (event) this.emitters.get(eventType).next(payload);
     }
  
     subscribeToEvent<T>(eventType: string, generatorOrNext?: ((p?: T) => void), error?: any, complete?: any) {
         this.checkKnownEvent(eventType);
         let event = this.emitters.get(eventType);
-        if (event)  event.subscribe(generatorOrNext, error, complete);
+        if (event) event.subscribe(generatorOrNext, error, complete);
     }
  
     private setupEmitters() {
@@ -53,4 +53,4 @@ export class EventsHubService {
     }
  
  
-}
 \ No newline at end of file
+}
@@ -0,0 +1,10 @@
+<div class="task-accept task-confirmation">
+  <div class="accept-title confirmation-title">{{"tasks.actions.accept.confirmation.title" | translate}}</div>
+  <div class="accept-fields confirmation-details">
+    <task-accept ng-if="ctrl.currentTask.accept_details" [task]="ctrl.currentTask" [confirmation-task]="ctrl.confirmationTask"></task-accept>
+  </div>
+  <div class="actions">
+    <button type="submit" class="btn btn-default" ng-click="ctrl.callAccept()">{{"tasks.actions.confirmation.yes" | translate}}</button>
+    <button type="button" class="btn btn-warning" ng-click="ctrl.cancel()">{{"tasks.actions.confirmation.cancel" | translate}}</button>
+  </div>
+</div>
@@ -0,0 +1,10 @@
+<div class="task-reject task-confirmation">
+  <div class="reject-title confirmation-title">{{"tasks.actions.reject.confirmation.title" | translate}}</div>
+  <div class="reject-fields confirmation-details">
+    <input ng-model="ctrl.confirmationTask.reject_explanation" id="rejectionExplanationInput" type="text" placeholder="{{'tasks.actions.reject.explanation.label' | translate}}" class="rejection-explanation form-control">
+  </div>
+  <div class="actions">
+    <button type="submit" class="btn btn-default" ng-click="ctrl.callReject()">{{"tasks.actions.confirmation.yes" | translate}}</button>
+    <button type="button" class="btn btn-warning" ng-click="ctrl.cancel()">{{"tasks.actions.confirmation.cancel" | translate}}</button>
+  </div>
+</div>
@@ -0,0 +1,33 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { TaskAcceptComponent } from './task-accept.component';
+
+const htmlTemplate: string = '<task-accept [task]="ctrl.task"></task-accept>';
+
+describe("Components", () => {
+    describe("Task Accept Component", () => {
+
+        let task = { id: 1, type: "AddMember" };
+        let roleService = jasmine.createSpyObj("roleService", ["getByProfile"]);
+
+        beforeEach(angular.mock.module("templates"));
+
+        function createComponent() {
+            return helpers.quickCreateComponent({
+                template: htmlTemplate,
+                directives: [TaskAcceptComponent],
+                properties: { task: task },
+                providers: [
+                    helpers.createProviderToValue("RoleService", roleService)
+                ].concat(helpers.provideFilters("translateFilter"))
+            });
+        }
+
+        it("replace element with the specific task accept component", (done: Function) => {
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll("add-member-task-accept").length).toBe(1);
+                done();
+            });
+        });
+    });
+});
@@ -0,0 +1,22 @@
+import { Input, Inject, Component } from 'ng-forward';
+import { AddMemberTaskAcceptComponent } from "../types/add-member/add-member-task-accept.component";
+
+@Component({
+    selector: 'task-accept',
+    template: '<div></div>',
+    directives: [AddMemberTaskAcceptComponent]
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class TaskAcceptComponent {
+
+    @Input() task: noosfero.Task;
+    @Input() confirmationTask: noosfero.Task;
+
+    ngOnInit() {
+        let componentName = this.task.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        componentName += "-task-accept";
+        this.$element.replaceWith(this.$compile(`<${componentName} [task]="ctrl.task" [confirmation-task]="ctrl.confirmationTask"></${componentName}>`)(this.$scope));
+    }
+
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) { }
+}
@@ -0,0 +1,106 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TaskListComponent } from './task-list.component';
+
+const htmlTemplate: string = '<task-list [task]="ctrl.task"></task-list>';
+
+describe("Components", () => {
+    describe("Task List Component", () => {
+
+        let helper: ComponentTestHelper<TaskListComponent>;
+        let taskService = jasmine.createSpyObj("taskService", ["getAllPending"]);
+        let tasks = [{ id: 1 }, { id: 2 }];
+        let modal = helpers.mocks.$modal;
+        let eventsHubService = jasmine.createSpyObj("eventsHubService", ["subscribeToEvent", "emitEvent"]);
+        taskService.getAllPending = jasmine.createSpy("getAllPending").and.returnValue(Promise.resolve({ headers: () => { }, data: tasks }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [TaskListComponent],
+                providers: [
+                    helpers.createProviderToValue("TaskService", taskService),
+                    helpers.createProviderToValue("EventsHubService", eventsHubService),
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                    helpers.createProviderToValue('$uibModal', modal),
+                ].concat(helpers.provideFilters("groupByFilter")),
+                properties: { tasks: tasks }
+            });
+            helper = new ComponentTestHelper<TaskListComponent>(cls, done);
+        });
+
+        it("return specific template for a task", () => {
+            let task = { type: "AddMember" };
+            expect(helper.component.getTaskTemplate(<any>task)).toEqual("app/task/types/add-member/add-member.html");
+        });
+
+        it("return the default template for a task", () => {
+            let task = { type: "" };
+            expect(helper.component.getTaskTemplate(<any>task)).toEqual("app/task/types/default.html");
+        });
+
+        it("open confirmation modal when it has details to accept a task", () => {
+            let task = { accept_details: true };
+            helper.component.accept(<any>task);
+            expect(modal.open).toHaveBeenCalled();
+        });
+
+        it("open confirmation modal when it has details to reject a task", () => {
+            let task = { reject_details: true };
+            helper.component.reject(<any>task);
+            expect(modal.open).toHaveBeenCalled();
+        });
+
+        it("call api directly when it has no details to accept a task", () => {
+            let task = { accept_details: false };
+            helper.component.callAccept = jasmine.createSpy("callAccept");
+            helper.component.accept(<any>task);
+            expect(helper.component.callAccept).toHaveBeenCalled();
+        });
+
+        it("call api directly when it has no details to reject a task", () => {
+            let task = { accept_details: false };
+            helper.component.callReject = jasmine.createSpy("callReject");
+            helper.component.reject(<any>task);
+            expect(helper.component.callReject).toHaveBeenCalled();
+        });
+
+        it("call cancel and emit event when accept was called successfully", () => {
+            helper.component.currentTask = <any>{ id: 1 };
+            let result = helpers.mocks.promiseResultTemplate({ data: { id: 1 } });
+            taskService.closeTask = jasmine.createSpy("closeTask").and.returnValue(result);
+            helper.component.cancel = jasmine.createSpy("cancel");
+            helper.component.callAccept();
+            expect(helper.component.cancel).toHaveBeenCalled();
+            expect((<any>helper.component)['eventsHubService'].emitEvent).toHaveBeenCalled();
+        });
+
+        it("call cancel and emit event when reject was called successfully", () => {
+            helper.component.currentTask = <any>{ id: 1 };
+            let result = helpers.mocks.promiseResultTemplate({ data: { id: 1 } });
+            taskService.closeTask = jasmine.createSpy("closeTask").and.returnValue(result);
+            helper.component.cancel = jasmine.createSpy("cancel");
+            helper.component.callReject();
+            expect(helper.component.cancel).toHaveBeenCalled();
+            expect((<any>helper.component)['eventsHubService'].emitEvent).toHaveBeenCalled();
+        });
+
+        it("reset currentTask and close modal when call cancel", () => {
+            let modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
+            helper.component["modalInstance"] = modalInstance;
+            helper.component.currentTask = <any>{ id: 1 };
+            helper.component.cancel();
+            expect(modalInstance.close).toHaveBeenCalled();
+            expect(helper.component.currentTask).toBeNull();
+        });
+
+        it("not fail when call cancel with no modalInstance", () => {
+            helper.component["modalInstance"] = null;
+            helper.component.currentTask = null;
+            helper.component.cancel();
+        });
+    });
+});
@@ -0,0 +1,107 @@
+import { Component, Input, Inject, provide } from "ng-forward";
+import { NotificationService } from "../../shared/services/notification.service";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+import { TaskAcceptComponent } from "./task-accept.component";
+import { Arrays } from "../../../lib/util/arrays";
+import { EventsHubService } from "../../shared/services/events-hub.service";
+import { NoosferoKnownEvents } from "../../known-events";
+
+@Component({
+    selector: "task-list",
+    templateUrl: "app/task/task-list/task-list.html",
+    directives: [TaskAcceptComponent],
+    providers: [
+        provide('eventsHubService', { useClass: EventsHubService })
+    ]
+})
+@Inject(NotificationService, "$scope", "$uibModal", TaskService, EventsHubService)
+export class TaskListComponent {
+
+    @Input() tasks: noosfero.Task[];
+
+    private taskTemplates = ["AddFriend", "AddMember", "CreateCommunity", "SuggestArticle", "AbuseComplaint"];
+
+    currentTask: noosfero.Task;
+    confirmationTask: noosfero.Task;
+    eventsNames: NoosferoKnownEvents;
+    private modalInstance: any = null;
+
+    constructor(private notificationService: NotificationService,
+        private $scope: ng.IScope,
+        private $uibModal: any,
+        private taskService: TaskService,
+        private eventsHubService: EventsHubService) {
+
+        this.eventsNames = new NoosferoKnownEvents();
+    }
+
+    ngOnInit() {
+        this.eventsHubService.subscribeToEvent(this.eventsNames.TASK_CLOSED, (task: noosfero.Task) => {
+            Arrays.remove(this.tasks, task);
+        });
+    }
+
+    getTaskTemplate(task: noosfero.Task) {
+        if (this.taskTemplates.indexOf(task.type) >= 0) {
+            let templateName = this.getTemplateName(task);
+            return `app/task/types/${templateName}/${templateName}.html`;
+        } else {
+            return 'app/task/types/default.html';
+        }
+    }
+
+    accept(task: noosfero.Task) {
+        this.closeTask(task, task.accept_details, "app/task/task-list/accept.html", () => { this.callAccept(); });
+    }
+
+    reject(task: noosfero.Task) {
+        this.closeTask(task, task.reject_details, "app/task/task-list/reject.html", () => { this.callReject(); });
+    }
+
+    private closeTask(task: noosfero.Task, hasDetails: boolean, templateUrl: string, confirmationFunction: Function) {
+        this.currentTask = task;
+        this.confirmationTask = <any>{ id: task.id };
+        if (hasDetails) {
+            this.modalInstance = this.$uibModal.open({
+                templateUrl: templateUrl,
+                controller: TaskListComponent,
+                controllerAs: 'modal',
+                bindToController: true,
+                scope: this.$scope
+            });
+        } else {
+            confirmationFunction();
+        }
+    }
+
+    callAccept() {
+        this.callCloseTask("finish", "tasks.actions.accept.title", "tasks.actions.accept.message");
+    }
+
+    callReject() {
+        this.callCloseTask("cancel", "tasks.actions.reject.title", "tasks.actions.reject.message");
+    }
+
+    private callCloseTask(action: string, title: string, message: string) {
+        this.taskService.closeTask(this.confirmationTask, action).then(() => {
+            this.eventsHubService.emitEvent(this.eventsNames.TASK_CLOSED, this.currentTask);
+            this.notificationService.success({ title: title, message: message });
+        }).finally(() => {
+            this.cancel();
+        });
+    }
+
+    cancel() {
+        if (this.modalInstance) {
+            this.modalInstance.close();
+            this.modalInstance = null;
+        }
+        this.currentTask = null;
+        this.confirmationTask = null;
+    }
+
+    private getTemplateName(task: noosfero.Task) {
+        return task.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+
+}
@@ -0,0 +1,24 @@
+<ul class="task-list">
+  <li class="task-group" ng-repeat="(target, tasks) in ctrl.tasks | groupBy: 'target.name'">
+    <div class="task-target">
+      <noosfero-profile-image ng-if="tasks[0].target.type" [profile]="tasks[0].target"></noosfero-profile-image>
+      <div class="target-name">{{target}}</div>
+    </div>
+    <div class="task-body" ng-repeat="task in tasks | orderBy: 'created_at':true">
+      <div class="task">
+        <ng-include src="ctrl.getTaskTemplate(task)"></ng-include>
+      </div>
+      <div class="actions">
+        <a href="#" ng-if="!task.accept_disabled" ng-click="ctrl.accept(task)" class="accept" uib-tooltip="{{'tasks.actions.accept' | translate}}">
+          <i class="fa fa-check"></i>
+        </a>
+        <a href="#" ng-if="!task.reject_disabled" ng-click="ctrl.reject(task)" class="reject" uib-tooltip="{{'tasks.actions.reject' | translate}}">
+          <i class="fa fa-close"></i>
+        </a>
+      </div>
+      <span class="time">
+        <span class="bullet-separator">•</span> <span am-time-ago="task.created_at | dateFormat"></span>
+      </span>
+    </div>
+  </li>
+</ul>
@@ -0,0 +1,86 @@
+$task-action-accept-color: #77c123;
+$task-action-reject-color: #d64e18;
+
+.task-list {
+  width: 100%;
+  padding: 0;
+  list-style-type: none;
+  .task-group {
+    border-top: 1px solid #f3f3f3;
+    padding: 4px 16px 8px 16px;
+  }
+  .task-target {
+    margin-top: 12px;
+    .profile-image {
+      color: #2c3e50;
+      font-size: 25px;
+      width: 25px;
+      display: inline-block;
+      @extend .img-rounded;
+    }
+    .target-name {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  .task-body {
+    margin-left: 35px;
+    padding: 2px;
+    .task {
+      display: inline-block;
+      color: #949494;
+      .task-icon {
+        font-size: 18px;
+        color: #e84e40;
+      }
+      .requestor, .target {
+         font-style: italic;
+         color: #676767;
+      }
+    }
+    .actions {
+      display: inline-block;
+      font-size: 19px;
+      a {
+        text-decoration: none;
+      }
+      .accept {
+        color: $task-action-accept-color;
+        &:hover {
+          color: darken($task-action-accept-color, 10%);
+        }
+      }
+      .reject {
+        color: $task-action-reject-color;
+        &:hover {
+          color: darken($task-action-reject-color, 10%);
+        }
+      }
+    }
+    .time {
+      color: #c1c1c1;
+      font-size: 12px;
+      .bullet-separator {
+        font-size: 10px;
+        color: #d1d1d1;
+      }
+    }
+  }
+}
+.task-confirmation {
+  @extend .form-group;
+  .confirmation-details {
+    margin-bottom: 20px;
+  }
+  .confirmation-title {
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  .actions {
+    text-align: center;
+  }
+}
@@ -0,0 +1,44 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TasksMenuComponent } from './tasks-menu.component';
+import { AuthEvents } from "./../../login";
+
+const htmlTemplate: string = '<tasks-menu></tasks-menu>';
+
+describe("Components", () => {
+    describe("Task Menu Component", () => {
+
+        let helper: ComponentTestHelper<TasksMenuComponent>;
+        let taskService = jasmine.createSpyObj("taskService", ["getAllPending"]);
+        let tasks = [{ id: 1 }, { id: 2 }];
+        let eventsHubService = jasmine.createSpyObj("eventsHubService", ["subscribeToEvent", "emitEvent"]);
+        taskService.getAllPending = jasmine.createSpy("getAllPending").and.returnValue(Promise.resolve({ headers: () => { }, data: tasks }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [TasksMenuComponent],
+                providers: [
+                    helpers.createProviderToValue("TaskService", taskService),
+                    helpers.createProviderToValue("EventsHubService", eventsHubService),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
+                ]
+            });
+            helper = new ComponentTestHelper<TasksMenuComponent>(cls, done);
+        });
+
+        it("load person tasks", () => {
+            expect(taskService.getAllPending).toHaveBeenCalled();
+        });
+
+        it("load person tasks when receive a login event", () => {
+            helper.component.loadTasks = jasmine.createSpy("loadTasks");
+            helper.component.ngOnInit();
+            (<any>helper.component['authService'])[AuthEvents[AuthEvents.loginSuccess]].next({});
+            expect(helper.component.loadTasks).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,46 @@
+import { Component, Inject } from "ng-forward";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+import { AuthService, SessionService, AuthEvents } from "./../../login";
+import { EventsHubService } from "../../shared/services/events-hub.service";
+import { NoosferoKnownEvents } from "../../known-events";
+
+@Component({
+    selector: "tasks-menu",
+    templateUrl: "app/task/tasks-menu/tasks-menu.html"
+})
+@Inject(TaskService, SessionService, AuthService, EventsHubService)
+export class TasksMenuComponent {
+
+    tasks: noosfero.Task[];
+    total: number;
+    perPage = 5;
+    person: noosfero.Person;
+    eventsNames: NoosferoKnownEvents;
+
+    constructor(private taskService: TaskService,
+        private session: SessionService,
+        private authService: AuthService,
+        private eventsHubService: EventsHubService) {
+
+        this.eventsNames = new NoosferoKnownEvents();
+    }
+
+    ngOnInit() {
+        this.eventsHubService.subscribeToEvent(this.eventsNames.TASK_CLOSED, (task: noosfero.Task) => {
+            this.total--;
+        });
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.loadTasks();
+        });
+        this.loadTasks();
+    }
+
+    loadTasks() {
+        if (!this.session.currentUser()) return;
+        this.person = this.session.currentUser().person;
+        this.taskService.getAllPending({ per_page: this.perPage }).then((result: noosfero.RestResult<noosfero.Task[]>) => {
+            this.total = result.headers('total');
+            this.tasks = result.data;
+        });
+    }
+}
@@ -0,0 +1,11 @@
+<li class="btn-nav tasks-menu" uib-dropdown  ng-show="ctrl.total > 0" ng-if="ctrl.total">
+  <a href="#" uib-dropdown-toggle>
+    <i class="fa fa-bell-o fa-fw fa-2x"></i>
+    <span class="badge">{{ctrl.total}}</span>
+  </a>
+  <div class="dropdown-menu task-panel" uib-dropdown-menu>
+    <div class="task-menu-header">{{"tasks.menu.header" | translate:{tasks: ctrl.total}:"messageformat"}}</div>
+    <task-list [tasks]="ctrl.tasks"></task-list>
+    <a ui-sref="main.profile.tasks({profile: ctrl.person.identifier})" class="all-tasks btn btn-default btn-xs">{{"tasks.menu.all" | translate}}</a>
+  </div>
+</li>
@@ -0,0 +1,29 @@
+tasks-menu {
+  .tasks-menu {
+    position: relative;
+    margin-right: 0;
+    .badge {
+      position: absolute;
+      top: 1px;
+      right: 8px;
+      border-radius: 6px;
+      background-color: #e84e40;
+      color: #fff;
+    }
+    .all-tasks {
+      text-align: center;
+      width: 100%;
+      display: block;
+      line-height: 25px;
+    }
+    .task-panel {
+      width: 550px;
+      padding: 0;
+    }
+    .task-menu-header {
+      text-align: center;
+      padding: 7px;
+      font-weight: bold;
+    }
+  }
+}
@@ -0,0 +1,34 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TasksComponent } from './tasks.component';
+import { AuthEvents } from "./../../login";
+
+const htmlTemplate: string = '<tasks></tasks>';
+
+describe("Components", () => {
+    describe("Task Menu Component", () => {
+
+        let helper: ComponentTestHelper<TasksComponent>;
+        let taskService = jasmine.createSpyObj("taskService", ["getAllPending"]);
+        let tasks = [{ id: 1 }, { id: 2 }];
+        taskService.getAllPending = jasmine.createSpy("getAllPending").and.returnValue(Promise.resolve({ headers: () => { }, data: tasks }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [TasksComponent],
+                providers: [
+                    helpers.createProviderToValue("TaskService", taskService)
+                ]
+            });
+            helper = new ComponentTestHelper<TasksComponent>(cls, done);
+        });
+
+        it("load person tasks", () => {
+            expect(taskService.getAllPending).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,30 @@
+import { Component, Inject, provide } from "ng-forward";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+
+@Component({
+    selector: "tasks",
+    templateUrl: "app/task/tasks/tasks.html",
+    providers: [
+        provide('taskService', { useClass: TaskService })
+    ]
+})
+@Inject(TaskService)
+export class TasksComponent {
+
+    tasks: noosfero.Task[];
+    total: number;
+    currentPage: number;
+    perPage = 5;
+
+    constructor(private taskService: TaskService) {
+        this.loadPage();
+    }
+
+    loadPage() {
+        this.taskService.getAllPending({ page: this.currentPage, per_page: this.perPage }).then((result: noosfero.RestResult<noosfero.Task[]>) => {
+            this.total = result.headers('total');
+            this.tasks = result.data;
+        });
+    }
+
+}
@@ -0,0 +1,8 @@
+<h3>{{"tasks.header" | translate}}</h3>
+
+<task-list [tasks]="vm.tasks"></task-list>
+
+<uib-pagination ng-model="vm.currentPage" total-items="vm.total" class="pagination-sm center-block"
+  boundary-links="true" items-per-page="vm.perPage" ng-change="vm.loadPage()"
+  first-text="«" last-text="»" previous-text="‹" next-text="›">
+</uib-pagination>
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-user-times"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.abuse_complaint.message" | translate}}
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-user-plus"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.add_friend.message" | translate}} <span class="target">{{task.target.name}}</span>
@@ -0,0 +1,11 @@
+<div class="add-member-details">
+  <label>{{"tasks.add_member.accept.select_role" | translate}}</label>
+  <div class="form-group roles">
+    <div class="checkbox-nice" ng-repeat="role in ctrl.roles">
+      <input type="checkbox" id="role_{{role.name}}" (click)="ctrl.toggleSelection(role)">
+      <label for="role_{{role.name}}">
+        {{role.name}}
+      </label>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,44 @@
+import { Provider, provide, Component } from 'ng-forward';
+import * as helpers from "../../../../spec/helpers";
+import { ComponentTestHelper, createClass } from '../../../../spec/component-test-helper';
+import { AddMemberTaskAcceptComponent } from './add-member-task-accept.component';
+
+const htmlTemplate: string = '<add-member-task-accept [task]="ctrl.task" [confirmation-task]="ctrl.confirmationTask"></add-member-task-accept>';
+
+describe("Components", () => {
+    describe("Add Member Task Accept Component", () => {
+
+        let helper: ComponentTestHelper<AddMemberTaskAcceptComponent>;
+        let roleService = jasmine.createSpyObj("roleService", ["getByProfile"]);
+        let roles = [{ id: 1 }, { id: 2 }];
+        let task = <any>{ target: { id: 5 } };
+        roleService.getByProfile = jasmine.createSpy("getByProfile").and.returnValue(Promise.resolve({ headers: () => { }, data: roles }));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [AddMemberTaskAcceptComponent],
+                providers: [
+                    helpers.createProviderToValue("RoleService", roleService)
+                ].concat(helpers.provideFilters("translateFilter")),
+                properties: { task: task, confirmationTask: task }
+            });
+            helper = new ComponentTestHelper<AddMemberTaskAcceptComponent>(cls, done);
+        });
+
+        it("insert role id in roles list when toggle selection", () => {
+            let role = { id: 1 };
+            helper.component.toggleSelection(<any>role);
+            expect(helper.component.confirmationTask.roles).toEqual([role.id]);
+        });
+
+        it("remove role id from roles list when toggle selection", () => {
+            let role = { id: 1 };
+            helper.component.confirmationTask.roles = [role.id];
+            helper.component.toggleSelection(<any>role);
+            expect(helper.component.confirmationTask.roles).toEqual([]);
+        });
+    });
+});
@@ -0,0 +1,33 @@
+import { Component, Input, Inject } from "ng-forward";
+import { RoleService } from "../../../../lib/ng-noosfero-api/http/role.service";
+
+@Component({
+    selector: "add-member-task-accept",
+    templateUrl: "app/task/types/add-member/add-member-accept.html",
+})
+@Inject(RoleService)
+export class AddMemberTaskAcceptComponent {
+
+    @Input() task: noosfero.Task;
+    @Input() confirmationTask: noosfero.AddMemberTask;
+    roles: noosfero.Role[];
+
+    constructor(private roleService: RoleService) { }
+
+    ngOnInit() {
+        if (!this.task.target) return;
+        this.confirmationTask.roles = [];
+        this.roleService.getByProfile(this.task.target.id).then((result: noosfero.RestResult<noosfero.Role[]>) => {
+            this.roles = result.data;
+        });
+    }
+
+    toggleSelection(role: noosfero.Role) {
+        let index = this.confirmationTask.roles.indexOf(role.id);
+        if (index >= 0) {
+            this.confirmationTask.roles.splice(index, 1);
+        } else {
+            this.confirmationTask.roles.push(role.id);
+        }
+    }
+}
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-user-plus"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.add_member.message" | translate}} <span class="target">{{task.target.name}}</span>
@@ -0,0 +1,5 @@
+.add-member-details {
+  .roles {
+    margin-left: 40px;
+  }
+}
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-users"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.create_community.message" | translate}} <span class="target">{{task.data.name}}</span>
@@ -0,0 +1 @@
+<!-- not implemented yet -->
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-fw fa-file-text"></i>
+<span class="requestor">{{task.requestor.name}}</span> {{"tasks.suggest_article.message" | translate}} <span class="target">{{task.data.article.name}}</span>
@@ -124,5 +124,26 @@
   "messages.invalid.maxlength": "This field is too long",
   "messages.invalid.minlength": "This field is too short",
   "messages.invalid.email": "This needs to be a valid email",
-  "messages.invalid.passwordMatch": "Your passwords did not match"
+  "messages.invalid.passwordMatch": "Your passwords did not match",
+  "tasks.menu.all": "All tasks",
+  "tasks.menu.all": "See all tasks",
+  "tasks.menu.header": "You have {tasks, plural, one{one pending task} other{# pending tasks}}",
+  "tasks.actions.accept": "Accept",
+  "tasks.actions.reject": "Reject",
+  "tasks.header": "Tasks",
+  "tasks.actions.accept.confirmation.title": "Confirm task acceptance?",
+  "tasks.actions.reject.confirmation.title": "Confirm task rejection?",
+  "tasks.actions.confirmation.yes": "Yes",
+  "tasks.actions.confirmation.cancel": "Cancel",
+  "tasks.actions.accept.title": "Good job!",
+  "tasks.actions.reject.title": "Good job!",
+  "tasks.actions.accept.message": "Task Accepted",
+  "tasks.actions.reject.message": "Task Rejected",
+  "tasks.actions.reject.explanation.label": "Rejection explanation",
+  "tasks.add_member.accept.select_role": "Select Roles:",
+  "tasks.abuse_complaint.message": "was reported due to inappropriate behavior",
+  "tasks.add_friend.message": "wants to be friend of",
+  "tasks.add_member.message": "wants to join",
+  "tasks.create_community.message": "wants to create a new community:",
+  "tasks.suggest_article.message": "suggested a new article:"
 }
@@ -127,5 +127,26 @@
   "messages.invalid.maxlength": "O valor é muito longo",
   "messages.invalid.minlength": "O valor é muito curto",
   "messages.invalid.email": "Informe um email válido",
-  "messages.invalid.passwordMatch": "As senhas não coincidem"
+  "messages.invalid.passwordMatch": "As senhas não coincidem",
+  "tasks.menu.all": "Todas as tarefas",
+  "tasks.menu.all": "Veja todas as tarefas",
+  "tasks.menu.header": "Você tem {tasks, plural, one{uma tarefa pendente} other{# tarefas pendentes}}",
+  "tasks.actions.accept": "Aceitar",
+  "tasks.actions.reject": "Rejeitar",
+  "tasks.header": "Tarefas",
+  "tasks.actions.accept.confirmation.title": "Confirmar aprovação da tarefa?",
+  "tasks.actions.reject.confirmation.title": "Confirmar reprovação da tarefa?",
+  "tasks.actions.confirmation.yes": "Sim",
+  "tasks.actions.confirmation.cancel": "Cancelar",
+  "tasks.actions.accept.title": "Bom trabalho!",
+  "tasks.actions.reject.title": "Bom trabalho!",
+  "tasks.actions.accept.message": "Tarefa Aceita",
+  "tasks.actions.reject.message": "Tarefa Rejeitada",
+  "tasks.actions.reject.explanation.label": "Motivo da rejeição",
+  "tasks.add_member.accept.select_role": "Selecionar papéis:",
+  "tasks.abuse_complaint.message": "foi notificado por comportamento inadequado",
+  "tasks.add_friend.message": "quer ser amigo de",
+  "tasks.add_member.message": "quer entrar em",
+  "tasks.create_community.message": "quer criar uma nova comunidade:",
+  "tasks.suggest_article.message": "sugeriu um novo artigo:"
 }
@@ -0,0 +1,33 @@
+import { RoleService } from "./role.service";
+
+describe("Services", () => {
+
+    describe("Role Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let roleService: RoleService;
+
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _RoleService_: RoleService) => {
+            $httpBackend = _$httpBackend_;
+            roleService = _RoleService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("list organization roles", (done) => {
+                $httpBackend.expectGET(`/api/v1/profiles/1/roles`).respond(200, { roles: [{ id: 1 }] });
+                roleService.getByProfile(1).then((result: noosfero.RestResult<noosfero.Role[]>) => {
+                    expect(result.data).toEqual([{ id: 1 }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,27 @@
+import { Injectable, Inject } from "ng-forward";
+import { RestangularService } from "./restangular_service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log")
+export class RoleService extends RestangularService<noosfero.Role> {
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "roles";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'role',
+            plural: 'roles'
+        };
+    }
+
+    getByProfile(profileId: number, params: any = {}) {
+        return this.list(this.restangularService.one("profiles", profileId), params);
+    }
+
+}
@@ -0,0 +1,56 @@
+import { TaskService } from "./task.service";
+
+
+describe("Services", () => {
+
+    describe("Task Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let taskService: TaskService;
+
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _TaskService_: TaskService) => {
+            $httpBackend = _$httpBackend_;
+            taskService = _TaskService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("list pending tasks", (done) => {
+                $httpBackend.expectGET(`/api/v1/tasks?all_pending=true&status=1`).respond(200, { tasks: [{ id: 1 }] });
+                taskService.getAllPending().then((result: noosfero.RestResult<noosfero.Task[]>) => {
+                    expect(result.data).toEqual([{ id: 1 }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("finish a task", (done) => {
+                let taskId = 1;
+                let task: noosfero.Task = <any>{ id: taskId };
+                $httpBackend.expectPUT(`/api/v1/tasks/${taskId}/finish`).respond(200, { task: { id: taskId } });
+                taskService.finishTask(task).then((result: noosfero.RestResult<noosfero.Task>) => {
+                    expect(result.data).toEqual({ id: 1 });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("cancel a task", (done) => {
+                let taskId = 1;
+                let task: noosfero.Task = <any>{ id: taskId };
+                $httpBackend.expectPUT(`/api/v1/tasks/${taskId}/cancel`).respond(200, { task: { id: taskId } });
+                taskService.cancelTask(task).then((result: noosfero.RestResult<noosfero.Task>) => {
+                    expect(result.data).toEqual({ id: 1 });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,46 @@
+import { Injectable, Inject } from "ng-forward";
+import { RestangularService } from "./restangular_service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log")
+export class TaskService extends RestangularService<noosfero.Task> {
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "tasks";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'task',
+            plural: 'tasks'
+        };
+    }
+
+    getAllPending(params: any = {}) {
+        params['all_pending'] = true;
+        params['status'] = 1;
+        return this.list(null, params);
+    }
+
+    finishTask(task: noosfero.Task) {
+        return this.closeTask(task, "finish");
+    }
+
+    cancelTask(task: noosfero.Task) {
+        return this.closeTask(task, "cancel");
+    }
+
+    closeTask(task: noosfero.Task, action: string) {
+        let element = this.getElement(task.id);
+        delete task.id;
+        let put = element.customPUT({ task: task }, action);
+        let deferred = this.$q.defer<noosfero.RestResult<noosfero.Task>>();
+        put.then(this.getHandleSuccessFunction<noosfero.RestResult<noosfero.Task>>(deferred));
+        put.catch(this.getHandleErrorFunction<noosfero.RestResult<noosfero.Task>>(deferred));
+        return deferred.promise;
+    }
+}
@@ -0,0 +1,11 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.AddMemberTask
+     * @description
+     *  A representation of an AddMemberTask in Noosfero.
+     */
+    export interface AddMemberTask extends Task {
+        roles: number[];
+    }
+}
@@ -0,0 +1,12 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Role
+     * @description
+     *  A representation of a Role in Noosfero.
+     */
+    export interface Role extends RestModel {
+        name: string;
+        key: string;
+    }
+}
@@ -0,0 +1,14 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Task
+     * @description
+     *  A representation of a Task in Noosfero.
+     */
+    export interface Task extends RestModel {
+        type: string;
+        accept_details: boolean;
+        reject_details: boolean;
+        target: noosfero.Profile | noosfero.Environment;
+    }
+}
@@ -237,11 +237,16 @@ export var mocks: any = {
         }
     },
     promiseResultTemplate: (response?: {}) => {
-
-        return {
-            then: (func?: (response: any) => void) => {
-                if (func) { return func(response); }
+        let callback = (func?: (response: any) => any) => {
+            if (func) {
+                let ret = func(response);
+                if (ret && typeof ret.then === "function") return ret;
             }
+            return mocks.promiseResultTemplate(response);
+        };
+        return {
+            then: callback,
+            finally: callback
         };
     },
     $log: {
1	1	import { EventsHubKnownEventNames } from './shared/services/events-hub.service';
2	2
3		-export class NoosferoKnownEvents implements EventsHubKnownEventNames {
	3	+export class NoosferoKnownEvents implements EventsHubKnownEventNames {
4	4	IMAGE_PROFILE_UPDATED: string = 'IMAGE_PROFILE_UPDATED';
5	5	PROFILE_INFO_UPDATED: string = 'PROFILE_INFO_UPDATED';
6	6	ARTICLE_UPDATED: string = 'ARTICLE_UPDATED';
	7	+ TASK_CLOSED: string = 'TASK_CLOSED';
7	8
8	9	constructor() {
9	10	}
...	...	@@ -11,4 +12,4 @@ export class NoosferoKnownEvents implements EventsHubKnownEventNames {
11	12	getNames() {
12	13	return Object.getOwnPropertyNames(this);
13	14	}
14		-}
15	15	\ No newline at end of file
	16	+}
...	...
...	...	@@ -45,10 +45,12 @@
45	45	</ul>
46	46	</li>
47	47	</ul>
48		-
49	48	<ul class="nav navbar-nav navbar-right">
50	49	<language-selector class="nav navbar-nav navbar-right"></language-selector>
51	50	</ul>
	51	+ <ul class="nav navbar-nav navbar-right">
	52	+ <tasks-menu class="nav navbar-nav navbar-right"></tasks-menu>
	53	+ </ul>
52	54	<div ui-view="actions"></div>
53	55	<div class="nav navbar-nav search navbar-right">
54	56	<search-form></search-form>
...	...
...	...	@@ -40,7 +40,8 @@ describe("MainComponent", function () {
40	40	useValue: [
41	41	'IMAGE_PROFILE_UPDATED',
42	42	'PROFILE_INFO_UPDATED',
43		- 'ARTICLE_UPDATED'
	43	+ 'ARTICLE_UPDATED',
	44	+ 'TASK_CLOSED'
44	45	]
45	46	}),
46	47	]
...	...
...	...	@@ -49,9 +49,11 @@ import { HtmlEditorComponent } from "../shared/components/html-editor/html-edito
49	49	import { PermissionDirective } from "../shared/components/permission/permission.directive";
50	50	import { SearchComponent } from "../search/search.component";
51	51	import { SearchFormComponent } from "../search/search-form/search-form.component";
52		-
53	52	import { EVENTS_HUB_KNOW_EVENT_NAMES, EventsHubService } from "../shared/services/events-hub.service";
54	53	import { NoosferoKnownEvents } from "../known-events";
	54	+import { TasksMenuComponent } from "../task/tasks-menu/tasks-menu.component";
	55	+import { TaskListComponent } from "../task/task-list/task-list.component";
	56	+
55	57	/**
56	58	* @ngdoc controller
57	59	* @name main.MainContentComponent
...	...	@@ -118,16 +120,16 @@ export class EnvironmentContent {
118	120	MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
119	121	LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
120	122	PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent,
121		- ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent
	123	+ ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent, TasksMenuComponent, TaskListComponent
122	124	].concat(plugins.mainComponents).concat(plugins.hotspots),
123		- providers: [AuthService, SessionService, NotificationService, BodyStateClassesService, RegisterService,
	125	+ providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
124	126	"ngAnimate", "ngCookies", "ngStorage", "ngTouch",
125	127	"ngSanitize", "ngMessages", "ngAria", "restangular",
126	128	"ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
127	129	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
128	130	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",
129	131	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
130		- "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch", "ngPassword"]
	132	+ "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch"]
131	133	})
132	134	@StateConfig([
133	135	{
...	...	@@ -148,6 +150,7 @@ export class EnvironmentContent {
148	150	url: '/',
149	151	component: EnvironmentComponent,
150	152	name: 'main.environment',
	153	+ abstract: true,
151	154	views: {
152	155	"content": {
153	156	templateUrl: "app/environment/environment.html",
...	...
1		-import {StateConfig, Component, Inject, provide} from 'ng-forward';
2		-import {ProfileInfoComponent} from './info/profile-info.component';
3		-import {ProfileHomeComponent} from './profile-home.component';
4		-import {BasicEditorComponent} from '../article/cms/basic-editor/basic-editor.component';
5		-import {CmsComponent} from '../article/cms/cms.component';
6		-import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
7		-import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
8		-import {ActivitiesComponent} from "./activities/activities.component";
9		-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
10		-import {NotificationService} from "../shared/services/notification.service";
11		-import {MyProfileComponent} from "./myprofile.component";
12		-import {ProfileActionsComponent} from "./profile-actions.component";
13		-import {ConfigBarComponent} from "./config-bar.component";
	1	+import { StateConfig, Component, Inject, provide } from 'ng-forward';
	2	+import { ProfileInfoComponent } from './info/profile-info.component';
	3	+import { ProfileHomeComponent } from './profile-home.component';
	4	+import { BasicEditorComponent } from '../article/cms/basic-editor/basic-editor.component';
	5	+import { CmsComponent } from '../article/cms/cms.component';
	6	+import { ContentViewerComponent } from "../article/content-viewer/content-viewer.component";
	7	+import { ContentViewerActionsComponent } from "../article/content-viewer/content-viewer-actions.component";
	8	+import { ActivitiesComponent } from "./activities/activities.component";
	9	+import { ProfileService } from "../../lib/ng-noosfero-api/http/profile.service";
	10	+import { NotificationService } from "../shared/services/notification.service";
	11	+import { MyProfileComponent } from "./myprofile.component";
	12	+import { ProfileActionsComponent } from "./profile-actions.component";
	13	+import { ConfigBarComponent } from "./config-bar.component";
	14	+import { TasksComponent } from "../task/tasks/tasks.component";
	15	+
14	16	/**
15	17	* @ngdoc controller
16	18	* @name profile.Profile
...	...	@@ -92,6 +94,18 @@ import {ConfigBarComponent} from "./config-bar.component";
92	94	}
93	95	},
94	96	{
	97	+ name: 'main.profile.tasks',
	98	+ url: "^/myprofile/:profile/tasks",
	99	+ component: TasksComponent,
	100	+ views: {
	101	+ "mainBlockContent": {
	102	+ templateUrl: "app/task/tasks/tasks.html",
	103	+ controller: TasksComponent,
	104	+ controllerAs: "vm"
	105	+ }
	106	+ }
	107	+ },
	108	+ {
95	109	name: 'main.profile.home',
96	110	url: "",
97	111	component: ProfileHomeComponent,
...	...
...	...	@@ -31,13 +31,13 @@ export class EventsHubService {
31	31	emitEvent(eventType: string, payload?: any) {
32	32	this.checkKnownEvent(eventType);
33	33	let event = this.emitters.get(eventType);
34		- if ( event ) this.emitters.get(eventType).next(payload);
	34	+ if (event) this.emitters.get(eventType).next(payload);
35	35	}
36	36
37	37	subscribeToEvent<T>(eventType: string, generatorOrNext?: ((p?: T) => void), error?: any, complete?: any) {
38	38	this.checkKnownEvent(eventType);
39	39	let event = this.emitters.get(eventType);
40		- if (event) event.subscribe(generatorOrNext, error, complete);
	40	+ if (event) event.subscribe(generatorOrNext, error, complete);
41	41	}
42	42
43	43	private setupEmitters() {
...	...	@@ -53,4 +53,4 @@ export class EventsHubService {
53	53	}
54	54
55	55
56		-}
57	56	\ No newline at end of file
	57	+}
...	...
...	...	@@ -0,0 +1,10 @@
	1	+<div class="task-accept task-confirmation">
	2	+ <div class="accept-title confirmation-title">{{"tasks.actions.accept.confirmation.title" \| translate}}</div>
	3	+ <div class="accept-fields confirmation-details">
	4	+ <task-accept ng-if="ctrl.currentTask.accept_details" [task]="ctrl.currentTask" [confirmation-task]="ctrl.confirmationTask"></task-accept>
	5	+ </div>
	6	+ <div class="actions">
	7	+ <button type="submit" class="btn btn-default" ng-click="ctrl.callAccept()">{{"tasks.actions.confirmation.yes" \| translate}}</button>
	8	+ <button type="button" class="btn btn-warning" ng-click="ctrl.cancel()">{{"tasks.actions.confirmation.cancel" \| translate}}</button>
	9	+ </div>
	10	+</div>
...	...
...	...	@@ -0,0 +1,10 @@
	1	+<div class="task-reject task-confirmation">
	2	+ <div class="reject-title confirmation-title">{{"tasks.actions.reject.confirmation.title" \| translate}}</div>
	3	+ <div class="reject-fields confirmation-details">
	4	+ <input ng-model="ctrl.confirmationTask.reject_explanation" id="rejectionExplanationInput" type="text" placeholder="{{'tasks.actions.reject.explanation.label' \| translate}}" class="rejection-explanation form-control">
	5	+ </div>
	6	+ <div class="actions">
	7	+ <button type="submit" class="btn btn-default" ng-click="ctrl.callReject()">{{"tasks.actions.confirmation.yes" \| translate}}</button>
	8	+ <button type="button" class="btn btn-warning" ng-click="ctrl.cancel()">{{"tasks.actions.confirmation.cancel" \| translate}}</button>
	9	+ </div>
	10	+</div>
...	...
...	...	@@ -0,0 +1,33 @@
	1	+import { Provider, provide, Component } from 'ng-forward';
	2	+import * as helpers from "../../../spec/helpers";
	3	+import { TaskAcceptComponent } from './task-accept.component';
	4	+
	5	+const htmlTemplate: string = '<task-accept [task]="ctrl.task"></task-accept>';
	6	+
	7	+describe("Components", () => {
	8	+ describe("Task Accept Component", () => {
	9	+
	10	+ let task = { id: 1, type: "AddMember" };
	11	+ let roleService = jasmine.createSpyObj("roleService", ["getByProfile"]);
	12	+
	13	+ beforeEach(angular.mock.module("templates"));
	14	+
	15	+ function createComponent() {
	16	+ return helpers.quickCreateComponent({
	17	+ template: htmlTemplate,
	18	+ directives: [TaskAcceptComponent],
	19	+ properties: { task: task },
	20	+ providers: [
	21	+ helpers.createProviderToValue("RoleService", roleService)
	22	+ ].concat(helpers.provideFilters("translateFilter"))
	23	+ });
	24	+ }
	25	+
	26	+ it("replace element with the specific task accept component", (done: Function) => {
	27	+ createComponent().then(fixture => {
	28	+ expect(fixture.debugElement.queryAll("add-member-task-accept").length).toBe(1);
	29	+ done();
	30	+ });
	31	+ });
	32	+ });
	33	+});
...	...
...	...	@@ -0,0 +1,22 @@
	1	+import { Input, Inject, Component } from 'ng-forward';
	2	+import { AddMemberTaskAcceptComponent } from "../types/add-member/add-member-task-accept.component";
	3	+
	4	+@Component({
	5	+ selector: 'task-accept',
	6	+ template: '<div></div>',
	7	+ directives: [AddMemberTaskAcceptComponent]
	8	+})
	9	+@Inject("$element", "$scope", "$injector", "$compile")
	10	+export class TaskAcceptComponent {
	11	+
	12	+ @Input() task: noosfero.Task;
	13	+ @Input() confirmationTask: noosfero.Task;
	14	+
	15	+ ngOnInit() {
	16	+ let componentName = this.task.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	17	+ componentName += "-task-accept";
	18	+ this.$element.replaceWith(this.$compile(`<${componentName} [task]="ctrl.task" [confirmation-task]="ctrl.confirmationTask"></${componentName}>`)(this.$scope));
	19	+ }
	20	+
	21	+ constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) { }
	22	+}
...	...