ionic 5 datatable
https://swimlane.github.io/ngx-datatable/#toggle
https://www.positronx.io/create-ionic-data-table-with-ngx-datatable/
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