From 32f715092a560034c4071133ded1800b43e1aa5e Mon Sep 17 00:00:00 2001
From: Tallys Martins <tallysmartins@gmail.com>
Date: Sun, 19 Jun 2016 00:45:53 -0300
Subject: [PATCH] Adds support for setting layout template from api

---
 src/app/environment/environment.html              |  6 +++++-
 src/app/layout/boxes/box.html                     | 12 ++++++++++--
 src/app/layout/boxes/boxes.component.spec.ts      |  5 -----
 src/app/layout/boxes/boxes.component.ts           | 12 ++++++------
 src/app/layout/boxes/boxes.html                   |  2 +-
 src/app/layout/boxes/display-boxes.filter.ts      | 39 +++++++++++++++++++++++++++++++++++++++
 src/app/layout/boxes/set-box-layout.filter.ts     | 37 +++++++++++++++++++++++++++++++++++++
 src/app/profile/profile.html                      | 15 +++++++++++----
 src/lib/ng-noosfero-api/interfaces/environment.ts | 10 +++++++++-
 src/lib/ng-noosfero-api/interfaces/profile.ts     |  8 ++++++++
 10 files changed, 126 insertions(+), 20 deletions(-)
 create mode 100644 src/app/layout/boxes/display-boxes.filter.ts
 create mode 100644 src/app/layout/boxes/set-box-layout.filter.ts

diff --git a/src/app/environment/environment.html b/src/app/environment/environment.html
index c78a7c6..0799e96 100644
--- a/src/app/environment/environment.html
+++ b/src/app/environment/environment.html
@@ -1,5 +1,9 @@
 <div class="environment-container">
   <div class="row">
-    <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.environment"></noosfero-boxes>
+    <noosfero-boxes ng-if="vm.boxes"
+                    [layout]="vm.environment.layout_template"
+                    [boxes]="vm.boxes"
+                    [owner]="vm.environment">
+    </noosfero-boxes>
   </div>
 </div>
diff --git a/src/app/layout/boxes/box.html b/src/app/layout/boxes/box.html
index 4b514ca..1ee6d55 100644
--- a/src/app/layout/boxes/box.html
+++ b/src/app/layout/boxes/box.html
@@ -1,3 +1,11 @@
-<div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
-  <noosfero-block ng-repeat="block in box.blocks | orderBy: 'position'" [block]="block" [owner]="ctrl.owner"></noosfero-block>
+<div ng-class="box.position | setBoxLayout:ctrl.layout">
+
+  <div ng-repeat="block in box.blocks | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" >
+    <div class="panel-heading" ng-show="block.title">
+      <h3 class="panel-title">{{block.title}}</h3>
+    </div>
+    <div class="panel-body {{block.type | lowercase}}" >
+      <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block>
+    </div>
+  </div>
 </div>
diff --git a/src/app/layout/boxes/boxes.component.spec.ts b/src/app/layout/boxes/boxes.component.spec.ts
index 0db1b6e..ba99034 100644
--- a/src/app/layout/boxes/boxes.component.spec.ts
+++ b/src/app/layout/boxes/boxes.component.spec.ts
@@ -48,9 +48,4 @@ describe("Boxes Component", () => {
         expect(helper.find('div.col-md-7').length).toEqual(1);
         expect(helper.find('div.col-md-2-5').length).toEqual(1);
     });
-
-    it("check the boxes order", () => {
-        expect(helper.component.boxesOrder(properties['boxes'][0])).toEqual(1);
-        expect(helper.component.boxesOrder(properties['boxes'][1])).toEqual(0);
-    });
 });
diff --git a/src/app/layout/boxes/boxes.component.ts b/src/app/layout/boxes/boxes.component.ts
index 40b45fa..9453a3b 100644
--- a/src/app/layout/boxes/boxes.component.ts
+++ b/src/app/layout/boxes/boxes.component.ts
@@ -1,16 +1,16 @@
-import {Input, Component} from 'ng-forward';
+import {Input, Inject, Component} from 'ng-forward';
+import {DisplayBoxes} from "./display-boxes.filter";
+import {SetBoxLayout} from "./set-box-layout.filter";
 
 @Component({
     selector: "noosfero-boxes",
-    templateUrl: "app/layout/boxes/boxes.html"
+    templateUrl: "app/layout/boxes/boxes.html",
+    directives: [DisplayBoxes, SetBoxLayout]
 })
 export class BoxesComponent {
 
     @Input() boxes: noosfero.Box[];
     @Input() owner: noosfero.Profile | noosfero.Environment;
+    @Input() layout: string;
 
-    boxesOrder(box: noosfero.Box) {
-        if (box.position === 2) return 0;
-        return box.position;
-    }
 }
diff --git a/src/app/layout/boxes/boxes.html b/src/app/layout/boxes/boxes.html
index 5478806..ecd413c 100644
--- a/src/app/layout/boxes/boxes.html
+++ b/src/app/layout/boxes/boxes.html
@@ -1 +1 @@
-<ng-include ng-repeat="box in ctrl.boxes | orderBy: ctrl.boxesOrder" src="'app/layout/boxes/box.html'"></ng-include>
+<ng-include ng-repeat="box in ctrl.boxes | displayBoxes:ctrl.layout" src="'app/layout/boxes/box.html'"></ng-include>
diff --git a/src/app/layout/boxes/display-boxes.filter.ts b/src/app/layout/boxes/display-boxes.filter.ts
new file mode 100644
index 0000000..58f9aa0
--- /dev/null
+++ b/src/app/layout/boxes/display-boxes.filter.ts
@@ -0,0 +1,39 @@
+import {Pipe, Inject} from "ng-forward";
+import {TranslatorService} from "../../shared/services/translator.service";
+
+@Pipe("displayBoxes")
+@Inject(TranslatorService)
+export class DisplayBoxes {
+
+    constructor(private translatorService: TranslatorService) { }
+
+    transform(boxes: noosfero.Box[], layout: string) {
+        let function_str: string = "visible_on" + layout;
+        let valid_boxes: number[] = [];
+        let selected: noosfero.Box[] = [];
+        boxes = boxes || [];
+
+        if(layout == "rightbar") {
+          valid_boxes = this.visible_on_right_bar();
+        }else {
+          valid_boxes = this.visible_on_default();
+        }
+
+        for (let box of boxes) {
+            if(valid_boxes.indexOf(box.position) != -1){
+              selected.push(box);
+            }
+        }
+        return selected;
+    }
+
+    private visible_on_default() {
+        return [1,2,3];
+    }
+
+    private visible_on_right_bar() {
+        return [1,3];
+    }
+
+}
+
diff --git a/src/app/layout/boxes/set-box-layout.filter.ts b/src/app/layout/boxes/set-box-layout.filter.ts
new file mode 100644
index 0000000..0de6a7f
--- /dev/null
+++ b/src/app/layout/boxes/set-box-layout.filter.ts
@@ -0,0 +1,37 @@
+import {Pipe, Inject} from "ng-forward";
+import {TranslatorService} from "../../shared/services/translator.service";
+
+@Pipe("setBoxLayout")
+@Inject(TranslatorService)
+export class SetBoxLayout {
+
+    constructor(private translatorService: TranslatorService) { }
+
+    transform(pos: number, layout: string) {
+        console.log(layout)
+        if(layout == "rightbar") {
+          return this.right_bar(pos);
+        }else {
+          return this.default(pos);
+        }
+    }
+
+    private default(position: number) {
+        if(position == 1) {
+          return "col-md-6 col-md-push-3";
+        }else if(position == 2){
+          return "col-md-3 col-md-pull-6";
+        }else {
+          return "col-md-3";
+        }
+    }
+
+    private right_bar(position: number) {
+        if(position == 1) {
+          return "col-sm-6 col-sm-push-2";
+        }else{
+          return "col-sm-3 col-sm-push-2";
+        }
+    }
+
+}
diff --git a/src/app/profile/profile.html b/src/app/profile/profile.html
index 160f623..c7841e1 100644
--- a/src/app/profile/profile.html
+++ b/src/app/profile/profile.html
@@ -1,7 +1,14 @@
 <div class="profile-container">
-  <custom-content class="profile-header" [label]="'profile.custom_header.label'" [attribute]="'custom_header'" [profile]="vm.profile"></custom-content>
-  <div class="row">
-    <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes>
-  </div>
+  <custom-content class="profile-header"
+                  [label]="'profile.custom_header.label'"
+                  [attribute]="'custom_header'"
+                  [profile]="vm.profile">
+  </custom-content>
+  <div class="row" ui-view="profile-info"></div>
+  <noosfero-boxes ng-if="vm.boxes"
+                  [layout]="vm.profile.layout_template"
+                  [boxes]="vm.boxes"
+                  [owner]="vm.profile" class="row">
+  </noosfero-boxes>
   <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
 </div>
diff --git a/src/lib/ng-noosfero-api/interfaces/environment.ts b/src/lib/ng-noosfero-api/interfaces/environment.ts
index 14a8585..2729997 100644
--- a/src/lib/ng-noosfero-api/interfaces/environment.ts
+++ b/src/lib/ng-noosfero-api/interfaces/environment.ts
@@ -15,5 +15,13 @@ namespace noosfero {
          */
         id: number;
         settings: any
+
+        /**
+         * @ngdoc property
+         * @name layout_template
+         * @propertyOf noofero.Environment
+         * @returns {string} The Environment layout (e.g. default, rightbar)
+         */
+        layout_template: string;
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/ng-noosfero-api/interfaces/profile.ts b/src/lib/ng-noosfero-api/interfaces/profile.ts
index 7a317c8..607270b 100644
--- a/src/lib/ng-noosfero-api/interfaces/profile.ts
+++ b/src/lib/ng-noosfero-api/interfaces/profile.ts
@@ -80,5 +80,13 @@ namespace noosfero {
         custom_footer: string;
 
         permissions: string[];
+
+        /**
+         * @ngdoc property
+         * @name layout_template
+         * @propertyOf noofero.Profile
+         * @returns {string} The Profile layout template (e.g.: "rightbar", "default")
+         */
+        layout_template: string;
     }
 }
--
libgit2 0.21.2