ionic 5 datatable

-
https://swimlane.github.io/ngx-datatable/#toggle
https://www.positronx.io/create-ionic-data-table-with-ngx-datatable/

<app-header></app-header>

<ion-content padding>
  <div class="margin">
    <p  style="text-align:right;width:100%">
      {{this.today  | date:'dd MMM yyyy'}} <span   style="float:right;margin-left:10px;">{{this.time}}</span>
    </p> 

    <ngx-datatable
    [sortType]="'multi'"     
    [headerHeight]="100" 
    [footerHeight]="50"
    [rowHeight]="50"
    [scrollbarH]="true"
    [scrollbarV]="true"
    [rows]="this.rows" 
    [columns]="columns" 
    [columnMode]="'force'"
    (page)="onPage($event)"
    (activate)="onActivate($event)"
    [limit]="5" class="bootstrap material" 
    style="height: 400px; overflow-y:visible"
   >
  
    <ngx-datatable-column name="Visitor Name" prop='FirstName'> 

   </ngx-datatable-column>
   <ngx-datatable-column name="Visitor Code" prop='VisitId' > </ngx-datatable-column>   
   <ngx-datatable-column name="Employee Name" prop='CompanyContact' > </ngx-datatable-column>
   <ngx-datatable-column name="Log In time" prop='InTime' > </ngx-datatable-column>
   <ngx-datatable-column name="Status" prop='Status' > </ngx-datatable-column>
   <ngx-datatable-column>
    <ng-template let-column="column" ngx-datatable-header-template>Action</ng-template>
    <ng-template let-row="row" ngx-datatable-cell-template >
      <p  class="header11" disabled *ngIf='row.Status == "exit"' style="margin-top:0px;"></p>
      <p  class="header11" *ngIf='row.Status != "exit"' style="margin-top:0px;"  (click)="request(row)">CheckOut</p>

    </ng-template>
  </ngx-datatable-column>
  </ngx-datatable>




  <!-- <ion-row class="border">
    <ion-col size="3" class="borderright color">Visitor Name</ion-col>
    <ion-col size="3" class="borderright color">Visitor Code</ion-col>
    <ion-col size="2" class="borderright color">Employee Name</ion-col>
    <ion-col size="2" class="borderright color">Log In time</ion-col>
    <ion-col size="2" class="color">Status</ion-col>
  </ion-row>
  <ion-row class="border" *ngFor="let data of this.reportsarray"   [ngStyle]="data.selected && {'background': '#3880ff'}" (click)="selectedrecord(data)">
    <ion-col size="3" class="borderright">{{data.FirstName}}</ion-col>
    <ion-col size="3" class="borderright">1234567</ion-col>
    <ion-col size="2" class="borderright"></ion-col>
    <ion-col size="2" class="borderright">{{data.InTime  | date:'h:mm a'}}</ion-col>
    <ion-col size="2">{{data.Status}}</ion-col>
  </ion-row>
  <br> -->
  <!-- <ion-button class="button" (click)="usercheckout()">Checkout</ion-button> -->

  </div>

</ion-content>



import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AlertController } from '@ionic/angular';
import { ApiService } from '../services/api.service';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-reports',
  templateUrl: './reports.page.html',
  styleUrls: ['./reports.page.scss'],
})
export class ReportsPage implements OnInit {
  today: Date;
  time: string;
  tenantname: any;
  reportsarray: any;
  user: any;
  rows: any;
  columns: ({ prop: string; name?: undefined; } | { name: string; prop?: undefined; })[];
  data: any;

  constructor(public route:Router,public api:ApiService,
    public alertController:AlertController) { }

  ngOnInit() {
    localStorage.removeItem("selectedreport");

    this.today=new Date();
    var newtime = new Date();
    this.time = newtime.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
    this.tenantname= JSON.parse(localStorage.getItem("TenantName"));
    console.log(this.tenantname);  

    this.columns = [
      { prop: 'FirstName' },
      { prop: 'CompanyContact' },
      { prop: 'InTime' },
      { prop: 'VisitId' },
      { prop: 'Status' },   
      { prop: 'Id' },
      
    ];

    this.fetch(data => {
      console.log(data);
      this.rows = data;

    });

  
  }

  
   usercheckout(mobile,visitcode){
    let data={
      Mobile:mobile,
      visitCode:visitcode
    }
    console.log(data)
     this.api.checkout(data).subscribe((res:any)=>{
      console.log(res)
      if(res[0]=="-1"){
       alert("User Already Exit");
      }
      else{
       alert("Checkout Successfully.")
      }
    },err=>{
      console.log(err);
       alert("Please Try again. Issue with Network/Server")
    })


  }
  selectedrecord(data){
    console.log(data);
    localStorage.setItem("selectedreport",JSON.stringify(data));
       
    this.reportsarray.map(e=>{
      if(e.Id==data.Id){
        if(e.selected==true){
          e.selected=false;
          localStorage.removeItem("selectedreport");
        }
        else{
          e.selected=true;
          localStorage.setItem("selectedreport",JSON.stringify(data));
        }
      }
      else{
        e.selected=false;
        localStorage.removeItem("selectedreport");
      }
      })
  
  }

fetch(cb) {
       console.log(cb,"bhavs");
       let data={
          TenantId:JSON.parse(localStorage.getItem("id")),
        }
        this.api.reports(data).subscribe((res:any)=>{
          console.log("reports",res);
          if(res[0]=="1"){
            this.rows=res["todayVisitors"];
          }
        })
        cb(this.rows);
      }
      onActivate(ev){
       console.log(ev.row);
       }
    async  request(ev){
    console.log(ev);
    const alert = await this.alertController.create({
    header: 'Confirm Checkout!',
    message: 'Do you want to Checkout?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: (blah) => {
          console.log('Confirm Cancel: blah');
        }
      }, {
        text: 'Okay',
        handler: () => {
          this.usercheckout(ev.Mobile,ev.VisitId);
        }
      }
    ]
  });

  await alert.present();
      }
}


add global csss below lines

/* NGX Datatable CSS */
@import '~assets/styles/ngx-datatable/_index.css';
@import '~assets/styles/ngx-datatable/_dark.css';
@import '~assets/styles/ngx-datatable/_material.css';
@import '~assets/styles/ngx-datatable/_bootstrap.css';
@import '~assets/styles/ngx-datatable/_icons.css';

Comments

Post a Comment

Popular posts from this blog

How to Add Firebase Analytics to Your NativeScript Mobile App

-
Image
tns plugin add nativescript-plugin-firebase reference links: https://github.com/EddyVerbruggen/nativescript-plugin-firebase . https://github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/1171 . https://dzone.com/articles/how-to-add-firebase-analytics-to-your-nativescript . Prerequisites Before starting, you need to create a new Firebase application using your Google account. This happens with just a few clicks. Firebase provides a free tier which covers entirely all Analytics services, so you don't need to take out your credit card. Navigate to  https://firebase.google.com , authenticate with your Google credentials and follow the "Add project" wizard. In general, you don't need to change any of the default options in "Step 3," unless you have specific requirements related to services other than "Analytics." In your newly created project, you have to navigate to the project settings and add iOS and Android applicatio...
Read more

sidemenu refresh through events

-
create service ionic g service service name import {Injectable} from '@angular/core'; import {Subject} from 'rxjs'; @Injectable({     providedIn: 'root' }) export class GlobalFooService {     private fooSubject = new Subject<any>();     publishSomeData(data: any) {         this.fooSubject.next(data);     }     getObservable(): Subject<any> {         return this.fooSubject;     } } Now, you can subscribe in any component like app.component.ts: @Component({     selector: 'app-root',     templateUrl: 'app.component.html',     styleUrls: ['app.component.scss'] }) export class AppComponent {     constructor(private globalFooService: GlobalFooService) {         this.initializeApp();     }     initializeApp() {         // other code         this.globalFooService.get...
Read more

push multiple data in array(select and disselect items in array)

-
 <ion-content> <h1 class="h1 margin">Following</h1> <ion-row>   <ion-col size="12" *ngFor="let data of followingdata" (click)="select(data)">     <div  class="newcssbg"  [ngStyle]="{'background-image': 'url(' + data.img +  ')'}">       <div class="overlay">       <p class="innertext">{{data.text}}       <ion-icon *ngIf="data.selected" style="color:#fff;float:right;" name="checkmark-circle-outline"></ion-icon>       </p>    </div>     </div>   </ion-col> </ion-row> </ion-content> <!-- [ngStyle]="data.selected  && {'border': '2px solid green'}" --> ts  select(data) {     // this.followingdataarray.push(data);     this.followingdata.map(e => {               if(e.id==data.id){  ...
Read more