Edit profile header and footer

Victor Costa
1 parent 45978e40
Showing 12 changed files with 209 additions and 5 deletions Show diff stats
src/app/main/main.component.ts
src/app/profile/custom-content/custom-content.component.spec.ts
src/app/profile/custom-content/custom-content.component.ts
src/app/profile/custom-content/custom-content.html
src/app/profile/custom-content/edit-content.html
src/app/profile/custom-content/edit-content.scss
src/app/profile/profile.html
src/languages/en.json
src/languages/pt.json
src/lib/ng-noosfero-api/http/profile.service.spec.ts
src/lib/ng-noosfero-api/http/profile.service.ts
src/lib/ng-noosfero-api/interfaces/profile.ts
@@ -16,6 +16,7 @@ import {RecentDocumentsBlockComponent} from &quot;../layout/blocks/recent-documents/r
 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
 import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
+import {CustomContentComponent} from "../profile/custom-content/custom-content.component";
  
 import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
 import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
@@ -99,7 +100,7 @@ export class EnvironmentContent {
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
-        LoginBlockComponent
+        LoginBlockComponent, CustomContentComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
  
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
@@ -0,0 +1,77 @@
+import {CustomContentComponent} from './custom-content.component';
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<custom-content [attribute]="\'custom_footer\'" [profile]="ctrl.profile"></custom-content>';
+
+describe("Components", () => {
+    describe("Custom Content Component", () => {
+
+        let helper: ComponentTestHelper<CustomContentComponent>;
+        beforeEach(angular.mock.module("templates"));
+        beforeEach(angular.mock.module("ngSanitize"));
+
+        beforeEach((done) => {
+            let profileService = jasmine.createSpyObj("profileService", ["update"]);
+            let notificationService = jasmine.createSpyObj("notificationService", ["success"]);
+            let properties = { profile: { custom_footer: "footer" } };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CustomContentComponent],
+                properties: properties,
+                providers: [
+                    helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
+                    helpers.createProviderToValue("ProfileService", profileService),
+                    helpers.createProviderToValue("NotificationService", notificationService)
+                ]
+            });
+            helper = new ComponentTestHelper<CustomContentComponent>(cls, done);
+        });
+
+        it("set modal instance when open edit modal", () => {
+            helper.component['$uibModal'].open = jasmine.createSpy("open");
+            helper.component.openEdit();
+            expect(helper.component['$uibModal'].open).toHaveBeenCalled();
+            expect(helper.component.originalContent).toEqual(helper.component.content);
+        });
+
+        it("restore original content when cancelled", () => {
+            helper.component.openEdit();
+            helper.component.content = "modified";
+            helper.component.cancel();
+            expect(helper.component.content).toEqual(helper.component.originalContent);
+        });
+
+        it("keep modified content when click on preview", () => {
+            helper.component.openEdit();
+            helper.component.content = "modified";
+            helper.component.preview();
+            expect(helper.component.content).toEqual("modified");
+        });
+
+        it("not override original content when cancelled openEdit again", () => {
+            helper.component.openEdit();
+            helper.component.content = "modified";
+            helper.component.openEdit();
+            expect(helper.component.originalContent).toEqual("footer");
+        });
+
+        it("reset modal instance when close edit modal", () => {
+            let modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
+            helper.component['$uibModal'].open = jasmine.createSpy("open").and.returnValue(modalInstance);
+            helper.component.openEdit();
+            expect(helper.component['$uibModal'].open).toHaveBeenCalled();
+            helper.component.cancel();
+            expect(modalInstance.close).toHaveBeenCalled();
+            expect(helper.component['modalInstance']).toBeNull();
+        });
+
+        it("call profile service to update profile when save", () => {
+            helper.component['profileService'].update = jasmine.createSpy("update").and.returnValue({
+                then: (func: Function) => { func(); }
+            });
+            helper.component.save();
+            expect(helper.component['notificationService'].success).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,70 @@
+import {Component, Input, Inject} from 'ng-forward';
+import {ProfileService} from '../../../lib/ng-noosfero-api/http/profile.service';
+import {NotificationService} from '../../shared/services/notification.service';
+
+@Component({
+    selector: 'custom-content',
+    templateUrl: "app/profile/custom-content/custom-content.html",
+})
+@Inject("$uibModal", "$scope", ProfileService, NotificationService)
+export class CustomContentComponent {
+
+    @Input() attribute: string;
+    @Input() profile: noosfero.Profile;
+    @Input() label: string;
+
+    content: string;
+    originalContent: string;
+    private modalInstance: any = null;
+
+    constructor(private $uibModal: any,
+        private $scope: ng.IScope,
+        private profileService: ProfileService,
+        private notificationService: NotificationService) { }
+
+    ngOnInit() {
+        this.$scope.$watch(() => {
+            return this.profile ? (<any>this.profile)[this.attribute] : null;
+        }, () => {
+            if (this.profile) this.content = (<any>this.profile)[this.attribute];
+        });
+    }
+
+    openEdit() {
+        if (!this.originalContent) this.originalContent = this.content;
+        this.modalInstance = this.$uibModal.open({
+            templateUrl: 'app/profile/custom-content/edit-content.html',
+            size: 'lg',
+            controller: CustomContentComponent,
+            controllerAs: 'modal',
+            bindToController: true,
+            scope: this.$scope,
+            backdrop: 'static'
+        });
+    }
+
+    save() {
+        let profile: any = { id: this.profile.id };
+        profile[this.attribute] = this.content;
+        this.profileService.update(profile).then(() => {
+            this.closeEdit();
+            this.notificationService.success({ title: "profile.content.success.title", message: "profile.content.success.message" });
+        });
+    }
+
+    preview() {
+        this.closeEdit();
+    }
+
+    cancel() {
+        this.content = this.originalContent;
+        this.closeEdit();
+    }
+
+    private closeEdit() {
+        if (this.modalInstance) {
+            this.modalInstance.close();
+            this.modalInstance = null;
+        }
+    }
+}
@@ -0,0 +1,6 @@
+<div class="custom-content">
+  <div class="actions">
+    <button type="submit" class="btn btn-xs btn-default" ng-click="ctrl.openEdit()"><i class="fa fa-edit fa-fw"></i> {{ctrl.label | translate}}</button>
+  </div>
+  <div class="content" ng-bind-html="ctrl.content"></div>
+</div>
@@ -0,0 +1,7 @@
+<div class="edit-content">
+  <h3>{{"custom_content.title" | translate}}</h3>
+  <html-editor [(value)]="ctrl.content"></html-editor>
+  <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>
@@ -0,0 +1,3 @@
+.edit-content {
+  margin: 20px;
+}
 <div class="profile-container">
-  <div class="profile-header" ng-bind-html="vm.profile.custom_header"></div>
+  <custom-content class="profile-header" [label]="'profile.custom_header.label'" [attribute]="'custom_header'" [profile]="vm.profile"></custom-content>
   <div class="row">
     <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes>
   </div>
-  <div class="profile-footer" ng-bind-html="vm.profile.custom_footer"></div>
+  <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
 </div>
@@ -66,5 +66,10 @@
   "statistics.categories": "Categories",
   "statistics.tags": "Tags",
   "statistics.comments": "Comments",
-  "statistics.hits": "Hits"
+  "statistics.hits": "Hits",
+  "profile.content.success.title": "Good job!",
+  "profile.content.success.message": "Profile saved!",
+  "custom_content.title": "Edit content",
+  "profile.custom_header.label": "Header",
+  "profile.custom_footer.label": "Footer"
 }
@@ -63,5 +63,10 @@
   "statistics.categories": "Categorias",
   "statistics.tags": "Tags",
   "statistics.comments": "Comentários",
-  "statistics.hits": "Acessos"
+  "statistics.hits": "Acessos",
+  "profile.content.success.title": "Bom trabalho!",
+  "profile.content.success.message": "Perfil salvo!",
+  "custom_content.title": "Editar conteúdo",
+  "profile.custom_header.label": "Cabeçalho",
+  "profile.custom_footer.label": "Rodapé"
 }
@@ -101,6 +101,16 @@ describe(&quot;Services&quot;, () =&gt; {
                 });
                 $httpBackend.flush();
             });
+
+            it("should update the profile attributes", (done) => {
+                let profileId = 1;
+                $httpBackend.expectPOST(`/api/v1/profiles/${profileId}`).respond(200, { profile: { custom_header: "something" } });
+                profileService.update(<any>{ id: profileId, custom_header: "something" }).then((response: restangular.IResponse) => {
+                    expect(response.data.profile.custom_header).toEqual("something");
+                    done();
+                });
+                $httpBackend.flush();
+            });
         });
  
  
@@ -60,4 +60,8 @@ export class ProfileService {
         return this.restangular.one('profiles', profileId);
     }
  
+    update(profile: noosfero.Profile) {
+        let headers = { 'Content-Type': 'application/json' };
+        return this.get(profile.id).customPOST({ profile: profile }, null, null, headers);
+    }
 }
@@ -62,5 +62,21 @@ namespace noosfero {
          * @returns {string} The Profile homepage
          */
         homepage: string;
+
+        /**
+         * @ngdoc property
+         * @name custom_header
+         * @propertyOf noofero.Profile
+         * @returns {string} The Profile header
+         */
+        custom_header: string;
+
+        /**
+         * @ngdoc property
+         * @name custom_footer
+         * @propertyOf noofero.Profile
+         * @returns {string} The Profile footer
+         */
+        custom_footer: string;
     }
 }
...	...	@@ -16,6 +16,7 @@ import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/r
16	16	import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
17	17	import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
18	18	import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
	19	+import {CustomContentComponent} from "../profile/custom-content/custom-content.component";
19	20
20	21	import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
21	22	import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
...	...	@@ -99,7 +100,7 @@ export class EnvironmentContent {
99	100	LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
100	101	MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
101	102	MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
102		- LoginBlockComponent
	103	+ LoginBlockComponent, CustomContentComponent
103	104	].concat(plugins.mainComponents).concat(plugins.hotspots),
104	105
105	106	providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
...	...
...	...	@@ -0,0 +1,77 @@
	1	+import {CustomContentComponent} from './custom-content.component';
	2	+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
	3	+import * as helpers from "../../../spec/helpers";
	4	+
	5	+const htmlTemplate: string = '<custom-content [attribute]="\'custom_footer\'" [profile]="ctrl.profile"></custom-content>';
	6	+
	7	+describe("Components", () => {
	8	+ describe("Custom Content Component", () => {
	9	+
	10	+ let helper: ComponentTestHelper<CustomContentComponent>;
	11	+ beforeEach(angular.mock.module("templates"));
	12	+ beforeEach(angular.mock.module("ngSanitize"));
	13	+
	14	+ beforeEach((done) => {
	15	+ let profileService = jasmine.createSpyObj("profileService", ["update"]);
	16	+ let notificationService = jasmine.createSpyObj("notificationService", ["success"]);
	17	+ let properties = { profile: { custom_footer: "footer" } };
	18	+ let cls = createClass({
	19	+ template: htmlTemplate,
	20	+ directives: [CustomContentComponent],
	21	+ properties: properties,
	22	+ providers: [
	23	+ helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
	24	+ helpers.createProviderToValue("ProfileService", profileService),
	25	+ helpers.createProviderToValue("NotificationService", notificationService)
	26	+ ]
	27	+ });
	28	+ helper = new ComponentTestHelper<CustomContentComponent>(cls, done);
	29	+ });
	30	+
	31	+ it("set modal instance when open edit modal", () => {
	32	+ helper.component['$uibModal'].open = jasmine.createSpy("open");
	33	+ helper.component.openEdit();
	34	+ expect(helper.component['$uibModal'].open).toHaveBeenCalled();
	35	+ expect(helper.component.originalContent).toEqual(helper.component.content);
	36	+ });
	37	+
	38	+ it("restore original content when cancelled", () => {
	39	+ helper.component.openEdit();
	40	+ helper.component.content = "modified";
	41	+ helper.component.cancel();
	42	+ expect(helper.component.content).toEqual(helper.component.originalContent);
	43	+ });
	44	+
	45	+ it("keep modified content when click on preview", () => {
	46	+ helper.component.openEdit();
	47	+ helper.component.content = "modified";
	48	+ helper.component.preview();
	49	+ expect(helper.component.content).toEqual("modified");
	50	+ });
	51	+
	52	+ it("not override original content when cancelled openEdit again", () => {
	53	+ helper.component.openEdit();
	54	+ helper.component.content = "modified";
	55	+ helper.component.openEdit();
	56	+ expect(helper.component.originalContent).toEqual("footer");
	57	+ });
	58	+
	59	+ it("reset modal instance when close edit modal", () => {
	60	+ let modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
	61	+ helper.component['$uibModal'].open = jasmine.createSpy("open").and.returnValue(modalInstance);
	62	+ helper.component.openEdit();
	63	+ expect(helper.component['$uibModal'].open).toHaveBeenCalled();
	64	+ helper.component.cancel();
	65	+ expect(modalInstance.close).toHaveBeenCalled();
	66	+ expect(helper.component['modalInstance']).toBeNull();
	67	+ });
	68	+
	69	+ it("call profile service to update profile when save", () => {
	70	+ helper.component['profileService'].update = jasmine.createSpy("update").and.returnValue({
	71	+ then: (func: Function) => { func(); }
	72	+ });
	73	+ helper.component.save();
	74	+ expect(helper.component['notificationService'].success).toHaveBeenCalled();
	75	+ });
	76	+ });
	77	+});
...	...
...	...	@@ -0,0 +1,70 @@
	1	+import {Component, Input, Inject} from 'ng-forward';
	2	+import {ProfileService} from '../../../lib/ng-noosfero-api/http/profile.service';
	3	+import {NotificationService} from '../../shared/services/notification.service';
	4	+
	5	+@Component({
	6	+ selector: 'custom-content',
	7	+ templateUrl: "app/profile/custom-content/custom-content.html",
	8	+})
	9	+@Inject("$uibModal", "$scope", ProfileService, NotificationService)
	10	+export class CustomContentComponent {
	11	+
	12	+ @Input() attribute: string;
	13	+ @Input() profile: noosfero.Profile;
	14	+ @Input() label: string;
	15	+
	16	+ content: string;
	17	+ originalContent: string;
	18	+ private modalInstance: any = null;
	19	+
	20	+ constructor(private $uibModal: any,
	21	+ private $scope: ng.IScope,
	22	+ private profileService: ProfileService,
	23	+ private notificationService: NotificationService) { }
	24	+
	25	+ ngOnInit() {
	26	+ this.$scope.$watch(() => {
	27	+ return this.profile ? (<any>this.profile)[this.attribute] : null;
	28	+ }, () => {
	29	+ if (this.profile) this.content = (<any>this.profile)[this.attribute];
	30	+ });
	31	+ }
	32	+
	33	+ openEdit() {
	34	+ if (!this.originalContent) this.originalContent = this.content;
	35	+ this.modalInstance = this.$uibModal.open({
	36	+ templateUrl: 'app/profile/custom-content/edit-content.html',
	37	+ size: 'lg',
	38	+ controller: CustomContentComponent,
	39	+ controllerAs: 'modal',
	40	+ bindToController: true,
	41	+ scope: this.$scope,
	42	+ backdrop: 'static'
	43	+ });
	44	+ }
	45	+
	46	+ save() {
	47	+ let profile: any = { id: this.profile.id };
	48	+ profile[this.attribute] = this.content;
	49	+ this.profileService.update(profile).then(() => {
	50	+ this.closeEdit();
	51	+ this.notificationService.success({ title: "profile.content.success.title", message: "profile.content.success.message" });
	52	+ });
	53	+ }
	54	+
	55	+ preview() {
	56	+ this.closeEdit();
	57	+ }
	58	+
	59	+ cancel() {
	60	+ this.content = this.originalContent;
	61	+ this.closeEdit();
	62	+ }
	63	+
	64	+ private closeEdit() {
	65	+ if (this.modalInstance) {
	66	+ this.modalInstance.close();
	67	+ this.modalInstance = null;
	68	+ }
	69	+ }
	70	+}
...	...
...	...	@@ -0,0 +1,6 @@
	1	+<div class="custom-content">
	2	+ <div class="actions">
	3	+ <button type="submit" class="btn btn-xs btn-default" ng-click="ctrl.openEdit()"><i class="fa fa-edit fa-fw"></i> {{ctrl.label \| translate}}</button>
	4	+ </div>
	5	+ <div class="content" ng-bind-html="ctrl.content"></div>
	6	+</div>
...	...
...	...	@@ -0,0 +1,7 @@
	1	+<div class="edit-content">
	2	+ <h3>{{"custom_content.title" \| translate}}</h3>
	3	+ <html-editor [(value)]="ctrl.content"></html-editor>
	4	+ <button type="submit" class="btn btn-default" ng-click="ctrl.save()">Save</button>
	5	+ <button type="submit" class="btn btn-warning" ng-click="ctrl.preview()">Preview</button>
	6	+ <button type="submit" class="btn btn-danger" ng-click="ctrl.cancel()">Cancel</button>
	7	+</div>
...	...
...	...	@@ -0,0 +1,3 @@
	1	+.edit-content {
	2	+ margin: 20px;
	3	+}
...	...
1	1	<div class="profile-container">
2		- <div class="profile-header" ng-bind-html="vm.profile.custom_header"></div>
	2	+ <custom-content class="profile-header" [label]="'profile.custom_header.label'" [attribute]="'custom_header'" [profile]="vm.profile"></custom-content>
3	3	<div class="row">
4	4	<noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes>
5	5	</div>
6		- <div class="profile-footer" ng-bind-html="vm.profile.custom_footer"></div>
	6	+ <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
7	7	</div>
...	...
...	...	@@ -66,5 +66,10 @@
66	66	"statistics.categories": "Categories",
67	67	"statistics.tags": "Tags",
68	68	"statistics.comments": "Comments",
69		- "statistics.hits": "Hits"
	69	+ "statistics.hits": "Hits",
	70	+ "profile.content.success.title": "Good job!",
	71	+ "profile.content.success.message": "Profile saved!",
	72	+ "custom_content.title": "Edit content",
	73	+ "profile.custom_header.label": "Header",
	74	+ "profile.custom_footer.label": "Footer"
70	75	}
...	...
...	...	@@ -63,5 +63,10 @@
63	63	"statistics.categories": "Categorias",
64	64	"statistics.tags": "Tags",
65	65	"statistics.comments": "Comentários",
66		- "statistics.hits": "Acessos"
	66	+ "statistics.hits": "Acessos",
	67	+ "profile.content.success.title": "Bom trabalho!",
	68	+ "profile.content.success.message": "Perfil salvo!",
	69	+ "custom_content.title": "Editar conteúdo",
	70	+ "profile.custom_header.label": "Cabeçalho",
	71	+ "profile.custom_footer.label": "Rodapé"
67	72	}
...	...
...	...	@@ -101,6 +101,16 @@ describe("Services", () => {
101	101	});
102	102	$httpBackend.flush();
103	103	});
	104	+
	105	+ it("should update the profile attributes", (done) => {
	106	+ let profileId = 1;
	107	+ $httpBackend.expectPOST(`/api/v1/profiles/${profileId}`).respond(200, { profile: { custom_header: "something" } });
	108	+ profileService.update(<any>{ id: profileId, custom_header: "something" }).then((response: restangular.IResponse) => {
	109	+ expect(response.data.profile.custom_header).toEqual("something");
	110	+ done();
	111	+ });
	112	+ $httpBackend.flush();
	113	+ });
104	114	});
105	115
106	116
...	...