Commit 734ad25f6107d6f09737e3dc4edf44d0c2d30651

Authored by Caio Almeida
1 parent 4fe8f447

[WIP] Ticket #76: Recent activities block: Tests, CSS and templates infrastructu…

…re (with already two templates implemented)
src/app/layout/blocks/recent-activities-plugin-activities/activities/create_article.html 0 → 100644
... ... @@ -0,0 +1 @@
  1 +{{'published an article:' | translate}} <a ng-href="{{ctrl.urlFor(activity.params.url)}}">{{activity.params.name}}</a>
... ...
src/app/layout/blocks/recent-activities-plugin-activities/activities/new_friendship.html 0 → 100644
... ... @@ -0,0 +1,6 @@
  1 +{{'has made new friends:' | translate}}<br />
  2 +<span ng-repeat="name in activity.params.friend_name">
  3 + <a ng-href="{{ctrl.urlFor(activity.params.friend_url[$index])}}" ng-attr-title="{{name}}">
  4 + <img ng-src="{{activity.params.friend_profile_custom_icon[$index]}}" ng-attr-alt="{{name}}" />
  5 + </a>
  6 +</span>
... ...
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component.spec.ts
1   -// TODO
  1 +import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
  2 +import {Provider, Input, provide, Component} from 'ng-forward';
  3 +import {provideFilters} from '../../../../spec/helpers';
  4 +import {RecentActivitiesPluginActivitiesBlockComponent} from './recent-activities-plugin-activities-block.component';
  5 +import * as helpers from "./../../../../spec/helpers";
  6 +
  7 +const htmlTemplate: string = '<noosfero-recent-activities-plugin-activities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-activities-plugin-activities-block>';
  8 +
  9 +const tcb = new TestComponentBuilder();
  10 +
  11 +describe("Components", () => {
  12 + describe("Recent Activities Block Component", () => {
  13 +
  14 + let settingsObj = {};
  15 + let person = <noosfero.Person>{ name: "Person" };
  16 + let mockedService = {
  17 + getApiContent: (block: noosfero.Block): any => {
  18 + return Promise.resolve({ activities: [{ verb: 'new_friendship' }], headers: (name: string) => { return name; } });
  19 + }
  20 + };
  21 + beforeEach(angular.mock.module("templates"));
  22 +
  23 + let state = jasmine.createSpyObj("state", ["go"]);
  24 +
  25 +
  26 + function getProviders() {
  27 + return [
  28 + new Provider('$state', { useValue: state }),
  29 + new Provider('BlockService', {
  30 + useValue: mockedService
  31 + })
  32 + ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
  33 + }
  34 + let componentClass: any = null;
  35 +
  36 + function getComponent() {
  37 + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentActivitiesPluginActivitiesBlockComponent], providers: getProviders() })
  38 + class BlockContainerComponent {
  39 + block = { type: 'Block', settings: settingsObj };
  40 + owner = person;
  41 + constructor() {
  42 + }
  43 + }
  44 + return BlockContainerComponent;
  45 + }
  46 +
  47 + it("get activities from block service", done => {
  48 + tcb.createAsync(getComponent()).then(fixture => {
  49 + let RecentActivitiesPluginActivitiesBlock: RecentActivitiesPluginActivitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
  50 + expect(RecentActivitiesPluginActivitiesBlock.activities[0]['verb']).toEqual('new_friendship');
  51 + done();
  52 + });
  53 + });
  54 +
  55 + });
  56 +});
... ...
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component.ts
... ... @@ -17,16 +17,27 @@ export class RecentActivitiesPluginActivitiesBlockComponent {
17 17  
18 18 constructor(private blockService: BlockService, private $state: any) { }
19 19  
  20 + getActivityTemplate(activity: any) {
  21 + return 'app/layout/blocks/recent-activities-plugin-activities/activities/' + activity.verb + '.html';
  22 + }
  23 +
  24 + urlFor(params: any) {
  25 + let url = '//' + params.host;
  26 + if (params.port) {
  27 + url += ':' + params.port;
  28 + }
  29 + url += '/' + params.profile + '/';
  30 + if (params.page) {
  31 + url += params.page.join('/');
  32 + }
  33 + return url;
  34 + }
  35 +
20 36 ngOnInit() {
21 37 this.profile = this.owner;
22 38 this.activities = [];
23 39 this.blockService.getApiContent(this.block).then((content: any) => {
24   - let activities: any = [];
25   - for (let i = 0; i < content.activities.length; i++) {
26   - let activity = content.activities[i];
27   - activities.push({ created_at: activity.created_at, description: 'TODO' });
28   - }
29   - this.activities = activities.slice();
  40 + this.activities = content.activities;
30 41 });
31 42 }
32 43 }
... ...
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.html
1   -<div deckgrid source="ctrl.activities" class="deckgrid">
2   - <div class="a-card panel media">
3   - <div class="header media-body">
4   - <h5 class="title media-heading" ng-bind="card.description"></h5>
5   -
6   - <div class="subheader">
7   - <span class="time">
8   - <i class="fa fa-clock-o"></i> <span am-time-ago="card.created_at | dateFormat"></span>
9   - </span>
10   - </div>
11   - </div>
  1 +<div class="deckgrid recent-activities-block">
  2 + <div ng-repeat="activity in ctrl.activities" class="a-card panel media">
  3 + <div class="header media-body">
  4 + <h5 class="title media-heading">
  5 + <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a>&nbsp;<ng-include src="ctrl.getActivityTemplate(activity)"></ng-include>
  6 + </h5>
  7 + </div>
  8 + <div class="subheader">
  9 + <span class="time">
  10 + <i class="fa fa-clock-o"></i> <span am-time-ago="activity.created_at | dateFormat"></span>
  11 + </span>
  12 + </div>
12 13 </div>
13 14 </div>
... ...
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.scss
1 1 .col-md-2-5 .deckgrid[deckgrid]::before {
2 2 visibility: hidden;
3 3 }
  4 +
  5 +.recent-activities-block {
  6 + img {
  7 + padding: 1px;
  8 + border: 1px solid #ccc;
  9 + margin-right: 2px;
  10 + margin-top: 2px;
  11 + }
  12 +}
... ...