Add component to display tasks in menu

Victor Costa · Michel Felipe
1 parent f3cb9503
Showing 9 changed files with 125 additions and 5 deletions Show diff stats
src/app/layout/navbar/navbar.html
src/app/main/main.component.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/languages/en.json
src/languages/pt.json
src/lib/ng-noosfero-api/http/task.service.ts
src/lib/ng-noosfero-api/interfaces/task.ts
@@ -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>
@@ -52,6 +52,8 @@ import { SearchFormComponent } from &quot;../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";
+
 /**
  * @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
     ].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",
@@ -0,0 +1,24 @@
+import { Component, Inject } from "ng-forward";
+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
+
+@Component({
+    selector: "tasks-menu",
+    templateUrl: "app/task/tasks-menu/tasks-menu.html"
+})
+@Inject(TaskService)
+export class TasksMenuComponent {
+
+    tasks: noosfero.Task[];
+    total: number;
+    perPage: 5;
+
+    constructor(private taskService: TaskService) { }
+
+    ngOnInit() {
+        this.taskService.getAllPending({ per_page: this.perPage }).then((result: noosfero.RestResult) => {
+            this.total = result.headers('total');
+            this.tasks = result.data;
+        });
+    }
+
+}
@@ -0,0 +1,20 @@
+<li class="btn-nav tasks-menu" uib-dropdown  ng-show="ctrl.total > 0">
+  <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>
+</li>
@@ -0,0 +1,32 @@
+.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;
+        }
+      }
+    }
+    .all-tasks {
+      text-align: center;
+      width: 100%;
+      display: inline-block;
+    }
+  }
+}
@@ -124,5 +124,6 @@
   "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"
 }
@@ -128,4 +128,5 @@
   "messages.invalid.minlength": "O valor é muito curto",
   "messages.invalid.email": "Informe um email válido",
   "messages.invalid.passwordMatch": "As senhas não coincidem"
+  "tasks.menu.all": "Todas as tarefas"
 }
@@ -0,0 +1,26 @@
+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) {
+        return this.list(null, { all_pending: true });
+    }
+}
@@ -0,0 +1,11 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Task
+     * @description
+     *  A representation of a Task in Noosfero.
+     */
+    export interface Task extends RestModel {
+        type: string;
+    }
+}
...	...	@@ -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>
...	...
...	...	@@ -52,6 +52,8 @@ import { SearchFormComponent } from "../search/search-form/search-form.component
52	52
53	53	import { EVENTS_HUB_KNOW_EVENT_NAMES, EventsHubService } from "../shared/services/events-hub.service";
54	54	import { NoosferoKnownEvents } from "../known-events";
	55	+import { TasksMenuComponent } from "../task/tasks-menu/tasks-menu.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
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",
...	...
...	...	@@ -0,0 +1,24 @@
	1	+import { Component, Inject } from "ng-forward";
	2	+import { TaskService } from "../../../lib/ng-noosfero-api/http/task.service";
	3	+
	4	+@Component({
	5	+ selector: "tasks-menu",
	6	+ templateUrl: "app/task/tasks-menu/tasks-menu.html"
	7	+})
	8	+@Inject(TaskService)
	9	+export class TasksMenuComponent {
	10	+
	11	+ tasks: noosfero.Task[];
	12	+ total: number;
	13	+ perPage: 5;
	14	+
	15	+ constructor(private taskService: TaskService) { }
	16	+
	17	+ ngOnInit() {
	18	+ this.taskService.getAllPending({ per_page: this.perPage }).then((result: noosfero.RestResult) => {
	19	+ this.total = result.headers('total');
	20	+ this.tasks = result.data;
	21	+ });
	22	+ }
	23	+
	24	+}
...	...
...	...	@@ -0,0 +1,20 @@
	1	+<li class="btn-nav tasks-menu" uib-dropdown ng-show="ctrl.total > 0">
	2	+ <a href="#" uib-dropdown-toggle>
	3	+ <i class="fa fa-bell-o fa-fw fa-2x"></i>
	4	+ <span class="badge">{{ctrl.total}}</span>
	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>
	20	+</li>
...	...
...	...	@@ -0,0 +1,32 @@
	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	+ }
	25	+ }
	26	+ .all-tasks {
	27	+ text-align: center;
	28	+ width: 100%;
	29	+ display: inline-block;
	30	+ }
	31	+ }
	32	+}
...	...
...	...	@@ -124,5 +124,6 @@
124	124	"messages.invalid.maxlength": "This field is too long",
125	125	"messages.invalid.minlength": "This field is too short",
126	126	"messages.invalid.email": "This needs to be a valid email",
127		- "messages.invalid.passwordMatch": "Your passwords did not match"
	127	+ "messages.invalid.passwordMatch": "Your passwords did not match",
	128	+ "tasks.menu.all": "All tasks"
128	129	}
...	...
...	...	@@ -128,4 +128,5 @@
128	128	"messages.invalid.minlength": "O valor é muito curto",
129	129	"messages.invalid.email": "Informe um email válido",
130	130	"messages.invalid.passwordMatch": "As senhas não coincidem"
	131	+ "tasks.menu.all": "Todas as tarefas"
131	132	}
...	...
...	...	@@ -0,0 +1,26 @@
	1	+import { Injectable, Inject } from "ng-forward";
	2	+import { RestangularService } from "./restangular_service";
	3	+
	4	+@Injectable()
	5	+@Inject("Restangular", "$q", "$log")
	6	+export class TaskService extends RestangularService<noosfero.Task> {
	7	+
	8	+ constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService) {
	9	+ super(Restangular, $q, $log);
	10	+ }
	11	+
	12	+ getResourcePath() {
	13	+ return "tasks";
	14	+ }
	15	+
	16	+ getDataKeys() {
	17	+ return {
	18	+ singular: 'task',
	19	+ plural: 'tasks'
	20	+ };
	21	+ }
	22	+
	23	+ getAllPending(params: any) {
	24	+ return this.list(null, { all_pending: true });
	25	+ }
	26	+}
...	...
...	...	@@ -0,0 +1,11 @@
	1	+namespace noosfero {
	2	+ /**
	3	+ * @ngdoc interface
	4	+ * @name noosfero.Task
	5	+ * @description
	6	+ * A representation of a Task in Noosfero.
	7	+ */
	8	+ export interface Task extends RestModel {
	9	+ type: string;
	10	+ }
	11	+}
...	...