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 = {
...	...	@@ -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 @@
	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 @@
	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 @@
	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 @@
	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 @@
	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	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	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	8	@Component({
4	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	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	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 @@
	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	}
...	...