Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

business table

Browse Source
This commit is contained in:
surendar.m@watermelon.us 2023-04-07 10:37:54 +05:30
parent 5bdb915cce
commit db3044d4c6
5 changed files with 131 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
ng-seed/src/app/appoinment/business/business-list/business-list.component.html
View File

@ -1,7 +1,7 @@
<h3>Business Details</h3> <h3>Business Details</h3>
<mat-form-field> <mat-form-field>
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Ex. Mia" #input>
</mat-form-field> </mat-form-field>
<button mat-button (click)="openDialog('Add',{})" class="button">Add Business</button> <button mat-button (click)="openDialog('Add',{})" class="button">Add Business</button>
<mat-sidenav-container class="app-inner background-none shadow-none mail-db"> <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
@ -12,66 +12,76 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header > <mat-expansion-panel-header >
<div class="example-container mat-elevation-z8 "> <div class="example-container mat-elevation-z8 ">
<table mat-table [dataSource]="businessList" #mytable class="my-table mat-elevation-z8 len-table">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="logo"> <table mat-table [dataSource]="businessListSource" matSort *ngIf="businessListLength > 0" class="my-table mat-elevation-z8 len-table">
<th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
<td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td> <!-- ID Column -->
</ng-container> <ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
<ng-container matColumnDef="name"> <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
<th mat-header-cell *matHeaderCellDef class="font-color"> Name </th> </ng-container>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.busName}} </td>
</ng-container> <!-- Progress Column -->
<ng-container matColumnDef="logo">
<ng-container matColumnDef="email"> <mat-header-cell *matHeaderCellDef mat-sort-header> Logo </mat-header-cell>
<th mat-header-cell *matHeaderCellDef class="font-color"> Email </th> <mat-cell *matCellDef="let row"> {{row.logo}} </mat-cell>
<td mat-cell *matCellDef="let element"> {{element.email}} </td> </ng-container>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="phone"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef class="font-color"> Phone </th> <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<td mat-cell *matCellDef="let element"> {{element.contactNo}} </td> <mat-cell *matCellDef="let row"> {{row.busName}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="address"> <!-- Color Column -->
<th mat-header-cell *matHeaderCellDef class="font-color"> Address </th> <ng-container matColumnDef="email">
<td mat-cell *matCellDef="let element"> {{element.address}} <br> {{element.city}} <br> {{element.state}} </td> <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
</ng-container> <mat-cell *matCellDef="let row" > {{row.email}} </mat-cell>
</ng-container>
<!-- <ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef class="font-color"> State </th> <!-- Color Column -->
<td mat-cell *matCellDef="let element"> {{element.state}} </td> <ng-container matColumnDef="phone">
</ng-container> <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No </mat-header-cell>
<mat-cell *matCellDef="let row" > {{row.contactNo}} </mat-cell>
<ng-container matColumnDef="city"> </ng-container>
<th mat-header-cell *matHeaderCellDef class="font-color"> City </th>
<td mat-cell *matCellDef="let element"> {{element.city}} </td> <!-- Color Column -->
</ng-container> --> <ng-container matColumnDef="address">
<mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
<ng-container matColumnDef="action"> <mat-cell *matCellDef="let row"> {{row.address}} <br> {{row.city}} <br> {{row.state}} </mat-cell>
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th> </ng-container>
<td mat-cell *matCellDef="let element" class="action-link">
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a> <!-- Color Column -->
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> <ng-container matColumnDef="action">
</td> <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
</ng-container> <mat-cell *matCellDef="let row">
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
</table> </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</table>
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator> <div [hidden]="recordStatus">
<mat-paginator #paginator class="mat-elevation-z1" [length]="businessListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator>
</div>
<mat-card-content *ngIf="recordStatus">
<h5 align="center" style="font-weight: bold;
color: brown;">No Data Available</h5>
</mat-card-content>
</div> </div>
</div> </div>
</div> </div>
</mat-sidenav-container> </mat-sidenav-container>
<notifier-container></notifier-container> <notifier-container></notifier-container>

103
ng-seed/src/app/appoinment/business/business-list/business-list.component.ts
View File

@ -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 { 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 { 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 { Router } from '@angular/router';
import { NotifierService } from 'angular-notifier'; import { NotifierService } from 'angular-notifier';
import { DialogBoxComponent } from 'app/appoinment/appoinments/dialog-box/dialog-box.component'; 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 { AddBusinessComponent } from '../add-business/add-business.component';
import { BusinessService } from '../business-service/business.service'; 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({ @Component({
selector: 'app-business-list', selector: 'app-business-list',
templateUrl: './business-list.component.html', templateUrl: './business-list.component.html',
@ -41,27 +17,59 @@ const ELEMENT_DATA: UsersData[] = [
}) })
export class BusinessListComponent implements OnInit { export class BusinessListComponent implements OnInit {
push: any; push: any;
public businessListLength: number;
public businessListSource = new MatTableDataSource();
displayedColumns: string[] = ['id','logo', 'name', 'email','phone', 'address', 'action']; displayedColumns: string[] = ['id','logo', 'name', 'email','phone', 'address', 'action'];
dataSource: any;
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
businessList: any; @ViewChild(MatSort) sort: MatSort;
recordStatus: boolean;
@ViewChild(MatTable,{static:true}) table: MatTable<any>
// 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() 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() { getBusinessList() {
//this._pd.getTabStatusPdDetails(this.tabStatus) //this._pd.getTabStatusPdDetails(this.tabStatus)
this._bus.getBusinessListDetails().subscribe(res => { this._bus.getBusinessListDetails().subscribe(res => {
if (res.status == 200) { if (res.status == 200) {
this.businessList = res.data; 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 = <any> error}); // , error => {this.errorMessage = <any> error});
,error => { ,error => {
@ -71,17 +79,22 @@ export class BusinessListComponent implements OnInit {
}) })
} }
// ngAfterViewInit() {
// this.businessList.paginator = this.paginator;
// } pageChange(e) {
applyFilter(event: Event) { console.log(e);
const filterValue = (event.target as HTMLInputElement).value;
this.businessList.filter = filterValue.trim().toLowerCase();
if (this.businessList.paginator) {
this.businessList.paginator.firstPage();
}
} }
// 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){ confirmBox(event,element){
console.log(event,element) console.log(event,element)
Swal.fire({ Swal.fire({

8
ng-seed/src/app/layouts/admin/admin-layout.component.html
View File

@ -108,7 +108,7 @@
</div> </div>
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100"> <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
<div class="menu-links"> <div class="menu-links">
<button appToggleFullscreen mat-icon-button> <!-- <button appToggleFullscreen mat-icon-button>
<mat-icon>fullscreen</mat-icon> <mat-icon>fullscreen</mat-icon>
</button> </button>
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible"> <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
@ -162,9 +162,9 @@
</button> </button>
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs"> <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
<mat-icon>person</mat-icon> <mat-icon>person</mat-icon>
</button> </button> -->
<mat-menu #user="matMenu" class="opt-menu" x-position="before"> <mat-menu #user="matMenu" class="opt-menu" x-position="before">
<div mat-menu-item class="head-menu grad-blue"> <!-- <div mat-menu-item class="head-menu grad-blue">
Settings Settings
</div> </div>
<button mat-menu-item> <button mat-menu-item>
@ -178,7 +178,7 @@
<button mat-menu-item> <button mat-menu-item>
<mat-icon>notifications_off</mat-icon> <mat-icon>notifications_off</mat-icon>
Disable notifications Disable notifications
</button> </button> -->
<button mat-menu-item (click)="logout()"> <button mat-menu-item (click)="logout()">
<mat-icon>exit_to_app</mat-icon> <mat-icon>exit_to_app</mat-icon>
Sign Out Sign Out

8
ng-seed/src/assets/styles/scss/core/_main-sidebar.scss
View File

@ -184,17 +184,17 @@
padding: 0 !important; padding: 0 !important;
background: $main-content; background: $main-content;
display: flex; display: flex;
background: #f2f4f8; // background: #f2f4f8;
} }
.body-container { .body-container {
height: calc(100% - 64px); height: calc(100% - 64px);
overflow-x: hidden; // overflow-x: hidden;
overflow-y: auto; // overflow-y: auto;
position: relative; position: relative;
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background: #f2f4f8; // background: #f2f4f8;
} }
@media(max-width:991px) { @media(max-width:991px) {

4
ng-seed/src/environments/environment.ts
View File

@ -6,8 +6,8 @@
export const environment = { export const environment = {
production: false, production: false,
environmentName: 'Testing Environment',//Localhost Environment. environmentName: 'Testing Environment',//Localhost Environment.
// apiEndpoint:'http://venbainfotech.com:5000/api/', apiEndpoint:'http://venbainfotech.com:5000/api/',
apiEndpoint:'http://192.168.1.20:8080/api/', // apiEndpoint:'http://192.168.1.20:8080/api/',
// apiEndpoint:'https://api.venbait.in/api/', // apiEndpoint:'https://api.venbait.in/api/',
firebase: { firebase: {