Completed initial two columns profile-info. Needs create a unit test for new profile-data component

Michel Felipe
1 parent c1e0c406
Showing 13 changed files with 216 additions and 49 deletions Show diff stats
src/app/index.scss
src/app/layout/scss/_bootstrap-overrides.scss
src/app/layout/scss/_layout.scss
src/app/layout/scss/_tables.scss
src/app/profile/data/profile-data.component.ts
src/app/profile/data/profile-data.html
src/app/profile/info/profile-info.component.spec.ts
src/app/profile/info/profile-info.component.ts
src/app/profile/info/profile-info.html
src/app/profile/profile.scss
src/app/shared/pipes/translate-profile.filter.ts
src/languages/en.json
src/languages/pt.json
@@ -24,12 +24,19 @@ $main-bg-color: #e7ebee;
 $primary-color: #03a9f4;
 $primary-color-dark: #0288d1;
  
+//OTHER COLORS
+$default-bg-hover-color: #f8f8f8;
+$red-color: #e84e40;
+$red-color-dark: #dd191d;
+
 //GRID - media queries breakpoints
 $break-xxs-min: 420px;
 $break-xs-min: 768px;
  
 $break-xxs-max: ($break-xxs-min - 1);
 $break-xs-max: ($break-xs-min - 1);
+
+
 @import "../../bower_components/bootswatch/flatly/_variables.scss";
  
 /**
@@ -68,4 +75,5 @@ h1, h2, h3, h4, h5 {
 @import "../../bower_components/bootswatch/flatly/_bootswatch.scss";
 @import "layout/scss/mixins";
 @import "layout/scss/bootstrap-overrides";
-@import "layout/scss/layout"
+@import "layout/scss/layout";
+@import "layout/scss/tables";
-/* MAINBOX */
-.main-box {
-		border: 1px solid #e7ebee;
-    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-    margin-bottom: 16px;
-    /* overflow: hidden; */
-    @include border-radius($border-radius-base);
-
-	@media (max-width: $break-xs-max) {
-		margin-bottom: 10px;
-	}
-
-	h2 {
-	    font-size: 1.3em;
-	    line-height: 29px;
-	    margin: 0;
-	    padding: 0;
-
-		@media (max-width: $break-xxs-max) {
-			margin-bottom: 5px;
-		}
-	}
-	&.no-header {
-		padding-top: 20px;
-	}
-	.main-box-header {
-	    min-height: 50px;
-	    padding: 10px 20px;
-
-		&.with-border {
-			border-bottom: 1px solid #ecf0f1;
-		}
-	}
-	.main-box-body {
-		padding: 0 20px 20px 20px;
-	}
-}
-
 /* TABS */
 .nav-tabs {
 	background: #f9f9f9;
@@ -33,6 +33,5 @@
 	}
 	.main-box-body {
 		padding: 0 20px 20px 20px;
-    text-align: center;
 	}
 }
@@ -0,0 +1,103 @@
+/* TABLES */
+.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover > th {
+	background-color: $default-bg-hover-color;
+}
+.table {
+	thead > tr {
+		> th {
+			border-bottom: 2px solid $main-bg-color;
+			text-transform: uppercase;
+			font-size: 0.875em;
+
+			> a span {
+				color: $text-color;
+			}
+		}
+	}
+	tbody > tr {
+		> td {
+			font-size: 0.875em;
+			vertical-align: middle;
+			border-top: 1px solid $main-bg-color;
+			padding: 12px 8px;
+
+			&:first-child {
+				font-size: 1.125em;
+				font-weight: bold;
+			}
+		}
+		td {
+			.call-type {
+				display: block;
+				font-size: 0.75em;
+				text-align: center;
+			}
+			.first-line {
+				line-height: 1.5;
+				font-weight: 400;
+				font-size: 1.125em;
+
+				span {
+					font-size: 0.875em;
+					color: #969696;
+					font-weight: 300;
+				}
+			}
+			.second-line {
+				font-size: 0.875em;
+				line-height: 1.2;
+			}
+		}
+		&.table-line-fb > td {
+			background-color: #9daccb;
+			color: #262525;
+		}
+		&.table-line-twitter > td {
+			background-color: #9fccff;
+			color: #262525;
+		}
+		&.table-line-plus > td {
+			background-color: #eea59c;
+			color: #262525;
+		}
+	}
+
+	a {
+		&.table-link {
+			margin: 0 5px;
+			font-size: 1.125em;
+
+			&:hover {
+				text-decoration: none;
+				color: #2980b9;
+			}
+			&.danger {
+				color: $red-color;
+
+				&:hover {
+					color: $red-color-dark;
+				}
+			}
+		}
+	}
+
+	&.table-condensed {
+		tbody > tr {
+			> td {
+				padding: 8px 5px;
+			}
+		}
+	}
+}
+
+.table-striped {
+  tbody > tr {
+  	> td {
+      width: 50%;
+  		background: none;
+  		border: none;
+  		border-bottom: 1px solid #ebebeb;
+    }
+  }
+}
@@ -0,0 +1,15 @@
+import {StateConfig, Component, Inject, Input, provide} from 'ng-forward';
+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {TranslateProfile} from "../../shared/pipes/translate-profile.filter";
+
+@Component({
+    selector: 'profile-data',
+    templateUrl: "app/profile/data/profile-data.html",
+    pipes: [TranslateProfile]
+})
+export class ProfileDataComponent {
+
+    @Input()
+    profile: noosfero.Profile;
+
+}
@@ -0,0 +1,45 @@
+<!-- Basic data -->
+<div class="main-box clearfix">
+  <header class="main-box-header clearfix">
+    <h2>{{"profile.basic_info" | translate}}</h2>
+  </header>
+  <div class="main-box-body clearfix">
+    <div class="table-responsive">
+      <table class="table table-striped table-hover">
+        <tbody>
+          <tr>
+            <td>
+              {{"profile.type" | translate}}
+            </td>
+            <td>
+              <span class="label" ng-class="{'label-danger': ctrl.profile.type == 'Community', 'label-info': ctrl.profile.type == 'Person'}">{{ctrl.profile | translateProfile}}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- Custom Fields -->
+<div class="main-box clearfix">
+  <header class="main-box-header clearfix">
+    <h2>{{"profile.others_info" | translate}}</h2>
+  </header>
+  <div class="main-box-body clearfix">
+    <div class="table-responsive">
+      <table class="table table-striped table-hover">
+        <tbody>
+          <tr ng-repeat="(field, value) in ctrl.profile.additional_data">
+            <td>
+              {{ field }}
+            </td>
+            <td>
+              {{ value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
@@ -8,6 +8,7 @@ describe(&quot;Components&quot;, () =&gt; {
         let $q: ng.IQService;
         let profileServiceMock: any;
         let $stateParams: any;
+        let amDateFormatMock: any;
  
         beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
             $rootScope = _$rootScope_;
@@ -17,6 +18,7 @@ describe(&quot;Components&quot;, () =&gt; {
         beforeEach(() => {
             $stateParams = jasmine.createSpyObj("$stateParams", ["profile"]);
             profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile", "getActivities"]);
+            amDateFormatMock = jasmine.createSpyObj("amDateFormatMock", ["transform"]);
  
             let getCurrentProfileResponse = $q.defer();
             getCurrentProfileResponse.resolve({ id: 1 });
@@ -29,7 +31,7 @@ describe(&quot;Components&quot;, () =&gt; {
         });
  
         it("get the profile activities", done => {
-            let component: ProfileInfoComponent = new ProfileInfoComponent(profileServiceMock);
+            let component: ProfileInfoComponent = new ProfileInfoComponent(profileServiceMock, amDateFormatMock);
             $rootScope.$apply();
             expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
             expect(profileServiceMock.getActivities).toHaveBeenCalled();
 import {StateConfig, Component, Inject, provide} from 'ng-forward';
 import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {ProfileDataComponent} from "../data/profile-data.component";
+import {TranslateProfile} from "../../shared/pipes/translate-profile.filter";
  
 @Component({
     selector: 'profile',
     templateUrl: "app/profile/info/profile-info.html",
-    providers: [provide('profileService', { useClass: ProfileService })]
+    providers: [provide('profileService', { useClass: ProfileService })],
+    directives: [ProfileDataComponent],
+    pipes: [TranslateProfile]
 })
 @Inject(ProfileService)
 @Inject("amDateFormatFilter")
@@ -14,10 +18,10 @@ export class ProfileInfoComponent {
     profile: noosfero.Profile;
  
     constructor(private profileService: ProfileService, private amDateFormatFilter: any) {
-        this.activate();
+        this.init();
     }
  
-    activate() {
+    init() {
         this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
             return this.profileService.getActivities(<number>this.profile.id);
@@ -5,8 +5,9 @@
       <header class="main-box-header clearfix">
         <h2>{{vm.profile.name}}</h2>
       </header>
-      <div class="main-box-body clearfix">
+      <div id="profile-left" class="main-box-body clearfix">
         <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
+        <span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile | translateProfile}}</span>
         <div class="profile-since">
           {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}}
         </div>
@@ -21,7 +22,7 @@
           <noosfero-activities [activities]="vm.activities"></noosfero-activities>
         </uib-tab>
         <uib-tab index="0" heading="{{ 'profile.about' | translate }}">
-          <!-- Profile data here -->
+          <profile-data [profile]="vm.profile"></profile-data>
         </uib-tab>
       </uib-tabset>
     </div>
@@ -5,3 +5,8 @@
     padding: 0 2%;
   }
 }
+
+#profile-left {
+  text-align: center;
+  margin-top: 15px;
+}
@@ -0,0 +1,14 @@
+import {Pipe, Inject} from "ng-forward";
+
+@Pipe("translateProfile")
+@Inject("translateFilter")
+export class TranslateProfile {
+
+    constructor(private translateFilter: any) { }
+
+    transform(profile: noosfero.Profile, options: any) {
+
+        return this.translateFilter("profile." + profile.type.toLowerCase() + ".title");
+    }
+
+}
@@ -10,7 +10,12 @@
   "language.pt": "Portuguese",
   "language.selector": "Language",
   "profile.member_since": "Member since",
-  "profile.about": "About me",
+  "profile.type": "Tipo",
+  "profile.about": "About",
+  "profile.basic_info": "Basic Information",
+  "profile.others_info": "Others",
+  "profile.community.title": "Community",
+  "profile.person.title": "Person",
   "activities.title": "Activities",
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
@@ -9,9 +9,13 @@
   "language.en": "Inglês",
   "language.pt": "Português",
   "language.selector": "Idioma",
-  "profile.wall": "Mural do Perfil",
   "profile.member_since": "Membro desde",
-  "profile.about": "Meus dados",
+  "profile.type": "Tipo",
+  "profile.about": "Sobre",
+  "profile.basic_info": "Dados básicos",
+  "profile.others_info": "Outras informações",
+  "profile.community.title": "Comunidade",
+  "profile.person.title": "Pessoa",
   "activities.title": "Atividades",
   "activities.create_article.description": "publicou em",
   "activities.add_member_in_community.description": "entrou na comunidade",
...	...	@@ -24,12 +24,19 @@ $main-bg-color: #e7ebee;
24	24	$primary-color: #03a9f4;
25	25	$primary-color-dark: #0288d1;
26	26
	27	+//OTHER COLORS
	28	+$default-bg-hover-color: #f8f8f8;
	29	+$red-color: #e84e40;
	30	+$red-color-dark: #dd191d;
	31	+
27	32	//GRID - media queries breakpoints
28	33	$break-xxs-min: 420px;
29	34	$break-xs-min: 768px;
30	35
31	36	$break-xxs-max: ($break-xxs-min - 1);
32	37	$break-xs-max: ($break-xs-min - 1);
	38	+
	39	+
33	40	@import "../../bower_components/bootswatch/flatly/_variables.scss";
34	41
35	42	/**
...	...	@@ -68,4 +75,5 @@ h1, h2, h3, h4, h5 {
68	75	@import "../../bower_components/bootswatch/flatly/_bootswatch.scss";
69	76	@import "layout/scss/mixins";
70	77	@import "layout/scss/bootstrap-overrides";
71		-@import "layout/scss/layout"
	78	+@import "layout/scss/layout";
	79	+@import "layout/scss/tables";
...	...
1		-/* MAINBOX */
2		-.main-box {
3		- border: 1px solid #e7ebee;
4		- box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
5		- margin-bottom: 16px;
6		- /* overflow: hidden; */
7		- @include border-radius($border-radius-base);
8		-
9		- @media (max-width: $break-xs-max) {
10		- margin-bottom: 10px;
11		- }
12		-
13		- h2 {
14		- font-size: 1.3em;
15		- line-height: 29px;
16		- margin: 0;
17		- padding: 0;
18		-
19		- @media (max-width: $break-xxs-max) {
20		- margin-bottom: 5px;
21		- }
22		- }
23		- &.no-header {
24		- padding-top: 20px;
25		- }
26		- .main-box-header {
27		- min-height: 50px;
28		- padding: 10px 20px;
29		-
30		- &.with-border {
31		- border-bottom: 1px solid #ecf0f1;
32		- }
33		- }
34		- .main-box-body {
35		- padding: 0 20px 20px 20px;
36		- }
37		-}
38		-
39	1	/* TABS */
40	2	.nav-tabs {
41	3	background: #f9f9f9;
...	...
...	...	@@ -33,6 +33,5 @@
33	33	}
34	34	.main-box-body {
35	35	padding: 0 20px 20px 20px;
36		- text-align: center;
37	36	}
38	37	}
...	...
...	...	@@ -0,0 +1,103 @@
	1	+/* TABLES */
	2	+.table-hover > tbody > tr:hover > td,
	3	+.table-hover > tbody > tr:hover > th {
	4	+ background-color: $default-bg-hover-color;
	5	+}
	6	+.table {
	7	+ thead > tr {
	8	+ > th {
	9	+ border-bottom: 2px solid $main-bg-color;
	10	+ text-transform: uppercase;
	11	+ font-size: 0.875em;
	12	+
	13	+ > a span {
	14	+ color: $text-color;
	15	+ }
	16	+ }
	17	+ }
	18	+ tbody > tr {
	19	+ > td {
	20	+ font-size: 0.875em;
	21	+ vertical-align: middle;
	22	+ border-top: 1px solid $main-bg-color;
	23	+ padding: 12px 8px;
	24	+
	25	+ &:first-child {
	26	+ font-size: 1.125em;
	27	+ font-weight: bold;
	28	+ }
	29	+ }
	30	+ td {
	31	+ .call-type {
	32	+ display: block;
	33	+ font-size: 0.75em;
	34	+ text-align: center;
	35	+ }
	36	+ .first-line {
	37	+ line-height: 1.5;
	38	+ font-weight: 400;
	39	+ font-size: 1.125em;
	40	+
	41	+ span {
	42	+ font-size: 0.875em;
	43	+ color: #969696;
	44	+ font-weight: 300;
	45	+ }
	46	+ }
	47	+ .second-line {
	48	+ font-size: 0.875em;
	49	+ line-height: 1.2;
	50	+ }
	51	+ }
	52	+ &.table-line-fb > td {
	53	+ background-color: #9daccb;
	54	+ color: #262525;
	55	+ }
	56	+ &.table-line-twitter > td {
	57	+ background-color: #9fccff;
	58	+ color: #262525;
	59	+ }
	60	+ &.table-line-plus > td {
	61	+ background-color: #eea59c;
	62	+ color: #262525;
	63	+ }
	64	+ }
	65	+
	66	+ a {
	67	+ &.table-link {
	68	+ margin: 0 5px;
	69	+ font-size: 1.125em;
	70	+
	71	+ &:hover {
	72	+ text-decoration: none;
	73	+ color: #2980b9;
	74	+ }
	75	+ &.danger {
	76	+ color: $red-color;
	77	+
	78	+ &:hover {
	79	+ color: $red-color-dark;
	80	+ }
	81	+ }
	82	+ }
	83	+ }
	84	+
	85	+ &.table-condensed {
	86	+ tbody > tr {
	87	+ > td {
	88	+ padding: 8px 5px;
	89	+ }
	90	+ }
	91	+ }
	92	+}
	93	+
	94	+.table-striped {
	95	+ tbody > tr {
	96	+ > td {
	97	+ width: 50%;
	98	+ background: none;
	99	+ border: none;
	100	+ border-bottom: 1px solid #ebebeb;
	101	+ }
	102	+ }
	103	+}
...	...
...	...	@@ -0,0 +1,15 @@
	1	+import {StateConfig, Component, Inject, Input, provide} from 'ng-forward';
	2	+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
	3	+import {TranslateProfile} from "../../shared/pipes/translate-profile.filter";
	4	+
	5	+@Component({
	6	+ selector: 'profile-data',
	7	+ templateUrl: "app/profile/data/profile-data.html",
	8	+ pipes: [TranslateProfile]
	9	+})
	10	+export class ProfileDataComponent {
	11	+
	12	+ @Input()
	13	+ profile: noosfero.Profile;
	14	+
	15	+}
...	...
...	...	@@ -0,0 +1,45 @@
	1	+<!-- Basic data -->
	2	+<div class="main-box clearfix">
	3	+ <header class="main-box-header clearfix">
	4	+ <h2>{{"profile.basic_info" \| translate}}</h2>
	5	+ </header>
	6	+ <div class="main-box-body clearfix">
	7	+ <div class="table-responsive">
	8	+ <table class="table table-striped table-hover">
	9	+ <tbody>
	10	+ <tr>
	11	+ <td>
	12	+ {{"profile.type" \| translate}}
	13	+ </td>
	14	+ <td>
	15	+ <span class="label" ng-class="{'label-danger': ctrl.profile.type == 'Community', 'label-info': ctrl.profile.type == 'Person'}">{{ctrl.profile \| translateProfile}}</span>
	16	+ </td>
	17	+ </tr>
	18	+ </tbody>
	19	+ </table>
	20	+ </div>
	21	+ </div>
	22	+</div>
	23	+
	24	+<!-- Custom Fields -->
	25	+<div class="main-box clearfix">
	26	+ <header class="main-box-header clearfix">
	27	+ <h2>{{"profile.others_info" \| translate}}</h2>
	28	+ </header>
	29	+ <div class="main-box-body clearfix">
	30	+ <div class="table-responsive">
	31	+ <table class="table table-striped table-hover">
	32	+ <tbody>
	33	+ <tr ng-repeat="(field, value) in ctrl.profile.additional_data">
	34	+ <td>
	35	+ {{ field }}
	36	+ </td>
	37	+ <td>
	38	+ {{ value }}
	39	+ </td>
	40	+ </tr>
	41	+ </tbody>
	42	+ </table>
	43	+ </div>
	44	+ </div>
	45	+</div>
...	...
...	...	@@ -8,6 +8,7 @@ describe("Components", () => {
8	8	let $q: ng.IQService;
9	9	let profileServiceMock: any;
10	10	let $stateParams: any;
	11	+ let amDateFormatMock: any;
11	12
12	13	beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
13	14	$rootScope = _$rootScope_;
...	...	@@ -17,6 +18,7 @@ describe("Components", () => {
17	18	beforeEach(() => {
18	19	$stateParams = jasmine.createSpyObj("$stateParams", ["profile"]);
19	20	profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile", "getActivities"]);
	21	+ amDateFormatMock = jasmine.createSpyObj("amDateFormatMock", ["transform"]);
20	22
21	23	let getCurrentProfileResponse = $q.defer();
22	24	getCurrentProfileResponse.resolve({ id: 1 });
...	...	@@ -29,7 +31,7 @@ describe("Components", () => {
29	31	});
30	32
31	33	it("get the profile activities", done => {
32		- let component: ProfileInfoComponent = new ProfileInfoComponent(profileServiceMock);
	34	+ let component: ProfileInfoComponent = new ProfileInfoComponent(profileServiceMock, amDateFormatMock);
33	35	$rootScope.$apply();
34	36	expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
35	37	expect(profileServiceMock.getActivities).toHaveBeenCalled();
...	...
1	1	import {StateConfig, Component, Inject, provide} from 'ng-forward';
2	2	import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
	3	+import {ProfileDataComponent} from "../data/profile-data.component";
	4	+import {TranslateProfile} from "../../shared/pipes/translate-profile.filter";
3	5
4	6	@Component({
5	7	selector: 'profile',
6	8	templateUrl: "app/profile/info/profile-info.html",
7		- providers: [provide('profileService', { useClass: ProfileService })]
	9	+ providers: [provide('profileService', { useClass: ProfileService })],
	10	+ directives: [ProfileDataComponent],
	11	+ pipes: [TranslateProfile]
8	12	})
9	13	@Inject(ProfileService)
10	14	@Inject("amDateFormatFilter")
...	...	@@ -14,10 +18,10 @@ export class ProfileInfoComponent {
14	18	profile: noosfero.Profile;
15	19
16	20	constructor(private profileService: ProfileService, private amDateFormatFilter: any) {
17		- this.activate();
	21	+ this.init();
18	22	}
19	23
20		- activate() {
	24	+ init() {
21	25	this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
22	26	this.profile = profile;
23	27	return this.profileService.getActivities(<number>this.profile.id);
...	...
...	...	@@ -5,8 +5,9 @@
5	5	<header class="main-box-header clearfix">
6	6	<h2>{{vm.profile.name}}</h2>
7	7	</header>
8		- <div class="main-box-body clearfix">
	8	+ <div id="profile-left" class="main-box-body clearfix">
9	9	<noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
	10	+ <span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile \| translateProfile}}</span>
10	11	<div class="profile-since">
11	12	{{"profile.member_since" \| translate}}: {{vm.profile.created_at \| amDateFormat:'MMMM YYYY'}}
12	13	</div>
...	...	@@ -21,7 +22,7 @@
21	22	<noosfero-activities [activities]="vm.activities"></noosfero-activities>
22	23	</uib-tab>
23	24	<uib-tab index="0" heading="{{ 'profile.about' \| translate }}">
24		- <!-- Profile data here -->
	25	+ <profile-data [profile]="vm.profile"></profile-data>
25	26	</uib-tab>
26	27	</uib-tabset>
27	28	</div>
...	...
...	...	@@ -5,3 +5,8 @@
5	5	padding: 0 2%;
6	6	}
7	7	}
	8	+
	9	+#profile-left {
	10	+ text-align: center;
	11	+ margin-top: 15px;
	12	+}
...	...