Commit 17e9be0821c6c79feef24d6a4614784e4d38f54a

Authored by Caio Almeida
1 parent ae05af8e

Ticket #45: Environment tags block

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
... ... @@ -47,6 +47,7 @@
47 47 "gulp-eslint": "~1.0.0",
48 48 "gulp-filter": "~3.0.1",
49 49 "gulp-flatten": "~0.2.0",
  50 + "gulp-import-css": "^0.1.2",
50 51 "gulp-inject": "~3.0.0",
51 52 "gulp-insert": "^0.5.0",
52 53 "gulp-load-plugins": "~0.10.0",
... ...
src/app/layout/blocks/tags/index.ts 0 → 100644
... ... @@ -0,0 +1 @@
  1 +export * from "./tags-block.component";
... ...
src/app/layout/blocks/tags/tags-block.component.spec.ts 0 → 100644
... ... @@ -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 +});
... ...
src/app/layout/blocks/tags/tags-block.component.ts 0 → 100644
... ... @@ -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 +}
... ...
src/app/layout/blocks/tags/tags-block.html 0 → 100644
... ... @@ -0,0 +1 @@
  1 +<ng-tag-cloud cloud-width="200" cloud-height="150" cloud-data="ctrl.tags"></ng-tag-cloud>
... ...
src/app/layout/blocks/tags/tags-block.scss 0 → 100644
... ... @@ -0,0 +1,7 @@
  1 +@import url('../../bower_components/angular-tag-cloud/src/css/ng-tag-cloud.css');
  2 +
  3 +div.ng-tag-cloud span {
  4 + &.w10, &.w8, &.w9 {
  5 + color: #1E96D0;
  6 + }
  7 +}
... ...
src/app/main/main.component.ts
... ... @@ -18,6 +18,7 @@ import {ProfileImageBlockComponent} from &quot;../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 */
... ...