Karan
3 years ago
13 changed files with 561 additions and 32 deletions
-
19angular.json
-
5package.json
-
34src/app/app.module.ts
-
19src/app/pages/feedbacks/customer.ts
-
18src/app/pages/feedbacks/customerservice.ts
-
16src/app/pages/feedbacks/feedback.service.spec.ts
-
23src/app/pages/feedbacks/feedback.service.ts
-
156src/app/pages/feedbacks/feedbacks.component.html
-
97src/app/pages/feedbacks/feedbacks.component.scss
-
98src/app/pages/feedbacks/feedbacks.component.ts
-
2src/app/pages/home/home.component.html
-
6src/app/pages/home/home.component.ts
-
100src/assets/customers-large.json
@ -0,0 +1,19 @@ |
|||
export interface Country { |
|||
name?: string; |
|||
code?: string; |
|||
} |
|||
|
|||
export interface Representative { |
|||
name?: string; |
|||
image?: string; |
|||
} |
|||
|
|||
export interface Customer { |
|||
id?: number; |
|||
name?: number; |
|||
country?: Country; |
|||
company?: string; |
|||
date?: string; |
|||
status?: string; |
|||
representative?: Representative; |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
import { HttpClient } from '@angular/common/http'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { Customer } from './customer'; |
|||
|
|||
@Injectable() |
|||
export class CustomerService { |
|||
constructor(private http: HttpClient) {} |
|||
|
|||
getCustomersLarge() { |
|||
return this.http |
|||
.get<any>('assets/customers-large.json') |
|||
.toPromise() |
|||
.then((res) => <Customer[]>res.data) |
|||
.then((data) => { |
|||
return data; |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { FeedbackService } from './feedback.service'; |
|||
|
|||
describe('FeedbackService', () => { |
|||
let service: FeedbackService; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(FeedbackService); |
|||
}); |
|||
|
|||
it('should be created', () => { |
|||
expect(service).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,23 @@ |
|||
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { Observable } from 'rxjs'; |
|||
|
|||
const httpOptions = { |
|||
headers: new HttpHeaders({ |
|||
Authorization: |
|||
'Bearer tfp_Ai5abXUjcSyNVzzBpXUzyd8cqZSeKu5ksLq5Ud59tof7_3pcoJHUpDFAiQp', |
|||
}), |
|||
}; |
|||
|
|||
const typeFromURL = 'https://api.typeform.com/forms/cBKZZuqO/responses'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root', |
|||
}) |
|||
export class FeedbackService { |
|||
constructor(private http: HttpClient) {} |
|||
|
|||
getFeedbackData(): Observable<any> { |
|||
return this.http.get(typeFromURL, httpOptions); |
|||
} |
|||
} |
|||
@ -0,0 +1,97 @@ |
|||
:host ::ng-deep { |
|||
.p-paginator { |
|||
.p-paginator-current { |
|||
margin-left: auto; |
|||
} |
|||
} |
|||
|
|||
.p-progressbar { |
|||
height: 0.5rem; |
|||
background-color: #d8dadc; |
|||
|
|||
.p-progressbar-value { |
|||
background-color: #607d8b; |
|||
} |
|||
} |
|||
|
|||
.table-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.p-calendar .p-datepicker { |
|||
min-width: 25rem; |
|||
|
|||
td { |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
|
|||
.p-datatable.p-datatable-customers { |
|||
.p-datatable-header { |
|||
padding: 1rem; |
|||
text-align: left; |
|||
font-size: 1.5rem; |
|||
} |
|||
|
|||
.p-paginator { |
|||
padding: 1rem; |
|||
} |
|||
|
|||
.p-datatable-thead > tr > th { |
|||
text-align: left; |
|||
} |
|||
|
|||
.p-datatable-tbody > tr > td { |
|||
cursor: auto; |
|||
} |
|||
|
|||
.p-dropdown-label:not(.p-placeholder) { |
|||
text-transform: uppercase; |
|||
} |
|||
} |
|||
|
|||
/* Responsive */ |
|||
.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 960px) { |
|||
:host ::ng-deep { |
|||
.p-datatable { |
|||
&.p-datatable-customers { |
|||
.p-datatable-thead > tr > th, |
|||
.p-datatable-tfoot > tr > td { |
|||
display: none !important; |
|||
} |
|||
|
|||
.p-datatable-tbody > tr { |
|||
border-bottom: 1px solid var(--layer-2); |
|||
|
|||
> td { |
|||
text-align: left; |
|||
display: block; |
|||
border: 0 none !important; |
|||
width: 100% !important; |
|||
float: left; |
|||
clear: left; |
|||
border: 0 none; |
|||
|
|||
.p-column-title { |
|||
padding: 0.4rem; |
|||
min-width: 30%; |
|||
display: inline-block; |
|||
margin: -0.4rem 1rem -0.4rem -0.4rem; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.p-progressbar { |
|||
margin-top: 0.5rem; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,100 @@ |
|||
{ |
|||
"data": [ |
|||
{ |
|||
"id": 1000, |
|||
"name": "James Butt", |
|||
"country": { |
|||
"name": "Algeria", |
|||
"code": "dz" |
|||
}, |
|||
"company": "Benton, John B Jr", |
|||
"date": "2015-09-13", |
|||
"status": "unqualified", |
|||
"activity": 17, |
|||
"representative": { |
|||
"name": "Ioni Bowcher", |
|||
"image": "ionibowcher.png" |
|||
} |
|||
}, |
|||
{ |
|||
"id": 1001, |
|||
"name": "Josephine Darakjy", |
|||
"country": { |
|||
"name": "Egypt", |
|||
"code": "eg" |
|||
}, |
|||
"company": "Chanay, Jeffrey A Esq", |
|||
"date": "2019-02-09", |
|||
"status": "proposal", |
|||
"activity": 0, |
|||
"representative": { |
|||
"name": "Amy Elsner", |
|||
"image": "amyelsner.png" |
|||
} |
|||
}, |
|||
{ |
|||
"id": 1002, |
|||
"name": "Art Venere", |
|||
"country": { |
|||
"name": "Panama", |
|||
"code": "pa" |
|||
}, |
|||
"company": "Chemel, James L Cpa", |
|||
"date": "2017-05-13", |
|||
"status": "qualified", |
|||
"activity": 63, |
|||
"representative": { |
|||
"name": "Asiya Javayant", |
|||
"image": "asiyajavayant.png" |
|||
} |
|||
}, |
|||
{ |
|||
"id": 1000, |
|||
"name": "James Butt", |
|||
"country": { |
|||
"name": "Algeria", |
|||
"code": "dz" |
|||
}, |
|||
"company": "Benton, John B Jr", |
|||
"date": "2015-09-13", |
|||
"status": "unqualified", |
|||
"activity": 17, |
|||
"representative": { |
|||
"name": "Ioni Bowcher", |
|||
"image": "ionibowcher.png" |
|||
} |
|||
}, |
|||
{ |
|||
"id": 1001, |
|||
"name": "Josephine Darakjy", |
|||
"country": { |
|||
"name": "Egypt", |
|||
"code": "eg" |
|||
}, |
|||
"company": "Chanay, Jeffrey A Esq", |
|||
"date": "2019-02-09", |
|||
"status": "proposal", |
|||
"activity": 0, |
|||
"representative": { |
|||
"name": "Amy Elsner", |
|||
"image": "amyelsner.png" |
|||
} |
|||
}, |
|||
{ |
|||
"id": 1002, |
|||
"name": "Art Venere", |
|||
"country": { |
|||
"name": "Panama", |
|||
"code": "pa" |
|||
}, |
|||
"company": "Chemel, James L Cpa", |
|||
"date": "2017-05-13", |
|||
"status": "qualified", |
|||
"activity": 63, |
|||
"representative": { |
|||
"name": "Asiya Javayant", |
|||
"image": "asiyajavayant.png" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue