From 27f6335565754df93e95e4414194349611410f43 Mon Sep 17 00:00:00 2001 From: Karan Date: Fri, 26 Nov 2021 16:06:01 +0530 Subject: [PATCH] feedback table --- angular.json | 19 +-- package.json | 5 +- src/app/app.module.ts | 34 ++-- src/app/pages/feedbacks/customer.ts | 19 +++ src/app/pages/feedbacks/customerservice.ts | 18 ++ .../pages/feedbacks/feedback.service.spec.ts | 16 ++ src/app/pages/feedbacks/feedback.service.ts | 23 +++ .../pages/feedbacks/feedbacks.component.html | 156 +++++++++++++++++- .../pages/feedbacks/feedbacks.component.scss | 97 +++++++++++ .../pages/feedbacks/feedbacks.component.ts | 98 ++++++++++- src/app/pages/home/home.component.html | 2 +- src/app/pages/home/home.component.ts | 6 +- src/assets/customers-large.json | 100 +++++++++++ 13 files changed, 561 insertions(+), 32 deletions(-) create mode 100644 src/app/pages/feedbacks/customer.ts create mode 100644 src/app/pages/feedbacks/customerservice.ts create mode 100644 src/app/pages/feedbacks/feedback.service.spec.ts create mode 100644 src/app/pages/feedbacks/feedback.service.ts create mode 100644 src/assets/customers-large.json diff --git a/angular.json b/angular.json index ebf69a4..45157ed 100644 --- a/angular.json +++ b/angular.json @@ -26,12 +26,12 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], + "assets": ["src/favicon.ico", "src/assets"], "styles": [ - "src/styles.scss" + "src/styles.scss", + "node_modules/primeng/resources/themes/saga-blue/theme.css", + "node_modules/primeng/resources/primeng.min.css", + "node_modules/primeicons/primeicons.css" ], "scripts": [] }, @@ -94,13 +94,8 @@ "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], + "assets": ["src/favicon.ico", "src/assets"], + "styles": ["src/styles.scss"], "scripts": [] } } diff --git a/package.json b/package.json index b72c26b..9885f8f 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ }, "private": true, "dependencies": { - "@angular/animations": "~12.0.5", + "@angular/animations": "^12.0.5", + "@angular/cdk": "^13.0.2", "@angular/common": "~12.0.5", "@angular/compiler": "~12.0.5", "@angular/core": "~12.0.5", @@ -27,6 +28,8 @@ "cordova": "^10.0.0", "install": "^0.13.0", "npm": "^7.20.0", + "primeicons": "^5.0.0", + "primeng": "^13.0.0", "rxjs": "~6.6.0", "ts-jest": "^27.0.4", "tslib": "^2.1.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 67c3100..b8eeb97 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,9 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { + BrowserModule, + HammerModule, + HAMMER_GESTURE_CONFIG, +} from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; @@ -19,7 +23,9 @@ import { HomeComponent } from './pages/home/home.component'; import { fakeBackendProvider, TokenInterceptor } from '../app/shared/helpers'; import { FeedbacksComponent } from './pages/feedbacks/feedbacks.component'; - +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { TableModule } from 'primeng/table'; +import { CustomerService } from './pages/feedbacks/customerservice'; @NgModule({ declarations: [ @@ -27,25 +33,29 @@ import { FeedbacksComponent } from './pages/feedbacks/feedbacks.component'; HeaderComponent, LoginComponent, HomeComponent, - FeedbacksComponent + FeedbacksComponent, ], imports: [ BrowserModule, + BrowserAnimationsModule, AppRoutingModule, FormsModule, HttpClientModule, - ReactiveFormsModule + ReactiveFormsModule, + TableModule, ], providers: [ RouterService, HttpClientService, - // { - // provide: HTTP_INTERCEPTORS, - // useClass: TokenInterceptor, - // multi: true + CustomerService, + // { + // provide: HTTP_INTERCEPTORS, + // useClass: TokenInterceptor, + // multi: true // }, - fakeBackendProvider + fakeBackendProvider, ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/pages/feedbacks/customer.ts b/src/app/pages/feedbacks/customer.ts new file mode 100644 index 0000000..fb519da --- /dev/null +++ b/src/app/pages/feedbacks/customer.ts @@ -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; +} diff --git a/src/app/pages/feedbacks/customerservice.ts b/src/app/pages/feedbacks/customerservice.ts new file mode 100644 index 0000000..a4cdfd4 --- /dev/null +++ b/src/app/pages/feedbacks/customerservice.ts @@ -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('assets/customers-large.json') + .toPromise() + .then((res) => res.data) + .then((data) => { + return data; + }); + } +} diff --git a/src/app/pages/feedbacks/feedback.service.spec.ts b/src/app/pages/feedbacks/feedback.service.spec.ts new file mode 100644 index 0000000..96273c5 --- /dev/null +++ b/src/app/pages/feedbacks/feedback.service.spec.ts @@ -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(); + }); +}); diff --git a/src/app/pages/feedbacks/feedback.service.ts b/src/app/pages/feedbacks/feedback.service.ts new file mode 100644 index 0000000..01ccf0c --- /dev/null +++ b/src/app/pages/feedbacks/feedback.service.ts @@ -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 { + return this.http.get(typeFromURL, httpOptions); + } +} diff --git a/src/app/pages/feedbacks/feedbacks.component.html b/src/app/pages/feedbacks/feedbacks.component.html index 9191da7..30c8fb6 100644 --- a/src/app/pages/feedbacks/feedbacks.component.html +++ b/src/app/pages/feedbacks/feedbacks.component.html @@ -3,5 +3,159 @@ -
Feedback Code here
+
+ + +
+ + + +
+ + + + + + Name + + + Country + + + Representative + + + Date + + + Status + + + Activity + + + + + + + + + + + + + +
+ {{ option.label }} +
+ + + + + + + + + + {{option.label}} + + + + + + + + + + + + + + Name + {{ customer.name }} + + + Country + {{ customer.country.name }} + + + Representative + {{ customer.representative.name }} + + + Date + {{ customer.date }} + + + Status + {{ + customer.status + }} + + + + + + No customers found. + + + +
diff --git a/src/app/pages/feedbacks/feedbacks.component.scss b/src/app/pages/feedbacks/feedbacks.component.scss index e69de29..22708dd 100644 --- a/src/app/pages/feedbacks/feedbacks.component.scss +++ b/src/app/pages/feedbacks/feedbacks.component.scss @@ -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; + } + } + } + } + } + } +} diff --git a/src/app/pages/feedbacks/feedbacks.component.ts b/src/app/pages/feedbacks/feedbacks.component.ts index 494e6ec..e2ccc0a 100644 --- a/src/app/pages/feedbacks/feedbacks.component.ts +++ b/src/app/pages/feedbacks/feedbacks.component.ts @@ -1,6 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { backButton, logOutButton } from 'src/app/constants/constants'; import IHeaderProps from 'src/app/models/header'; +import { FeedbackService } from './feedback.service'; +import { Customer, Representative } from './customer'; +import { CustomerService } from './customerservice'; +import { Table } from 'primeng/table'; +import { PrimeNGConfig } from 'primeng/api'; @Component({ selector: 'app-feedbacks', @@ -16,7 +21,94 @@ export class FeedbacksComponent implements OnInit { title: 'FEEDBACKS', }; - constructor() {} + customers: Customer[]; - ngOnInit(): void {} + selectedCustomers: Customer[]; + + representatives: Representative[]; + + statuses: any[]; + + loading: boolean = true; + + @ViewChild('dt') table: Table; + + constructor( + private feedbackService: FeedbackService, + private customerService: CustomerService, + private primengConfig: PrimeNGConfig + ) {} + + ngOnInit(): void { + this.feedbackService.getFeedbackData().subscribe( + (res) => { + console.log(res); + }, + (err) => { + console.log(err); + } + ); + + this.customerService.getCustomersLarge().then((customers) => { + this.customers = customers; + this.loading = false; + }); + + this.representatives = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Anna Fali', image: 'annafali.png' }, + { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, + { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, + { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, + { name: 'Onyama Limba', image: 'onyamalimba.png' }, + { name: 'Stephen Shaw', image: 'stephenshaw.png' }, + { name: 'XuXue Feng', image: 'xuxuefeng.png' }, + ]; + + this.statuses = [ + { label: 'Unqualified', value: 'unqualified' }, + { label: 'Qualified', value: 'qualified' }, + { label: 'New', value: 'new' }, + { label: 'Negotiation', value: 'negotiation' }, + { label: 'Renewal', value: 'renewal' }, + { label: 'Proposal', value: 'proposal' }, + ]; + this.primengConfig.ripple = true; + } + + onActivityChange(event: any) { + const value = event.target.value; + if (value && value.trim().length) { + const activity = parseInt(value); + + if (!isNaN(activity)) { + this.table.filter(activity, 'activity', 'gte'); + } + } + } + + onDateSelect(value: any) { + this.table.filter(this.formatDate(value), 'date', 'equals'); + } + + formatDate(date: any) { + let month = date.getMonth() + 1; + let day = date.getDate(); + + if (month < 10) { + month = '0' + month; + } + + if (day < 10) { + day = '0' + day; + } + + return date.getFullYear() + '-' + month + '-' + day; + } + + onRepresentativeChange(event: any) { + this.table.filter(event.value, 'representative', 'in'); + } } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 104c97b..d80db34 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -41,7 +41,7 @@
- +

{{ error }}

diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 174f080..5a649cf 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -23,7 +23,7 @@ export class HomeComponent { headerProps: IHeaderProps = { rightIcon: logOutButton, rightIconRoute: 'logout', - title: 'NPS EXPORTS VIEW', + title: 'NPS EXPORTS BU', }; fileUploadForm: FormGroup; @@ -61,6 +61,7 @@ export class HomeComponent { switchSalesServiceTab() { this.submitButton = false; + this.submitted = false; this.removeSelectedFile(); this.isSalesForm = !this.isSalesForm; } @@ -74,7 +75,7 @@ export class HomeComponent { scenarioKey: '0A9B6D3A044E5EF5D38E688900202DD8', destinations: messages, sms: { - text: 'Hi, Thank you. Bajaj Auto Test Message.', + text: 'Bajaj Auto Test Message. Feedback URL :' + feedbackURL, regional: { indiaDlt: { contentTemplateId: '1107161477011893589', @@ -159,6 +160,7 @@ export class HomeComponent { addfile(event: any) { this.submitButton = true; + this.submitted = false; this.file = event.target.files[0]; } diff --git a/src/assets/customers-large.json b/src/assets/customers-large.json new file mode 100644 index 0000000..a592ea2 --- /dev/null +++ b/src/assets/customers-large.json @@ -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" + } + } + ] +}