Merge branch 'master' of softwarepublico.gov.br:noosfero-themes/angular-theme

Ábner Oliveira
2 parents da20ce18 0c28a983
Showing 24 changed files with 565 additions and 329 deletions Show diff stats
src/app/layout/blocks/block-content.component.spec.ts
src/app/layout/blocks/block-content.component.ts
src/app/layout/blocks/block-edition/block-edition.component.spec.ts
src/app/layout/blocks/block-edition/block-edition.component.ts
src/app/layout/blocks/block-edition/block-edition.html
src/app/layout/blocks/block-edition/block-edition.scss
src/app/layout/blocks/block.component.spec.ts
src/app/layout/blocks/block.component.ts
src/app/layout/blocks/block.html
src/app/layout/blocks/block.scss
src/app/layout/blocks/index.ts
src/app/layout/blocks/main/main-block.component.ts
src/app/layout/boxes/box.html
src/app/layout/boxes/boxes.component.spec.ts
src/app/layout/boxes/boxes.component.ts
src/app/layout/boxes/display-blocks.filter.spec.ts
src/app/layout/boxes/display-blocks.filter.ts
src/app/main/main.component.ts
src/languages/en.json
src/languages/pt.json
@@ -0,0 +1,91 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component} from 'ng-forward';
+
+import {BlockContentComponent} from './block-content.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-block-content [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block-content>';
+
+describe("Components", () => {
+    describe("Block Component", () => {
+
+        // the karma preprocessor html2js transform the templates html into js files which put
+        // the templates to the templateCache into the module templates
+        // we need to load the module templates here as the template for the
+        // component Block will be load on our tests
+        beforeEach(angular.mock.module("templates"));
+
+        it("receives the block and the owner as inputs", done => {
+
+            // Creating a container component (BlockContainerComponent) to include
+            // the component under test (Block)
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] })
+            class BlockContainerComponent {
+                block = { type: 'Block' };
+                owner = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            tcb
+                .createAsync(BlockContainerComponent).then(fixture => {
+                    // and here we can inspect and run the test assertions
+                    let myComponent: BlockContentComponent = fixture.componentInstance;
+
+                    // assure the block object inside the Block matches
+                    // the provided through the parent component
+                    expect(myComponent.block.type).toEqual("Block");
+                    expect(myComponent.owner.name).toEqual("profile-name");
+                    done();
+                });
+        });
+
+
+        it("renders a component which matches to the block type", done => {
+            // CustomBlock component created to check if it will be used
+            // when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
+            // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
+            @Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
+            class CustomBlock {
+                @Input() block: any;
+                @Input() owner: any;
+            }
+
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent, CustomBlock] })
+            class CustomBlockType {
+                block = { type: 'CustomBlock' };
+                owner = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+            tcb
+                .createAsync(CustomBlockType).then(fixture => {
+                    let myComponent: CustomBlockType = fixture.componentInstance;
+                    expect(myComponent.block.type).toEqual("CustomBlock");
+                    expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
+                    done();
+                });
+        });
+
+
+        it("renders the default block when hasn't defined a block type", done => {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] })
+            class CustomBlockType {
+                block: any = { type: null };
+                owner: any = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+            tcb
+                .createAsync(CustomBlockType).then(fixture => {
+                    let myComponent: CustomBlockType = fixture.componentInstance;
+                    expect(myComponent.block.type).toBeNull();
+                    expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
+                    done();
+                });
+        });
+
+    });
+});
@@ -0,0 +1,20 @@
+import { Input, Inject, Component } from 'ng-forward';
+
+@Component({
+    selector: 'noosfero-block-content',
+    template: '<div></div>'
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class BlockContentComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    ngOnInit() {
+        let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
+        this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
+    }
+
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+    }
+}
@@ -0,0 +1,34 @@
+import {Component} from 'ng-forward';
+import {BlockEditionComponent} from './block-edition.component';
+import * as helpers from "../../../../spec/helpers";
+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<noosfero-block-edition></noosfero-block-edition>';
+
+describe("Boxes Component", () => {
+
+    let helper: ComponentTestHelper<BlockEditionComponent>;
+    let translatorService = {
+        availableLanguages: { 'en': 'English', 'pt': 'Portuguese' }
+    };
+
+    beforeEach(() => {
+        angular.mock.module("templates");
+    });
+
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [BlockEditionComponent],
+            providers: [
+                helpers.createProviderToValue('TranslatorService', translatorService)
+            ]
+        });
+        helper = new ComponentTestHelper<BlockEditionComponent>(cls, done);
+    });
+
+    it("get available languages from translator service", () => {
+        expect(helper.component.languageOptions).toEqual(['all', 'en', 'pt']);
+    });
+
+});
@@ -0,0 +1,22 @@
+import { Input, Inject, Component } from 'ng-forward';
+import { TranslatorService } from "../../../shared/services/translator.service";
+
+@Component({
+    selector: 'noosfero-block-edition',
+    templateUrl: 'app/layout/blocks/block-edition/block-edition.html'
+})
+@Inject(TranslatorService)
+export class BlockEditionComponent {
+
+    static $inject = ["TranslatorService"]; // @Inject doesn't works with uibModal.open
+
+    displayOptions: any;
+    displayUserOptions: any;
+    languageOptions: any;
+
+    constructor(private translatorService: TranslatorService) {
+        this.displayOptions = ["always", "home_page_only", "except_home_page", "never"];
+        this.displayUserOptions = ["all", "logged", "not_logged"];
+        this.languageOptions = ["all"].concat(Object.keys(translatorService.availableLanguages));
+    }
+}
@@ -0,0 +1,34 @@
+<div class="edit-block">
+  <h3>{{"block.edition.title" | translate}}</h3>
+
+  <form class="options">
+    <div class="title block-option">
+      <label for="titleInput">{{"block.edition.title.label" | translate}}</label>
+      <input type="text" id="titleInput" ng-model="ctrl.block.title" class="block-input">
+    </div>
+    <div class="display block-option">
+      <label for="displayInput">{{"block.edition.display.label" | translate}}</label>
+      <select id="displayInput" ng-model="ctrl.block.settings.display" class="block-input">
+        <option ng-repeat="option in modal.displayOptions" value="{{option}}">{{"block.edition.display." + option | translate}}</option>
+      </select>
+    </div>
+    <div class="displayUser block-option">
+      <label for="displayUserInput">{{"block.edition.display_user.label" | translate}}</label>
+      <select id="displayUserInput" ng-model="ctrl.block.settings.display_user" class="block-input">
+        <option ng-repeat="option in modal.displayUserOptions" value="{{option}}">{{"block.edition.display_user." + option | translate}}</option>
+      </select>
+    </div>
+    <div class="language block-option">
+      <label for="languageInput">{{"block.edition.language.label" | translate}}</label>
+      <select id="languageInput" ng-model="ctrl.block.settings.language" class="block-input">
+        <option ng-repeat="option in modal.languageOptions" value="{{option}}">{{"language." + option | translate}}</option>
+      </select>
+    </div>
+  </form>
+
+  <div class="actions">
+    <button type="submit" class="btn btn-default" ng-click="ctrl.save()">Save</button>
+    <button type="submit" class="btn btn-warning" ng-click="ctrl.preview()">Preview</button>
+    <button type="submit" class="btn btn-danger" ng-click="ctrl.cancel()">Cancel</button>
+  </div>
+</div>
@@ -0,0 +1,14 @@
+.edit-block {
+  margin: 20px;
+
+  .options {
+    margin-bottom: 20px;
+
+    .block-option {
+      @extend .form-group;
+      .block-input {
+        @extend .form-control;
+      }
+    }
+  }
+}
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Input, provide, Component} from 'ng-forward';
-
+import {Component} from 'ng-forward';
 import {BlockComponent} from './block.component';
+import * as helpers from "../../../spec/helpers";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block>';
-
-describe("Components", () => {
-    describe("Block Component", () => {
-
-        // the karma preprocessor html2js transform the templates html into js files which put
-        // the templates to the templateCache into the module templates
-        // we need to load the module templates here as the template for the 
-        // component Block will be load on our tests
-        beforeEach(angular.mock.module("templates"));
-
-        it("receives the block and the owner as inputs", done => {
-
-            // Creating a container component (BlockContainerComponent) to include 
-            // the component under test (Block)  
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] })
-            class BlockContainerComponent {
-                block = { type: 'Block' };
-                owner = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            tcb
-                .createAsync(BlockContainerComponent).then(fixture => {
-                    // and here we can inspect and run the test assertions 
-                    let myComponent: BlockComponent = fixture.componentInstance;
-
-                    // assure the block object inside the Block matches
-                    // the provided through the parent component
-                    expect(myComponent.block.type).toEqual("Block");
-                    expect(myComponent.owner.name).toEqual("profile-name");
-                    done();
-                });
-        });
+const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.profile"></noosfero-block>';
+describe("Boxes Component", () => {
-        it("renders a component which matches to the block type", done => {
-            // CustomBlock component created to check if it will be used
-            // when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
-            // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
-            @Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
-            class CustomBlock {
-                @Input() block: any;
-                @Input() owner: any;
-            }
-
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent, CustomBlock] })
-            class CustomBlockType {
-                block = { type: 'CustomBlock' };
-                owner = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-            tcb
-                .createAsync(CustomBlockType).then(fixture => {
-                    let myComponent: CustomBlockType = fixture.componentInstance;
-                    expect(myComponent.block.type).toEqual("CustomBlock");
-                    expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
-                    done();
-                });
+    let helper: ComponentTestHelper<BlockComponent>;
+    beforeEach(() => {
+        angular.mock.module("templates");
+    });
+
+    let properties = {
+        block: { id: 1 },
+        owner: {
+            id: 1,
+            identifier: 'profile-name',
+            type: 'Person'
+        }
+    };
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [BlockComponent],
+            properties: properties,
+            providers: [
+                helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                helpers.createProviderToValue('AuthService', helpers.mocks.authService),
+                helpers.createProviderToValue('$state', state),
+                helpers.createProviderToValue('TranslatorService', translatorService),
+                helpers.createProviderToValue('$uibModal', helpers.mocks.$modal),
+                helpers.createProviderToValue('BlockService', blockService),
+                helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
+            ]
         });
+        helper = new ComponentTestHelper<BlockComponent>(cls, done);
+    });
+    let translatorService = jasmine.createSpyObj("translatorService", ["currentLanguage"]);
+    let blockService = jasmine.createSpyObj("blockService", ["update"]);
+    let state = jasmine.createSpyObj("state", ["current"]);
+    state.current = { name: "" };
-        it("renders the default block when hasn't defined a block type", done => {
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] })
-            class CustomBlockType {
-                block: any = { type: null };
-                owner: any = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-            tcb
-                .createAsync(CustomBlockType).then(fixture => {
-                    let myComponent: CustomBlockType = fixture.componentInstance;
-                    expect(myComponent.block.type).toBeNull();
-                    expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
-                    done();
-                });
-        });
+    it("set isHomepage as false by default", () => {
+        expect(helper.component.isHomepage).toBeFalsy();
+    });
+
+    it("set isHomepage as true when in profile home page", () => {
+        state.current = { name: "main.profile.home" };
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("set isHomepage as true when in profile info page", () => {
+        state.current = { name: "main.profile.info" };
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("set isHomepage as true when in profile page", () => {
+        state.current = { name: "main.profile.page" };
+        state.params = { page: "/page" };
+        (<noosfero.Profile>helper.component.owner).homepage = '/page';
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("set isHomepage as true when in environment home page", () => {
+        state.current = { name: "main.environment.home" };
+        helper.component.owner = <noosfero.Environment>{};
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("return true in canDisplay when no display option is setted", () => {
+        helper.component.block = <any>{};
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+
+    it("return false in canDisplay for an invisible block", () => {
+        helper.component.block = <any>{ settings: { display: "never" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay with except_home_page in homepage", () => {
+        helper.component.block = <any>{ settings: { display_user: "except_home_page" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay with home_page_only outside homepage", () => {
+        helper.component.block = <any>{ settings: { display_user: "home_page_only" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return true in canDisplay when display_user is all for logged user", () => {
+        helper.component.block = <any>{ settings: { display_user: "all" } };
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+
+    it("return true in canDisplay when display_user is all for not logged user", () => {
+        helper.component.currentUser = null;
+        helper.component.block = <any>{ settings: { display_user: "all" } };
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+    it("return false in canDisplay when display_user is logged for not logged user", () => {
+        helper.component.currentUser = null;
+        helper.component.block = <any>{ settings: { display_user: "logged" } };
+        expect(helper.component.canDisplay()).toEqual(false);
     });
-});
 \ No newline at end of file
+
+    it("return false in canDisplay when display_user is not_logged for logged user", () => {
+        helper.component.block = <any>{ settings: { display_user: "not_logged" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay when current language is not equal to language in block settings", () => {
+        helper.component['translatorService'].currentLanguage = jasmine.createSpy("currentLanguage").and.returnValue("pt");
+        helper.component.block = <any>{ settings: { language: "en" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay when hide is true", () => {
+        helper.component.block = <any>{ id: 1, hide: true };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return true in canDisplay when hide is not true", () => {
+        helper.component.block = <any>{ id: 1, hide: false };
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+
+});
-import { Input, Inject, Component } from 'ng-forward';
+import { Input, Component, Inject } from 'ng-forward';
+import { BlockEditionComponent } from './block-edition/block-edition.component';
+import { BlockService } from '../../../lib/ng-noosfero-api/http/block.service';
+import { NotificationService } from '../../shared/services/notification.service';
+import { AuthService, SessionService, AuthEvents } from "../../login";
+import { TranslatorService } from "../../shared/services/translator.service";
 @Component({
     selector: 'noosfero-block',
-    template: '<div></div>'
+    templateUrl: 'app/layout/blocks/block.html',
+    directives: [BlockEditionComponent]
 })
-@Inject("$element", "$scope", "$injector", "$compile")
+@Inject("$uibModal", "$scope", "$state", "$rootScope", BlockService, NotificationService, AuthService, SessionService, TranslatorService)
 export class BlockComponent {
-    @Input() block: any;
-    @Input() owner: any;
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile | noosfero.Environment;
+
+    private modalInstance: any = null;
+    originalBlock: noosfero.Block;
+
+    currentUser: noosfero.User;
+    isHomepage = true;
+    editionMode = false;
+
+    constructor(private $uibModal: any,
+        private $scope: ng.IScope,
+        private $state: ng.ui.IStateService,
+        private $rootScope: ng.IRootScopeService,
+        private blockService: BlockService,
+        private notificationService: NotificationService,
+        private authService: AuthService,
+        private session: SessionService,
+        private translatorService: TranslatorService) {
+
+        this.currentUser = this.session.currentUser();
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.currentUser = this.session.currentUser();
+            this.verifyHomepage();
+        });
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
+            this.currentUser = this.session.currentUser();
+            this.verifyHomepage();
+        });
+        this.$rootScope.$on("$stateChangeSuccess", (event: ng.IAngularEvent, toState: ng.ui.IState) => {
+            this.verifyHomepage();
+        });
+    }
     ngOnInit() {
-        let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
-        this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
+        this.verifyHomepage();
+    }
+
+    openEdit() {
+        this.editionMode = true;
+        if (!this.originalBlock) this.originalBlock = JSON.parse(JSON.stringify(this.block)); // deep copy of block data
+        this.modalInstance = this.$uibModal.open({
+            templateUrl: 'app/layout/blocks/block-edition/block-edition.html',
+            size: 'lg',
+            controller: BlockEditionComponent,
+            controllerAs: 'modal',
+            bindToController: true,
+            scope: this.$scope
+        });
+    }
+
+    save() {
+        this.editionMode = false;
+        this.blockService.update(this.attributesToUpdate()).then(() => {
+            this.closeEdit();
+            this.notificationService.success({ title: "block.edition.success.title", message: "block.edition.success.message" });
+        });
+    }
+
+    preview() {
+        this.closeEdit();
+    }
+
+    cancel() {
+        this.editionMode = false;
+        this.block = this.originalBlock;
+        this.closeEdit();
     }
-    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+    canDisplay() {
+        return this.visible() && this.displayToUser() &&
+            this.displayOnLanguage(this.translatorService.currentLanguage()) &&
+            !this.block.hide;
     }
+
+    protected visible() {
+        let display = this.block.settings ? (<any>this.block.settings)['display'] : null;
+        return !display || ((this.isHomepage ? display !== "except_home_page" : display !== "home_page_only") && display !== "never");
+    }
+
+    protected displayToUser() {
+        let displayUser = this.block.settings ? (<any>this.block.settings)['display_user'] : null;
+        return !displayUser || displayUser === "all" ||
+            (this.currentUser ? displayUser === "logged" : displayUser === "not_logged");
+    }
+
+    protected displayOnLanguage(language: string) {
+        let displayLanguage = this.block.settings ? (<any>this.block.settings)['language'] : null;
+        return !displayLanguage || displayLanguage === "all" ||
+            language === displayLanguage;
+    }
+
+    protected attributesToUpdate() {
+        return <any>{
+            id: this.block.id,
+            display: (<any>this.block.settings).display,
+            title: this.block.title,
+            display_user: (<any>this.block.settings).display_user,
+            language: (<any>this.block.settings).language
+        };
+    }
+
+    protected verifyHomepage() {
+        if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) {
+            let profile = <noosfero.Profile>this.owner;
+            this.isHomepage = this.$state.current.name === "main.profile.home";
+            if (profile.homepage) {
+                this.isHomepage = this.isHomepage ||
+                    (this.$state.current.name === "main.profile.page" && profile.homepage === this.$state.params['page']);
+            } else {
+                this.isHomepage = this.isHomepage || this.$state.current.name === "main.profile.info";
+            }
+        } else {
+            this.isHomepage = this.$state.current.name === "main.environment.home";
+        }
+    }
+
+    private closeEdit() {
+        if (this.modalInstance) {
+            this.modalInstance.close();
+            this.modalInstance = null;
+        }
+    }
+
 }
@@ -0,0 +1,13 @@
+<div ng-show="ctrl.canDisplay() || ctrl.editionMode" ng-class="{'invisible-block': !ctrl.canDisplay()}" class="noosfero-block" ng-mouseover="displayActions = true" ng-mouseleave="displayActions = false">
+  <div ng-show="displayActions" class="actions" permission="ctrl.block.permissions" permission-action="allow_edit">
+    <button type="submit" class="btn btn-xs btn-default" ng-click="ctrl.openEdit()"><i class="fa fa-edit fa-fw"></i></button>
+  </div>
+  <div class="panel panel-default block {{ctrl.block.type | lowercase}}" >
+    <div class="panel-heading" ng-show="ctrl.block.title">
+      <h3 class="panel-title">{{ctrl.block.title}}</h3>
+    </div>
+    <div class="panel-body {{ctrl.block.type | lowercase}}" >
+      <noosfero-block-content [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block-content>
+    </div>
+  </div>
+</div>
-.block {
-  .panel-title {
-    font-size: 15px;
-    font-weight: bold;
+.noosfero-block {
+  position: relative;
+  &.invisible-block {
+    .block {
+      opacity: 0.4;
+    }
   }
-  .panel-heading {
-    background-color: transparent;
-    border: 0;
+  .block {
+    .panel-title {
+      font-size: 15px;
+      font-weight: bold;
+    }
+    .panel-heading {
+      background-color: transparent;
+      border: 0;
+    }
+  }
+  .actions {
+    position: absolute;
+    z-index: 100;
+    right: 1px;
+    top: 1px;
   }
 }
 /* Module Index Entry - generated using the script npm run generate-index */
-export * from "./block.component";
+export * from "./block-content.component";
 import {Component, Input} from 'ng-forward';
-import {BlockComponent} from '../block.component';
 @Component({
     selector: 'noosfero-main-block',
 <div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
-  <div ng-repeat="block in box.blocks | displayBlocks:ctrl.isHomepage:ctrl.currentUser  | 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>
+  <noosfero-block ng-repeat="block in box.blocks | orderBy: 'position'" [block]="block" [owner]="ctrl.owner"></noosfero-block>
 </div>
@@ -53,35 +53,4 @@ describe(&quot;Boxes Component&quot;, () =&gt; {
         expect(helper.component.boxesOrder(properties['boxes'][0])).toEqual(1);
         expect(helper.component.boxesOrder(properties['boxes'][1])).toEqual(0);
     });
-
-    it("set isHomepage as false by default", () => {
-        expect(helper.component.isHomepage).toBeFalsy();
-    });
-
-    it("set isHomepage as true when in profile home page", () => {
-        state.current = { name: "main.profile.home" };
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
-
-    it("set isHomepage as true when in profile info page", () => {
-        state.current = { name: "main.profile.info" };
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
-
-    it("set isHomepage as true when in profile page", () => {
-        state.current = { name: "main.profile.page" };
-        state.params = { page: "/page" };
-        (<noosfero.Profile>helper.component.owner).homepage = '/page';
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
-
-    it("set isHomepage as true when in environment home page", () => {
-        state.current = { name: "main.environment.home" };
-        helper.component.owner = <noosfero.Environment>{};
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
 });
-import {Input, Inject, Component} from 'ng-forward';
-import {SessionService, AuthService, AuthEvents} from "../../login";
-import {DisplayBlocks} from "./display-blocks.filter";
+import {Input, Component} from 'ng-forward';
 @Component({
     selector: "noosfero-boxes",
-    templateUrl: "app/layout/boxes/boxes.html",
-    directives: [DisplayBlocks]
+    templateUrl: "app/layout/boxes/boxes.html"
 })
-@Inject("SessionService", 'AuthService', "$state", "$rootScope")
 export class BoxesComponent {
     @Input() boxes: noosfero.Box[];
     @Input() owner: noosfero.Profile | noosfero.Environment;
-    currentUser: noosfero.User;
-    isHomepage = true;
-
-    constructor(private session: SessionService,
-        private authService: AuthService,
-        private $state: ng.ui.IStateService,
-        private $rootScope: ng.IRootScopeService) {
-
-        this.currentUser = this.session.currentUser();
-        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
-            this.currentUser = this.session.currentUser();
-            this.verifyHomepage();
-        });
-        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
-            this.currentUser = this.session.currentUser();
-            this.verifyHomepage();
-        });
-        this.$rootScope.$on("$stateChangeSuccess", (event: ng.IAngularEvent, toState: ng.ui.IState) => {
-            this.verifyHomepage();
-        });
-    }
-
-    ngOnInit() {
-        this.verifyHomepage();
-    }
-
     boxesOrder(box: noosfero.Box) {
         if (box.position === 2) return 0;
         return box.position;
     }
-
-    private verifyHomepage() {
-        if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) {
-            let profile = <noosfero.Profile>this.owner;
-            this.isHomepage = this.$state.current.name === "main.profile.home";
-            if (profile.homepage) {
-                this.isHomepage = this.isHomepage ||
-                    (this.$state.current.name === "main.profile.page" && profile.homepage === this.$state.params['page']);
-            } else {
-                this.isHomepage = this.isHomepage || this.$state.current.name === "main.profile.info";
-            }
-        } else {
-            this.isHomepage = this.$state.current.name === "main.environment.home";
-        }
-    }
 }
@@ -1,100 +0,0 @@
-import {quickCreateComponent} from "../../../spec/helpers";
-import {DisplayBlocks} from './display-blocks.filter';
-
-describe("Filters", () => {
-    describe("Display Blocks Filter", () => {
-
-        let translatorService = jasmine.createSpyObj("translatorService", ["currentLanguage"]);
-
-        it("not fail when blocks is null", done => {
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(null, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("return blocks when no setting is passed", done => {
-            let blocks = [{}];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
-            done();
-        });
-
-        it("return blocks when no display is passed", done => {
-            let blocks = [{ setting: {} }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
-            done();
-        });
-
-        it("filter invisible blocks", done => {
-            let blocks = [{ settings: { display: "never" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks with except_home_page in homepage", done => {
-            let blocks = [{ settings: { display: "except_home_page" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks with home_page_only outside homepage", done => {
-            let blocks = [{ settings: { display: "home_page_only" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, false, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("show all blocks when display_user is all for logged user", done => {
-            let blocks = [{ settings: { display_user: "all" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
-            done();
-        });
-
-        it("show all blocks when display_user is all for not logged user", done => {
-            let blocks = [{ settings: { display_user: "all" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual(blocks);
-            done();
-        });
-
-        it("filter blocks when display_user is logged for not logged user", done => {
-            let blocks = [{ settings: { display_user: "logged" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual([]);
-            done();
-        });
-
-        it("filter blocks when display_user is not_logged for logged user", done => {
-            let blocks = [{ settings: { display_user: "not_logged" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks with different language", done => {
-            let blocks = [{ settings: { language: "en" } }];
-            translatorService.currentLanguage = jasmine.createSpy("currentLanguage").and.returnValue("pt");
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks when hide is true", done => {
-            let blocks = [{ hide: true }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual([]);
-            done();
-        });
-
-        it("not filter blocks when hide is not true", done => {
-            let blocks = [{ id: 1, hide: false }, { id: 2 }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual(blocks);
-            done();
-        });
-    });
-});
@@ -1,39 +0,0 @@
-import {Pipe, Inject} from "ng-forward";
-import {TranslatorService} from "../../shared/services/translator.service";
-
-@Pipe("displayBlocks")
-@Inject(TranslatorService)
-export class DisplayBlocks {
-
-    constructor(private translatorService: TranslatorService) { }
-
-    transform(blocks: noosfero.Block[], isHomepage: boolean, currentUser: noosfero.User) {
-        let selected: noosfero.Block[] = [];
-        blocks = blocks || [];
-        for (let block of blocks) {
-            if (this.visible(block, isHomepage) && this.displayToUser(block, currentUser) &&
-                this.displayOnLanguage(block, this.translatorService.currentLanguage())
-                && !block.hide) {
-                selected.push(block);
-            }
-        }
-        return selected;
-    }
-
-    private visible(block: noosfero.Block, isHomepage: boolean) {
-        let display = block.settings ? (<any>block.settings)['display'] : null;
-        return !display || ((isHomepage ? display !== "except_home_page" : display !== "home_page_only") && display !== "never");
-    }
-
-    private displayToUser(block: noosfero.Block, currentUser: noosfero.User) {
-        let displayUser = block.settings ? (<any>block.settings)['display_user'] : null;
-        return !displayUser || displayUser === "all" ||
-            (currentUser ? displayUser === "logged" : displayUser === "not_logged");
-    }
-
-    private displayOnLanguage(block: noosfero.Block, language: string) {
-        let displayLanguage = block.settings ? (<any>block.settings)['language'] : null;
-        return !displayLanguage || displayLanguage === "all" ||
-            language === displayLanguage;
-    }
-}
@@ -6,6 +6,7 @@ import {ArticleViewComponent} from &quot;./../article/article-default-view.component&quot;
 import {ProfileComponent} from "../profile/profile.component";
 import {BoxesComponent} from "../layout/boxes/boxes.component";
+import {BlockContentComponent} from "../layout/blocks/block-content.component";
 import {BlockComponent} from "../layout/blocks/block.component";
 import {EnvironmentComponent} from "../environment/environment.component";
 import {EnvironmentHomeComponent} from "../environment/environment-home.component";
@@ -97,12 +98,13 @@ export class EnvironmentContent {
     selector: 'main',
     template: '<ui-view></ui-view>',
     directives: [
-        ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
+        ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockContentComponent,
         EnvironmentComponent, PeopleBlockComponent, DisplayContentBlockComponent,
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent, ProfileComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
-        LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent
+        LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
+        BlockComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
         "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
@@ -6,6 +6,7 @@
   "navbar.logout": "Log Out",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Toggle navigation",
+  "language.all": "All languages",
   "language.en": "English",
   "language.pt": "Portuguese",
   "language.selector": "Language",
@@ -80,5 +81,20 @@
   "designMode.toggle.OFF": "OFF",
   "search.results.summary": "{results, plural, one{result} other{# results}}",
   "search.results.query.label": "Search for:",
-  "search.results.query.placeholder": "Search"
+  "search.results.query.placeholder": "Search",
+  "block.edit": "Edit",
+  "block.edition.title": "Edit Block",
+  "block.edition.success.title": "Good job!",
+  "block.edition.success.message": "Block saved!",
+  "block.edition.display.label": "Display this block:",
+  "block.edition.title.label": "Custom title for this block:",
+  "block.edition.display.always": "In all pages",
+  "block.edition.display.home_page_only": "Only in the homepage",
+  "block.edition.display.except_home_page": "In all pages, except in the homepage",
+  "block.edition.display.never": "Don't display",
+  "block.edition.display_user.label": "Display to users:",
+  "block.edition.display_user.all": "All users",
+  "block.edition.display_user.logged": "Logged",
+  "block.edition.display_user.not_logged": "Not logged",
+  "block.edition.language.label": "Show for:"
 }
@@ -6,6 +6,7 @@
   "navbar.logout": "Sair",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Abrir Menu",
+  "language.all": "Todos os idiomas",
   "language.en": "Inglês",
   "language.pt": "Português",
   "language.selector": "Idioma",
@@ -80,5 +81,20 @@
   "designMode.toggle.OFF": "Desligado",
   "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
   "search.results.query.label": "Buscar:",
-  "search.results.query.placeholder": "Informe aqui sua busca"
+  "search.results.query.placeholder": "Informe aqui sua busca",
+  "block.edit": "Editar",
+  "block.edition.title": "Editar Bloco",
+  "block.edition.success.title": "Bom trabalho!",
+  "block.edition.success.message": "Bloco salvo com sucesso!",
+  "block.edition.display.label": "Exibir este bloco:",
+  "block.edition.title.label": "Título personalizado do bloco:",
+  "block.edition.display.always": "Em todas as páginas",
+  "block.edition.display.home_page_only": "Apenas na página inicial",
+  "block.edition.display.except_home_page": "Em todas as páginas, exceto na inicial",
+  "block.edition.display.never": "Não exibir",
+  "block.edition.display_user.label": "Exibir para usuários:",
+  "block.edition.display_user.all": "Todos os usuários",
+  "block.edition.display_user.logged": "Logados",
+  "block.edition.display_user.not_logged": "Não logados",
+  "block.edition.language.label": "Exibir para:"
 }
@@ -29,6 +29,16 @@ describe(&quot;Services&quot;, () =&gt; {
                 });
                 $httpBackend.flush();
             });
+
+            it("update block settings", (done) => {
+                let blockId = 1;
+                $httpBackend.expectPOST(`/api/v1/blocks/${blockId}`).respond(200, { block: { id: blockId } });
+                blockService.update(<any>{ id: blockId, display: 'never' }).then((result: noosfero.RestResult<noosfero.Block>) => {
+                    expect(result.data).toEqual({ id: blockId });
+                    done();
+                });
+                $httpBackend.flush();
+            });
         });
@@ -47,4 +47,12 @@ export class BlockService extends RestangularService&lt;noosfero.Block&gt; {
         return deferred.promise;
     }
+    update(block: noosfero.Block) {
+        let element = this.getElement(block.id);
+        let headers = {
+            'Content-Type': 'application/json'
+        };
+        return this.post(null, element, { block: block }, headers);
+    }
+
 }
@@ -289,7 +289,7 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
         let restRequest: ng.IPromise<any>;
         if (rootElement) {
-            restRequest = rootElement.customPOST(data, path, headers);
+            restRequest = rootElement.customPOST(data, path, null, headers);
         } else {
             restRequest = this.baseResource.customPOST(data, path, headers);
         }
@@ -5,5 +5,6 @@ namespace noosfero {
         limit: number;
         api_content: any;
         hide: boolean;
+        title: string;
     }
 }
@@ -0,0 +1,91 @@		@@ -0,0 +1,91 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Input, provide, Component} from 'ng-forward';
	3	+
	4	+import {BlockContentComponent} from './block-content.component';
	5	+
	6	+const tcb = new TestComponentBuilder();
	7	+
	8	+const htmlTemplate: string = '<noosfero-block-content [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block-content>';
	9	+
	10	+describe("Components", () => {
	11	+ describe("Block Component", () => {
	12	+
	13	+ // the karma preprocessor html2js transform the templates html into js files which put
	14	+ // the templates to the templateCache into the module templates
	15	+ // we need to load the module templates here as the template for the
	16	+ // component Block will be load on our tests
	17	+ beforeEach(angular.mock.module("templates"));
	18	+
	19	+ it("receives the block and the owner as inputs", done => {
	20	+
	21	+ // Creating a container component (BlockContainerComponent) to include
	22	+ // the component under test (Block)
	23	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] })
	24	+ class BlockContainerComponent {
	25	+ block = { type: 'Block' };
	26	+ owner = { name: 'profile-name' };
	27	+ constructor() {
	28	+ }
	29	+ }
	30	+
	31	+ // uses the TestComponentBuilder instance to initialize the component
	32	+ tcb
	33	+ .createAsync(BlockContainerComponent).then(fixture => {
	34	+ // and here we can inspect and run the test assertions
	35	+ let myComponent: BlockContentComponent = fixture.componentInstance;
	36	+
	37	+ // assure the block object inside the Block matches
	38	+ // the provided through the parent component
	39	+ expect(myComponent.block.type).toEqual("Block");
	40	+ expect(myComponent.owner.name).toEqual("profile-name");
	41	+ done();
	42	+ });
	43	+ });
	44	+
	45	+
	46	+ it("renders a component which matches to the block type", done => {
	47	+ // CustomBlock component created to check if it will be used
	48	+ // when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
	49	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
	50	+ @Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
	51	+ class CustomBlock {
	52	+ @Input() block: any;
	53	+ @Input() owner: any;
	54	+ }
	55	+
	56	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent, CustomBlock] })
	57	+ class CustomBlockType {
	58	+ block = { type: 'CustomBlock' };
	59	+ owner = { name: 'profile-name' };
	60	+ constructor() {
	61	+ }
	62	+ }
	63	+ tcb
	64	+ .createAsync(CustomBlockType).then(fixture => {
	65	+ let myComponent: CustomBlockType = fixture.componentInstance;
	66	+ expect(myComponent.block.type).toEqual("CustomBlock");
	67	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
	68	+ done();
	69	+ });
	70	+ });
	71	+
	72	+
	73	+ it("renders the default block when hasn't defined a block type", done => {
	74	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] })
	75	+ class CustomBlockType {
	76	+ block: any = { type: null };
	77	+ owner: any = { name: 'profile-name' };
	78	+ constructor() {
	79	+ }
	80	+ }
	81	+ tcb
	82	+ .createAsync(CustomBlockType).then(fixture => {
	83	+ let myComponent: CustomBlockType = fixture.componentInstance;
	84	+ expect(myComponent.block.type).toBeNull();
	85	+ expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
	86	+ done();
	87	+ });
	88	+ });
	89	+
	90	+ });
	91	+});
@@ -0,0 +1,20 @@		@@ -0,0 +1,20 @@
	1	+import { Input, Inject, Component } from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'noosfero-block-content',
	5	+ template: '<div></div>'
	6	+})
	7	+@Inject("$element", "$scope", "$injector", "$compile")
	8	+export class BlockContentComponent {
	9	+
	10	+ @Input() block: any;
	11	+ @Input() owner: any;
	12	+
	13	+ ngOnInit() {
	14	+ let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
	15	+ this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
	16	+ }
	17	+
	18	+ constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
	19	+ }
	20	+}
@@ -0,0 +1,34 @@		@@ -0,0 +1,34 @@
	1	+import {Component} from 'ng-forward';
	2	+import {BlockEditionComponent} from './block-edition.component';
	3	+import * as helpers from "../../../../spec/helpers";
	4	+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
	5	+
	6	+const htmlTemplate: string = '<noosfero-block-edition></noosfero-block-edition>';
	7	+
	8	+describe("Boxes Component", () => {
	9	+
	10	+ let helper: ComponentTestHelper<BlockEditionComponent>;
	11	+ let translatorService = {
	12	+ availableLanguages: { 'en': 'English', 'pt': 'Portuguese' }
	13	+ };
	14	+
	15	+ beforeEach(() => {
	16	+ angular.mock.module("templates");
	17	+ });
	18	+
	19	+ beforeEach((done) => {
	20	+ let cls = createClass({
	21	+ template: htmlTemplate,
	22	+ directives: [BlockEditionComponent],
	23	+ providers: [
	24	+ helpers.createProviderToValue('TranslatorService', translatorService)
	25	+ ]
	26	+ });
	27	+ helper = new ComponentTestHelper<BlockEditionComponent>(cls, done);
	28	+ });
	29	+
	30	+ it("get available languages from translator service", () => {
	31	+ expect(helper.component.languageOptions).toEqual(['all', 'en', 'pt']);
	32	+ });
	33	+
	34	+});
@@ -0,0 +1,22 @@		@@ -0,0 +1,22 @@
	1	+import { Input, Inject, Component } from 'ng-forward';
	2	+import { TranslatorService } from "../../../shared/services/translator.service";
	3	+
	4	+@Component({
	5	+ selector: 'noosfero-block-edition',
	6	+ templateUrl: 'app/layout/blocks/block-edition/block-edition.html'
	7	+})
	8	+@Inject(TranslatorService)
	9	+export class BlockEditionComponent {
	10	+
	11	+ static $inject = ["TranslatorService"]; // @Inject doesn't works with uibModal.open
	12	+
	13	+ displayOptions: any;
	14	+ displayUserOptions: any;
	15	+ languageOptions: any;
	16	+
	17	+ constructor(private translatorService: TranslatorService) {
	18	+ this.displayOptions = ["always", "home_page_only", "except_home_page", "never"];
	19	+ this.displayUserOptions = ["all", "logged", "not_logged"];
	20	+ this.languageOptions = ["all"].concat(Object.keys(translatorService.availableLanguages));
	21	+ }
	22	+}
@@ -0,0 +1,34 @@		@@ -0,0 +1,34 @@
	1	+<div class="edit-block">
	2	+ <h3>{{"block.edition.title" \| translate}}</h3>
	3	+
	4	+ <form class="options">
	5	+ <div class="title block-option">
	6	+ <label for="titleInput">{{"block.edition.title.label" \| translate}}</label>
	7	+ <input type="text" id="titleInput" ng-model="ctrl.block.title" class="block-input">
	8	+ </div>
	9	+ <div class="display block-option">
	10	+ <label for="displayInput">{{"block.edition.display.label" \| translate}}</label>
	11	+ <select id="displayInput" ng-model="ctrl.block.settings.display" class="block-input">
	12	+ <option ng-repeat="option in modal.displayOptions" value="{{option}}">{{"block.edition.display." + option \| translate}}</option>
	13	+ </select>
	14	+ </div>
	15	+ <div class="displayUser block-option">
	16	+ <label for="displayUserInput">{{"block.edition.display_user.label" \| translate}}</label>
	17	+ <select id="displayUserInput" ng-model="ctrl.block.settings.display_user" class="block-input">
	18	+ <option ng-repeat="option in modal.displayUserOptions" value="{{option}}">{{"block.edition.display_user." + option \| translate}}</option>
	19	+ </select>
	20	+ </div>
	21	+ <div class="language block-option">
	22	+ <label for="languageInput">{{"block.edition.language.label" \| translate}}</label>
	23	+ <select id="languageInput" ng-model="ctrl.block.settings.language" class="block-input">
	24	+ <option ng-repeat="option in modal.languageOptions" value="{{option}}">{{"language." + option \| translate}}</option>
	25	+ </select>
	26	+ </div>
	27	+ </form>
	28	+
	29	+ <div class="actions">
	30	+ <button type="submit" class="btn btn-default" ng-click="ctrl.save()">Save</button>
	31	+ <button type="submit" class="btn btn-warning" ng-click="ctrl.preview()">Preview</button>
	32	+ <button type="submit" class="btn btn-danger" ng-click="ctrl.cancel()">Cancel</button>
	33	+ </div>
	34	+</div>
@@ -0,0 +1,14 @@		@@ -0,0 +1,14 @@
	1	+.edit-block {
	2	+ margin: 20px;
	3	+
	4	+ .options {
	5	+ margin-bottom: 20px;
	6	+
	7	+ .block-option {
	8	+ @extend .form-group;
	9	+ .block-input {
	10	+ @extend .form-control;
	11	+ }
	12	+ }
	13	+ }
	14	+}
1	-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
2	-import {Input, provide, Component} from 'ng-forward';
3	-	1	+import {Component} from 'ng-forward';
4	import {BlockComponent} from './block.component';	2	import {BlockComponent} from './block.component';
		3	+import * as helpers from "../../../spec/helpers";
		4	+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
5		5
6	-const tcb = new TestComponentBuilder();
7	-
8	-const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block>';
9	-
10	-describe("Components", () => {
11	- describe("Block Component", () => {
12	-
13	- // the karma preprocessor html2js transform the templates html into js files which put
14	- // the templates to the templateCache into the module templates
15	- // we need to load the module templates here as the template for the
16	- // component Block will be load on our tests
17	- beforeEach(angular.mock.module("templates"));
18	-
19	- it("receives the block and the owner as inputs", done => {
20	-
21	- // Creating a container component (BlockContainerComponent) to include
22	- // the component under test (Block)
23	- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] })
24	- class BlockContainerComponent {
25	- block = { type: 'Block' };
26	- owner = { name: 'profile-name' };
27	- constructor() {
28	- }
29	- }
30	-
31	- // uses the TestComponentBuilder instance to initialize the component
32	- tcb
33	- .createAsync(BlockContainerComponent).then(fixture => {
34	- // and here we can inspect and run the test assertions
35	- let myComponent: BlockComponent = fixture.componentInstance;
36	-
37	- // assure the block object inside the Block matches
38	- // the provided through the parent component
39	- expect(myComponent.block.type).toEqual("Block");
40	- expect(myComponent.owner.name).toEqual("profile-name");
41	- done();
42	- });
43	- });	6	+const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.profile"></noosfero-block>';
44		7
		8	+describe("Boxes Component", () => {
45		9
46	- it("renders a component which matches to the block type", done => {
47	- // CustomBlock component created to check if it will be used
48	- // when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
49	- // * Important * - the selector is what ng-forward uses to define the name of the directive provider
50	- @Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
51	- class CustomBlock {
52	- @Input() block: any;
53	- @Input() owner: any;
54	- }
55	-
56	- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent, CustomBlock] })
57	- class CustomBlockType {
58	- block = { type: 'CustomBlock' };
59	- owner = { name: 'profile-name' };
60	- constructor() {
61	- }
62	- }
63	- tcb
64	- .createAsync(CustomBlockType).then(fixture => {
65	- let myComponent: CustomBlockType = fixture.componentInstance;
66	- expect(myComponent.block.type).toEqual("CustomBlock");
67	- expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
68	- done();
69	- });	10	+ let helper: ComponentTestHelper<BlockComponent>;
		11	+ beforeEach(() => {
		12	+ angular.mock.module("templates");
		13	+ });
		14	+
		15	+ let properties = {
		16	+ block: { id: 1 },
		17	+ owner: {
		18	+ id: 1,
		19	+ identifier: 'profile-name',
		20	+ type: 'Person'
		21	+ }
		22	+ };
		23	+ beforeEach((done) => {
		24	+ let cls = createClass({
		25	+ template: htmlTemplate,
		26	+ directives: [BlockComponent],
		27	+ properties: properties,
		28	+ providers: [
		29	+ helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
		30	+ helpers.createProviderToValue('AuthService', helpers.mocks.authService),
		31	+ helpers.createProviderToValue('$state', state),
		32	+ helpers.createProviderToValue('TranslatorService', translatorService),
		33	+ helpers.createProviderToValue('$uibModal', helpers.mocks.$modal),
		34	+ helpers.createProviderToValue('BlockService', blockService),
		35	+ helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
		36	+ ]
70	});	37	});
		38	+ helper = new ComponentTestHelper<BlockComponent>(cls, done);
		39	+ });
71		40
		41	+ let translatorService = jasmine.createSpyObj("translatorService", ["currentLanguage"]);
		42	+ let blockService = jasmine.createSpyObj("blockService", ["update"]);
		43	+ let state = jasmine.createSpyObj("state", ["current"]);
		44	+ state.current = { name: "" };
72		45
73	- it("renders the default block when hasn't defined a block type", done => {
74	- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] })
75	- class CustomBlockType {
76	- block: any = { type: null };
77	- owner: any = { name: 'profile-name' };
78	- constructor() {
79	- }
80	- }
81	- tcb
82	- .createAsync(CustomBlockType).then(fixture => {
83	- let myComponent: CustomBlockType = fixture.componentInstance;
84	- expect(myComponent.block.type).toBeNull();
85	- expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
86	- done();
87	- });
88	- });	46	+ it("set isHomepage as false by default", () => {
		47	+ expect(helper.component.isHomepage).toBeFalsy();
		48	+ });
		49	+
		50	+ it("set isHomepage as true when in profile home page", () => {
		51	+ state.current = { name: "main.profile.home" };
		52	+ helper.component.ngOnInit();
		53	+ expect(helper.component.isHomepage).toBeTruthy();
		54	+ });
		55	+
		56	+ it("set isHomepage as true when in profile info page", () => {
		57	+ state.current = { name: "main.profile.info" };
		58	+ helper.component.ngOnInit();
		59	+ expect(helper.component.isHomepage).toBeTruthy();
		60	+ });
		61	+
		62	+ it("set isHomepage as true when in profile page", () => {
		63	+ state.current = { name: "main.profile.page" };
		64	+ state.params = { page: "/page" };
		65	+ (<noosfero.Profile>helper.component.owner).homepage = '/page';
		66	+ helper.component.ngOnInit();
		67	+ expect(helper.component.isHomepage).toBeTruthy();
		68	+ });
		69	+
		70	+ it("set isHomepage as true when in environment home page", () => {
		71	+ state.current = { name: "main.environment.home" };
		72	+ helper.component.owner = <noosfero.Environment>{};
		73	+ helper.component.ngOnInit();
		74	+ expect(helper.component.isHomepage).toBeTruthy();
		75	+ });
		76	+
		77	+ it("return true in canDisplay when no display option is setted", () => {
		78	+ helper.component.block = <any>{};
		79	+ expect(helper.component.canDisplay()).toEqual(true);
		80	+ });
		81	+
		82	+ it("return false in canDisplay for an invisible block", () => {
		83	+ helper.component.block = <any>{ settings: { display: "never" } };
		84	+ expect(helper.component.canDisplay()).toEqual(false);
		85	+ });
		86	+
		87	+ it("return false in canDisplay with except_home_page in homepage", () => {
		88	+ helper.component.block = <any>{ settings: { display_user: "except_home_page" } };
		89	+ expect(helper.component.canDisplay()).toEqual(false);
		90	+ });
		91	+
		92	+ it("return false in canDisplay with home_page_only outside homepage", () => {
		93	+ helper.component.block = <any>{ settings: { display_user: "home_page_only" } };
		94	+ expect(helper.component.canDisplay()).toEqual(false);
		95	+ });
		96	+
		97	+ it("return true in canDisplay when display_user is all for logged user", () => {
		98	+ helper.component.block = <any>{ settings: { display_user: "all" } };
		99	+ expect(helper.component.canDisplay()).toEqual(true);
		100	+ });
		101	+
		102	+ it("return true in canDisplay when display_user is all for not logged user", () => {
		103	+ helper.component.currentUser = null;
		104	+ helper.component.block = <any>{ settings: { display_user: "all" } };
		105	+ expect(helper.component.canDisplay()).toEqual(true);
		106	+ });
89		107
		108	+ it("return false in canDisplay when display_user is logged for not logged user", () => {
		109	+ helper.component.currentUser = null;
		110	+ helper.component.block = <any>{ settings: { display_user: "logged" } };
		111	+ expect(helper.component.canDisplay()).toEqual(false);
90	});	112	});
91	-});
92	\ No newline at end of file	113	\ No newline at end of file
		114	+
		115	+ it("return false in canDisplay when display_user is not_logged for logged user", () => {
		116	+ helper.component.block = <any>{ settings: { display_user: "not_logged" } };
		117	+ expect(helper.component.canDisplay()).toEqual(false);
		118	+ });
		119	+
		120	+ it("return false in canDisplay when current language is not equal to language in block settings", () => {
		121	+ helper.component['translatorService'].currentLanguage = jasmine.createSpy("currentLanguage").and.returnValue("pt");
		122	+ helper.component.block = <any>{ settings: { language: "en" } };
		123	+ expect(helper.component.canDisplay()).toEqual(false);
		124	+ });
		125	+
		126	+ it("return false in canDisplay when hide is true", () => {
		127	+ helper.component.block = <any>{ id: 1, hide: true };
		128	+ expect(helper.component.canDisplay()).toEqual(false);
		129	+ });
		130	+
		131	+ it("return true in canDisplay when hide is not true", () => {
		132	+ helper.component.block = <any>{ id: 1, hide: false };
		133	+ expect(helper.component.canDisplay()).toEqual(true);
		134	+ });
		135	+
		136	+});
1	-import { Input, Inject, Component } from 'ng-forward';	1	+import { Input, Component, Inject } from 'ng-forward';
		2	+import { BlockEditionComponent } from './block-edition/block-edition.component';
		3	+import { BlockService } from '../../../lib/ng-noosfero-api/http/block.service';
		4	+import { NotificationService } from '../../shared/services/notification.service';
		5	+import { AuthService, SessionService, AuthEvents } from "../../login";
		6	+import { TranslatorService } from "../../shared/services/translator.service";
2		7
3	@Component({	8	@Component({
4	selector: 'noosfero-block',	9	selector: 'noosfero-block',
5	- template: '<div></div>'	10	+ templateUrl: 'app/layout/blocks/block.html',
		11	+ directives: [BlockEditionComponent]
6	})	12	})
7	-@Inject("$element", "$scope", "$injector", "$compile")	13	+@Inject("$uibModal", "$scope", "$state", "$rootScope", BlockService, NotificationService, AuthService, SessionService, TranslatorService)
8	export class BlockComponent {	14	export class BlockComponent {
9		15
10	- @Input() block: any;
11	- @Input() owner: any;	16	+ @Input() block: noosfero.Block;
		17	+ @Input() owner: noosfero.Profile \| noosfero.Environment;
		18	+
		19	+ private modalInstance: any = null;
		20	+ originalBlock: noosfero.Block;
		21	+
		22	+ currentUser: noosfero.User;
		23	+ isHomepage = true;
		24	+ editionMode = false;
		25	+
		26	+ constructor(private $uibModal: any,
		27	+ private $scope: ng.IScope,
		28	+ private $state: ng.ui.IStateService,
		29	+ private $rootScope: ng.IRootScopeService,
		30	+ private blockService: BlockService,
		31	+ private notificationService: NotificationService,
		32	+ private authService: AuthService,
		33	+ private session: SessionService,
		34	+ private translatorService: TranslatorService) {
		35	+
		36	+ this.currentUser = this.session.currentUser();
		37	+ this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
		38	+ this.currentUser = this.session.currentUser();
		39	+ this.verifyHomepage();
		40	+ });
		41	+ this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
		42	+ this.currentUser = this.session.currentUser();
		43	+ this.verifyHomepage();
		44	+ });
		45	+ this.$rootScope.$on("$stateChangeSuccess", (event: ng.IAngularEvent, toState: ng.ui.IState) => {
		46	+ this.verifyHomepage();
		47	+ });
		48	+ }
12		49
13	ngOnInit() {	50	ngOnInit() {
14	- let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
15	- this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));	51	+ this.verifyHomepage();
		52	+ }
		53	+
		54	+ openEdit() {
		55	+ this.editionMode = true;
		56	+ if (!this.originalBlock) this.originalBlock = JSON.parse(JSON.stringify(this.block)); // deep copy of block data
		57	+ this.modalInstance = this.$uibModal.open({
		58	+ templateUrl: 'app/layout/blocks/block-edition/block-edition.html',
		59	+ size: 'lg',
		60	+ controller: BlockEditionComponent,
		61	+ controllerAs: 'modal',
		62	+ bindToController: true,
		63	+ scope: this.$scope
		64	+ });
		65	+ }
		66	+
		67	+ save() {
		68	+ this.editionMode = false;
		69	+ this.blockService.update(this.attributesToUpdate()).then(() => {
		70	+ this.closeEdit();
		71	+ this.notificationService.success({ title: "block.edition.success.title", message: "block.edition.success.message" });
		72	+ });
		73	+ }
		74	+
		75	+ preview() {
		76	+ this.closeEdit();
		77	+ }
		78	+
		79	+ cancel() {
		80	+ this.editionMode = false;
		81	+ this.block = this.originalBlock;
		82	+ this.closeEdit();
16	}	83	}
17		84
18	- constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {	85	+ canDisplay() {
		86	+ return this.visible() && this.displayToUser() &&
		87	+ this.displayOnLanguage(this.translatorService.currentLanguage()) &&
		88	+ !this.block.hide;
19	}	89	}
		90	+
		91	+ protected visible() {
		92	+ let display = this.block.settings ? (<any>this.block.settings)['display'] : null;
		93	+ return !display \|\| ((this.isHomepage ? display !== "except_home_page" : display !== "home_page_only") && display !== "never");
		94	+ }
		95	+
		96	+ protected displayToUser() {
		97	+ let displayUser = this.block.settings ? (<any>this.block.settings)['display_user'] : null;
		98	+ return !displayUser \|\| displayUser === "all" \|\|
		99	+ (this.currentUser ? displayUser === "logged" : displayUser === "not_logged");
		100	+ }
		101	+
		102	+ protected displayOnLanguage(language: string) {
		103	+ let displayLanguage = this.block.settings ? (<any>this.block.settings)['language'] : null;
		104	+ return !displayLanguage \|\| displayLanguage === "all" \|\|
		105	+ language === displayLanguage;
		106	+ }
		107	+
		108	+ protected attributesToUpdate() {
		109	+ return <any>{
		110	+ id: this.block.id,
		111	+ display: (<any>this.block.settings).display,
		112	+ title: this.block.title,
		113	+ display_user: (<any>this.block.settings).display_user,
		114	+ language: (<any>this.block.settings).language
		115	+ };
		116	+ }
		117	+
		118	+ protected verifyHomepage() {
		119	+ if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) {
		120	+ let profile = <noosfero.Profile>this.owner;
		121	+ this.isHomepage = this.$state.current.name === "main.profile.home";
		122	+ if (profile.homepage) {
		123	+ this.isHomepage = this.isHomepage \|\|
		124	+ (this.$state.current.name === "main.profile.page" && profile.homepage === this.$state.params['page']);
		125	+ } else {
		126	+ this.isHomepage = this.isHomepage \|\| this.$state.current.name === "main.profile.info";
		127	+ }
		128	+ } else {
		129	+ this.isHomepage = this.$state.current.name === "main.environment.home";
		130	+ }
		131	+ }
		132	+
		133	+ private closeEdit() {
		134	+ if (this.modalInstance) {
		135	+ this.modalInstance.close();
		136	+ this.modalInstance = null;
		137	+ }
		138	+ }
		139	+
20	}	140	}
@@ -0,0 +1,13 @@		@@ -0,0 +1,13 @@
	1	+<div ng-show="ctrl.canDisplay() \|\| ctrl.editionMode" ng-class="{'invisible-block': !ctrl.canDisplay()}" class="noosfero-block" ng-mouseover="displayActions = true" ng-mouseleave="displayActions = false">
	2	+ <div ng-show="displayActions" class="actions" permission="ctrl.block.permissions" permission-action="allow_edit">
	3	+ <button type="submit" class="btn btn-xs btn-default" ng-click="ctrl.openEdit()"><i class="fa fa-edit fa-fw"></i></button>
	4	+ </div>
	5	+ <div class="panel panel-default block {{ctrl.block.type \| lowercase}}" >
	6	+ <div class="panel-heading" ng-show="ctrl.block.title">
	7	+ <h3 class="panel-title">{{ctrl.block.title}}</h3>
	8	+ </div>
	9	+ <div class="panel-body {{ctrl.block.type \| lowercase}}" >
	10	+ <noosfero-block-content [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block-content>
	11	+ </div>
	12	+ </div>
	13	+</div>
1	-.block {
2	- .panel-title {
3	- font-size: 15px;
4	- font-weight: bold;	1	+.noosfero-block {
		2	+ position: relative;
		3	+ &.invisible-block {
		4	+ .block {
		5	+ opacity: 0.4;
		6	+ }
5	}	7	}
6	- .panel-heading {
7	- background-color: transparent;
8	- border: 0;	8	+ .block {
		9	+ .panel-title {
		10	+ font-size: 15px;
		11	+ font-weight: bold;
		12	+ }
		13	+ .panel-heading {
		14	+ background-color: transparent;
		15	+ border: 0;
		16	+ }
		17	+ }
		18	+ .actions {
		19	+ position: absolute;
		20	+ z-index: 100;
		21	+ right: 1px;
		22	+ top: 1px;
9	}	23	}
10	}	24	}