Commit 17e9be0821c6c79feef24d6a4614784e4d38f54a
1 parent
ae05af8e
Exists in
master
and in
9 other branches
Ticket #45: Environment tags block
Showing
10 changed files
with
125 additions
and
3 deletions
Show diff stats
bower.json
| ... | ... | @@ -38,7 +38,8 @@ |
| 38 | 38 | "angular-bind-html-compile": "^1.2.1", |
| 39 | 39 | "angular-click-outside": "^2.7.1", |
| 40 | 40 | "ng-ckeditor": "^0.2.1", |
| 41 | - "angular-bootstrap-toggle-switch": "^0.5.6" | |
| 41 | + "angular-bootstrap-toggle-switch": "^0.5.6", | |
| 42 | + "angular-tag-cloud": "^0.3.0" | |
| 42 | 43 | }, |
| 43 | 44 | "devDependencies": { |
| 44 | 45 | "angular-mocks": "~1.5.0" | ... | ... |
gulp/styles.js
| ... | ... | @@ -10,6 +10,7 @@ var $ = require('gulp-load-plugins')(); |
| 10 | 10 | |
| 11 | 11 | var wiredep = require('wiredep').stream; |
| 12 | 12 | var _ = require('lodash'); |
| 13 | +var importCss = require('gulp-import-css'); | |
| 13 | 14 | |
| 14 | 15 | gulp.task('styles-reload', ['styles'], function() { |
| 15 | 16 | return buildStyles() |
| ... | ... | @@ -55,5 +56,6 @@ var buildStyles = function() { |
| 55 | 56 | .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass')) |
| 56 | 57 | .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer')) |
| 57 | 58 | .pipe($.sourcemaps.write()) |
| 59 | + .pipe(importCss()) | |
| 58 | 60 | .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/'))); |
| 59 | 61 | }; | ... | ... |
package.json
| ... | ... | @@ -0,0 +1 @@ |
| 1 | +export * from "./tags-block.component"; | ... | ... |
| ... | ... | @@ -0,0 +1,55 @@ |
| 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 {TagsBlockComponent} from './tags-block.component'; | |
| 5 | + | |
| 6 | +const htmlTemplate: string = '<noosfero-tags-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-tags-block>'; | |
| 7 | + | |
| 8 | +const tcb = new TestComponentBuilder(); | |
| 9 | + | |
| 10 | +describe("Components", () => { | |
| 11 | + describe("Tags Block Component", () => { | |
| 12 | + | |
| 13 | + let settingsObj = {}; | |
| 14 | + let mockedEnvironmentService = { | |
| 15 | + getTags: (): any => { | |
| 16 | + return Promise.resolve({ foo: 10, bar: 20 }); | |
| 17 | + } | |
| 18 | + }; | |
| 19 | + let profile = { name: 'profile-name' }; | |
| 20 | + beforeEach(angular.mock.module("templates")); | |
| 21 | + | |
| 22 | + let state = jasmine.createSpyObj("state", ["go"]); | |
| 23 | + | |
| 24 | + | |
| 25 | + function getProviders() { | |
| 26 | + return [ | |
| 27 | + new Provider('$state', { useValue: state }), | |
| 28 | + new Provider('EnvironmentService', { | |
| 29 | + useValue: mockedEnvironmentService | |
| 30 | + }), | |
| 31 | + ].concat(provideFilters("truncateFilter", "stripTagsFilter")); | |
| 32 | + } | |
| 33 | + let componentClass: any = null; | |
| 34 | + | |
| 35 | + function getComponent() { | |
| 36 | + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [TagsBlockComponent], providers: getProviders() }) | |
| 37 | + class BlockContainerComponent { | |
| 38 | + block = { type: 'Block', settings: settingsObj }; | |
| 39 | + owner = profile; | |
| 40 | + constructor() { | |
| 41 | + } | |
| 42 | + } | |
| 43 | + return BlockContainerComponent; | |
| 44 | + } | |
| 45 | + | |
| 46 | + | |
| 47 | + it("get tags from the environment service", done => { | |
| 48 | + tcb.createAsync(getComponent()).then(fixture => { | |
| 49 | + let tagsBlock: TagsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance; | |
| 50 | + expect(tagsBlock.tags).toEqual([{ text: "foo", weight: '10', link: '/tag/foo' }, { text: "bar", weight: '20', link: '/tag/bar' }]); | |
| 51 | + done(); | |
| 52 | + }); | |
| 53 | + }); | |
| 54 | + }); | |
| 55 | +}); | ... | ... |
| ... | ... | @@ -0,0 +1,45 @@ |
| 1 | +import {Component, Inject, Input} from "ng-forward"; | |
| 2 | +import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service"; | |
| 3 | + | |
| 4 | +@Component({ | |
| 5 | + selector: "noosfero-tags-block", | |
| 6 | + templateUrl: 'app/layout/blocks/tags/tags-block.html' | |
| 7 | +}) | |
| 8 | +@Inject(EnvironmentService, "$state") | |
| 9 | +export class TagsBlockComponent { | |
| 10 | + | |
| 11 | + @Input() block: any; | |
| 12 | + @Input() owner: any; | |
| 13 | + | |
| 14 | + profile: any; | |
| 15 | + tags: any; | |
| 16 | + tagsLoaded: boolean = false; | |
| 17 | + | |
| 18 | + constructor(private environmentService: EnvironmentService, private $state: any) { | |
| 19 | + this.loadTags(); | |
| 20 | + } | |
| 21 | + | |
| 22 | + loadTags() { | |
| 23 | + this.tags = []; | |
| 24 | + let tag = ''; | |
| 25 | + let tags: any = []; | |
| 26 | + let that = this; | |
| 27 | + | |
| 28 | + this.environmentService.getTags() | |
| 29 | + .then((result: any) => { | |
| 30 | + for (tag in result) { | |
| 31 | + if (result.hasOwnProperty(tag)) { | |
| 32 | + let size: number = result[tag]; | |
| 33 | + tags.push({ text: tag.toString(), weight: size.toString(), link: '/tag/' + tag }); | |
| 34 | + } | |
| 35 | + } | |
| 36 | + | |
| 37 | + that.tagsLoaded = true; | |
| 38 | + that.tags = tags.slice(); | |
| 39 | + }); | |
| 40 | + } | |
| 41 | + | |
| 42 | + ngOnInit() { | |
| 43 | + this.profile = this.owner; | |
| 44 | + } | |
| 45 | +} | ... | ... |
| ... | ... | @@ -0,0 +1 @@ |
| 1 | +<ng-tag-cloud cloud-width="200" cloud-height="150" cloud-data="ctrl.tags"></ng-tag-cloud> | ... | ... |
src/app/main/main.component.ts
| ... | ... | @@ -18,6 +18,7 @@ import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile |
| 18 | 18 | import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component"; |
| 19 | 19 | import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component"; |
| 20 | 20 | import {PersonTagsPluginInterestsBlockComponent} from "../layout/blocks/person-tags-plugin-interests/person-tags-plugin-interests-block.component"; |
| 21 | +import {TagsBlockComponent} from "../layout/blocks/tags/tags-block.component"; | |
| 21 | 22 | import {CustomContentComponent} from "../profile/custom-content/custom-content.component"; |
| 22 | 23 | |
| 23 | 24 | import {MembersBlockComponent} from "../layout/blocks/members/members-block.component"; |
| ... | ... | @@ -105,7 +106,7 @@ export class EnvironmentContent { |
| 105 | 106 | MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent, |
| 106 | 107 | MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent, |
| 107 | 108 | LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent, |
| 108 | - PersonTagsPluginInterestsBlockComponent, BlockComponent | |
| 109 | + PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, BlockComponent | |
| 109 | 110 | ].concat(plugins.mainComponents).concat(plugins.hotspots), |
| 110 | 111 | providers: [AuthService, SessionService, NotificationService, BodyStateClassesService, |
| 111 | 112 | "ngAnimate", "ngCookies", "ngStorage", "ngTouch", |
| ... | ... | @@ -114,7 +115,7 @@ export class EnvironmentContent { |
| 114 | 115 | "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid", |
| 115 | 116 | "angular-timeline", "duScroll", "oitozero.ngSweetAlert", |
| 116 | 117 | "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad", |
| 117 | - "angular-click-outside", "toggle-switch", "noosfero.init"] | |
| 118 | + "angular-click-outside", "toggle-switch", "ngTagCloud", "noosfero.init"] | |
| 118 | 119 | }) |
| 119 | 120 | @StateConfig([ |
| 120 | 121 | { | ... | ... |
src/lib/ng-noosfero-api/http/environment.service.ts
| ... | ... | @@ -68,6 +68,14 @@ export class EnvironmentService { |
| 68 | 68 | return errorFunction; |
| 69 | 69 | } |
| 70 | 70 | |
| 71 | + getTags(): ng.IPromise<{}> { | |
| 72 | + let p = this.restangular.one('environment').customGET('tags'); | |
| 73 | + let deferred = this.$q.defer<{}>(); | |
| 74 | + p.then(this.getHandleSuccessFunction<{}>(deferred)); | |
| 75 | + p.catch(this.getHandleErrorFunction<{}>(deferred)); | |
| 76 | + return deferred.promise; | |
| 77 | + } | |
| 78 | + | |
| 71 | 79 | /** |
| 72 | 80 | * TODO - use restangular service as base class, and this will not be necessary here anymore |
| 73 | 81 | */ | ... | ... |