file upload changes

.gitignore

@@ -9,6 +9,7 @@
 
 # dependencies
 /node_modules
+/backend
 
 # profiling files
 chrome-profiler-events*.json

package.json

@@ -30,6 +30,7 @@
     "rxjs": "~6.6.0",
     "ts-jest": "^27.0.4",
     "tslib": "^2.1.0",
+    "xlsx": "^0.17.4",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

src/app/pages/home/home.component.html

@@ -1,36 +1,37 @@
 <div class="page-container" id="home-page">
-
-    <div class="header-container">
-        <app-header [headerInput]="headerProps"></app-header>
+  <div class="header-container">
+    <app-header [headerInput]="headerProps"></app-header>
+  </div>
+  <main class="main-container">
+    <div class="switch-tab">
+      <p [ngClass]="{ active: isSalesForm }" (click)="switchSalesServiceTab()">
+        Sales Upload
+      </p>
+      <p [ngClass]="{ active: !isSalesForm }" (click)="switchSalesServiceTab()">
+        Service Upload
+      </p>
     </div>
-    <main class="main-container">
-            
-            <div class="switch-tab">
-                <p [ngClass]="{active: isSalesForm}" (click)="switchSalesServiceTab()">Sales Upload</p>
-                <p [ngClass]="{active: !isSalesForm}" (click)="switchSalesServiceTab()">Service Upload</p>
-            </div>
-
-            <section id="from-first-section">
-                <form [formGroup]="fileUploadForm" (submit)="submitForm()">
-                    <div class="input-wrapper">
-                        <br/>
-                        <input 
-                            type="file" 
-                            formControlName="fileUpload" 
-                            class="user-input font-body-small-bold file-input"
-                            placeholder="Upload sales file" 
-                        />
-                    </div>
-
-                    <button 
-                        [disabled]="(!fileUploadForm.valid || isLoading)">
-                        {{isLoading ? 'Sending messages' : 'Submit'}}
-                    </button>
 
-                </form>
-            </section>
+    <section id="from-first-section">
+      <form [formGroup]="fileUploadForm" (submit)="submitForm()">
+        <div class="input-wrapper">
+          <br />
+          <input
+            type="file"
+            class="user-input font-body-small-bold file-input"
+            placeholder="Upload sales file"
+            (change)="addfile($event)"
+          />
+          <!-- formControlName="fileUpload" -->
+        </div>
 
-            <p class="error font-body-small">{{error}}</p>
-    </main>
+        <!-- [disabled]="!fileUploadForm.valid || isLoading" -->
+        <button type="submit">
+          {{ isLoading ? "Sending messages" : "Submit" }}
+        </button>
+      </form>
+    </section>
 
+    <p class="error font-body-small">{{ error }}</p>
+  </main>
 </div>

src/app/pages/home/home.component.ts

@@ -8,15 +8,16 @@ import { LeadscoreService } from 'src/app/shared/services/leadscore.service';
 import { first, finalize } from 'rxjs/operators';
 import { IGoogleFormData } from 'src/app/models/googleFormData';
 import { AuthenticationService } from 'src/app/shared/services/authentication.service';
-
+import { Subscription } from 'rxjs';
+import * as XLSX from 'xlsx';
+import { HomeService } from './home.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+  styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
-
   headerProps: IHeaderProps = {
     rightIcon: logOutButton,
     rightIconRoute: 'logout',
@@ -28,31 +29,95 @@ export class HomeComponent {
   error = '';
   isSalesForm = true;
 
+  file: any;
+  arrayBuffer: any;
+  filelist: any = [];
+  arrayToBeSend: any = [];
+  subscriptions: Subscription[] = [];
 
-  constructor(private routerService: RouterService,
-    private formBuilder: FormBuilder) {
-    this.fileUploadForm = this.formBuilder.group(
-      {
-        fileUpload: [
-          '',
-          [
-            Validators.required,
-            Validators.minLength(10),
-            Validators.pattern('^[0-9]*')
-          ]
-        ]
-      }
-    )
+  constructor(
+    private routerService: RouterService,
+    private formBuilder: FormBuilder,
+    private homeService: HomeService
+  ) {
+    this.fileUploadForm = this.formBuilder.group({
+      fileUpload: [
+        '',
+        [
+          Validators.required,
+          Validators.minLength(10),
+          Validators.pattern('^[0-9]*'),
+        ],
+      ],
+    });
   }
 
-  get f() { return this.fileUploadForm.controls; }
+  get f() {
+    return this.fileUploadForm.controls;
+  }
 
-  switchSalesServiceTab(){
+  switchSalesServiceTab() {
+    this.arrayToBeSend = [];
     this.isSalesForm = !this.isSalesForm;
   }
 
   submitForm() {
-
+    console.log('inside submit form');
+    let fileReader = new FileReader();
+    fileReader.readAsArrayBuffer(this.file);
+    fileReader.onload = (e) => {
+      this.arrayBuffer = fileReader.result;
+      var data = new Uint8Array(this.arrayBuffer);
+      var arr = new Array();
+      for (var i = 0; i != data.length; ++i)
+        arr[i] = String.fromCharCode(data[i]);
+      var bstr = arr.join('');
+      var workbook = XLSX.read(bstr, { type: 'binary' });
+      var first_sheet_name = workbook.SheetNames[0];
+      var worksheet = workbook.Sheets[first_sheet_name];
+      // console.log(XLSX.utils.sheet_to_json(worksheet, { raw: true }));
+      // var arraylist = XLSX.utils.sheet_to_json(worksheet, { raw: true });
+      this.filelist = XLSX.utils.sheet_to_json(worksheet, { raw: true });
+      console.log(this.filelist);
+      if (this.isSalesForm) {
+        console.log(this.isSalesForm);
+        for (let i = 0; i < this.filelist.length; i++) {
+          var details = {
+            'CUSTOMER NAME': this.filelist[i]['CUSTOMER NAME'],
+            'PHONE NUMBER': this.filelist[i]['PHONE NUMBER'],
+            'LEAD ID': this.filelist[i]['LEAD ID'],
+            'DATE OF ENQUIRY': this.filelist[i]['DATE OF ENQUIRY'],
+          };
+          this.arrayToBeSend.push(details);
+        }
+      } else {
+        console.log(this.isSalesForm);
+        for (let i = 0; i < this.filelist.length; i++) {
+          var details = {
+            'CUSTOMER NAME': this.filelist[i]['Customer'],
+            'PHONE NUMBER': this.filelist[i]['Mobile No'],
+            'LEAD ID': this.filelist[i]['__EMPTY'],
+            'DATE OF ENQUIRY': this.filelist[i]['Ready For Invoice Date Time'],
+          };
+          this.arrayToBeSend.push(details);
+        }
+      }
+      console.log(this.arrayToBeSend);
+      this.subscriptions.push(
+        this.homeService.sendWhatsApp(this.arrayToBeSend).subscribe(
+          (res) => {
+            console.log(res);
+          },
+          (err) => {
+            console.log(err);
+          }
+        )
+      );
+    };
   }
 
+  addfile(event: any) {
+    this.file = event.target.files[0];
+    console.log('insiide addfile function');
+  }
 }

src/app/pages/home/home.service.ts

@@ -1,21 +1,41 @@
 // Angular imports
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 // Local imports
 import { IHomeRequest, IHomeResponse } from '../../../app/model/home';
 
+const httpOptions = {
+  headers: new HttpHeaders({
+    'Content-Type': 'application/json',
+    Authorization:
+      'Basic 2b8cba9008e1da2f2733ff8300cf1973-dc928670-56f9-4a29-8725-69239d669e74',
+  }),
+};
+
+// Authorization: 'Basic SW50ZXJuYXRpb25hbFdBX1BPQzpFeHBvcnRzITIwMjE=',
+
+const url = 'http://localhost:3000/';
+const whatsAppUrl =
+  'https://mpwyr4.api.infobip.com/whatsapp/1/message/template';
+
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class HomeService {
   private baseUrl = 'http://localhost:8000/home';
 
-  constructor(private http: HttpClient) {
-  }
+  constructor(private http: HttpClient) {}
 
   post(data: any): Observable<any> {
     return this.http.post<any>(this.baseUrl, data);
   }
 
+  sendEmail(body: any): Observable<any> {
+    return this.http.post(url + 'sendEmail', body, httpOptions);
+  }
+
+  sendWhatsApp(body: any): Observable<any> {
+    return this.http.post(whatsAppUrl, body, httpOptions);
+  }
 }

src/app/pages/login/login/login.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
 import { home, success, login } from 'src/app/constants/constants';
 import { invalidUsernameAndPassword } from 'src/app/constants/errorConstants';
 import { RouterService } from 'src/app/shared/services/routerService';
@@ -11,35 +16,37 @@ import { first } from 'rxjs/operators';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent implements OnInit {
-
   loginForm: FormGroup;
   username = '';
   password = '';
   error = '';
   loading = false;
 
-  constructor(private routerService: RouterService,
+  constructor(
+    private routerService: RouterService,
     private authenticationService: AuthenticationService,
-    private formBuilder: FormBuilder) {
-
+    private formBuilder: FormBuilder
+  ) {
     // redirect to home if already logged in
     if (localStorage.getItem('loggedInUser')) {
       this.routerService.navigate(home);
     }
     this.loginForm = this.formBuilder.group({
       username: ['', Validators.required],
-      password: ['', Validators.required]
-    })
+      password: ['', Validators.required],
+    });
 
     this.loginForm.valueChanges.subscribe(() => {
       this.error = '';
     });
   }
 
-  get f() { return this.loginForm.controls; }
+  get f() {
+    return this.loginForm.controls;
+  }
 
   /**
    * Login button click handler
@@ -48,28 +55,27 @@ export class LoginComponent implements OnInit {
    */
   loginClickHandler() {
     this.loading = true;
-    if(this.authenticationService.login(this.f.username.value, this.f.password.value)){
+    if (
+      this.authenticationService.login(
+        this.f.username.value,
+        this.f.password.value
+      )
+    ) {
       this.routerService.navigate(home);
-    }
-    else {
+    } else {
       this.loading = false;
-      this.error = 'Login failed, Please try again!'
+      this.error = 'Login failed, Please try again!';
     }
   }
 
-  inputChangeHandler() {
-  }
+  inputChangeHandler() {}
 
   ngOnInit(): void {
-
     if (localStorage.getItem('loggedInUser')) {
       // logged in so return true
       this.routerService.navigate(home);
-    } else{
+    } else {
       this.routerService.navigate(login);
     }
   }
-
-
-
 }