From 13a31243a9322fefc277c36da8f06dd3f540ec7e Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 10 Feb 2022 01:27:38 +0530 Subject: [PATCH] Get org data api connection + Table UI --- src/app/app-routing.module.ts | 2 +- src/app/app.module.ts | 8 +- src/app/dashboard/dashboard.component.html | 1 + src/app/dashboard/dashboard.component.ts | 8 +- src/app/dashboard/table/table.component.html | 113 ++++++------------ src/app/dashboard/table/table.component.scss | 98 +++++++++++++++ src/app/dashboard/table/table.component.ts | 19 ++- src/app/login/login.component.ts | 2 +- .../services/partner-profile.service.spec.ts | 16 +++ src/app/services/partner-profile.service.ts | 18 +++ src/assets/export.svg | 1 + src/assets/filter.svg | 40 +++++++ src/assets/logout.svg | 53 ++++++++ src/styles.scss | 9 +- 14 files changed, 303 insertions(+), 85 deletions(-) create mode 100644 src/app/services/partner-profile.service.spec.ts create mode 100644 src/app/services/partner-profile.service.ts create mode 100644 src/assets/export.svg create mode 100644 src/assets/filter.svg create mode 100644 src/assets/logout.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 140b46e..8658d61 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,7 +8,7 @@ import { TableComponent } from './dashboard/table/table.component'; import { LoginComponent } from './login/login.component'; const routes: Routes = [ - { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, + { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'dashboard', component: DashboardComponent, children: [ { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ad53194..13d39d3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxEchartsModule } from 'ngx-echarts'; import { AppRoutingModule } from './app-routing.module'; +import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; @@ -12,6 +13,8 @@ import { TableComponent } from './dashboard/table/table.component'; import { ReportComponent } from './dashboard/report/report.component'; import { SettingsComponent } from './dashboard/settings/settings.component'; +import { PartnerProfileService } from './services/partner-profile.service'; + @NgModule({ declarations: [ AppComponent, @@ -26,11 +29,14 @@ import { SettingsComponent } from './dashboard/settings/settings.component'; BrowserModule, AppRoutingModule, BrowserAnimationsModule, + HttpClientModule, NgxEchartsModule.forRoot({ echarts: () => import('echarts'), }), ], - providers: [], + providers: [ + PartnerProfileService, + ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 0c033a7..5c438d4 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -9,6 +9,7 @@ All Partners Report Settings + Logout diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 3adb41b..cba630d 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; +import { PartnerProfileService } from '../services/partner-profile.service'; @Component({ selector: 'app-dashboard', @@ -10,7 +11,8 @@ export class DashboardComponent implements OnInit { currentURL: string = ''; constructor( - private router: Router + private router: Router, + private partnerProfileService: PartnerProfileService ) { } ngOnInit(): void { @@ -22,5 +24,9 @@ export class DashboardComponent implements OnInit { this.currentURL = val.url; } }); + + this.partnerProfileService.getPartnersData().then(data => { + console.log(data); + }) } } diff --git a/src/app/dashboard/table/table.component.html b/src/app/dashboard/table/table.component.html index 7382825..3f8cc2b 100644 --- a/src/app/dashboard/table/table.component.html +++ b/src/app/dashboard/table/table.component.html @@ -6,85 +6,50 @@
-
+
- - + +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IDFirst nameLast name
1FooBar
2SomeoneYouknow
3IamoutOfinspiration
4YodaSkywalker
5PatrickDupont
6BarackObama
7FrançoisHolland
8MichelPopo
9ChuckNorris
10SimonRobin
11LouisLin
12ZeldaLink
+
+
+
Select
+
Name
+
Primary Disctrict & State
+
Type
+
Total Reach
+
Website
+
Primary Contact
+
+
+
+
+
+ {{ partner.organizationBasicInfo.name }} +
+
+ {{ partner.detailedProfile.district }}, {{ partner.detailedProfile.state }} +
+
+ {{ partner.organizationBasicInfo.type }} +
+
+ {{ partner.detailedProfile.totalReachOfOrganization }} +
+
+ {{ partner.organizationBasicInfo.website }} +
+
+
{{ partner.primaryContact.name }}
+ {{ partner.primaryContact.email }} + {{ partner.primaryContact.contactNumber }} +
+
+
+
diff --git a/src/app/dashboard/table/table.component.scss b/src/app/dashboard/table/table.component.scss index e69de29..19a9ea0 100644 --- a/src/app/dashboard/table/table.component.scss +++ b/src/app/dashboard/table/table.component.scss @@ -0,0 +1,98 @@ +.table-actions { + display: flex; + align-items: center; + justify-content: flex-end; + margin-bottom: 10px; + + .input-holder { + margin: 0; + width: 30%; + margin-right: auto; + } + + 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; + + img { + vertical-align: middle; + width: 15px; + height: 15px; + } + } +} + + +.table { + height: 50vh; + overflow: auto; + line-height: 1.8; + + header, .row { + display: flex; + flex-wrap: nowrap; + align-items: center; + padding: 0 10px; + + .col { + width: calc(100% / 7); + font-size: 14px; + + p, a, &>div { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + + &:nth-child(1) { + width: 70px; + } + + &:nth-child(3) { + flex-grow: 1; + } + + &:nth-child(5) { + width: 100px; + } + } + } + + header { + background-color: var(--secondary-text); + color: white; + border-radius: var(--common-border-radius); + position: sticky; + z-index: 1; + top: 0; + height: 50px; + } + + .row { + color: var(--secondary-text); + background-color: white; + border-radius: var(--common-border-radius); + cursor: pointer; + transition: background-color 0.3s, color 0.3s; + + &:nth-child(even) { + background-color: var(--input-background); + } + + &:hover { + background-color: var(--primary); + color: white; + + a { + color: var(--secondary); + } + } + } +} \ No newline at end of file diff --git a/src/app/dashboard/table/table.component.ts b/src/app/dashboard/table/table.component.ts index 678f062..4dfcb3e 100644 --- a/src/app/dashboard/table/table.component.ts +++ b/src/app/dashboard/table/table.component.ts @@ -1,15 +1,22 @@ import { Component, OnInit } from '@angular/core'; +import { PartnerProfileService } from '../../services/partner-profile.service'; @Component({ - selector: 'app-table', - templateUrl: './table.component.html', - styleUrls: ['./table.component.scss'] + selector: 'app-table', + templateUrl: './table.component.html', + styleUrls: ['./table.component.scss'] }) export class TableComponent implements OnInit { + userData: Array = []; - constructor() { } + constructor( + private partnerProfileService: PartnerProfileService + ) { } - ngOnInit(): void { - } + ngOnInit(): void { + this.partnerProfileService.getPartnersData().then((data: any) => { + this.userData = data; + }, (e) => console.log(e)); + } } diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index b814dba..a3de9ae 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -16,7 +16,7 @@ export class LoginComponent implements OnInit { } authenticateUser() { - this.router.navigate(['/dashboard']); + this.router.navigate(['/dashboard/analytics']); } } diff --git a/src/app/services/partner-profile.service.spec.ts b/src/app/services/partner-profile.service.spec.ts new file mode 100644 index 0000000..faf0b0f --- /dev/null +++ b/src/app/services/partner-profile.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { PartnerProfileService } from './partner-profile.service'; + +describe('PartnerProfileService', () => { + let service: PartnerProfileService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(PartnerProfileService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/partner-profile.service.ts b/src/app/services/partner-profile.service.ts new file mode 100644 index 0000000..4c6b26a --- /dev/null +++ b/src/app/services/partner-profile.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { lastValueFrom } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class PartnerProfileService { + + constructor( + private http: HttpClient + ) { } + + async getPartnersData() { + return lastValueFrom(this.http.get('http://143.110.247.94/user-data/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2MjAyY2I3YmQwMWMxMzRhYjdjZmViOGUiLCJleHAiOjE2NDk0NjI0MDAsImlhdCI6MTY0NDM1MTEwMH0.MghrYB51zg5Qk2fk1yx9NO1nPLpdhwMK69XIuFrmrAY')); + } + +} diff --git a/src/assets/export.svg b/src/assets/export.svg new file mode 100644 index 0000000..3d893d1 --- /dev/null +++ b/src/assets/export.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/filter.svg b/src/assets/filter.svg new file mode 100644 index 0000000..1c8f4e4 --- /dev/null +++ b/src/assets/filter.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logout.svg b/src/assets/logout.svg new file mode 100644 index 0000000..3f16b56 --- /dev/null +++ b/src/assets/logout.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index 646d781..aa92e0c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -68,9 +68,16 @@ &:focus { border: 2px solid var(--primary); border-radius: var(--common-border-radius); + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; + border-left: 0px; & + label { - border: 2px solid transparent; + border: 2px solid var(--primary); + border-radius: var(--common-border-radius); + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-right: 0px; } } }