From d3bba43c75e4873b4cb6ae3fc7a3b8ebea07c501 Mon Sep 17 00:00:00 2001 From: Caio SBA Date: Tue, 26 Jul 2016 13:55:51 -0300 Subject: [PATCH] Ticket #118: Profile images block --- src/app/layout/blocks/profile-images-plugin-profile-images/index.ts | 2 ++ src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.spec.ts | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.ts | 39 +++++++++++++++++++++++++++++++++++++++ src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html | 8 ++++++++ src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.scss | 29 +++++++++++++++++++++++++++++ src/app/main/main.component.ts | 7 +++++-- 6 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 src/app/layout/blocks/profile-images-plugin-profile-images/index.ts create mode 100644 src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.spec.ts create mode 100644 src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.ts create mode 100644 src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html create mode 100644 src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.scss diff --git a/src/app/layout/blocks/profile-images-plugin-profile-images/index.ts b/src/app/layout/blocks/profile-images-plugin-profile-images/index.ts new file mode 100644 index 0000000..22c5849 --- /dev/null +++ b/src/app/layout/blocks/profile-images-plugin-profile-images/index.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"; diff --git a/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.spec.ts b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.spec.ts new file mode 100644 index 0000000..2eac004 --- /dev/null +++ b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.spec.ts @@ -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 = ''; + +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 = { 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(); + }); + }); + + }); +}); diff --git a/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.ts b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.ts new file mode 100644 index 0000000..e039360 --- /dev/null +++ b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.ts @@ -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; + }); + } +} diff --git a/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html new file mode 100644 index 0000000..f40d9a2 --- /dev/null +++ b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html @@ -0,0 +1,8 @@ + +
diff --git a/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.scss b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.scss new file mode 100644 index 0000000..c7eaa6f --- /dev/null +++ b/src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.scss @@ -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; + } + } +} diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index 5c1a11e..16b82cc 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -21,6 +21,7 @@ import { PersonTagsPluginInterestsBlockComponent } from "../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", -- libgit2 0.21.2