Merge pull request #28 from dev-labs-bg/feature/bonus-statuses

Feature / Bonus Statuses
dev-labs-bg · Dec 2, 2016 · 0472af9 · 0472af9
2 parents 0231b31 + 2e10c27
commit 0472af9
Show file tree

Hide file tree

Showing 7 changed files with 321 additions and 113 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -68,6 +68,11 @@ import { AssessmentComponent } from './assessment/assessment.component';
 import { AdminAssessmentsListComponent } from './admin/assessments/list.component';
 import { CreateMicroProjectAssessmentComponent } from './assessment/micro-project/create.component';
 import { FormComponent as ContributionsFormComponent } from './contributions/form.component';
+import { StackOverflowComponent } from './contributions/stack-overflow.component';
+import { PublicActivityComponent } from './contributions/public-activity.component';
+import { SideProjectComponent } from './contributions/side-project.component';
+import { OpenSourceComponent } from './contributions/open-source.component';
+import { StatusComponent } from './contributions/status.component';
 
 
 @NgModule({
@@ -109,7 +114,12 @@ import { FormComponent as ContributionsFormComponent } from './contributions/for
     AssessmentComponent,
     AdminAssessmentsListComponent,
     CreateMicroProjectAssessmentComponent,
-    ContributionsFormComponent
+    ContributionsFormComponent,
+    StackOverflowComponent,
+    PublicActivityComponent,
+    SideProjectComponent,
+    OpenSourceComponent,
+    StatusComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/contributions/contributions.component.ts b/src/app/contributions/contributions.component.ts
@@ -1,131 +1,26 @@
 import { Component, OnInit } from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
-
-import {AuthService} from '../services/auth.service';
-import {User} from '../classes/user';
 
 @Component({
   selector: 'xp-contributions',
   template: `
     <h1>Greetings, friend</h1>
     <p>Here you could fill out some interesting information about yourself and earn some experience points while you're at it!</p>
     <p>Each column below represents something that we value highly. Feel free to fill them in and gain some points after the admin validates. :)</p>
-    <div [ngSwitch]="selectedForm"
-        class="form-group">
-        <div class="stack-overflow">
-            <h2>Stack overflow account</h2>
-            <p>Try to earn some points by giving your stack overflow account</p>
-            <p>
-                <a href="javascript:;" (click)="showForm('stackOverflow')">Click here</a>
-            </p>
-            <xp-contributions-form
-                *ngSwitchCase="'stackOverflow'"
-                [form]="form"
-                title="Stack Overflow Account"
-                inputName="stack_overflow_account"
-                (onCancel)="handleCancel($event)"
-                (onUserChange)="changeUser($event)">
-            </xp-contributions-form>
-        </div>
-        <div class="public-activity">
-            <h2>Public activity</h2>
-            <p>Some public activity info</p>
-            <p>
-                <a href="javascript:;" (click)="showForm('publicActivity')">Click here</a>
-            </p>
-            <xp-contributions-form
-                *ngSwitchCase="'publicActivity'"
-                [form]="form"
-                title="Public Activity"
-                inputName="public_activity"
-                (onCancel)="handleCancel($event)"
-                (onUserChange)="changeUser($event)">
-            </xp-contributions-form>
-        </div>
-        <div class="public-activity">
-            <h2>Side Project</h2>
-            <p>Please share your side projects with us info</p>
-            <p>
-                <a href="javascript:;" (click)="showForm('sideProject')">Click here</a>
-            </p>
-            <xp-contributions-form
-                *ngSwitchCase="'sideProject'"
-                [form]="form"
-                title="Side Project"
-                inputName="side_project"
-                (onCancel)="handleCancel($event)"
-                (onUserChange)="changeUser($event)">
-            </xp-contributions-form>
-        </div>
-        <div class="open-source">
-            <h2>Open source contributions</h2>
-            <p>You've contributed to a project? Please share it with us</p>
-            <p>
-                <a href="javascript:;" (click)="showForm('openSource')">Click here</a>
-            </p>
-            <xp-contributions-form
-                *ngSwitchCase="'openSource'"
-                [form]="form"
-                title="Open Source Contributions"
-                inputName="open_source_contributions"
-                (onCancel)="handleCancel($event)"
-                (onUserChange)="changeUser($event)">
-            </xp-contributions-form>
-        </div>
+    <div class="form-group">
+        <xp-stack-overflow></xp-stack-overflow>
+        <xp-public-activity></xp-public-activity>
+        <xp-side-project></xp-side-project>
+        <xp-open-source></xp-open-source>
     </div>
   `,
   styles: []
 })
 export class ContributionsComponent implements OnInit {
-    private selectedForm: string = null;
-    private form: FormGroup;
-    private loggedUser: User;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private authService: AuthService,
-    ) {}
+    constructor() {}
 
     ngOnInit() {
-        this.loggedUser = this.authService.getLoggedUser();
-
-        this.form = this.formBuilder.group({
-            stack_overflow_account: this.loggedUser.attributes.stack_overflow_account
-        });
-    }
-
-    showForm(value) {
-        switch (value) {
-            case 'stackOverflow':
-                this.form = this.formBuilder.group({
-                    stack_overflow_account: this.loggedUser.attributes.stack_overflow_account
-                });
-                break;
-            case 'publicActivity':
-                this.form = this.formBuilder.group({
-                    public_activity: this.loggedUser.attributes.public_activity
-                });
-                break;
-            case 'sideProject':
-                this.form = this.formBuilder.group({
-                    side_project: this.loggedUser.attributes.side_project
-                });
-                break;
-            case 'openSource':
-                this.form = this.formBuilder.group({
-                    open_source_contributions: this.loggedUser.attributes.open_source_contributions
-                });
-                break;
-        }
-        this.selectedForm = value;
-    }
-
-    handleCancel() {
-        this.selectedForm = null;
-    }
-
-    changeUser(value) {
-        this.loggedUser = value;
+        //
     }
 
 }
diff --git a/src/app/contributions/open-source.component.ts b/src/app/contributions/open-source.component.ts
@@ -0,0 +1,70 @@
+import {Component, OnInit} from '@angular/core';
+import {User} from "../classes/user";
+import {FormGroup, FormBuilder} from "@angular/forms";
+import {AuthService} from "../services/auth.service";
+
+@Component({
+  selector: 'xp-open-source',
+  template: `
+    <div class="open-source">
+        <h2>Open source contributions</h2>
+        <xp-contributions-status
+            *ngIf="shouldSeeStatus()"
+            [points]="loggedUser.bonus_points['open_source_contributions']">
+        </xp-contributions-status>
+        <div *ngIf="shouldSeeForm()">
+            <p>You've contributed to a project? Please share it with us</p>
+            <p>
+                <a href="javascript:;" (click)="showForm()">Click here</a>
+            </p>
+            <xp-contributions-form
+                *ngIf="isVisible"
+                [form]="form"
+                title="Open Source Contributions"
+                inputName="open_source_contributions"
+                (onCancel)="handleCancel($event)"
+                (onUserChange)="changeUser($event)">
+            </xp-contributions-form>
+        </div>
+    </div>
+  `,
+  styles: []
+})
+export class OpenSourceComponent implements OnInit {
+    private isVisible: boolean = false;
+    private loggedUser: User = null;
+    private form: FormGroup;
+
+    constructor(
+        private formBuilder: FormBuilder,
+        private authService: AuthService,
+    ) { }
+
+    ngOnInit() {
+        this.loggedUser = this.authService.getLoggedUser();
+    }
+
+    handleCancel() {
+        this.isVisible = false;
+    }
+
+    changeUser(value) {
+        this.loggedUser = value;
+    }
+
+    showForm() {
+        this.form = this.formBuilder.group({
+            open_source_contributions: this.loggedUser.attributes.open_source_contributions
+        });
+        this.isVisible = true;
+    }
+
+    shouldSeeForm() {
+        return typeof(this.loggedUser.bonus_points['open_source_contributions']) === 'undefined';
+    }
+
+    shouldSeeStatus() {
+        return typeof(this.loggedUser.bonus_points['open_source_contributions']) !== 'undefined'
+    }
+
+}
diff --git a/src/app/contributions/public-activity.component.ts b/src/app/contributions/public-activity.component.ts
@@ -0,0 +1,70 @@
+import {Component, OnInit} from '@angular/core';
+import {User} from "../classes/user";
+import {FormGroup, FormBuilder} from "@angular/forms";
+import {AuthService} from "../services/auth.service";
+
+@Component({
+  selector: 'xp-public-activity',
+  template: `
+    <div class="public-activity">
+        <h2>Public activity</h2>
+        <xp-contributions-status
+            *ngIf="shouldSeeStatus()"
+            [points]="loggedUser.bonus_points['public_activity']">
+        </xp-contributions-status>
+        <div *ngIf="shouldSeeForm()">
+            <p>Some public activity info</p>
+            <p>
+                <a href="javascript:;" (click)="showForm()">Click here</a>
+            </p>
+            <xp-contributions-form
+                *ngIf="isVisible"
+                [form]="form"
+                title="Public Activity"
+                inputName="public_activity"
+                (onCancel)="handleCancel($event)"
+                (onUserChange)="changeUser($event)">
+            </xp-contributions-form>
+        </div>
+    </div>
+  `,
+  styles: []
+})
+export class PublicActivityComponent implements OnInit {
+    private loggedUser: User = null;
+    private form: FormGroup;
+    private isVisible: boolean = false;
+
+    constructor(
+        private formBuilder: FormBuilder,
+        private authService: AuthService,
+    ) { }
+
+    ngOnInit() {
+        this.loggedUser = this.authService.getLoggedUser();
+    }
+
+    handleCancel() {
+        this.isVisible = false;
+    }
+
+    changeUser(value) {
+        this.loggedUser = value;
+    }
+
+    showForm() {
+        this.form = this.formBuilder.group({
+            public_activity: this.loggedUser.attributes.public_activity
+        });
+        this.isVisible = true;
+    }
+
+    shouldSeeForm() {
+        return typeof(this.loggedUser.bonus_points['public_activity']) === 'undefined';
+    }
+
+    shouldSeeStatus() {
+        return typeof(this.loggedUser.bonus_points['public_activity']) !== 'undefined'
+    }
+
+}
diff --git a/src/app/contributions/side-project.component.ts b/src/app/contributions/side-project.component.ts
@@ -0,0 +1,69 @@
+import {Component, OnInit} from '@angular/core';
+import {User} from "../classes/user";
+import {FormGroup, FormBuilder} from "@angular/forms";
+import {AuthService} from "../services/auth.service";
+
+@Component({
+  selector: 'xp-side-project',
+  template: `
+    <div class="side-project">
+        <h2>Side Project</h2>
+        <xp-contributions-status
+            *ngIf="shouldSeeStatus()"
+            [points]="loggedUser.bonus_points['side_project']">
+        </xp-contributions-status>
+        <div *ngIf="shouldSeeForm()">
+            <p>Please share your side projects with us info</p>
+            <p>
+                <a href="javascript:;" (click)="showForm()">Click here</a>
+            </p>
+            <xp-contributions-form
+                *ngIf="isVisible"
+                [form]="form"
+                title="Side Project"
+                inputName="side_project"
+                (onCancel)="handleCancel($event)"
+                (onUserChange)="changeUser($event)">
+            </xp-contributions-form>
+        </div>
+    </div>
+  `,
+  styles: []
+})
+export class SideProjectComponent implements OnInit {
+    private loggedUser: User = null;
+    private form: FormGroup;
+    private isVisible: boolean = false;
+
+    constructor(
+        private formBuilder: FormBuilder,
+        private authService: AuthService,
+    ) { }
+
+    ngOnInit() {
+        this.loggedUser = this.authService.getLoggedUser();
+    }
+
+    handleCancel() {
+        this.isVisible = false;
+    }
+
+    changeUser(value) {
+        this.loggedUser = value;
+    }
+
+    showForm() {
+        this.form = this.formBuilder.group({
+            side_project: this.loggedUser.attributes.side_project
+        });
+        this.isVisible = true;
+    }
+
+    shouldSeeForm() {
+        return typeof(this.loggedUser.bonus_points['side_project']) === 'undefined';
+    }
+
+    shouldSeeStatus() {
+        return typeof(this.loggedUser.bonus_points['side_project']) !== 'undefined'
+    }
+}