Ticket #45: Environment tags block

Caio Almeida
1 parent ae05af8e
Showing 10 changed files with 125 additions and 3 deletions Show diff stats
bower.json
gulp/styles.js
package.json
src/app/layout/blocks/tags/index.ts
src/app/layout/blocks/tags/tags-block.component.spec.ts
src/app/layout/blocks/tags/tags-block.component.ts
src/app/layout/blocks/tags/tags-block.html
src/app/layout/blocks/tags/tags-block.scss
src/app/main/main.component.ts
src/lib/ng-noosfero-api/http/environment.service.ts
@@ -38,7 +38,8 @@
     "angular-bind-html-compile": "^1.2.1",
     "angular-click-outside": "^2.7.1",
     "ng-ckeditor": "^0.2.1",
-    "angular-bootstrap-toggle-switch": "^0.5.6"
+    "angular-bootstrap-toggle-switch": "^0.5.6",
+    "angular-tag-cloud": "^0.3.0"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -10,6 +10,7 @@ var $ = require(&#39;gulp-load-plugins&#39;)();
 var wiredep = require('wiredep').stream;
 var _ = require('lodash');
+var importCss = require('gulp-import-css');
 gulp.task('styles-reload', ['styles'], function() {
   return buildStyles()
@@ -55,5 +56,6 @@ var buildStyles = function() {
     .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
     .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
     .pipe($.sourcemaps.write())
+    .pipe(importCss())
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
 };
@@ -47,6 +47,7 @@
     "gulp-eslint": "~1.0.0",
     "gulp-filter": "~3.0.1",
     "gulp-flatten": "~0.2.0",
+    "gulp-import-css": "^0.1.2",
     "gulp-inject": "~3.0.0",
     "gulp-insert": "^0.5.0",
     "gulp-load-plugins": "~0.10.0",
@@ -0,0 +1 @@
+export * from "./tags-block.component";
@@ -0,0 +1,55 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {TagsBlockComponent} from './tags-block.component';
+
+const htmlTemplate: string = '<noosfero-tags-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-tags-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Tags Block Component", () => {
+
+        let settingsObj = {};
+        let mockedEnvironmentService = {
+            getTags: (): any => {
+                return Promise.resolve({ foo: 10, bar: 20 });
+            }
+        };
+        let profile = { name: 'profile-name' };
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+
+        function getProviders() {
+            return [
+                new Provider('$state', { useValue: state }),
+                new Provider('EnvironmentService', {
+                    useValue: mockedEnvironmentService
+                }),
+            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
+        }
+        let componentClass: any = null;
+
+        function getComponent() {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [TagsBlockComponent], providers: getProviders() })
+            class BlockContainerComponent {
+                block = { type: 'Block', settings: settingsObj };
+                owner = profile;
+                constructor() {
+                }
+            }
+            return BlockContainerComponent;
+        }
+
+
+        it("get tags from the environment service", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let tagsBlock: TagsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(tagsBlock.tags).toEqual([{ text: "foo", weight: '10', link: '/tag/foo' }, { text: "bar", weight: '20', link: '/tag/bar' }]);
+                done();
+            });
+        });
+    });
+});
@@ -0,0 +1,45 @@
+import {Component, Inject, Input} from "ng-forward";
+import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service";
+
+@Component({
+    selector: "noosfero-tags-block",
+    templateUrl: 'app/layout/blocks/tags/tags-block.html'
+})
+@Inject(EnvironmentService, "$state")
+export class TagsBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    tags: any;
+    tagsLoaded: boolean = false;
+
+    constructor(private environmentService: EnvironmentService, private $state: any) {
+        this.loadTags();
+    }
+
+    loadTags() {
+        this.tags = [];
+        let tag = '';
+        let tags: any = [];
+        let that = this;
+
+        this.environmentService.getTags()
+        .then((result: any) => {
+            for (tag in result) {
+                if (result.hasOwnProperty(tag)) {
+                    let size: number = result[tag];
+                    tags.push({ text: tag.toString(), weight: size.toString(), link: '/tag/' + tag });
+                }
+            }
+
+            that.tagsLoaded = true;
+            that.tags = tags.slice();
+        });
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+    }
+}
@@ -0,0 +1 @@
+<ng-tag-cloud cloud-width="200" cloud-height="150" cloud-data="ctrl.tags"></ng-tag-cloud>
@@ -0,0 +1,7 @@
+@import url('../../bower_components/angular-tag-cloud/src/css/ng-tag-cloud.css');
+
+div.ng-tag-cloud span {
+    &.w10, &.w8, &.w9 {
+        color: #1E96D0;
+    }
+}
@@ -18,6 +18,7 @@ import {ProfileImageBlockComponent} from &quot;../layout/blocks/profile-image/profile
 import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
 import {PersonTagsPluginInterestsBlockComponent} from "../layout/blocks/person-tags-plugin-interests/person-tags-plugin-interests-block.component";
+import {TagsBlockComponent} from "../layout/blocks/tags/tags-block.component";
 import {CustomContentComponent} from "../profile/custom-content/custom-content.component";
 import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
@@ -105,7 +106,7 @@ export class EnvironmentContent {
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
         LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
-        PersonTagsPluginInterestsBlockComponent, BlockComponent
+        PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, BlockComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
         "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
@@ -114,7 +115,7 @@ export class EnvironmentContent {
         "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
         "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
         "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
-        "angular-click-outside", "toggle-switch", "noosfero.init"]
+        "angular-click-outside", "toggle-switch", "ngTagCloud", "noosfero.init"]
 })
 @StateConfig([
     {
@@ -68,6 +68,14 @@ export class EnvironmentService {
         return errorFunction;
     }
+    getTags(): ng.IPromise<{}> {
+        let p = this.restangular.one('environment').customGET('tags');
+        let deferred = this.$q.defer<{}>();
+        p.then(this.getHandleSuccessFunction<{}>(deferred));
+        p.catch(this.getHandleErrorFunction<{}>(deferred));
+        return deferred.promise;
+    }
+
     /**
      * TODO - use restangular service as base class, and this will not be necessary here anymore
      */
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+export * from "./tags-block.component";
@@ -0,0 +1,55 @@		@@ -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 @@		@@ -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 @@		@@ -0,0 +1 @@
		1	+<ng-tag-cloud cloud-width="200" cloud-height="150" cloud-data="ctrl.tags"></ng-tag-cloud>
@@ -0,0 +1,7 @@		@@ -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	+}
	@@ -68,6 +68,14 @@ export class EnvironmentService {		@@ -68,6 +68,14 @@ export class EnvironmentService {
68	return errorFunction;	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	* TODO - use restangular service as base class, and this will not be necessary here anymore	80	* TODO - use restangular service as base class, and this will not be necessary here anymore
73	*/	81	*/