Add component to list tasks

Victor Costa
1 parent d948a68c
Showing 17 changed files with 198 additions and 60 deletions Show diff stats
src/app/main/main.component.ts
src/app/profile/profile.component.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.ts
src/app/task/tasks-menu/tasks-menu.html
src/app/task/tasks-menu/tasks-menu.scss
src/app/task/tasks/tasks.component.ts
src/app/task/tasks/tasks.html
src/app/task/types/AddFriend.html
src/app/task/types/AddMember.html
src/app/task/types/CreateCommunity.html
src/app/task/types/default.html
src/languages/en.json
src/languages/pt.json
src/lib/ng-noosfero-api/http/task.service.ts
@@ -47,6 +47,7 @@ import { PermissionDirective } from &quot;../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",
-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,
@@ -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';
+        }
+    }
+}
@@ -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>
@@ -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;
+      }
+    }
+  }
+}
 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;
-<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>
-.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;
     }
   }
 }
@@ -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;
+        });
+    }
+
+}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1 @@
+<!-- not implemented yet -->
@@ -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}}"
 }
@@ -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}}"
 }
@@ -21,6 +21,7 @@ export class TaskService extends RestangularService&lt;noosfero.Task&gt; {
     }
     getAllPending(params: any) {
-        return this.list(null, { all_pending: true });
+        params['all_pending'] = true;
+        return this.list(null, params);
     }
 }
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	* @ngdoc controller	17	* @ngdoc controller
16	* @name profile.Profile	18	* @name profile.Profile
	@@ -92,6 +94,18 @@ import {ConfigBarComponent} from "./config-bar.component";		@@ -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	name: 'main.profile.home',	109	name: 'main.profile.home',
96	url: "",	110	url: "",
97	component: ProfileHomeComponent,	111	component: ProfileHomeComponent,
@@ -0,0 +1,20 @@		@@ -0,0 +1,20 @@
	1	+import { Component, Input } from "ng-forward";
	2	+
	3	+@Component({
	4	+ selector: "task-list",
	5	+ templateUrl: "app/task/task-list/task-list.html",
	6	+})
	7	+export class TaskListComponent {
	8	+
	9	+ @Input() tasks: noosfero.Task[];
	10	+
	11	+ private taskTemplates = ["AddFriend", "AddMember", "CreateCommunity"];
	12	+
	13	+ getTaskTemplate(task: noosfero.Task) {
	14	+ if (this.taskTemplates.indexOf(task.type) >= 0) {
	15	+ return 'app/task/types/' + task.type + '.html';
	16	+ } else {
	17	+ return 'app/task/types/default.html';
	18	+ }
	19	+ }
	20	+}
@@ -0,0 +1,16 @@		@@ -0,0 +1,16 @@
	1	+<ul class="task-list">
	2	+ <li class="task-group" ng-repeat="(target, tasks) in ctrl.tasks \| groupBy: 'target.name'">
	3	+ <div class="task-target">
	4	+ <noosfero-profile-image ng-if="tasks[0].target.type" [profile]="tasks[0].target"></noosfero-profile-image>
	5	+ <div class="target-name">{{target}}</div>
	6	+ </div>
	7	+ <div class="task-body" ng-repeat="task in tasks \| orderBy: 'created_at':true">
	8	+ <div class="task">
	9	+ <ng-include src="ctrl.getTaskTemplate(task)"></ng-include>
	10	+ </div>
	11	+ <span class="time">
	12	+ <span class="bullet-separator">•</span> <span am-time-ago="task.created_at \| dateFormat"></span>
	13	+ </span>
	14	+ </div>
	15	+ </li>
	16	+</ul>
@@ -0,0 +1,47 @@		@@ -0,0 +1,47 @@
	1	+.task-list {
	2	+ width: 100%;
	3	+ padding: 0;
	4	+ list-style-type: none;
	5	+ .task-group {
	6	+ border-top: 1px solid #f3f3f3;
	7	+ padding: 4px 16px 8px 16px;
	8	+ }
	9	+ .task-target {
	10	+ margin-top: 12px;
	11	+ .profile-image {
	12	+ color: #2c3e50;
	13	+ font-size: 25px;
	14	+ width: 25px;
	15	+ display: inline-block;
	16	+ @extend .img-rounded;
	17	+ }
	18	+ .target-name {
	19	+ display: inline-block;
	20	+ margin-left: 10px;
	21	+ font-size: 18px;
	22	+ font-weight: bold;
	23	+ }
	24	+ }
	25	+ .task-body {
	26	+ margin-left: 35px;
	27	+ padding: 3px;
	28	+ .task {
	29	+ display: inline-block;
	30	+ .task-icon {
	31	+ font-size: 18px;
	32	+ color: #e84e40;
	33	+ }
	34	+ .requestor, .target {
	35	+ font-style: italic;
	36	+ }
	37	+ }
	38	+ .time {
	39	+ color: #c1c1c1;
	40	+ font-size: 12px;
	41	+ .bullet-separator {
	42	+ font-size: 10px;
	43	+ color: #d1d1d1;
	44	+ }
	45	+ }
	46	+ }
	47	+}
1	-<li class="btn-nav tasks-menu" uib-dropdown ng-show="ctrl.total > 0">	1	+<li class="btn-nav tasks-menu" uib-dropdown ng-show="ctrl.total > 0" ng-if="ctrl.total">
2	<a href="#" uib-dropdown-toggle>	2	<a href="#" uib-dropdown-toggle>
3	<i class="fa fa-bell-o fa-fw fa-2x"></i>	3	<i class="fa fa-bell-o fa-fw fa-2x"></i>
4	<span class="badge">{{ctrl.total}}</span>	4	<span class="badge">{{ctrl.total}}</span>
5	</a>	5	</a>
6	- <ul class="dropdown-menu task-list" uib-dropdown-menu>
7	- <li ng-repeat="(target, tasks) in ctrl.tasks \| groupBy: 'target.name'">
8	- {{target}}
9	- <a href="#" ng-repeat="task in tasks \| orderBy: 'created_at':true" class="task">
10	- {{task.type}}
11	- {{task.requestor.name}}
12	- {{task.target.name}}
13	- <span class="time">
14	- <span class="bullet-separator">•</span> <span am-time-ago="task.created_at \| dateFormat"></span>
15	- </span>
16	- </a>
17	- </li>
18	- <a href="#" class="all-tasks btn btn-default btn-xs">{{"tasks.menu.all" \| translate}}</a>
19	- </ul>	6	+ <div class="dropdown-menu task-panel" uib-dropdown-menu>
		7	+ <div class="task-menu-header">{{"tasks.menu.header" \| translate:{tasks: ctrl.total}:"messageformat"}}</div>
		8	+ <task-list [tasks]="ctrl.tasks"></task-list>
		9	+ <a ui-sref="main.profile.tasks({profile: ctrl.person.identifier})" class="all-tasks btn btn-default btn-xs">{{"tasks.menu.all" \| translate}}</a>
		10	+ </div>
20	</li>	11	</li>
@@ -0,0 +1,30 @@		@@ -0,0 +1,30 @@
	1	+import { Component, Inject, provide } from "ng-forward";
	2	+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
	3	+
	4	+@Component({
	5	+ selector: "tasks-component",
	6	+ templateUrl: "app/task/tasks/tasks.html",
	7	+ providers: [
	8	+ provide('taskService', { useClass: TaskService })
	9	+ ]
	10	+})
	11	+@Inject(TaskService)
	12	+export class TasksComponent {
	13	+
	14	+ tasks: noosfero.Task[];
	15	+ total: number;
	16	+ currentPage: number;
	17	+ perPage: 5;
	18	+
	19	+ constructor(private taskService: TaskService) {
	20	+ this.loadPage();
	21	+ }
	22	+
	23	+ loadPage() {
	24	+ this.taskService.getAllPending({ page: this.currentPage, per_page: this.perPage }).then((result: noosfero.RestResult) => {
	25	+ this.total = result.headers('total');
	26	+ this.tasks = result.data;
	27	+ });
	28	+ }
	29	+
	30	+}
@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
	1	+<h3>Tarefas</h3>
	2	+
	3	+<task-list [tasks]="vm.tasks"></task-list>
	4	+
	5	+<uib-pagination ng-model="vm.currentPage" total-items="vm.total" class="pagination-sm center-block"
	6	+ boundary-links="true" items-per-page="vm.perPage" ng-change="vm.loadPage()"
	7	+ first-text="«" last-text="»" previous-text="‹" next-text="›">
	8	+</uib-pagination>
@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
	1	+<i class="task-icon fa fa-user-plus"></i>
	2	+<span class="requestor">{{task.requestor.name}}</span> wants to be friend of <span class="target">{{task.target.name}}</span>
@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
	1	+<i class="task-icon fa fa-users"></i>
	2	+<span class="requestor">{{task.requestor.name}}</span> wants to create a new community: <span class="target">{{task.data.name}}</span>
	@@ -98,5 +98,6 @@		@@ -98,5 +98,6 @@
98	"block.edition.display_user.logged": "Logged",	98	"block.edition.display_user.logged": "Logged",
99	"block.edition.display_user.not_logged": "Not logged",	99	"block.edition.display_user.not_logged": "Not logged",
100	"block.edition.language.label": "Show for:",	100	"block.edition.language.label": "Show for:",
101	- "tasks.menu.all": "All tasks"	101	+ "tasks.menu.all": "See all tasks",
		102	+ "tasks.menu.header": "You have {tasks, plural, one{one pending task} other{# pending tasks}}"
102	}	103	}