add first steps for activities block

Signed-off-by: ArthurJahn <stutrzbecher@gmail.com> Signed-off-by: Artur Bersan de Faria <arturbersan@gmail.com>

add first steps for activities block
Signed-off-by: ArthurJahn <stutrzbecher@gmail.com> Signed-off-by: Artur Bersan de Faria <arturbersan@gmail.com>
Arthur Sturzbecher
1 parent 9849cd64
Showing 13 changed files with 206 additions and 1 deletions Show diff stats
src/app/layout/blocks/activities/activities-block.component.spec.ts
src/app/layout/blocks/activities/activities-block.component.ts
src/app/layout/blocks/activities/activities-block.html
src/app/layout/blocks/activities/activities-block.scss
src/app/layout/blocks/activities/activity/activity.component.spec.ts
src/app/layout/blocks/activities/activity/activity.component.ts
src/app/layout/blocks/activities/activity/activity.html
src/app/layout/blocks/activities/activity/add_member_in_community.html
src/app/layout/blocks/activities/activity/create_article.html
src/app/layout/blocks/activities/activity/index.ts
src/app/layout/blocks/activities/activity/new_friendship.html
src/app/layout/blocks/activities/index.ts
src/app/main/main.component.ts
@@ -0,0 +1,36 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+
+import {ActivitiesBlockComponent} from './activities-block.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activities [activities]="ctrl.activities"></noosfero-activities>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activities", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [ActivitiesBlockComponent],
+            providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
+        })
+        class BlockContainerComponent {
+            activities = [{ name: "activity1", verb: "create_article" }, { name: "activity2", verb: "create_article" }];
+        }
+
+        it("render a noosfero activity tag for each activity", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("noosfero-activity").length).toEqual(2);
+                done();
+            });
+        });
+    });
+
+});
@@ -0,0 +1,36 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ActivityComponent} from "./activity/activity.component";
+import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
+
+/**
+ * @ngdoc controller
+ * @name NoosferoActivities
+ * @description
+ *  The controller responsible to retreive profile activities.
+ */
+
+@Component({
+    selector: "noosfero-activities",
+    templateUrl: 'app/layout/blocks/activities/activities.html',
+    directives: [ActivityComponent]
+})
+
+@Inject(ProfileService)
+export class ActivitiesBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    activities: any;
+
+    ngOnInit() {
+        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        return this.profileService.getActivities(<number>this.owner.id)
+            .then((response: restangular.IResponse) => {
+                this.activities = response.data.activities;
+            });
+    }
+
+    constructor(private profileService: ProfileService) { }
+
+}
@@ -0,0 +1,5 @@
+<timeline>
+  <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
+    <noosfero-activity [activity]="activity"></noosfero-activity>
+  </timeline-event>
+</timeline>
@@ -0,0 +1,11 @@
+.comma-separated {
+  .separated-item {
+    &:after {
+      content: ", ";
+      margin-left: -3px;
+    }
+    &:last-child:after {
+      content: "";
+    }
+  }
+}
@@ -0,0 +1,38 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../../spec/helpers';
+
+import {ActivityComponent} from './activity.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activity [activity]="ctrl.activity"></noosfero-activity>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activity", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [ActivityComponent],
+            providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
+        })
+        class BlockContainerComponent {
+            activity = { name: "activity1", verb: "create_article" };
+        }
+
+        it("render the specific template for an activity verb", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(component.getActivityTemplate()).toEqual('app/profile/activities/activity/create_article.html');
+                expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
+                done();
+            });
+        });
+    });
+
+});
@@ -0,0 +1,15 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-activity",
+    templateUrl: 'app/profile/activities/activity/activity.html'
+})
+export class ActivityComponent {
+
+    @Input() activity: noosfero.Activity;
+
+    getActivityTemplate() {
+        return 'app/profile/activities/activity/' + this.activity.verb + '.html';
+    }
+
+}
@@ -0,0 +1,3 @@
+<div class="activity {{ctrl.activity.verb}}">
+  <ng-include src="ctrl.getActivityTemplate()"></ng-include>
+</div>
@@ -0,0 +1,13 @@
+<timeline-badge class="info">
+  <i class="fa fa-user-plus"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
+    <h4 class="timeline-title">
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> {{"activities.add_member_in_community.description" | translate}}</span>
+    </h4>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
+  </timeline-heading>
+  <div class="timeline-body"></div>
+</timeline-panel>
@@ -0,0 +1,26 @@
+<timeline-badge class="success">
+  <i class="fa fa-file-text"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
+    <h4 class="timeline-title">
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> {{"activities.create_article.description" | translate}} </span>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.target.article.profile.identifier})">
+        <strong ng-bind="ctrl.activity.target.article.profile.name"></strong></span>
+      </a>
+    </h4>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
+  </timeline-heading>
+  <div class="timeline-body">
+    <div class="article">
+      <div class="title">
+        <a ui-sref="main.profile.page({profile: ctrl.activity.target.article.profile.identifier, page: ctrl.activity.target.article.path})"
+           ng-bind="ctrl.activity.target.article.title"></a>
+      </div>
+      <div class="lead small">
+        <div ng-bind-html="ctrl.activity.target.article.body | stripTags | truncate: 100 : '...': true"></div>
+      </div>
+    </div>
+  </div>
+</timeline-panel>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./activity.component";
@@ -0,0 +1,18 @@
+<timeline-badge class="info">
+  <i class="fa fa-user-plus"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
+    <h4 class="timeline-title">
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> {{"activities.new_friendship.description" | translate:{friends: ctrl.activity.params.friend_name.length}:"messageformat" }} </span>
+      <span class="comma-separated">
+        <a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">
+          <strong ng-bind="friend"></strong>
+        </a>
+      </span>
+    </h4>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at | dateFormat"></span></small></p>
+  </timeline-heading>
+  <div class="timeline-body"></div>
+</timeline-panel>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./activities-block.component";
@@ -16,7 +16,7 @@ import {RecentDocumentsBlockComponent} from &quot;../layout/blocks/recent-documents/r
 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
 import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
-
+import {ActivitiesBlockComponent} from "../layout/blocks/activities/activities-block.component";
 import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
 import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
...	...	@@ -0,0 +1,36 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Pipe, Input, provide, Component} from 'ng-forward';
	3	+import {provideFilters} from '../../../../spec/helpers';
	4	+
	5	+import {ActivitiesBlockComponent} from './activities-block.component';
	6	+
	7	+const tcb = new TestComponentBuilder();
	8	+
	9	+const htmlTemplate: string = '<noosfero-activities [activities]="ctrl.activities"></noosfero-activities>';
	10	+
	11	+
	12	+describe("Components", () => {
	13	+
	14	+ describe("Noosfero Activities", () => {
	15	+
	16	+ beforeEach(angular.mock.module("templates"));
	17	+
	18	+ @Component({
	19	+ selector: 'test-container-component',
	20	+ template: htmlTemplate,
	21	+ directives: [ActivitiesBlockComponent],
	22	+ providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
	23	+ })
	24	+ class BlockContainerComponent {
	25	+ activities = [{ name: "activity1", verb: "create_article" }, { name: "activity2", verb: "create_article" }];
	26	+ }
	27	+
	28	+ it("render a noosfero activity tag for each activity", done => {
	29	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	30	+ expect(fixture.debugElement.queryAll("noosfero-activity").length).toEqual(2);
	31	+ done();
	32	+ });
	33	+ });
	34	+ });
	35	+
	36	+});
...	...
...	...	@@ -0,0 +1,36 @@
	1	+import {Input, Inject, Component} from "ng-forward";
	2	+import {ActivityComponent} from "./activity/activity.component";
	3	+import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
	4	+
	5	+/**
	6	+ * @ngdoc controller
	7	+ * @name NoosferoActivities
	8	+ * @description
	9	+ * The controller responsible to retreive profile activities.
	10	+ */
	11	+
	12	+@Component({
	13	+ selector: "noosfero-activities",
	14	+ templateUrl: 'app/layout/blocks/activities/activities.html',
	15	+ directives: [ActivityComponent]
	16	+})
	17	+
	18	+@Inject(ProfileService)
	19	+export class ActivitiesBlockComponent {
	20	+
	21	+ @Input() block: noosfero.Block;
	22	+ @Input() owner: noosfero.Profile;
	23	+
	24	+ activities: any;
	25	+
	26	+ ngOnInit() {
	27	+ let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) \|\| 5;
	28	+ return this.profileService.getActivities(<number>this.owner.id)
	29	+ .then((response: restangular.IResponse) => {
	30	+ this.activities = response.data.activities;
	31	+ });
	32	+ }
	33	+
	34	+ constructor(private profileService: ProfileService) { }
	35	+
	36	+}
...	...
...	...	@@ -0,0 +1,5 @@
	1	+<timeline>
	2	+ <timeline-event ng-repeat="activity in ctrl.activities \| orderBy: 'created_at':true">
	3	+ <noosfero-activity [activity]="activity"></noosfero-activity>
	4	+ </timeline-event>
	5	+</timeline>
...	...
...	...	@@ -0,0 +1,11 @@
	1	+.comma-separated {
	2	+ .separated-item {
	3	+ &:after {
	4	+ content: ", ";
	5	+ margin-left: -3px;
	6	+ }
	7	+ &:last-child:after {
	8	+ content: "";
	9	+ }
	10	+ }
	11	+}
...	...
...	...	@@ -0,0 +1,38 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Pipe, Input, provide, Component} from 'ng-forward';
	3	+import {provideFilters} from '../../../../../spec/helpers';
	4	+
	5	+import {ActivityComponent} from './activity.component';
	6	+
	7	+const tcb = new TestComponentBuilder();
	8	+
	9	+const htmlTemplate: string = '<noosfero-activity [activity]="ctrl.activity"></noosfero-activity>';
	10	+
	11	+
	12	+describe("Components", () => {
	13	+
	14	+ describe("Noosfero Activity", () => {
	15	+
	16	+ beforeEach(angular.mock.module("templates"));
	17	+
	18	+ @Component({
	19	+ selector: 'test-container-component',
	20	+ template: htmlTemplate,
	21	+ directives: [ActivityComponent],
	22	+ providers: provideFilters("truncateFilter", "stripTagsFilter", "translateFilter")
	23	+ })
	24	+ class BlockContainerComponent {
	25	+ activity = { name: "activity1", verb: "create_article" };
	26	+ }
	27	+
	28	+ it("render the specific template for an activity verb", done => {
	29	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	30	+ let component: ActivityComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	31	+ expect(component.getActivityTemplate()).toEqual('app/profile/activities/activity/create_article.html');
	32	+ expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
	33	+ done();
	34	+ });
	35	+ });
	36	+ });
	37	+
	38	+});
...	...
...	...	@@ -0,0 +1,15 @@
	1	+import {Component, Input} from "ng-forward";
	2	+
	3	+@Component({
	4	+ selector: "noosfero-activity",
	5	+ templateUrl: 'app/profile/activities/activity/activity.html'
	6	+})
	7	+export class ActivityComponent {
	8	+
	9	+ @Input() activity: noosfero.Activity;
	10	+
	11	+ getActivityTemplate() {
	12	+ return 'app/profile/activities/activity/' + this.activity.verb + '.html';
	13	+ }
	14	+
	15	+}
...	...
...	...	@@ -0,0 +1,3 @@
	1	+<div class="activity {{ctrl.activity.verb}}">
	2	+ <ng-include src="ctrl.getActivityTemplate()"></ng-include>
	3	+</div>
...	...
...	...	@@ -0,0 +1,13 @@
	1	+<timeline-badge class="info">
	2	+ <i class="fa fa-user-plus"></i>
	3	+</timeline-badge>
	4	+<timeline-panel>
	5	+ <timeline-heading>
	6	+ <h4 class="timeline-title">
	7	+ <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
	8	+ <span> {{"activities.add_member_in_community.description" \| translate}}</span>
	9	+ </h4>
	10	+ <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at \| dateFormat"></span></small></p>
	11	+ </timeline-heading>
	12	+ <div class="timeline-body"></div>
	13	+</timeline-panel>
...	...
...	...	@@ -0,0 +1,26 @@
	1	+<timeline-badge class="success">
	2	+ <i class="fa fa-file-text"></i>
	3	+</timeline-badge>
	4	+<timeline-panel>
	5	+ <timeline-heading>
	6	+ <h4 class="timeline-title">
	7	+ <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
	8	+ <span> {{"activities.create_article.description" \| translate}} </span>
	9	+ <a ui-sref="main.profile.info({profile: ctrl.activity.target.article.profile.identifier})">
	10	+ <strong ng-bind="ctrl.activity.target.article.profile.name"></strong></span>
	11	+ </a>
	12	+ </h4>
	13	+ <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at \| dateFormat"></span></small></p>
	14	+ </timeline-heading>
	15	+ <div class="timeline-body">
	16	+ <div class="article">
	17	+ <div class="title">
	18	+ <a ui-sref="main.profile.page({profile: ctrl.activity.target.article.profile.identifier, page: ctrl.activity.target.article.path})"
	19	+ ng-bind="ctrl.activity.target.article.title"></a>
	20	+ </div>
	21	+ <div class="lead small">
	22	+ <div ng-bind-html="ctrl.activity.target.article.body \| stripTags \| truncate: 100 : '...': true"></div>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+</timeline-panel>
...	...
...	...	@@ -0,0 +1,2 @@
	1	+/* Module Index Entry - generated using the script npm run generate-index */
	2	+export * from "./activity.component";
...	...