Partner profile UI

src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { GraphComponent } from './dashboard/graph/graph.component';
+import { PartnerDetailsComponent } from './dashboard/partner-details/partner-details.component';
 import { ReportComponent } from './dashboard/report/report.component';
 import { SettingsComponent } from './dashboard/settings/settings.component';
 import { TableComponent } from './dashboard/table/table.component';
@@ -19,6 +20,8 @@ const routes: Routes = [
             path: 'partners', component: TableComponent
         }, {
             path: 'report', component: ReportComponent
+        }, {
+            path: 'partners/partner-details', component: PartnerDetailsComponent
         }, {
             path: 'settings', component: SettingsComponent
         }

src/app/app.module.ts

@@ -14,6 +14,8 @@ import { ReportComponent } from './dashboard/report/report.component';
 import { SettingsComponent } from './dashboard/settings/settings.component';
 
 import { PartnerProfileService } from './services/partner-profile.service';
+import { PartnerDetailsComponent } from './dashboard/partner-details/partner-details.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
     declarations: [
@@ -23,13 +25,15 @@ import { PartnerProfileService } from './services/partner-profile.service';
         GraphComponent,
         TableComponent,
         ReportComponent,
-        SettingsComponent
+        SettingsComponent,
+        PartnerDetailsComponent
     ],
     imports: [
         BrowserModule,
         AppRoutingModule,
         BrowserAnimationsModule,
         HttpClientModule,
+        FormsModule,
         NgxEchartsModule.forRoot({
             echarts: () => import('echarts'),
         }),

src/app/dashboard/dashboard.component.html

@@ -1,13 +1,13 @@
 <div class="container">
     <section class="sidebar">
-        <figure class="logo" [routerLink]="'graph'">
+        <figure class="logo" [routerLink]="'/dashboard/analytics'">
             <img src="assets/logo.png" alt="cac logo">
         </figure>
         
         <nav>
             <a [ngClass]="{'active' : currentURL.includes('analytics')}" [routerLink]="'analytics'"> <img src="assets/dashboard.svg" alt=""> <span> Dashboard </span> </a>
             <a [ngClass]="{'active' : currentURL.includes('partners')}" [routerLink]="'partners'"> <img src="assets/database.svg" alt=""> <span> All Partners </span> </a>
-            <a [ngClass]="{'active' : currentURL.includes('report')}" [routerLink]="'report'"> <img src="assets/report.svg" alt=""> <span> Report </span> </a>
+            <a [ngClass]="{'active' : currentURL.includes('report')}" [routerLink]="'report'"> <img src="assets/report.svg" alt=""> <span> Reports </span> </a>
             <a [ngClass]="{'active' : currentURL.includes('settings')}" [routerLink]="'settings'"> <img src="assets/settings.svg" alt=""> <span> Settings </span> </a>
             <a [routerLink]="'/login'"> <img src="assets/logout.svg" alt=""> <span> Logout </span> </a>
         </nav>

src/app/dashboard/dashboard.component.ts

@@ -25,8 +25,8 @@ export class DashboardComponent implements OnInit {
             } 
         });
 
-        this.partnerProfileService.getPartnersData().then(data => {
-            console.log(data);
-        })
+        // this.partnerProfileService.getPartnersData().then(data => {
+        //     console.log(data);
+        // })
     }
 }

src/app/dashboard/partner-details/partner-details.component.html

@@ -0,0 +1,107 @@
+<section class="subpage">
+    <header class="main-header">
+        <h2> Partner Profile </h2>
+    </header>
+    
+    <div class="segments">
+        <button class="button" [ngClass]="{'active' : selectedSegment === 1}" (click)="selectedSegment = 1"> Profile </button>
+        <button class="button" [ngClass]="{'active' : selectedSegment === 2}" (click)="selectedSegment = 2"> Implementation Data </button>
+        <button class="button" [ngClass]="{'active' : selectedSegment === 3}" (click)="selectedSegment = 3"> Training Data </button>
+    </div>
+    
+    <section class="card">
+        <header>
+            <h5> Primary Contact </h5>
+        </header>
+
+        <div class="container">
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.name">
+                <label> Name </label>
+            </div>
+    
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.designation">
+                <label> Name </label>
+            </div>
+    
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.email">
+                <label> Name </label>
+            </div>
+            
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.contactNumber">
+                <label> Contact </label>
+            </div>
+        </div>
+    </section>
+
+    <section class="card">
+        <header>
+            <h5> Basic Info </h5>
+        </header>
+
+        <div class="container">
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.name">
+                <label> Name </label>
+            </div>
+    
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.website">
+                <label> Official Website </label>
+            </div>
+    
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.type">
+                <label> Type </label>
+            </div>
+    
+            <div class="input-holder">
+                <div class="text"> <button *ngFor="let area of partnerDetails.organizationBasicInfo.areasOfWork"> {{ area }} </button> </div>
+                <label> Thematic areas of work </label>
+            </div>
+    
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.source">
+                <label> How did you hear about us </label>
+            </div>
+    
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.referralName">
+                <label> Name of the organisation and person that referred </label>
+            </div>
+
+            <div class="checkbox-holder">
+                <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">
+                <label> I would like to receive periodic updates about CAC </label>
+            </div>
+
+            <div class="input-holder">
+                <textarea type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>
+                <label> I would like to become a member of CAC because </label>
+            </div>
+        </div>
+
+    </section>
+
+    <section class="footer-buttons">
+        <button class="button back" [routerLink]="'/dashboard/partners'">
+            <img src="assets/chevron-left.svg" alt="">
+            Back
+        </button>
+        
+        <ng-container *ngIf="!isFormEditable">
+            <button class="button edit" (click)="isFormEditable=true"> <img src="assets/edit.svg" alt=""> Edit </button>
+            <button class="button"> <img src="assets/export.svg" alt=""> Export </button>        
+            <button class="button delete"> <img src="assets/delete.svg" alt=""> Delete </button>
+        </ng-container>
+
+        <ng-container *ngIf="isFormEditable">
+            <button class="button edit" (click)="isFormEditable=false"> <img src="assets/save.svg" alt=""> Save </button>
+            <button class="button delete" (click)="isFormEditable=false"> X Cancel </button>
+        </ng-container>
+    </section>
+
+</section>

src/app/dashboard/partner-details/partner-details.component.scss

@@ -0,0 +1,95 @@
+.card {
+    margin: 24px 20px;
+
+    header {
+        margin-bottom: 24px;
+        h5 {
+            color: var(--primary-text);
+            font-size: 20px;
+        }
+    }
+
+    .container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 24px;
+        align-items: flex-start;
+    }
+
+    .input-holder, .checkbox-holder {
+        margin: 0;
+    }
+}
+
+.segments {
+    button {
+        border: 2px solid var(--input-border);
+        padding: 7px 20px;
+        border-radius: var(--common-border-radius);
+        background-color: white;
+        margin-left: 20px;
+        color: var(--secondary-text);
+        font-weight: 500;
+        transition: background-color 0.3s, color 0.3s;
+
+        &.active {
+            background-color: var(--primary);
+            border-color: var(--primary);
+            color: white;
+        }
+    }
+}
+
+.footer-buttons {
+    display: flex;
+    justify-content: flex-end;
+    position: sticky;
+    background-color: white;
+    box-shadow: 0px 0px 50px var(--input-border);
+    bottom: 0;
+    left: 0;
+    padding: 20px 10px;
+    z-index: 2;
+    border-radius: var(--common-border-radius);
+    width: 100%;
+
+    button {
+        border: 2px solid var(--input-border);
+        padding: 7px 20px;
+        border-radius: var(--common-border-radius);
+        background-color: white;
+        margin: 0 10px;
+        color: var(--secondary-text);
+        font-weight: 500;
+        transition: background-color 0.3s, color 0.3s;
+
+        img {
+            vertical-align: middle;
+            width: 15px;
+            height: 15px;
+        }
+
+        &.back {
+            margin-right: auto;
+        }
+
+        &.edit {
+            color: var(--primary);
+            border-color: var(--primary);
+        }
+
+        &.delete {
+            color: #eb445a;
+            border-color: #eb445a;
+        }
+    }
+}
+
+.subpage {
+    padding: 0;
+
+    .main-header {
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+}

src/app/dashboard/partner-details/partner-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PartnerDetailsComponent } from './partner-details.component';
+
+describe('PartnerDetailsComponent', () => {
+  let component: PartnerDetailsComponent;
+  let fixture: ComponentFixture<PartnerDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PartnerDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PartnerDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/partner-details/partner-details.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'app-partner-details',
+    templateUrl: './partner-details.component.html',
+    styleUrls: ['./partner-details.component.scss']
+})
+export class PartnerDetailsComponent implements OnInit {
+    partnerDetails: any;
+    isFormEditable: boolean = false;
+    selectedSegment: 1 | 2 | 3 = 1;
+
+    constructor(
+        private activateRouter:ActivatedRoute
+    ) { }
+
+    ngOnInit(): void {
+        this.activateRouter.queryParams.subscribe((data: any) => {
+            this.partnerDetails = JSON.parse(data.data);
+            console.log(this.partnerDetails);
+        }).unsubscribe();
+    }
+
+}

src/app/dashboard/report/report.component.html

@@ -1 +1,5 @@
-<p>report works!</p>
+<div class="subpage">
+    <header class="main-header">
+        <h2> Reports </h2>
+    </header>
+</div>

src/app/dashboard/settings/settings.component.html

@@ -1 +1,5 @@
-<p>settings works!</p>
+<div class="subpage">
+    <header class="main-header">
+        <h2> Settings </h2>
+    </header>
+</div>

src/app/dashboard/table/table.component.html

@@ -12,8 +12,7 @@
                 <input type="text" placeholder="Partner name, location, PRA user, contact...">
                 <label> Search </label>
             </div>
-            <button class="button" (click)="showExportOptions = true"> <img src="assets/export.svg" alt=""> Export
-            </button>
+            <button class="button" (click)="showExportOptions = true"> <img src="assets/export.svg" alt=""> Export </button>
             <button class="button"> <img src="assets/filter.svg" alt=""> Filter </button>
         </div>
 
@@ -40,7 +39,7 @@
                 <div class="col"> Primary Contact </div>
             </header>
             <section class="data">
-                <div class="row" *ngFor="let partner of userData">
+                <div class="row" *ngFor="let partner of userData" (click)="showPartnerDetails(partner)">
                     <div class="col"> <input type="checkbox"> </div>
                     <div class="col">
                         {{ partner.organizationBasicInfo.name }}

src/app/dashboard/table/table.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PartnerProfileService } from '../../services/partner-profile.service';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-table',
@@ -11,7 +12,8 @@ export class TableComponent implements OnInit {
     showExportOptions: boolean = false;
 
     constructor(
-        private partnerProfileService: PartnerProfileService
+        private partnerProfileService: PartnerProfileService,
+        private router: Router
     ) { }
 
     ngOnInit(): void {
@@ -20,4 +22,8 @@ export class TableComponent implements OnInit {
         }, (e) => console.log(e));
     }
 
+    showPartnerDetails(partner: any) {
+        this.router.navigate(['dashboard/partners/partner-details'], { queryParams : { data: JSON.stringify(partner) } });
+    }
+
 }

src/assets/delete.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#eb445a" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="900.5px" height="900.5px" viewBox="0 0 900.5 900.5" style="enable-background:new 0 0 900.5 900.5;" xml:space="preserve"
+	>
+<g>
+	<path d="M176.415,880.5c0,11.046,8.954,20,20,20h507.67c11.046,0,20-8.954,20-20V232.487h-547.67V880.5L176.415,880.5z
+		 M562.75,342.766h75v436.029h-75V342.766z M412.75,342.766h75v436.029h-75V342.766z M262.75,342.766h75v436.029h-75V342.766z"/>
+	<path d="M618.825,91.911V20c0-11.046-8.954-20-20-20h-297.15c-11.046,0-20,8.954-20,20v71.911v12.5v12.5H141.874
+		c-11.046,0-20,8.954-20,20v50.576c0,11.045,8.954,20,20,20h34.541h547.67h34.541c11.046,0,20-8.955,20-20v-50.576
+		c0-11.046-8.954-20-20-20H618.825v-12.5V91.911z M543.825,112.799h-187.15v-8.389v-12.5V75h187.15v16.911v12.5V112.799z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/edit.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg fill="#2a7a99" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 487.977 487.977" style="enable-background:new 0 0 487.977 487.977;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M484.685,196.177c-4-3.8-10.3-3.7-14.1,0.3l-181,189.6l-14.1-57.6l188.8-189.7c3.9-3.9,3.9-10.2,0-14.1
+			c-3.9-3.9-10.2-3.9-14.1,0l-188.8,189.6l-70.3-17.7l-17.7-70.3l189.6-188.8c3.9-3.9,3.9-10.2,0-14.1c-3.9-3.9-10.2-3.9-14.1,0
+			l-189.6,188.9l-57.6-14.1l189.6-181c4-3.8,4.1-10.1,0.3-14.1s-10.1-4.1-14.1-0.3l-202.7,193.6l-0.1,0.1c-0.3,0.2-0.5,0.5-0.7,0.8
+			c-0.1,0.1-0.1,0.1-0.2,0.2c-0.3,0.3-0.5,0.7-0.7,1v0.1c-0.2,0.3-0.4,0.7-0.5,1c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.3-0.2,0.6-0.3,1
+			c0,0.1,0,0.1-0.1,0.2l-71.6,274.4c-0.9,3.4,0.1,7.1,2.6,9.6c1.9,1.9,4.5,2.9,7.1,2.9c0.8,0,1.7-0.1,2.5-0.3l274.4-71.6
+			c0.1,0,0.1,0,0.2-0.1c0.3-0.1,0.6-0.2,1-0.3c0.1,0,0.2-0.1,0.3-0.1c0.3-0.2,0.7-0.3,1-0.5h0.1c0.4-0.2,0.7-0.5,1-0.7
+			c0.1-0.1,0.1-0.1,0.2-0.2c0.3-0.2,0.5-0.5,0.8-0.7l0.1-0.1l193.6-202.7C488.785,206.277,488.685,199.977,484.685,196.177z
+			 M23.785,463.777l18.7-71.7l53,53L23.785,463.777z M117.885,439.277l-69.6-69.6l40.3-154.2l65.4,16l19.1,75.7
+			c0.9,3.6,3.7,6.4,7.3,7.3h0l75.7,19.1l16,65.4L117.885,439.277z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/save.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg fill="#2a7a99" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<g>
+	<rect x="27.5" y="5" width="6" height="10"/>
+	<path d="M39.914,0H0.5v49h48V8.586L39.914,0z M10.5,2h26v16h-26V2z M39.5,47h-31V26h31V47z"/>
+	<path d="M13.5,32h7c0.553,0,1-0.447,1-1s-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1S12.947,32,13.5,32z"/>
+	<path d="M13.5,36h10c0.553,0,1-0.447,1-1s-0.447-1-1-1h-10c-0.553,0-1,0.447-1,1S12.947,36,13.5,36z"/>
+	<path d="M26.5,36c0.27,0,0.52-0.11,0.71-0.29c0.18-0.19,0.29-0.45,0.29-0.71s-0.11-0.521-0.29-0.71c-0.37-0.37-1.04-0.37-1.41,0
+		c-0.19,0.189-0.3,0.439-0.3,0.71c0,0.27,0.109,0.52,0.29,0.71C25.979,35.89,26.229,36,26.5,36z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/styles.scss

@@ -46,6 +46,29 @@
     }
 }
 
+.checkbox-holder {
+    background-color: var(--input-background);
+    border-radius: var(--common-border-radius);
+    margin: 24px 0;
+    display: block;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 2px solid var(--input-border);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
+    label {
+        font-size: 14px;
+        color: var(--input-placeholder-text);
+        display: block;
+    }
+
+    input {
+        margin-right: 10px;
+    }
+}
+
 .input-holder {
     background-color: var(--input-background);
     border-radius: var(--common-border-radius);
@@ -98,7 +121,7 @@
         border-bottom-left-radius: 0;
     }
 
-    input {
+    input, textarea, .text {
         display: block;
         background-color: transparent;
         color: var(--primary-text);
@@ -127,9 +150,30 @@
             }
         }
     }
+
+    textarea {
+        height: 100px;
+        padding: 10px;
+        resize: none;
+    }
+
+    .text {
+        button {
+            border: 2px solid var(--input-border);
+            border-radius: var(--common-border-radius);
+            font-size: 12px;
+            color: var(--primary-text);
+            padding: 5px 15px;
+            margin-right: 5px;
+            margin-top: 3px;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+    }
 }
 
 .subpage {
+    position: relative;
     padding: 20px;
     height: 100vh;
     width: 100%;