excel and order page issue fix

package.json

@@ -54,6 +54,7 @@
     "core-js": "2.5.1",
     "echarts": "^4.9.0",
     "eva-icons": "^1.1.3",
+    "file-saver": "^2.0.5",
     "html2pdf.js": "^0.10.1",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
@@ -79,6 +80,8 @@
     "tslib": "^2.3.1",
     "typeface-exo": "0.0.22",
     "web-animations-js": "^2.3.2",
+    "ws": "^8.14.0",
+    "xlsx": "^0.18.5",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -94,10 +97,12 @@
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
+    "@types/file-saver": "^2.0.5",
     "@types/jasmine": "~3.3.0",
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
     "@types/node": "^12.12.70",
+    "@types/ws": "^8.5.5",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "codelyzer": "^6.0.2",

src/app/pages/_guard/order-d.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { OrderDGuard } from './order-d.guard';
+
+describe('OrderDGuard', () => {
+  let guard: OrderDGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(OrderDGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/pages/_guard/order-d.guard.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OrderDGuard implements CanActivate {
+  
+  constructor(private router: Router) {}
+
+  canActivate(): boolean {
+    // Implement your logic to decide whether to redirect or not.
+    // For example, you can check if a certain condition is met.
+    // const shouldRedirect = false
+    let shouldRedirect = localStorage.getItem('graud')
+    if (shouldRedirect == '1') {
+      console.log('shouldRedirect','In')
+      // Redirect to the desired route upon browser refresh
+      this.router.navigate(['/pages/order']);
+      return false; // Prevent navigation to the original route
+    }
+    console.log('shouldRedirect','out')
+    return true; // Allow navigation to the original route
+
+  //   console.log('canActivate')
+  //   // Add your logic here to determine if a refresh should redirect to another page
+  //   let dd = localStorage.getItem('gruad')
+  //   if(dd == '1'){
+  //     console.log('dd') 
+  //       console.log('shouldRedirect')
+  //       this.router.navigate(['../']); // Redirect to the desired page
+  //       return false;      
+  //   } 
+  //   return true;
+  }
+  
+}

src/app/pages/excel-export/excel-export.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ExcelExportService } from './excel-export.service';
+
+describe('ExcelExportService', () => {
+  let service: ExcelExportService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ExcelExportService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/pages/excel-export/excel-export.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import * as FileSaver from 'file-saver';
+import * as XLSX from 'xlsx';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExcelExportService {
+
+  constructor() { }
+  fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+  fileExtension = '.xlsx';
+
+  public exportExcel(jsonData: any, fileName: string): void {
+
+    console.log(jsonData)
+    if(jsonData instanceof Array ){
+
+
+
+    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
+    const wb: XLSX.WorkBook = { Sheets: { 'data': ws }, SheetNames: ['data'] };
+    const excelBuffer: any = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+    this.saveExcelFile(excelBuffer, fileName);
+     
+    }else{
+      let wb = XLSX.utils.table_to_book(jsonData);
+      console.log(wb)
+      const excelBuffer: any = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+      this.saveExcelFile(excelBuffer, fileName);
+     // XLSX.writeFile(wb, fileName + this.fileExtension);
+    }
+
+
+      /* table id is passed over here */   
+    //   console.log(jsonData, typeof(jsonData),jsonData.getElementsByTagName('mat-icon'))
+    //   let temp = jsonData.getElementsByClassName('mat-icon')
+    //   temp.innerHTML = ''
+    //   console.log(temp)
+    // //  jsonData.removeChild()
+    //   const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(jsonData);
+
+    //   /* generate workbook and add the worksheet */
+    //   const wb: XLSX.WorkBook = XLSX.utils.book_new();
+    //   XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+    //   const excelBuffer: any = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+    //   this.saveExcelFile(excelBuffer, fileName);
+      // /* save to file */
+      // XLSX.writeFile(wb, this.fileName);
+  }
+
+  private saveExcelFile(buffer: any, fileName: string): void {
+    const data: Blob = new Blob([buffer], {type: this.fileType});
+    FileSaver.saveAs(data, fileName + this.fileExtension);
+  }
+}

src/app/pages/order/order-form/order-form.component.html

@@ -9,16 +9,14 @@
       <div class="col-md-8">
         <div style="text-align: end;"> 
           <button nbTooltip="Back" nbTooltipPlacement="top"  (click)="back()" nbButton status="warning" hero>
-            <nb-icon icon="corner-down-left-outline"></nb-icon>  
+            <nb-icon icon="corner-down-left-outline"></nb-icon>   
-          
-        
         </button>
 
-        <button nbTooltip="Edit" nbTooltipPlacement="top"  *ngIf="  fieldTitle != 'Edit Order' && this.selectStatus != 'Delivered'" style="    margin-left: 2rem;" (click)="edit()" nbButton status="primary" hero>
+        <button nbTooltip="Edit" nbTooltipPlacement="top"  *ngIf="  fieldTitle != 'Edit Order' && this.selectStatus != 'Delivered' && addFormBtn != 0" style="    margin-left: 2rem;" (click)="edit()" nbButton status="primary" hero>
           <nb-icon icon="edit-outline"></nb-icon>  
            </button>
 
-        <button nbTooltip="Download" nbTooltipPlacement="top"    style="    margin-left: 2rem;"(click)="generatePDF('download')" nbButton status="success" hero>
+        <button nbTooltip="Download" nbTooltipPlacement="top"   *ngIf="  fieldTitle != 'Edit Order' && addFormBtn != 0" style="    margin-left: 2rem;"(click)="generatePDF('download')" nbButton status="success" hero>
           <nb-icon icon="download-outline"></nb-icon>  
            </button>
       </div>

src/app/pages/order/order-form/order-form.component.ts

@@ -59,20 +59,32 @@ fieldTitle:any =' New Order'
   hiddenBtn= false;
   delArr:any=[]
   selectedProductId: number | undefined = null;
+  addFormBtn: any;
   constructor(private dialogService: NbDialogService,private route :ActivatedRoute,private router: Router,public _api:PageapiService,private toastrService: NbToastrService,private service: SmartTableData ,private windowService: NbWindowService) {
 
     this._api.orderDetails_observable$.subscribe((res) => {
       console.log('booked', res);
+      
 
       if(res){
+        this.addFormBtn = 1
         this. setData =   res
+        console.log(this.setData)
        this.selectStatus = res.status
+       console.log(this.selectStatus)
 //  res.name = res.productName
 //  res.qty = parseInt(res.qty)
 //  res.price = this.setData['OrderDetails.CusDetails.cusType']
 //  this.invoice.additionalDetails = 'https://vnms.in/services/'
 //   this.invoice.products.push(res)
-
+        setTimeout(() => {
+          localStorage.setItem('graud','1')
+        }, 1300);
+       
+      }else{
+        console.log('else')
+        this.addFormBtn = 0
+        localStorage.setItem('graud','0')
       }
   
     })
@@ -104,6 +116,8 @@ fieldTitle:any =' New Order'
     console.log(p)
   }
   ngOnInit() {
+
+    
     this.getDriverlistApi()
     console.log(this.setData)
     if(this.setData != undefined){
@@ -123,11 +137,11 @@ fieldTitle:any =' New Order'
 
 
 
-
+ 
    
   }
 
-
+ 
   getuserlistApi(){
     let param={}
     this._api.getusers(param).subscribe(res => {
@@ -473,36 +487,22 @@ const filteredItems = this.inputFieldGroups.filter(item => item.name === 'Mixed
 
   generatePDF(action = 'open') {
     console.log(this.setData)
-    this.inputFieldGroups.forEach((element:any) => {
+    this.inputFieldGroups.forEach((element:any) => {      
-      
-  
       this.productfull.forEach(e => {
-        
+      if(e.id === element.id){
-    
+         element.name = e.productName +"-("+e.skuId+")"
-  if(e.id === element.id){
+      }
-    element.name = e.productName +"-("+e.skuId+")"
+      });
-  
+    });
-  
+    console.log( this.inputFieldGroups )
-  }
+    this.invoice.products =[];
-  });
+    this.inputFieldGroups.forEach((res:any) => {
-  
+      res.name = res.name
-  });
+      res.qty = parseInt(res.qty)
-  console.log( this.inputFieldGroups )
+      res.price = this.setData['OrderDetails.CusDetails.cusType']
-  this.invoice.products =[];
+      this.invoice.additionalDetails = 'https://vnms.in/services/'
-  this.inputFieldGroups.forEach((res:any) => {
+      this.invoice.products.push(res) 
-        
+    })
-    
-    res.name = res.name
-  res.qty = parseInt(res.qty)
-  res.price = this.setData['OrderDetails.CusDetails.cusType']
-  this.invoice.additionalDetails = 'https://vnms.in/services/'
-  
-   this.invoice.products.push(res)
-  
-  
-  
-  
-  })
     this.invoice.products = this.invoice.products.filter(arr=>{return arr.qty != 0}) 
     let docDefinition = {
       content: [
@@ -619,7 +619,7 @@ const filteredItems = this.inputFieldGroups.filter(item => item.name === 'Mixed
     };
 
     if(action==='download'){
-
+      console.log(this.selectCustomer , this.setData.orderId)
       let name= this.selectCustomer+"-"+this.setData.orderId
       pdfMake.createPdf(docDefinition).download(name);
       

src/app/pages/order/order-summary-form/order-summary-form.component.html

@@ -70,7 +70,7 @@
       
         <div class="col-6">
           <div> 
-            <button nbButton status="success" (click)="save()"   type="submit" >Confirm</button>
+            <button nbButton status="success" (click)="save()"   type="submit" [disabled]="submitBtn">Confirm</button>
         </div>
         </div>
       </div>

src/app/pages/order/order-summary-form/order-summary-form.component.ts

@@ -11,6 +11,7 @@ export class OrderSummaryFormComponent implements OnInit {
   customer:any =[];
   product:any =[];
   setData:any =[];
+  submitBtn: boolean= false;
   constructor(@Inject(NB_WINDOW_CONTEXT) public data: any,public _api:PageapiService,private windowService: NbWindowService, private windowRef: NbWindowRef) { 
 
     console.log(this.data)
@@ -38,6 +39,7 @@ export class OrderSummaryFormComponent implements OnInit {
   }
 
   save(){
+    this.submitBtn = true
     console.log(this.data,this.setData)
    let cus =  this.data.customerData['CusDetails.id']
  let role = localStorage.getItem('user_role')

src/app/pages/order/order.component.html

@@ -50,7 +50,7 @@
               <nb-icon icon="plus-circle-outline"></nb-icon>  
           </button>
 
-          <button style="    margin-left: 1rem;" nbButton nbTooltip="Download" nbTooltipPlacement="top" (click)="download()" nbButton status="success" hero>
+          <button style="    margin-left: 1rem;" nbButton nbTooltip="Download" nbTooltipPlacement="top" (click)="exportExcelData()" nbButton status="success" hero>
             <nb-icon icon="download-outline"></nb-icon>  
            </button>
         </div>
@@ -61,217 +61,217 @@
     <nb-card-body>
         <!-- <ng2-smart-table [settings]="settings"   (userRowSelect)="onUserRowSelect($event)" [source]="source" (edit)="onSaveConfirm($event)"
         (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
-        </ng2-smart-table> -->
+        </ng2-smart-table> --> 
+  <ng-data-table  
+  [id]="'i'" 
+  [items]=orders
+  [minContentWidth]="600"
+  [pageable]="true"  
+  [showColumnSelector]="true" 
+  [showHeader]="false"
+  [selectMode]="'multi'" 
+  [minContentHeight]="350" 
+  [selectMode]="'multi'"
+  [selectOnRowClick]="true"
 
-        <ng-data-table  
+  [limit]="25"
-        [id]="'i'" 
+  >  
-        [items]=orders
+
-        [minContentWidth]="600"
+  <ng-data-table-column 
-        [pageable]="true"  
+  [field]="'role'"
-        [showColumnSelector]="true" 
+  [sortable]="false"
-        [showHeader]="false"
+  [title]="''"
-        [selectMode]="'multi'" 
+  [filterable]="false"
-        [minContentHeight]="350" 
+  [width]="2"> 
-        [selectMode]="'multi'"
+
-        [selectOnRowClick]="true"
+
-  
+
-        [limit]="25"
+  <ng-template #ngDataTableHeader let-column="column"  >
-        >  
+   <tr   ><th class="center" style=" font-size: large; text-align: -webkit-center;"> <div style="text-align: center;"> 
+     
+    <nb-checkbox   (change)="onCheckboxChange($event)"     status="primary" ></nb-checkbox>
+    </div></th></tr> 
+  <!--    <tr   ><th class="center"  style="text-align: -webkit-center;"   >{{tableTitle.Y4_st_type_name}}</th></tr>  -->
     
-        <ng-data-table-column 
+  </ng-template> 
-        [field]="'role'"
-        [sortable]="false"
-        [title]="''"
-        [filterable]="false"
-        [width]="2"> 
-  
-     
-  
-        <ng-template #ngDataTableHeader let-column="column"  >
-         <tr   ><th class="center" style=" font-size: large; text-align: -webkit-center;"> <div style="text-align: center;"> 
-           
-          <nb-checkbox   (change)="onCheckboxChange($event)"     status="primary" ></nb-checkbox>
-          </div></th></tr> 
-        <!--    <tr   ><th class="center"  style="text-align: -webkit-center;"   >{{tableTitle.Y4_st_type_name}}</th></tr>  -->
-          
-        </ng-template> 
-  
-  
-  
-  
-     
-        <ng-template #ngDataTableCell  let-row="row">
-        <td  style="text-align: center;" >
-          <div class="align-center" style="display: flex; align-items: center;text-align: center;">
-           
-          
-           <nb-checkbox  *ngIf="isChecked == true" [(ngModel)]="row.item.selected"   [checked]="row.item.selected == true" (click)="selectSingleRow(row.item)" status="primary" ></nb-checkbox>
-           <nb-checkbox *ngIf="isChecked == false"  [(ngModel)]="row.item.selected"  [checked]="row.item.selected == true"  (click)="selectSingleRow(row.item)"  status="primary" ></nb-checkbox>
-            
-          </div>
-        
-        </td> 
-        </ng-template>
-      </ng-data-table-column> 
-        <ng-data-table-column 
-        [field]="'index'"
-        [sortable]="false"
-        [title]="'ID'"
-        [filterable]="false"
-        [width]="2"> 
-  
-        </ng-data-table-column> 
-  
-        <ng-data-table-column 
-        [field]="'orderId'"
-        [sortable]="false"
-        [title]="'Order ID'"
-        [filterable]="false"
-        [width]="4"> 
-        <ng-template #ngDataTableCell  let-row="row">
-          <td   (click)="onViewConfirm(row.item)">
-            <div   style="display: flex; align-items: center;">
-         
-              <span    class="checkTxt"    >
-                {{row.item.orderId  }} 
-                 </span>
-            </div>
-          
-          </td> 
-          </ng-template>
-        </ng-data-table-column> 
-        <ng-data-table-column 
-        [field]="'customer'"
-        [sortable]="false"
-        [title]="'Customer Name'"
-        [filterable]="false"
-        [width]="4"> 
 
-        <ng-template #ngDataTableCell  let-row="row">
-          <td   (click)="onViewConfirm(row.item)">
-            <div   style="display: flex; align-items: center;">
-         
-              <span    class="checkTxt"    >
-                {{row.item.customer  }} 
-                 </span>
-            </div>
-          
-          </td> 
-          </ng-template>
-        </ng-data-table-column> 
-        <ng-data-table-column 
-        [field]="'address'"
-        [sortable]="false"
-        [title]="'Address'"
-        [filterable]="false"
-        [width]="6"> 
-        <ng-template #ngDataTableCell  let-row="row">
-          <td   (click)="onViewConfirm(row.item)">
-            <div   style="display: flex; align-items: center;">
-         
-              <span    class="checkTxt"    >
-                {{row.item.address  }} 
-                 </span>
-            </div>
-          
-          </td> 
-          </ng-template>
-        </ng-data-table-column> 
-        <ng-data-table-column 
-        [field]="'orderDate'"
-        [sortable]="false"
-        [title]="'Order Date'"
-        [filterable]="false"
-        [width]="4"> 
 
-        <ng-template #ngDataTableCell  let-row="row">
+
-          <td   (click)="onViewConfirm(row.item)">
+
-            <div   style="display: flex; align-items: center;">
+
-         
+  <ng-template #ngDataTableCell  let-row="row">
-              <span    class="checkTxt"    >
+  <td  style="text-align: center;" >
-                {{row.item.updatedAt | date :'dd/MM/yy hh:mm:ss'}} 
+    <div class="align-center" style="display: flex; align-items: center;text-align: center;">
-                 </span>
-            </div>
-          
-          </td> 
-          </ng-template>
-  
-        </ng-data-table-column> 
-        <ng-data-table-column 
-        [field]="'status'"
-        
      
-        [title]="'Status'"
+    
-        [sortable]="false"
+     <nb-checkbox  *ngIf="isChecked == true" [(ngModel)]="row.item.selected"   [checked]="row.item.selected == true" (click)="selectSingleRow(row.item)" status="primary" ></nb-checkbox>
-         
+     <nb-checkbox *ngIf="isChecked == false"  [(ngModel)]="row.item.selected"  [checked]="row.item.selected == true"  (click)="selectSingleRow(row.item)"  status="primary" ></nb-checkbox>
-        
-        [width]="5"> 
-  
-     
-  
-  
-  
-  
-  
-  
-     
-        <ng-template #ngDataTableCell  let-row="row">
-        <td  (click)="onViewConfirm(row.item)">
-          <div   style="display: flex; align-items: center;">
-            <span  [ngStyle] = "{'color':row.item.status =='Out For Delivery'?'blue':'' }" class="checkTxt"  *ngIf="row.item.status =='Out For Delivery'" >
-           {{row.item.status}} <p  class="checkTxt" >({{row.item['UserDetails.userName']}}) <nb-icon icon="done-all-outline" style="color:#08d992" [nbTooltip]="'Driver seen at ' + (row.item.seenTime | date:'dd/MM/yyyy, h:mm a')"  *ngIf="row.item.seenStatus == 1"  ></nb-icon> 
-            <nb-icon icon="done-all-outline" nbTooltip="Not Seen"  style="color: rgb(159, 167, 170);" *ngIf="row.item.seenStatus == 0"  ></nb-icon>   </p>
-          
-            </span>
-            <span  [ngStyle] = "{'color':row.item.status =='ordered'?'#1f1dc9f5':row.item.status =='Delivered' ?'green':'red' }"  class="checkTxt"  *ngIf="row.item.status !='Out For Delivery'" >
-              {{row.item.status}}  <p  class="checkTxt" *ngIf="row.item.status == 'Delivered'">({{row.item['UserDetails.userName']}})</p>
-               </span>
-          </div>
-        
-        </td> 
-        </ng-template>
-      </ng-data-table-column> 
       
-        <!-- <ng-data-table-column 
+    </div>
-        [field]="'reason'"
-        [sortable]="false"
-        [title]="'Reason'"
-        [filterable]="false"
-        [width]="4"> 
   
-        </ng-data-table-column>  -->
+  </td> 
-        
+  </ng-template>
-      
+</ng-data-table-column> 
-        <!-- <ng-data-table-column 
+  <ng-data-table-column 
-        [field]="'role'"
+  [field]="'index'"
-        [sortable]="false"
+  [sortable]="false"
-        [title]="'view'"
+  [title]="'ID'"
-        [filterable]="false"
+  [filterable]="false"
-        [width]="3"> 
+  [width]="2"> 
+
+  </ng-data-table-column> 
+
+  <ng-data-table-column 
+  [field]="'orderId'"
+  [sortable]="false"
+  [title]="'Order ID'"
+  [filterable]="false"
+  [width]="4"> 
+  <ng-template #ngDataTableCell  let-row="row">
+    <td   (click)="onViewConfirm(row.item)">
+      <div   style="display: flex; align-items: center;">
+   
+        <span    class="checkTxt"    >
+          {{row.item.orderId  }} 
+           </span>
+      </div>
+    
+    </td> 
+    </ng-template>
+  </ng-data-table-column> 
+  <ng-data-table-column 
+  [field]="'customer'"
+  [sortable]="false"
+  [title]="'Customer Name'"
+  [filterable]="false"
+  [width]="4"> 
+
+  <ng-template #ngDataTableCell  let-row="row">
+    <td   (click)="onViewConfirm(row.item)">
+      <div   style="display: flex; align-items: center;">
+   
+        <span    class="checkTxt"    >
+          {{row.item.customer  }} 
+           </span>
+      </div>
+    
+    </td> 
+    </ng-template>
+  </ng-data-table-column> 
+  <ng-data-table-column 
+  [field]="'address'"
+  [sortable]="false"
+  [title]="'Address'"
+  [filterable]="false"
+  [width]="6"> 
+  <ng-template #ngDataTableCell  let-row="row">
+    <td   (click)="onViewConfirm(row.item)">
+      <div   style="display: flex; align-items: center;">
+   
+        <span    class="checkTxt"    >
+          {{row.item.address  }} 
+           </span>
+      </div>
+    
+    </td> 
+    </ng-template>
+  </ng-data-table-column> 
+  <ng-data-table-column 
+  [field]="'orderDate'"
+  [sortable]="false"
+  [title]="'Order Date'"
+  [filterable]="false"
+  [width]="4"> 
+
+  <ng-template #ngDataTableCell  let-row="row">
+    <td   (click)="onViewConfirm(row.item)">
+      <div   style="display: flex; align-items: center;">
+   
+        <span    class="checkTxt"    >
+          {{row.item.updatedAt | date :'dd/MM/yy hh:mm:ss'}} 
+           </span>
+      </div>
+    
+    </td> 
+    </ng-template>
+
+  </ng-data-table-column> 
+  <ng-data-table-column 
+  [field]="'status'"
   
-     
+
+  [title]="'Status'"
+  [sortable]="false"
+   
   
+  [width]="5"> 
+
+
+
+
+
+
+
+
+
+  <ng-template #ngDataTableCell  let-row="row">
+  <td  (click)="onViewConfirm(row.item)">
+    <div   style="display: flex; align-items: center;">
+      <span  [ngStyle] = "{'color':row.item.status =='Out For Delivery'?'blue':'' }" class="checkTxt"  *ngIf="row.item.status =='Out For Delivery'" >
+     {{row.item.status}} <p  class="checkTxt" >({{row.item['UserDetails.userName']}}) <nb-icon icon="done-all-outline" style="color:#08d992" [nbTooltip]="'Driver seen at ' + (row.item.seenTime | date:'dd/MM/yyyy, h:mm a')"  *ngIf="row.item.seenStatus == 1"  ></nb-icon> 
+      <nb-icon icon="done-all-outline" nbTooltip="Not Seen"  style="color: rgb(159, 167, 170);" *ngIf="row.item.seenStatus == 0"  ></nb-icon>   </p>
+    
+      </span>
+      <span  [ngStyle] = "{'color':row.item.status =='ordered'?'#1f1dc9f5':row.item.status =='Delivered' ?'green':'red' }"  class="checkTxt"  *ngIf="row.item.status !='Out For Delivery'" >
+        {{row.item.status}}  <p  class="checkTxt" *ngIf="row.item.status == 'Delivered'">({{row.item['UserDetails.userName']}})</p>
+         </span>
+    </div>
   
+  </td> 
+  </ng-template>
+</ng-data-table-column> 
+
+  <!-- <ng-data-table-column 
+  [field]="'reason'"
+  [sortable]="false"
+  [title]="'Reason'"
+  [filterable]="false"
+  [width]="4"> 
+
+  </ng-data-table-column>  -->
   
+
+  <!-- <ng-data-table-column 
+  [field]="'role'"
+  [sortable]="false"
+  [title]="'view'"
+  [filterable]="false"
+  [width]="3"> 
+
+
+
+
+
+
+
+
+
+  <ng-template #ngDataTableCell  let-row="row">
+  <td  >
   
-  
+    <div   style="align-items: center;text-align: center;">
-  
+      <nb-icon icon="eye-outline" title="View"  style="color: green;" (click)="onViewConfirm(row.item)"></nb-icon>  
-     
-        <ng-template #ngDataTableCell  let-row="row">
-        <td  >
-        
-          <div   style="align-items: center;text-align: center;">
-            <nb-icon icon="eye-outline" title="View"  style="color: green;" (click)="onViewConfirm(row.item)"></nb-icon>  
-       
-            </div>
  
-           
+      </div>
-        
-        </td> 
-        </ng-template>
-      </ng-data-table-column>  -->
 
-        </ng-data-table>
+     
+  
+  </td> 
+  </ng-template>
+</ng-data-table-column>  -->
+
+  </ng-data-table> 
+       
 
     </nb-card-body>
 
@@ -333,4 +333,123 @@
   <!-- </form> -->
   </nb-card-footer>
 
+  <div id="orderExcel" hidden>
+    <ng-data-table  
+    [id]="'i'" 
+    [items]=orders
+    [minContentWidth]="600"
+    [showColumnSelector]="true" 
+    [showHeader]="false"
+    >   
+   
+    <ng-data-table-column 
+    [field]="'index'"
+    [sortable]="false"
+    [title]="'ID'"
+    [filterable]="false"
+    [width]="2"> 
+  
+    </ng-data-table-column> 
+  
+    <ng-data-table-column 
+    [field]="'orderId'"
+    [sortable]="false"
+    [title]="'Order ID'"
+    [filterable]="false"
+    [width]="4"> 
+    <ng-template #ngDataTableCell  let-row="row">
+      <td   (click)="onViewConfirm(row.item)">
+        <div   style="display: flex; align-items: center;">
+     
+          <span    class="checkTxt"    >
+            {{row.item.orderId  }} 
+             </span>
+        </div>
+      
+      </td> 
+      </ng-template>
+    </ng-data-table-column> 
+    <ng-data-table-column 
+    [field]="'customer'"
+    [sortable]="false"
+    [title]="'Customer Name'"
+    [filterable]="false"
+    [width]="4"> 
+  
+    <ng-template #ngDataTableCell  let-row="row">
+      <td   (click)="onViewConfirm(row.item)">
+        <div   style="display: flex; align-items: center;">
+     
+          <span    class="checkTxt"    >
+            {{row.item.customer  }} 
+             </span>
+        </div>
+      
+      </td> 
+      </ng-template>
+    </ng-data-table-column> 
+    <ng-data-table-column 
+    [field]="'address'"
+    [sortable]="false"
+    [title]="'Address'"
+    [filterable]="false"
+    [width]="6"> 
+    <ng-template #ngDataTableCell  let-row="row">
+      <td   (click)="onViewConfirm(row.item)">
+        <div   style="display: flex; align-items: center;">
+     
+          <span    class="checkTxt"    >
+            {{row.item.address  }} 
+             </span>
+        </div>
+      
+      </td> 
+      </ng-template>
+    </ng-data-table-column> 
+    <ng-data-table-column 
+    [field]="'orderDate'"
+    [sortable]="false"
+    [title]="'Order Date'"
+    [filterable]="false"
+    [width]="4"> 
+  
+    <ng-template #ngDataTableCell  let-row="row">
+      <td   (click)="onViewConfirm(row.item)">
+        <div   style="display: flex; align-items: center;">
+     
+          <span    class="checkTxt"    >
+            {{row.item.updatedAt | date :'dd/MM/yy hh:mm:ss'}} 
+             </span>
+        </div>
+      
+      </td> 
+      </ng-template>
+  
+    </ng-data-table-column> 
+    <ng-data-table-column 
+    [field]="'status'" 
+    [title]="'Status'"
+    [sortable]="false" 
+    [width]="5">  
+    <ng-template #ngDataTableCell  let-row="row">
+    <td  (click)="onViewConfirm(row.item)">
+      <div   style="display: flex; align-items: center;">
+        <span  [ngStyle] = "{'color':row.item.status =='Out For Delivery'?'blue':'' }" class="checkTxt"  *ngIf="row.item.status =='Out For Delivery'" >
+       {{row.item.status}} <p  class="checkTxt" >({{row.item['UserDetails.userName']}}) <nb-icon icon="done-all-outline" style="color:#08d992" [nbTooltip]="'Driver seen at ' + (row.item.seenTime | date:'dd/MM/yyyy, h:mm a')"  *ngIf="row.item.seenStatus == 1"  ></nb-icon> 
+        <nb-icon icon="done-all-outline" nbTooltip="Not Seen"  style="color: rgb(159, 167, 170);" *ngIf="row.item.seenStatus == 0"  ></nb-icon>   </p>
+      
+        </span>
+        <span  [ngStyle] = "{'color':row.item.status =='ordered'?'#1f1dc9f5':row.item.status =='Delivered' ?'green':'red' }"  class="checkTxt"  *ngIf="row.item.status !='Out For Delivery'" >
+          {{row.item.status}}  <p  class="checkTxt" *ngIf="row.item.status == 'Delivered'">({{row.item['UserDetails.userName']}})</p>
+           </span>
+      </div>
+    
+    </td> 
+    </ng-template>
+  </ng-data-table-column> 
+   
+  
+    </ng-data-table>
+  </div>
+
 </nb-card>

src/app/pages/pages-routing.module.ts

@@ -16,6 +16,7 @@ import { SummaryDetailsComponent } from './summary-list/summary-details/summary-
 import { EmailComponent } from './email/email.component';
 import { DriverySheetComponent } from './drivery-sheet/drivery-sheet.component';
 import { ReturnSheetComponent } from './return-sheet/return-sheet.component';
+import { OrderDGuard } from './_guard/order-d.guard';
 
 const routes: Routes = [{
   path: '',
@@ -59,6 +60,7 @@ const routes: Routes = [{
     {
       path: 'order/add',
       component: OrderFormComponent,
+      canActivate: [OrderDGuard]
     },{
       path: 'summary',
       component:SummaryListComponent

src/environments/environment.ts

@@ -9,8 +9,8 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  //  apiEndpoint:'https://dev.venbait.in/vnms/api/',
+   apiEndpoint:'https://dev.venbait.in/vnms/api/',
-   apiEndpoint:'http://localhost:8081/api/',
+  //  apiEndpoint:'http://localhost:8081/api/',
   mailUrl:'',
   production: false,
 };

tsconfig.json

@@ -9,6 +9,7 @@
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "target": "es2020",
+    "types": ["node"],
     "typeRoots": [
       "node_modules/@types"
     ],