Ticket #118: Profile images block

Caio Almeida
1 parent 26ff5335
Showing 6 changed files with 148 additions and 2 deletions Show diff stats
src/app/layout/blocks/profile-images-plugin-profile-images/index.ts
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.spec.ts
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.ts
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.scss
src/app/main/main.component.ts
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./profile-images-plugin-profile-images-block.component";
@@ -0,0 +1,65 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {ProfileImagesPluginProfileImagesBlockComponent} from './profile-images-plugin-profile-images-block.component';
+import * as helpers from "./../../../../spec/helpers";
+
+const htmlTemplate: string = '<noosfero-profile-images-plugin-profile-images-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-images-plugin-profile-images-block>';
+
+const tcb = new TestComponentBuilder();
+
+const images = [
+    {
+        title: 'Test',
+        id: 1,
+        view_url: { host: 'localhost', page: ['image'] },
+        path: '/articles/0000/0001/test.png'
+    }
+];
+
+describe("Components", () => {
+    describe("Profile Images Block Component", () => {
+
+        let settingsObj = {};
+        let person = <noosfero.Person>{ name: "Person" };
+        let mockedService = {
+            getApiContent: (block: noosfero.Block): any => {
+                return Promise.resolve({ images: images, headers: (name: string) => { return name; } });
+            }
+        };
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+
+        function getProviders() {
+            return [
+                new Provider('$state', { useValue: state }),
+                new Provider('BlockService', {
+                    useValue: mockedService
+                })
+            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
+        }
+        let componentClass: any = null;
+
+        function getComponent() {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ProfileImagesPluginProfileImagesBlockComponent], providers: getProviders() })
+            class BlockContainerComponent {
+                block = { type: 'Block', settings: settingsObj };
+                owner = person;
+                constructor() {
+                }
+            }
+            return BlockContainerComponent;
+        }
+
+        it("get images from the block service", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let ProfileImagesPluginProfileImagesBlock: ProfileImagesPluginProfileImagesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(ProfileImagesPluginProfileImagesBlock.images).toEqual(images);
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,39 @@
+import {Component, Inject, Input} from "ng-forward";
+import {BlockService} from "./../../../../lib/ng-noosfero-api/http/block.service";
+import {Arrays} from "./../../../../lib/util/arrays";
+
+@Component({
+    selector: "noosfero-profile-images-plugin-profile-images-block",
+    templateUrl: 'app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html'
+})
+@Inject(BlockService, "$state")
+export class ProfileImagesPluginProfileImagesBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    images: any;
+
+    constructor(private blockService: BlockService, private $state: any) { }
+
+    urlFor(params: any) {
+        let url = '//' + params.host;
+        if (params.port) {
+              url += ':' + params.port;
+        }
+        url += '/' + params.profile + '/';
+        if (params.page) {
+            url += params.page.join('/');
+        }
+        return url;
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.images = [];
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.images = content.images;
+        });
+    }
+}
@@ -0,0 +1,8 @@
+<ul class="profile-images-plugin-profile-images">
+  <li ng-repeat="image in ctrl.images">
+    <a ng-href="{{ctrl.urlFor(image.view_url)}}" ng-style="{'background-image': 'url(' + image.path + ')'}">
+      <span>{{image.title}}</span>
+    </a>
+  </li>
+</ul>
+<br style="clear: both;" />
@@ -0,0 +1,29 @@
+.profile-images-plugin-profile-images {
+  padding: 0;
+  margin: 0;
+  display: block;
+  width: 100%;
+
+  li {
+    list-style: none;
+  }
+
+  a {
+    display: block;
+    width: 53px;
+    height: 53px;
+    float: left;
+    padding: 1px;
+    border: 1px solid #ccc;
+    margin: 4px;
+    background-size: cover;
+
+    &:hover {
+      border: 1px solid #000;
+    }
+
+    span {
+      display: none;
+    }
+  }  
+}
@@ -21,6 +21,7 @@ import { PersonTagsPluginInterestsBlockComponent } from &quot;../layout/blocks/person
 import { TagsBlockComponent } from "../layout/blocks/tags/tags-block.component";
 import { CustomContentComponent } from "../profile/custom-content/custom-content.component";
 import { RecentActivitiesPluginActivitiesBlockComponent } from "../layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component";
+import { ProfileImagesPluginProfileImagesBlockComponent } from "../layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component";
 import { RegisterComponent } from "../account/register.component";
 import { MembersBlockComponent } from "../layout/blocks/members/members-block.component";
@@ -96,7 +97,8 @@ export class EnvironmentContent {
  * @name main.Main
  * @requires AuthService, Session, Notification, ArticleBlog, ArticleView, Boxes, Block, LinkListBlock,
  * MainBlock, RecentDocumentsBlock, Navbar, ProfileImageBlock, MembersBlock,
- * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock, RecentActivitiesPluginActivitiesBlock,
+ * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock,
+ * RecentActivitiesPluginActivitiesBlock, ProfileImagesPluginProfileImages
  * @description
  *  The Main controller for the Noosfero Angular Theme application.
  *
@@ -115,7 +117,8 @@ export class EnvironmentContent {
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
         LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
-        PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent, BlockComponent, RegisterComponent
+        PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent,
+        ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService, RegisterService,
         "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
	1	+/* Module Index Entry - generated using the script npm run generate-index */
	2	+export * from "./profile-images-plugin-profile-images-block.component";
@@ -0,0 +1,65 @@		@@ -0,0 +1,65 @@
	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 {ProfileImagesPluginProfileImagesBlockComponent} from './profile-images-plugin-profile-images-block.component';
	5	+import * as helpers from "./../../../../spec/helpers";
	6	+
	7	+const htmlTemplate: string = '<noosfero-profile-images-plugin-profile-images-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-images-plugin-profile-images-block>';
	8	+
	9	+const tcb = new TestComponentBuilder();
	10	+
	11	+const images = [
	12	+ {
	13	+ title: 'Test',
	14	+ id: 1,
	15	+ view_url: { host: 'localhost', page: ['image'] },
	16	+ path: '/articles/0000/0001/test.png'
	17	+ }
	18	+];
	19	+
	20	+describe("Components", () => {
	21	+ describe("Profile Images Block Component", () => {
	22	+
	23	+ let settingsObj = {};
	24	+ let person = <noosfero.Person>{ name: "Person" };
	25	+ let mockedService = {
	26	+ getApiContent: (block: noosfero.Block): any => {
	27	+ return Promise.resolve({ images: images, headers: (name: string) => { return name; } });
	28	+ }
	29	+ };
	30	+ beforeEach(angular.mock.module("templates"));
	31	+
	32	+ let state = jasmine.createSpyObj("state", ["go"]);
	33	+
	34	+
	35	+ function getProviders() {
	36	+ return [
	37	+ new Provider('$state', { useValue: state }),
	38	+ new Provider('BlockService', {
	39	+ useValue: mockedService
	40	+ })
	41	+ ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
	42	+ }
	43	+ let componentClass: any = null;
	44	+
	45	+ function getComponent() {
	46	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ProfileImagesPluginProfileImagesBlockComponent], providers: getProviders() })
	47	+ class BlockContainerComponent {
	48	+ block = { type: 'Block', settings: settingsObj };
	49	+ owner = person;
	50	+ constructor() {
	51	+ }
	52	+ }
	53	+ return BlockContainerComponent;
	54	+ }
	55	+
	56	+ it("get images from the block service", done => {
	57	+ tcb.createAsync(getComponent()).then(fixture => {
	58	+ let ProfileImagesPluginProfileImagesBlock: ProfileImagesPluginProfileImagesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	59	+ expect(ProfileImagesPluginProfileImagesBlock.images).toEqual(images);
	60	+ done();
	61	+ });
	62	+ });
	63	+
	64	+ });
	65	+});
@@ -0,0 +1,39 @@		@@ -0,0 +1,39 @@
	1	+import {Component, Inject, Input} from "ng-forward";
	2	+import {BlockService} from "./../../../../lib/ng-noosfero-api/http/block.service";
	3	+import {Arrays} from "./../../../../lib/util/arrays";
	4	+
	5	+@Component({
	6	+ selector: "noosfero-profile-images-plugin-profile-images-block",
	7	+ templateUrl: 'app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html'
	8	+})
	9	+@Inject(BlockService, "$state")
	10	+export class ProfileImagesPluginProfileImagesBlockComponent {
	11	+
	12	+ @Input() block: any;
	13	+ @Input() owner: any;
	14	+
	15	+ profile: any;
	16	+ images: any;
	17	+
	18	+ constructor(private blockService: BlockService, private $state: any) { }
	19	+
	20	+ urlFor(params: any) {
	21	+ let url = '//' + params.host;
	22	+ if (params.port) {
	23	+ url += ':' + params.port;
	24	+ }
	25	+ url += '/' + params.profile + '/';
	26	+ if (params.page) {
	27	+ url += params.page.join('/');
	28	+ }
	29	+ return url;
	30	+ }
	31	+
	32	+ ngOnInit() {
	33	+ this.profile = this.owner;
	34	+ this.images = [];
	35	+ this.blockService.getApiContent(this.block).then((content: any) => {
	36	+ this.images = content.images;
	37	+ });
	38	+ }
	39	+}
@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
	1	+<ul class="profile-images-plugin-profile-images">
	2	+ <li ng-repeat="image in ctrl.images">
	3	+ <a ng-href="{{ctrl.urlFor(image.view_url)}}" ng-style="{'background-image': 'url(' + image.path + ')'}">
	4	+ <span>{{image.title}}</span>
	5	+ </a>
	6	+ </li>
	7	+</ul>
	8	+<br style="clear: both;" />
@@ -0,0 +1,29 @@		@@ -0,0 +1,29 @@
	1	+.profile-images-plugin-profile-images {
	2	+ padding: 0;
	3	+ margin: 0;
	4	+ display: block;
	5	+ width: 100%;
	6	+
	7	+ li {
	8	+ list-style: none;
	9	+ }
	10	+
	11	+ a {
	12	+ display: block;
	13	+ width: 53px;
	14	+ height: 53px;
	15	+ float: left;
	16	+ padding: 1px;
	17	+ border: 1px solid #ccc;
	18	+ margin: 4px;
	19	+ background-size: cover;
	20	+
	21	+ &:hover {
	22	+ border: 1px solid #000;
	23	+ }
	24	+
	25	+ span {
	26	+ display: none;
	27	+ }
	28	+ }
	29	+}