Commit 434c23df8dc59408f07368d7d1efad24d3cf3dea
1 parent
f0967aa0
Add component to list tasks
Showing
17 changed files
with
200 additions
and
60 deletions
Show diff stats
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, | ... | ... |
... | ... | @@ -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 @@ |
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 @@ |
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 | } | ... | ... |
... | ... | @@ -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 @@ |
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 @@ |
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