From 41eb8af1e2952abe13039ed2970dfaa4d74fd5c7 Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Wed, 20 Jul 2016 10:20:41 -0300
Subject: [PATCH] Add component to list tasks

---
 src/app/main/main.component.ts                  |  3 ++-
 src/app/profile/profile.component.ts            | 40 +++++++++++++++++++++++++++-------------
 src/app/task/task-list/task-list.component.ts   | 20 ++++++++++++++++++++
 src/app/task/task-list/task-list.html           | 16 ++++++++++++++++
 src/app/task/task-list/task-list.scss           | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 src/app/task/tasks-menu/tasks-menu.component.ts |  7 +++++--
 src/app/task/tasks-menu/tasks-menu.html         | 21 ++++++---------------
 src/app/task/tasks-menu/tasks-menu.scss         | 50 ++++++++++++++++++++++++--------------------------
 src/app/task/tasks/tasks.component.ts           | 30 ++++++++++++++++++++++++++++++
 src/app/task/tasks/tasks.html                   |  8 ++++++++
 src/app/task/types/AddFriend.html               |  2 ++
 src/app/task/types/AddMember.html               |  2 ++
 src/app/task/types/CreateCommunity.html         |  2 ++
 src/app/task/types/default.html                 |  1 +
 src/languages/en.json                           |  3 ++-
 src/languages/pt.json                           |  3 ++-
 src/lib/ng-noosfero-api/http/task.service.ts    |  3 ++-
 17 files changed, 198 insertions(+), 60 deletions(-)
 create mode 100644 src/app/task/task-list/task-list.component.ts
 create mode 100644 src/app/task/task-list/task-list.html
 create mode 100644 src/app/task/task-list/task-list.scss
 create mode 100644 src/app/task/tasks/tasks.component.ts
 create mode 100644 src/app/task/tasks/tasks.html
 create mode 100644 src/app/task/types/AddFriend.html
 create mode 100644 src/app/task/types/AddMember.html
 create mode 100644 src/app/task/types/CreateCommunity.html
 create mode 100644 src/app/task/types/default.html

diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index afdfbf4..800a1e8 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -47,6 +47,7 @@ import { PermissionDirective } from "../shared/components/permission/permission.
 import { SearchComponent } from "../search/search.component";
 import { SearchFormComponent } from "../search/search-form/search-form.component";
 import { TasksMenuComponent } from "../task/tasks-menu/tasks-menu.component";
+import { TaskListComponent } from "../task/task-list/task-list.component";
 
 /**
  * @ngdoc controller
@@ -109,7 +110,7 @@ export class EnvironmentContent {
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
         LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
         PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent, BlockComponent,
-        TasksMenuComponent
+        TasksMenuComponent, TaskListComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
         "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
index a84fc3b..3d0ed1d 100644
--- a/src/app/profile/profile.component.ts
+++ b/src/app/profile/profile.component.ts
@@ -1,16 +1,18 @@
-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 "./config-bar.component";
         }
     },
     {
+        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,
diff --git a/src/app/task/task-list/task-list.component.ts b/src/app/task/task-list/task-list.component.ts
new file mode 100644
index 0000000..0d34995
--- /dev/null
+++ b/src/app/task/task-list/task-list.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from "ng-forward";
+
+@Component({
+    selector: "task-list",
+    templateUrl: "app/task/task-list/task-list.html",
+})
+export class TaskListComponent {
+
+    @Input() tasks: noosfero.Task[];
+
+    private taskTemplates = ["AddFriend", "AddMember", "CreateCommunity"];
+
+    getTaskTemplate(task: noosfero.Task) {
+        if (this.taskTemplates.indexOf(task.type) >= 0) {
+            return 'app/task/types/' + task.type + '.html';
+        } else {
+            return 'app/task/types/default.html';
+        }
+    }
+}
diff --git a/src/app/task/task-list/task-list.html b/src/app/task/task-list/task-list.html
new file mode 100644
index 0000000..cd7ac81
--- /dev/null
+++ b/src/app/task/task-list/task-list.html
@@ -0,0 +1,16 @@
+<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>
+      <span class="time">
+        <span class="bullet-separator">•</span> <span am-time-ago="task.created_at | dateFormat"></span>
+      </span>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/task/task-list/task-list.scss b/src/app/task/task-list/task-list.scss
new file mode 100644
index 0000000..5131177
--- /dev/null
+++ b/src/app/task/task-list/task-list.scss
@@ -0,0 +1,47 @@
+.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: 3px;
+    .task {
+      display: inline-block;
+      .task-icon {
+        font-size: 18px;
+        color: #e84e40;
+      }
+      .requestor, .target {
+         font-style: italic;
+      }
+    }
+    .time {
+      color: #c1c1c1;
+      font-size: 12px;
+      .bullet-separator {
+        font-size: 10px;
+        color: #d1d1d1;
+      }
+    }
+  }
+}
diff --git a/src/app/task/tasks-menu/tasks-menu.component.ts b/src/app/task/tasks-menu/tasks-menu.component.ts
index f02a836..b599abb 100644
--- a/src/app/task/tasks-menu/tasks-menu.component.ts
+++ b/src/app/task/tasks-menu/tasks-menu.component.ts
@@ -1,20 +1,23 @@
 import { Component, Inject } from "ng-forward";
 import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+import { SessionService } from "./../../login";
 
 @Component({
     selector: "tasks-menu",
     templateUrl: "app/task/tasks-menu/tasks-menu.html"
 })
-@Inject(TaskService)
+@Inject(TaskService, SessionService)
 export class TasksMenuComponent {
 
     tasks: noosfero.Task[];
     total: number;
     perPage: 5;
+    person: noosfero.Person;
 
-    constructor(private taskService: TaskService) { }
+    constructor(private taskService: TaskService, private session: SessionService) { }
 
     ngOnInit() {
+        this.person = this.session.currentUser() ? this.session.currentUser().person : null;
         this.taskService.getAllPending({ per_page: this.perPage }).then((result: noosfero.RestResult) => {
             this.total = result.headers('total');
             this.tasks = result.data;
diff --git a/src/app/task/tasks-menu/tasks-menu.html b/src/app/task/tasks-menu/tasks-menu.html
index 2830c1d..b1cba00 100644
--- a/src/app/task/tasks-menu/tasks-menu.html
+++ b/src/app/task/tasks-menu/tasks-menu.html
@@ -1,20 +1,11 @@
-<li class="btn-nav tasks-menu" uib-dropdown  ng-show="ctrl.total > 0">
+<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>
-  <ul class="dropdown-menu task-list" uib-dropdown-menu>
-    <li ng-repeat="(target, tasks) in ctrl.tasks | groupBy: 'target.name'">
-      {{target}}
-      <a href="#" ng-repeat="task in tasks | orderBy: 'created_at':true" class="task">
-        {{task.type}}
-        {{task.requestor.name}}
-        {{task.target.name}}
-        <span class="time">
-          <span class="bullet-separator">•</span> <span am-time-ago="task.created_at | dateFormat"></span>
-        </span>
-      </a>
-    </li>
-    <a href="#" class="all-tasks btn btn-default btn-xs">{{"tasks.menu.all" | translate}}</a>
-  </ul>
+  <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>
diff --git a/src/app/task/tasks-menu/tasks-menu.scss b/src/app/task/tasks-menu/tasks-menu.scss
index 938191c..ecbb577 100644
--- a/src/app/task/tasks-menu/tasks-menu.scss
+++ b/src/app/task/tasks-menu/tasks-menu.scss
@@ -1,32 +1,30 @@
-.tasks-menu {
-  position: relative;
-  margin-right: 0;
-  .badge {
-    position: absolute;
-    top: 1px;
-    right: 8px;
-    border-radius: 6px;
-  }
-  i {
-    color: #FFF;
-  }
-  .task-list {
-    width: 500px;
-    padding: 16px 16px 8px 16px;
-    .task {
-      .time {
-        color: #c1c1c1;
-        font-size: 12px;
-        .bullet-separator {
-          font-size: 10px;
-          color: #d1d1d1;
-        }
-      }
+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: inline-block;
+      width: 97%;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    .task-panel {
+      width: 550px;
+      padding-top: 0;
+    }
+    .task-menu-header {
+      text-align: center;
+      padding: 7px;
+      font-weight: bold;
     }
   }
 }
diff --git a/src/app/task/tasks/tasks.component.ts b/src/app/task/tasks/tasks.component.ts
new file mode 100644
index 0000000..8db03b3
--- /dev/null
+++ b/src/app/task/tasks/tasks.component.ts
@@ -0,0 +1,30 @@
+import { Component, Inject, provide } from "ng-forward";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+
+@Component({
+    selector: "tasks-component",
+    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) => {
+            this.total = result.headers('total');
+            this.tasks = result.data;
+        });
+    }
+
+}
diff --git a/src/app/task/tasks/tasks.html b/src/app/task/tasks/tasks.html
new file mode 100644
index 0000000..1725793
--- /dev/null
+++ b/src/app/task/tasks/tasks.html
@@ -0,0 +1,8 @@
+<h3>Tarefas</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>
diff --git a/src/app/task/types/AddFriend.html b/src/app/task/types/AddFriend.html
new file mode 100644
index 0000000..5201fa5
--- /dev/null
+++ b/src/app/task/types/AddFriend.html
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-user-plus"></i>
+<span class="requestor">{{task.requestor.name}}</span> wants to be friend of <span class="target">{{task.target.name}}</span>
diff --git a/src/app/task/types/AddMember.html b/src/app/task/types/AddMember.html
new file mode 100644
index 0000000..4248c7f
--- /dev/null
+++ b/src/app/task/types/AddMember.html
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-user-plus"></i>
+<span class="requestor">{{task.requestor.name}}</span> wants to join <span class="target">{{task.target.name}}</span>
diff --git a/src/app/task/types/CreateCommunity.html b/src/app/task/types/CreateCommunity.html
new file mode 100644
index 0000000..2583380
--- /dev/null
+++ b/src/app/task/types/CreateCommunity.html
@@ -0,0 +1,2 @@
+<i class="task-icon fa fa-users"></i>
+<span class="requestor">{{task.requestor.name}}</span> wants to create a new community: <span class="target">{{task.data.name}}</span>
diff --git a/src/app/task/types/default.html b/src/app/task/types/default.html
new file mode 100644
index 0000000..7732bdd
--- /dev/null
+++ b/src/app/task/types/default.html
@@ -0,0 +1 @@
+<!-- not implemented yet -->
diff --git a/src/languages/en.json b/src/languages/en.json
index 398cf2e..fe48b7b 100644
--- a/src/languages/en.json
+++ b/src/languages/en.json
@@ -98,5 +98,6 @@
   "block.edition.display_user.logged": "Logged",
   "block.edition.display_user.not_logged": "Not logged",
   "block.edition.language.label": "Show for:",
-  "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}}"
 }
diff --git a/src/languages/pt.json b/src/languages/pt.json
index b25ab78..b1c22f4 100644
--- a/src/languages/pt.json
+++ b/src/languages/pt.json
@@ -98,5 +98,6 @@
   "block.edition.display_user.logged": "Logados",
   "block.edition.display_user.not_logged": "Não logados",
   "block.edition.language.label": "Exibir para:",
-  "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}}"
 }
diff --git a/src/lib/ng-noosfero-api/http/task.service.ts b/src/lib/ng-noosfero-api/http/task.service.ts
index 7f39e95..ba94e40 100644
--- a/src/lib/ng-noosfero-api/http/task.service.ts
+++ b/src/lib/ng-noosfero-api/http/task.service.ts
@@ -21,6 +21,7 @@ export class TaskService extends RestangularService<noosfero.Task> {
     }
 
     getAllPending(params: any) {
-        return this.list(null, { all_pending: true });
+        params['all_pending'] = true;
+        return this.list(null, params);
     }
 }
--
libgit2 0.21.2