Merge Request #28

Closed
noosfero-themes/angular-theme!28
Created by Caio Almeida

Environment tags block

Block that displays environment tags. Profile support is not implemented yet. Uses ngCloud for display.

Assignee: None
Milestone: None

Closed by Caio Almeida

Changes were not merged into target branch

Commits (2)
1 participants
.gitignore
... ... @@ -14,3 +14,6 @@ typings
14 14 npm-debug.log
15 15 src/vendor.bundle.js*
16 16 .vagrant/
  17 +*.swp
  18 +*.swo
  19 +*~
... ...
bower.json
... ... @@ -35,9 +35,10 @@
35 35 "angular-i18n": "^1.5.0",
36 36 "angular-load": "^0.4.1",
37 37 "angular-translate-interpolation-messageformat": "^2.10.0",
38   - "angular-bind-html-compile": "^1.2.1",
39   - "angular-click-outside": "^2.7.1",
40   - "ng-ckeditor": "^0.2.1"
  38 + "angular-bind-html-compile": "^1.2.1",
  39 + "angular-click-outside": "^2.7.1",
  40 + "ng-ckeditor": "^0.2.1",
  41 + "angular-tag-cloud": "^0.3.0"
41 42 },
42 43 "devDependencies": {
43 44 "angular-mocks": "~1.5.0"
... ...
gulp/styles.js
... ... @@ -11,6 +11,8 @@ var $ = require('gulp-load-plugins')();
11 11 var wiredep = require('wiredep').stream;
12 12 var _ = require('lodash');
13 13  
  14 +var importCss = require('gulp-import-css');
  15 +
14 16 gulp.task('styles-reload', ['styles'], function() {
15 17 return buildStyles()
16 18 .pipe(browserSync.stream());
... ... @@ -55,5 +57,6 @@ var buildStyles = function() {
55 57 .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
56 58 .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
57 59 .pipe($.sourcemaps.write())
  60 + .pipe(importCss())
58 61 .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
59 62 };
... ...
package.json
... ... @@ -46,8 +46,9 @@
46 46 "gulp-eslint": "~1.0.0",
47 47 "gulp-filter": "~3.0.1",
48 48 "gulp-flatten": "~0.2.0",
49   - "gulp-insert": "^0.5.0",
  49 + "gulp-import-css": "^0.1.2",
50 50 "gulp-inject": "~3.0.0",
  51 + "gulp-insert": "^0.5.0",
51 52 "gulp-load-plugins": "~0.10.0",
52 53 "gulp-merge-json": "^0.4.0",
53 54 "gulp-minify-css": "~1.2.1",
... ...
src/app/index.ts
... ... @@ -18,7 +18,7 @@ let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCoo
18 18 "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
19 19 "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
20 20 "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
21   - "angular-click-outside"]).publish();
  21 + "angular-click-outside", "ngTagCloud"]).publish();
22 22  
23 23 NoosferoApp.angularModule = noosferoApp;
24 24  
... ...
src/app/layout/blocks/tags/index.ts 0 → 100644
... ... @@ -0,0 +1,2 @@
  1 +/* Module Index Entry - generated using the script npm run generate-index */
  2 +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
... ... @@ -16,6 +16,7 @@ import {RecentDocumentsBlockComponent} from &quot;../layout/blocks/recent-documents/r
16 16 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
17 17 import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
18 18 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
  19 +import {TagsBlockComponent} from "../layout/blocks/tags/tags-block.component";
19 20  
20 21 import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
21 22 import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
... ... @@ -99,7 +100,7 @@ export class EnvironmentContent {
99 100 LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
100 101 MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
101 102 MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
102   - LoginBlockComponent
  103 + LoginBlockComponent, TagsBlockComponent
103 104 ].concat(plugins.mainComponents).concat(plugins.hotspots),
104 105  
105 106 providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
... ...
src/lib/ng-noosfero-api/http/environment.service.ts
... ... @@ -34,6 +34,14 @@ export class EnvironmentService {
34 34 return deferred.promise;
35 35 }
36 36  
  37 + getTags(): ng.IPromise<{}> {
  38 + let p = this.restangular.one('environment').customGET('tags');
  39 + let deferred = this.$q.defer<{}>();
  40 + p.then(this.getHandleSuccessFunction<{}>(deferred));
  41 + p.catch(this.getHandleErrorFunction<{}>(deferred));
  42 + return deferred.promise;
  43 + }
  44 +
37 45 /** TODO - Please, use the base class RestangularService
38 46 * (description)
39 47 *
... ...