Commit 338aae2ef7b6a2d9dbbbe8421cb8d783ae57e4aa

Authored by Michel Felipe
1 parent c132a4a9

Minor refactory and sintax adjusts

src/app/layout/blocks/profile-image/profile-image-block.component.spec.ts
1   -import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
2   -import {Pipe, Input, provide, Component} from 'ng-forward';
  1 +import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
  2 +import { Pipe, Input, provide, Component } from 'ng-forward';
3 3  
4   -import {ProfileImageBlockComponent} from './profile-image-block.component';
  4 +import { ProfileImageBlockComponent } from './profile-image-block.component';
5 5  
6 6 import * as helpers from "./../../../../spec/helpers";
7 7  
... ... @@ -14,7 +14,7 @@ describe("Components", () => {
14 14 describe("Profile Image Block Component", () => {
15 15  
16 16 beforeEach(angular.mock.module("templates"));
17   - let personService = jasmine.createSpyObj("personService", ["upload"]);
  17 + let personService = jasmine.createSpyObj("personService", ["upload"]);
18 18  
19 19 let profileService = jasmine.createSpyObj("ProfileService", ["isMember", "addMember", "removeMember"]);
20 20 profileService.isMember = jasmine.createSpy("isMember").and.returnValue(Promise.resolve(false));
... ... @@ -25,8 +25,8 @@ describe("Components", () => {
25 25 directives: [ProfileImageBlockComponent],
26 26 providers: [
27 27 helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
28   - helpers.createProviderToValue("PersonService", personService),
29   - helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
  28 + helpers.createProviderToValue("PersonService", personService),
  29 + helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
30 30 helpers.createProviderToValue('ProfileService', profileService),
31 31 helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
32 32 ].concat(helpers.provideFilters("translateFilter"))
... ...
src/app/profile/image/image.component.spec.ts
... ... @@ -4,14 +4,14 @@
4 4 * @description
5 5 * This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
6 6 */
7   -import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
8   -import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
9   -import {Pipe, Input, provide, Component} from 'ng-forward';
10   -import {PersonService} from "../../../lib/ng-noosfero-api/http/person.service";
  7 +import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
  8 +import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
  9 +import { Pipe, Input, provide, Component } from 'ng-forward';
  10 +import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
11 11  
12 12 import * as helpers from "../../../spec/helpers";
13 13  
14   -import {ProfileImageComponent} from "./image.component";
  14 +import { ProfileImageComponent } from "./image.component";
15 15  
16 16 const htmlTemplate: string = '<noosfero-profile-image [editable]="true" [edit-class]="editable-class" [profile]="ctrl.profile"></noosfero-profile-image>';
17 17  
... ... @@ -46,33 +46,30 @@ describe(&quot;Components&quot;, () =&gt; {
46 46 expect(helper.component['$uibModal'].open).toHaveBeenCalled();
47 47 });
48 48  
49   - /*
50   - it("show community users image if profile is not Person", done => {
51   - helpers.tcb.createAsync(ProfileImageComponent).then(fixture => {
52   - let profileImageComponent: ProfileImageComponent = fixture.componentInstance;
53   - let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
54   - profileImageComponent.profile = profile;
55   - profileImageComponent.ngOnInit();
56   -
57   - // Check the attribute
58   - expect(profileImageComponent.defaultIcon).toBe("fa-users", "The default icon should be community users");
59   - // var elProfile = fixture.debugElement.componentViewChildren[0];
60   - // expect(elProfile.query('div.profile-image-block').length).toEqual(1);
61   - done();
62   - });
  49 +
  50 + it("show community users image if profile is not Person", (done) => {
  51 +
  52 + let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
  53 + helper.component.profile = profile;
  54 + helper.component.ngOnInit();
  55 +
  56 + // Check the attribute
  57 + expect(helper.component.defaultIcon).toBe("fa-users", "The default icon should be community users");
  58 + // var elProfile = fixture.debugElement.componentViewChildren[0];
  59 + // expect(elProfile.query('div.profile-image-block').length).toEqual(1);
  60 + done();
  61 +
63 62 });
64 63  
65   - it("show Person image if profile is Person", done => {
66   - tcb.createAsync(ProfileImageComponent).then(fixture => {
67   - let profileImageComponent: ProfileImageComponent = fixture.componentInstance;
68   - let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
69   - profileImageComponent.profile = profile;
70   - profileImageComponent.ngOnInit();
71   - // Check the attribute
72   - expect(profileImageComponent.defaultIcon).toEqual("fa-user", "The default icon should be person user");
73   - done();
74   - });
75   - });*/
  64 + it("show Person image if profile is Person", (done) => {
  65 +
  66 + let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
  67 + helper.component.profile = profile;
  68 + helper.component.ngOnInit();
  69 + // Check the attribute
  70 + expect(helper.component.defaultIcon).toEqual("fa-user", "The default icon should be person user");
  71 + done();
  72 + });
76 73  
77 74 });
78   -});
79 75 \ No newline at end of file
  76 +});
... ...
src/app/profile/image/image.component.ts
1   -import {Inject, Input, Component, provide} from "ng-forward";
2   -import {PersonService} from "../../../lib/ng-noosfero-api/http/person.service";
3   -import {ProfileImageEditorComponent} from "./profile-image-editor.component";
  1 +import { Inject, Input, Component, provide } from "ng-forward";
  2 +import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
  3 +import { ProfileImageEditorComponent } from "./profile-image-editor.component";
4 4  
5 5 /**
6 6 * @ngdoc controller
... ... @@ -11,7 +11,7 @@ import {ProfileImageEditorComponent} from &quot;./profile-image-editor.component&quot;;
11 11 @Component({
12 12 selector: "noosfero-profile-image",
13 13 templateUrl: 'app/profile/image/image.html',
14   - providers: [ provide('personService', { useClass: PersonService }) ]
  14 + providers: [provide('personService', { useClass: PersonService })]
15 15 })
16 16 @Inject(PersonService, "$uibModal", "$scope")
17 17 export class ProfileImageComponent {
... ... @@ -20,7 +20,7 @@ export class ProfileImageComponent {
20 20 * @ngdoc property
21 21 * @name profile
22 22 * @propertyOf components.noosfero.profile-image.ProfileImage
23   - * @description
  23 + * @description
24 24 * The Noosfero {@link models.Profile} holding the image.
25 25 */
26 26 @Input() profile: noosfero.Profile;
... ... @@ -41,7 +41,7 @@ export class ProfileImageComponent {
41 41 croppedDataUrl: any;
42 42 modalInstance: any;
43 43  
44   - constructor(private personService: PersonService, private $uibModal: any, private $scope: ng.IScope) {
  44 + constructor(private personService: PersonService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
45 45 }
46 46  
47 47 fileSelected(file: any, errFiles: any) {
... ... @@ -79,8 +79,8 @@ export class ProfileImageComponent {
79 79 * @ngdoc method
80 80 * @name ngOnInit
81 81 * @methodOf components.noosfero.profile-image.ProfileImage
82   - * @description
83   - * Initializes the icon names to their corresponding values depending on the profile type passed to the controller
  82 + * @description
  83 + * Initializes the icon names to their corresponding values depending on the profile type passed to the controller
84 84 */
85 85 ngOnInit() {
86 86 this.defaultIcon = 'fa-users';
... ... @@ -90,4 +90,3 @@ export class ProfileImageComponent {
90 90 }
91 91  
92 92 }
93   -
... ...
src/app/profile/image/image.html
1   -<div id="profile-image-container" style="">
  1 +<div id="profile-image-container" style="">
2 2 <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
3 3 <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
4 4 <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
... ... @@ -10,12 +10,12 @@
10 10 <!-- The upload button hidden behind the camera -->
11 11 <div class="upload-button" ngf-select="ctrl.fileSelected($file)"
12 12 ngf-pattern="'image/*'" ngf-accept="'image/*'"
13   - ngf-max-size="20MB" ngf-resize="{width: 100, height: 100}"
  13 + ngf-max-size="20MB" ngf-resize="{width: 100, height: 100}"
14 14 data-toggle="modal" data-target=".crop-dialog">
15 15 {{"profile.image.upload" | translate}}
16 16 </div>
17   - </a>
  17 + </a>
18 18 </div>
19   -
  19 +
20 20 </div>
21 21 </div>
... ...
src/app/profile/image/image.scss
... ... @@ -37,9 +37,8 @@ i.profile-image {
37 37 }
38 38  
39 39 .select-photo-container {
40   - //overflow: hidden;
41 40 position: absolute;
42   - z-index: -1;
  41 + z-index: -1;
43 42 background: #000;
44 43 background: rgba(0, 0, 0, .6);
45 44 background: linear-gradient(transparent, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .6) 100%);
... ... @@ -58,7 +57,6 @@ i.profile-image {
58 57 .upload-button {
59 58 -webkit-font-smoothing: antialiased;
60 59 color: #fff;
61   - //word-wrap: break-word;
62 60 }
63 61  
64 62 .upload-container {
... ... @@ -95,4 +93,3 @@ form .progress {
95 93 background: orange;
96 94 width: 0;
97 95 }
98   -
... ...
src/app/profile/image/profile-image-editor.component.spec.ts
1   -import {Pipe, Input, provide, Component} from 'ng-forward';
2   -import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
  1 +import { Pipe, Input, provide, Component } from 'ng-forward';
  2 +import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
3 3 import * as helpers from "../../../spec/helpers";
4 4  
5   -import {ProfileImageEditorComponent} from "./profile-image-editor.component";
  5 +import { ProfileImageEditorComponent } from "./profile-image-editor.component";
6 6  
7 7 describe("Components", () => {
8 8  
... ... @@ -11,6 +11,7 @@ describe(&quot;Components&quot;, () =&gt; {
11 11 beforeEach(angular.mock.module("templates"));
12 12  
13 13 let expectedData = "iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQ…Cm2OLHvfdNPte3zrH709Q0esN1LPQ0t7DL696ERpu+9/8BVPLIpElf7VYAAAAASUVORK5CYII=";
  14 + let testDataUrl = "data:image/png;base64," + expectedData;
14 15  
15 16 let profile = <noosfero.Profile>{ name: "profile_name", id: 1, identifier: "test" };
16 17 let modal = helpers.mocks.$modal;
... ... @@ -28,7 +29,7 @@ describe(&quot;Components&quot;, () =&gt; {
28 29 let comp = new ProfileImageEditorComponent(picFile, this.profile, personServiceMock, modalInstance);
29 30  
30 31 it("get data", done => {
31   - let testDataUrl = "data:image/png;base64," + expectedData;
  32 +
32 33 let result = comp.getData(testDataUrl);
33 34 expect(result).toBe(expectedData);
34 35 done();
... ... @@ -44,7 +45,6 @@ describe(&quot;Components&quot;, () =&gt; {
44 45 });
45 46  
46 47 it("upload image", done => {
47   - let testDataUrl = "data:image/png;base64," + expectedData;
48 48 let imageName = "image1";
49 49 personServiceMock = jasmine.createSpyObj("personServiceMock", ["uploadImage"]);
50 50 console.log("PersonServiceMock:", personServiceMock);
... ... @@ -54,7 +54,7 @@ describe(&quot;Components&quot;, () =&gt; {
54 54 comp.uploadImage(testDataUrl, imageName);
55 55 deferredUploadImage.resolve();
56 56 $rootScope.$apply();
57   - expect(comp.$uibModalInstance.close).toHaveBeenCalled();
  57 + expect(comp.modalInstance.close).toHaveBeenCalled();
58 58 done();
59 59 });
60 60  
... ...
src/app/profile/image/profile-image-editor.component.ts
1   -import {StateConfig, Component, Input, Output, Inject, provide} from 'ng-forward';
2   -import {TranslateProfile} from "../../shared/pipes/translate-profile.filter";
3   -import {PersonService} from "../../../lib/ng-noosfero-api/http/person.service";
  1 +import { StateConfig, Component, Input, Output, Inject, provide } from 'ng-forward';
  2 +import { TranslateProfile } from "../../shared/pipes/translate-profile.filter";
  3 +import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
4 4  
5 5 export class ProfileImageEditorComponent {
6 6  
... ... @@ -9,17 +9,17 @@ export class ProfileImageEditorComponent {
9 9 static $inject = ["picFile", "profile", "personService", "$uibModalInstance"];
10 10  
11 11 constructor(public picFile: any, public profile: noosfero.Profile, public personService: PersonService,
12   - public $uibModalInstance: any) {
  12 + public modalInstance: ng.ui.bootstrap.IModalServiceInstance) {
13 13 }
14 14  
15 15 uploadImage(dataUrl: any, name: any) {
16   - let base64_image_json = this.getBase64ImageJson(dataUrl, name);
17   - this.personService.uploadImage(this.profile, base64_image_json).then( (result: any) => {
18   - this.$uibModalInstance.close(name);
  16 + let base64ImageJson = this.getBase64ImageJson(dataUrl, name);
  17 + this.personService.uploadImage(this.profile, base64ImageJson).then((result: any) => {
  18 + this.modalInstance.close(name);
19 19 });
20 20 }
21 21  
22   - getBase64ImageJson(dataUrl: any, name: any) {
  22 + getBase64ImageJson(dataUrl: any, name: any): any {
23 23 let data = this.getData(dataUrl);
24 24 let image_name = this.getImageName(name);
25 25 return {
... ... @@ -29,15 +29,15 @@ export class ProfileImageEditorComponent {
29 29 };
30 30 }
31 31  
32   - getImageName(name: any) {
  32 + getImageName(name: any): string {
33 33 return this.profile.name + "_" + name;
34 34 }
35 35  
36   - getData(dataUrl: any) {
  36 + getData(dataUrl: any): string {
37 37 return dataUrl.substring(dataUrl.indexOf('base64,') + 7);
38 38 }
39 39  
40 40 cancel() {
41   - this.$uibModalInstance.close();
  41 + this.modalInstance.close();
42 42 }
43 43 }
... ...
src/app/profile/image/profile-image-editor.html
... ... @@ -10,7 +10,7 @@
10 10 </div>
11 11 <div>
12 12 <img ng-src="{{ctrl.croppedDataUrl}}" />
13   - </div>
  13 + </div>
14 14 <span class="progress" ng-show="progress >= 0">
15 15 <div style="width: {{progress" ng-bind="progress + '%'"></div>
16 16 </span> <span ng-show="ctrl.result">Upload Successful</span> <span class="err"
... ... @@ -18,7 +18,7 @@
18 18 </form>
19 19  
20 20 <div class="actions">
21   - <button type="submit" class="btn btn-default" ng-click="ctrl.uploadImage(ctrl.croppedDataUrl, ctrl.picFile.name)">Upload</button>
22   - <button type="submit" class="btn btn-danger" ng-click="ctrl.cancel()">Cancel</button>
  21 + <button type="submit" class="btn btn-default" (click)="ctrl.uploadImage(ctrl.croppedDataUrl, ctrl.picFile.name)">Upload</button>
  22 + <button type="submit" class="btn btn-danger" (click)="ctrl.cancel()">Cancel</button>
23 23 </div>
24 24 </div>
... ...
src/app/profile/info/profile-info.scss
1   -.profile-info .upload-camera-container {
2   - top: 55%;
3   - left: 39px;
  1 +.profile-info {
  2 + .upload-camera-container {
  3 + top: 55%;
  4 + left: 39px;
  5 + }
4 6 }
5 7  
6 8 .profile-info-editable {
... ... @@ -9,13 +11,15 @@
9 11 height: 28px;
10 12 }
11 13  
12   -.profile-info-editable .upload-button {
13   - font-size: 0.8em;
14   - padding-top: 9px;
15   - padding-left: 6px;
16   - font-weight: bold;
  14 +.profile-info-editable {
  15 + .upload-button {
  16 + font-size: 0.8em;
  17 + padding-top: 9px;
  18 + padding-left: 6px;
  19 + font-weight: bold;
  20 + }
17 21 }
18 22  
19 23 .profile-info-extrainfo {
20 24 margin-top: 10px;
21   -}
22 25 \ No newline at end of file
  26 +}
... ...
src/languages/en.json
... ... @@ -23,6 +23,7 @@
23 23 "profile.others_info": "Others",
24 24 "profile.community.title": "Community",
25 25 "profile.person.title": "Person",
  26 + "profile.image.edit": "Crop photo",
26 27 "profile.image.upload": "Upload Photo",
27 28 "activities.title": "Activities",
28 29 "activities.create_article.description": "has published on",
... ...
src/languages/pt.json
... ... @@ -23,6 +23,7 @@
23 23 "profile.others_info": "Outras informações",
24 24 "profile.community.title": "Comunidade",
25 25 "profile.person.title": "Pessoa",
  26 + "profile.image.edit": "Recortar photo",
26 27 "profile.image.upload": "Enviar photo",
27 28 "activities.title": "Atividades",
28 29 "activities.create_article.description": "publicou em",
... ...
src/lib/ng-noosfero-api/http/person.service.ts
1 1 import { Injectable, Inject } from "ng-forward";
2   -import {RestangularService} from "./restangular_service";
3   -import {ProfileService} from "./profile.service";
  2 +import { RestangularService } from "./restangular_service";
  3 +import { ProfileService } from "./profile.service";
4 4  
5 5 @Injectable()
6 6 @Inject("Restangular", "$q", "$log", ProfileService)
... ... @@ -29,12 +29,12 @@ export class PersonService extends RestangularService&lt;noosfero.Person&gt; {
29 29 return deferred.promise;
30 30 }
31 31  
32   - uploadImage(profile: noosfero.Profile, base64_image_json: any) {
  32 + uploadImage(profile: noosfero.Profile, base64ImageJson: any) {
33 33 let headers = { 'Content-Type': 'application/json' };
34 34 let deferred = this.$q.defer<noosfero.RestResult<noosfero.Profile>>();
35 35 // TODO dynamically copy the selected attributes to update
36 36 let attributesToUpdate: any = {
37   - person: { image_builder: base64_image_json }
  37 + person: { image_builder: base64ImageJson }
38 38 };
39 39 let restRequest: ng.IPromise<noosfero.RestResult<any>> =
40 40 this.getElement(profile.id).customPOST(attributesToUpdate, null, null, headers);
... ...