Commit 434c23df8dc59408f07368d7d1efad24d3cf3dea

Authored by Victor Costa
1 parent f0967aa0

Add component to list tasks

src/app/main/main.component.ts
... ... @@ -49,6 +49,7 @@ import { SearchFormComponent } from "../search/search-form/search-form.component
49 49 import { EVENTS_HUB_KNOW_EVENT_NAMES, EventsHubService } from "../shared/services/events-hub.service";
50 50 import { NoosferoKnownEvents } from "../known-events";
51 51 import { TasksMenuComponent } from "../task/tasks-menu/tasks-menu.component";
  52 +import { TaskListComponent } from "../task/task-list/task-list.component";
52 53  
53 54 /**
54 55 * @ngdoc controller
... ... @@ -115,7 +116,7 @@ export class EnvironmentContent {
115 116 MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
116 117 LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
117 118 PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent, BlockComponent,
118   - TasksMenuComponent
  119 + TasksMenuComponent, TaskListComponent
119 120 ].concat(plugins.mainComponents).concat(plugins.hotspots),
120 121 providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
121 122 "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
... ...
src/app/profile/profile.component.ts
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,
... ...
src/app/task/task-list/task-list.component.ts 0 → 100644
... ... @@ -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 +}
... ...
src/app/task/task-list/task-list.html 0 → 100644
... ... @@ -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>
... ...
src/app/task/task-list/task-list.scss 0 → 100644
... ... @@ -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 +}
... ...
src/app/task/tasks-menu/tasks-menu.component.ts
1 1 import { Component, Inject } from "ng-forward";
2 2 import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
  3 +import { SessionService } from "./../../login";
3 4  
4 5 @Component({
5 6 selector: "tasks-menu",
6 7 templateUrl: "app/task/tasks-menu/tasks-menu.html"
7 8 })
8   -@Inject(TaskService)
  9 +@Inject(TaskService, SessionService)
9 10 export class TasksMenuComponent {
10 11  
11 12 tasks: noosfero.Task[];
12 13 total: number;
13 14 perPage: 5;
  15 + person: noosfero.Person;
14 16  
15   - constructor(private taskService: TaskService) { }
  17 + constructor(private taskService: TaskService, private session: SessionService) { }
16 18  
17 19 ngOnInit() {
  20 + this.person = this.session.currentUser() ? this.session.currentUser().person : null;
18 21 this.taskService.getAllPending({ per_page: this.perPage }).then((result: noosfero.RestResult) => {
19 22 this.total = result.headers('total');
20 23 this.tasks = result.data;
... ...
src/app/task/tasks-menu/tasks-menu.html
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 2 <a href="#" uib-dropdown-toggle>
3 3 <i class="fa fa-bell-o fa-fw fa-2x"></i>
4 4 <span class="badge">{{ctrl.total}}</span>
5 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 11 </li>
... ...
src/app/task/tasks-menu/tasks-menu.scss
1   -.tasks-menu {
2   - position: relative;
3   - margin-right: 0;
4   - .badge {
5   - position: absolute;
6   - top: 1px;
7   - right: 8px;
8   - border-radius: 6px;
9   - }
10   - i {
11   - color: #FFF;
12   - }
13   - .task-list {
14   - width: 500px;
15   - padding: 16px 16px 8px 16px;
16   - .task {
17   - .time {
18   - color: #c1c1c1;
19   - font-size: 12px;
20   - .bullet-separator {
21   - font-size: 10px;
22   - color: #d1d1d1;
23   - }
24   - }
  1 +tasks-menu {
  2 + .tasks-menu {
  3 + position: relative;
  4 + margin-right: 0;
  5 + .badge {
  6 + position: absolute;
  7 + top: 1px;
  8 + right: 8px;
  9 + border-radius: 6px;
  10 + background-color: #e84e40;
  11 + color: #fff;
25 12 }
26 13 .all-tasks {
27 14 text-align: center;
28   - width: 100%;
29   - display: inline-block;
  15 + width: 97%;
  16 + display: block;
  17 + margin-left: auto;
  18 + margin-right: auto;
  19 + }
  20 + .task-panel {
  21 + width: 550px;
  22 + padding-top: 0;
  23 + }
  24 + .task-menu-header {
  25 + text-align: center;
  26 + padding: 7px;
  27 + font-weight: bold;
30 28 }
31 29 }
32 30 }
... ...
src/app/task/tasks/tasks.component.ts 0 → 100644
... ... @@ -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 +}
... ...
src/app/task/tasks/tasks.html 0 → 100644
... ... @@ -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>
... ...
src/app/task/types/AddFriend.html 0 → 100644
... ... @@ -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>
... ...
src/app/task/types/AddMember.html 0 → 100644
... ... @@ -0,0 +1,2 @@
  1 +<i class="task-icon fa fa-user-plus"></i>
  2 +<span class="requestor">{{task.requestor.name}}</span> wants to join <span class="target">{{task.target.name}}</span>
... ...
src/app/task/types/CreateCommunity.html 0 → 100644
... ... @@ -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>
... ...
src/app/task/types/default.html 0 → 100644
... ... @@ -0,0 +1 @@
  1 +<!-- not implemented yet -->
... ...
src/languages/en.json
... ... @@ -101,5 +101,7 @@
101 101 "activities.event.description": "Event on",
102 102 "time.at": "at",
103 103 "date.on": "On",
104   - "tasks.menu.all": "All tasks"
  104 + "tasks.menu.all": "All tasks",
  105 + "tasks.menu.all": "See all tasks",
  106 + "tasks.menu.header": "You have {tasks, plural, one{one pending task} other{# pending tasks}}"
105 107 }
... ...
src/languages/pt.json
... ... @@ -101,5 +101,7 @@
101 101 "activities.event.description": "Evento em",
102 102 "time.at": "às",
103 103 "date.on": "Em",
104   - "tasks.menu.all": "Todas as tarefas"
  104 + "tasks.menu.all": "Todas as tarefas",
  105 + "tasks.menu.all": "Veja todas as tarefas",
  106 + "tasks.menu.header": "Você tem {tasks, plural, one{uma tarefa pendente} other{# tarefas pendentes}}"
105 107 }
... ...
src/lib/ng-noosfero-api/http/task.service.ts
... ... @@ -21,6 +21,7 @@ export class TaskService extends RestangularService&lt;noosfero.Task&gt; {
21 21 }
22 22  
23 23 getAllPending(params: any) {
24   - return this.list(null, { all_pending: true });
  24 + params['all_pending'] = true;
  25 + return this.list(null, params);
25 26 }
26 27 }
... ...