From db3044d4c6fb928f54e3cfcd8a00bcd414e70ab3 Mon Sep 17 00:00:00 2001 From: "surendar.m@watermelon.us" Date: Fri, 7 Apr 2023 10:37:54 +0530 Subject: [PATCH] business table --- .../business-list.component.html | 116 ++++++++++-------- .../business-list/business-list.component.ts | 103 +++++++++------- .../layouts/admin/admin-layout.component.html | 8 +- .../styles/scss/core/_main-sidebar.scss | 8 +- ng-seed/src/environments/environment.ts | 4 +- 5 files changed, 131 insertions(+), 108 deletions(-) diff --git a/ng-seed/src/app/appoinment/business/business-list/business-list.component.html b/ng-seed/src/app/appoinment/business/business-list/business-list.component.html index 1cd2c03..3903912 100644 --- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.html +++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.html @@ -1,7 +1,7 @@

Business Details

Filter - + @@ -12,66 +12,76 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
S.NO {{element.id}} Logo Name {{element.busName}} Email {{element.email}} Phone {{element.contactNo}} Address {{element.address}}
{{element.city}}
{{element.state}} 		Action - edit - delete -
+ + + + + ID + {{row.id}} + + + + + Logo + {{row.logo}} + + + + + Name + {{row.busName}} + + + + + Email + {{row.email}} + + + + + Mobile No + {{row.contactNo}} + + + + + Address + {{row.address}}
{{row.city}}
{{row.state}} + + + + + Action + + edit + delete + + + + + + +
+
- +
+ + +
+ +
No Data Available
+ + \ No newline at end of file diff --git a/ng-seed/src/app/appoinment/business/business-list/business-list.component.ts b/ng-seed/src/app/appoinment/business/business-list/business-list.component.ts index 59796bb..e0f0896 100644 --- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.ts +++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.ts @@ -1,8 +1,8 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, SimpleChanges, ViewChild } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; -import { MatPaginator } from '@angular/material/paginator'; +import { MatPaginator, PageEvent } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; -import { MatTable, MatTableDataSource } from '@angular/material/table'; +import { MatTable ,MatTableDataSource,_MatTableDataSource} from '@angular/material/table'; import { Router } from '@angular/router'; import { NotifierService } from 'angular-notifier'; import { DialogBoxComponent } from 'app/appoinment/appoinments/dialog-box/dialog-box.component'; @@ -10,30 +10,6 @@ import Swal from 'sweetalert2/dist/sweetalert2.js'; import { AddBusinessComponent } from '../add-business/add-business.component'; import { BusinessService } from '../business-service/business.service'; - -export interface UsersData { - id: number; - logo: string; - name: string; - email: string; - phone: string; - address: string; - city: string; - state: string; -} -const ELEMENT_DATA: UsersData[] = [ - {id: 1, logo: 'assets/images/1.jpg', name: 'school management system ', email: 'management@gmail.com', phone: '8756453456', address:'14-20b/19 Vasantham Colony, Sangakiri.', state: 'Tamil Nadu', city: 'salem', }, - {id: 2, logo: 'assets/images/2.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 3, logo: 'assets/images/3.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 4, logo: 'assets/images/4.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 5, logo: 'assets/images/1.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 6, logo: 'assets/images/2.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 7, logo: 'assets/images/3.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 8, logo: 'assets/images/4.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 9, logo: 'assets/images/1.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, - {id: 10, logo: 'assets/images/2.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'}, -]; - @Component({ selector: 'app-business-list', templateUrl: './business-list.component.html', @@ -41,27 +17,59 @@ const ELEMENT_DATA: UsersData[] = [ }) export class BusinessListComponent implements OnInit { push: any; + public businessListLength: number; + public businessListSource = new MatTableDataSource(); displayedColumns: string[] = ['id','logo', 'name', 'email','phone', 'address', 'action']; - dataSource: any; - // dataSource: any = new MatTableDataSource(ELEMENT_DATA); - @ViewChild(MatTable,{static:true}) table: MatTable; @ViewChild(MatPaginator) paginator: MatPaginator; - businessList: any; + @ViewChild(MatSort) sort: MatSort; + recordStatus: boolean; + @ViewChild(MatTable,{static:true}) table: MatTable + // pagination variable details + length = 5; + pageIndex = 0; + pageSize = 5; + pageEvent: PageEvent; + businessList: any[] = []; - constructor(private notifierService: NotifierService,private router:Router,public dialog: MatDialog,public _bus:BusinessService) {} + constructor(private notifierService: NotifierService,private router:Router,public dialog: MatDialog,public _bus:BusinessService) { - ngOnInit(): void { - this.dataSource = new MatTableDataSource(ELEMENT_DATA) + } + + ngOnInit(): void { + this.recordStatus=false; this.getBusinessList() } + ngAfterViewInit() { + this.businessListSource.paginator = this.paginator; + console.log(this.businessListSource,this.paginator) + this.businessListSource.sort = this.sort; + } + + applyFilter(filterValue: string) { + filterValue = filterValue.trim(); // Remove whitespace + filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches + this.businessListSource.filter = filterValue; + } + getBusinessList() { //this._pd.getTabStatusPdDetails(this.tabStatus) this._bus.getBusinessListDetails().subscribe(res => { - if (res.status == 200) { - this.businessList = res.data; + if (res.status == 200) { + this.businessList = res.data; + console.log(this.businessList) + this.businessListLength = res.data.length; + console.log(this.businessListLength) + this.businessListSource['data'] = this.businessList; + console.log(this.businessListSource) + this.recordStatus=false; } + else{ + this.businessList=[]; + this.businessListLength= null; + this.recordStatus=true; + } } // , error => {this.errorMessage = error}); ,error => { @@ -71,17 +79,22 @@ export class BusinessListComponent implements OnInit { }) } - // ngAfterViewInit() { - // this.businessList.paginator = this.paginator; - // } - applyFilter(event: Event) { - const filterValue = (event.target as HTMLInputElement).value; - this.businessList.filter = filterValue.trim().toLowerCase(); - if (this.businessList.paginator) { - this.businessList.paginator.firstPage(); - } + + + pageChange(e) { + console.log(e); } + + // get changes for filter from parent componnet filter + ngOnChanges(changes: SimpleChanges) { + // let filteredText = changes.bindFilterValue.currentValue; + let filteredText = changes.bindFilterValue.currentValue ? changes.bindFilterValue.currentValue.trim() : changes.bindFilterValue.currentValue; + // filteredText = filteredText ? filteredText.trim() : filteredText; + filteredText = filteredText ? filteredText.toLowerCase() : filteredText; + this.businessListSource.filter = filteredText; +} + confirmBox(event,element){ console.log(event,element) Swal.fire({ diff --git a/ng-seed/src/app/layouts/admin/admin-layout.component.html b/ng-seed/src/app/layouts/admin/admin-layout.component.html index aa2f4c1..ba1e5e0 100644 --- a/ng-seed/src/app/layouts/admin/admin-layout.component.html +++ b/ng-seed/src/app/layouts/admin/admin-layout.component.html @@ -108,7 +108,7 @@
-