Ticket #45: [WIP] Tags block

Caio Almeida
1 parent 0528af25
Showing 8 changed files with 128 additions and 2 deletions Show diff stats
src/app/index.ts
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
@@ -18,7 +18,7 @@ let noosferoApp: any = bundle(&quot;noosferoApp&quot;, MainComponent, [&quot;ngAnimate&quot;, &quot;ngCoo
     "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
     "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
     "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
-    "angular-click-outside"]).publish();
+    "angular-click-outside", "ngTagCloud"]).publish();
 NoosferoApp.angularModule = noosferoApp;
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./tags-block.component";
@@ -0,0 +1 @@
+// TODO
@@ -0,0 +1,38 @@
+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) {
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.tags = [];
+        let tag = '';
+
+        this.environmentService.getTags()
+        .then((result: noosfero.RestResult<{}>) => {
+            for (tag in result) {
+                if (result.hasOwnProperty(tag)) {
+                    let size: number = result[tag];
+                    this.tags.push({ text: tag, weight: size, link: '/tag/' + tag });
+                }
+            }
+            this.tagsLoaded = true;
+        });
+    }
+}
@@ -0,0 +1,11 @@
+<!--
+<div deckgrid source="ctrl.tags" class="deckgrid">
+  <div class="a-card panel media" ng-click="mother.ctrl.openTag(card);">
+    <div class="header media-body">
+      <h5 class="title media-heading" ng-bind="card.name"></h5>
+      <div class="subheader" ng-bind="card.count"></div>
+    </div>
+  </div>
+</div>
+-->
+<ng-tag-cloud cloud-width="250" cloud-height="250" cloud-data="ctrl.tags"></ng-tag-cloud>
@@ -0,0 +1,65 @@
+.block.tagsblock {
+  .deckgrid[deckgrid]::before {
+    font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
+    visibility: hidden;
+  }
+  .author {
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .header {
+    .subheader {
+      color: #C1C1C1;
+      font-size: 10px;
+    }
+  }
+  .post-lead {
+    color: #8E8E8E;
+    font-size: 14px;
+  }
+  .article-image {
+    margin: 10px 0;
+  }
+}
+
+.col-md-2-5 {
+  .deckgrid[deckgrid]::before {
+    content: '1 .deck-column';
+  }
+}
+
+.col-md-7 {
+  .block.tagsblock {
+    background-color: transparent;
+    border: 0;
+
+    .deckgrid[deckgrid]::before {
+        content: '3 .deck-column';
+    }
+
+    .panel-heading {
+      display: none;
+    }
+    .panel-body {
+      padding: 0;
+    }
+
+    .deckgrid {
+      .column {
+        float: left;
+      }
+
+      .deck-column {
+        @extend .col-md-4;
+        padding: 0;
+
+        .a-card {
+          padding: 10px;
+          margin: 3px;
+        }
+      }
+    }
+  }
+}
@@ -15,6 +15,7 @@ import {RecentDocumentsBlockComponent} from &quot;../layout/blocks/recent-documents/r
 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
 import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
+import {TagsBlockComponent} from "../layout/blocks/tags/tags-block.component";
 import {MembersBlockComponent} from "./../layout/blocks/members/members-block.component";
 import {CommunitiesBlockComponent} from "./../layout/blocks/communities/communities-block.component";
@@ -98,7 +99,7 @@ export class EnvironmentContent {
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
-        LoginBlockComponent
+        LoginBlockComponent, TagsBlockComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
@@ -34,6 +34,14 @@ export class EnvironmentService {
         return deferred.promise;
     }
+    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 - Please, use the base class RestangularService
      * (description)
      *
	@@ -18,7 +18,7 @@ let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCoo		@@ -18,7 +18,7 @@ let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCoo
18	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",	18	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
19	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",	19	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",
20	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",	20	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
21	- "angular-click-outside"]).publish();	21	+ "angular-click-outside", "ngTagCloud"]).publish();
22		22
23	NoosferoApp.angularModule = noosferoApp;	23	NoosferoApp.angularModule = noosferoApp;
24		24
@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
	1	+/* Module Index Entry - generated using the script npm run generate-index */
	2	+export * from "./tags-block.component";
@@ -0,0 +1,38 @@		@@ -0,0 +1,38 @@
	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	+
	17	+ tagsLoaded: boolean = false;
	18	+
	19	+ constructor(private environmentService: EnvironmentService, private $state: any) {
	20	+ }
	21	+
	22	+ ngOnInit() {
	23	+ this.profile = this.owner;
	24	+ this.tags = [];
	25	+ let tag = '';
	26	+
	27	+ this.environmentService.getTags()
	28	+ .then((result: noosfero.RestResult<{}>) => {
	29	+ for (tag in result) {
	30	+ if (result.hasOwnProperty(tag)) {
	31	+ let size: number = result[tag];
	32	+ this.tags.push({ text: tag, weight: size, link: '/tag/' + tag });
	33	+ }
	34	+ }
	35	+ this.tagsLoaded = true;
	36	+ });
	37	+ }
	38	+}
@@ -0,0 +1,11 @@		@@ -0,0 +1,11 @@
	1	+<!--
	2	+<div deckgrid source="ctrl.tags" class="deckgrid">
	3	+ <div class="a-card panel media" ng-click="mother.ctrl.openTag(card);">
	4	+ <div class="header media-body">
	5	+ <h5 class="title media-heading" ng-bind="card.name"></h5>
	6	+ <div class="subheader" ng-bind="card.count"></div>
	7	+ </div>
	8	+ </div>
	9	+</div>
	10	+-->
	11	+<ng-tag-cloud cloud-width="250" cloud-height="250" cloud-data="ctrl.tags"></ng-tag-cloud>
@@ -0,0 +1,65 @@		@@ -0,0 +1,65 @@
	1	+.block.tagsblock {
	2	+ .deckgrid[deckgrid]::before {
	3	+ font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
	4	+ visibility: hidden;
	5	+ }
	6	+ .author {
	7	+ img {
	8	+ width: 30px;
	9	+ height: 30px;
	10	+ }
	11	+ }
	12	+ .header {
	13	+ .subheader {
	14	+ color: #C1C1C1;
	15	+ font-size: 10px;
	16	+ }
	17	+ }
	18	+ .post-lead {
	19	+ color: #8E8E8E;
	20	+ font-size: 14px;
	21	+ }
	22	+ .article-image {
	23	+ margin: 10px 0;
	24	+ }
	25	+}
	26	+
	27	+.col-md-2-5 {
	28	+ .deckgrid[deckgrid]::before {
	29	+ content: '1 .deck-column';
	30	+ }
	31	+}
	32	+
	33	+.col-md-7 {
	34	+ .block.tagsblock {
	35	+ background-color: transparent;
	36	+ border: 0;
	37	+
	38	+ .deckgrid[deckgrid]::before {
	39	+ content: '3 .deck-column';
	40	+ }
	41	+
	42	+ .panel-heading {
	43	+ display: none;
	44	+ }
	45	+ .panel-body {
	46	+ padding: 0;
	47	+ }
	48	+
	49	+ .deckgrid {
	50	+ .column {
	51	+ float: left;
	52	+ }
	53	+
	54	+ .deck-column {
	55	+ @extend .col-md-4;
	56	+ padding: 0;
	57	+
	58	+ .a-card {
	59	+ padding: 10px;
	60	+ margin: 3px;
	61	+ }
	62	+ }
	63	+ }
	64	+ }
	65	+}
	@@ -34,6 +34,14 @@ export class EnvironmentService {		@@ -34,6 +34,14 @@ export class EnvironmentService {
34	return deferred.promise;	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	/** TODO - Please, use the base class RestangularService	45	/** TODO - Please, use the base class RestangularService
38	* (description)	46	* (description)
39	*	47	*