Scribd
Upload
12 views

TABLEHTML-SCSS-TS

The document is an Angular component for managing vendor data, featuring a table that displays vendor information such as name, invoice number, date, value, pending amount, and amount paid. It includes functionalities for filtering, editing, and adding vendors, as well as pagination for data management. The component utilizes Angular Material for UI elements and integrates services for data fetching and dialog management.

Uploaded by

fyamgroups
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

TABLEHTML-SCSS-TS

The document is an Angular component for managing vendor data, featuring a table that displays vendor information such as name, invoice number, date, value, pending amount, and amount paid. It includes functionalities for filtering, editing, and adding vendors, as well as pagination for data management. The component utilizes Angular Material for UI elements and integrates services for data fetching and dialog management.

Uploaded by

fyamgroups
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height:123vh">
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body style="height: 123vh;">


<div class="container">
<div class="advance">
<div class="customerProfile">
<div class="backgroundcolor">
<div class="panel-heading">
<h2 class="panel-title" style="color:#fff;">
Add Vendor <mat-icon class="add-icon" matTooltip="Add Vendor!"
(click)="openvendor()">add_box</mat-icon>
</h2>
</div>

<div class="table-container">

<table class="table table-sm table-responsive" id="custom-table"


mat-table [dataSource]="dataSource">
<ng-container matColumnDef="VendorName">
<th mat-header-cell *matHeaderCellDef >
<div class="header-wrapper">
<div class="department-name text-start">Vendor Name
</div>
<div class="filter-input">
<input matInput (keyup)="employeeFilter($event)"
placeholder="Filter" #input>
</div>
</div>
</th>
<td mat-cell *matCellDef="let element">{{element.vendorName
}}</td>
</ng-container>

<ng-container matColumnDef="InvoiceNumber" >


<th mat-header-cell *matHeaderCellDef >
<div class="header-wrapper">
<div class="department-name text-start">Invoice
Number</div>
<div class="filter-input">
<input matInput (keyup)="employeeFilter($event)"
placeholder="Filter" #input>
</div>
</div>
</th>
<td mat-cell *matCellDef="let
element">{{element.invoiceNumber}}</td>
</ng-container>
<ng-container matColumnDef="InvoiceDate" >
<th mat-header-cell *matHeaderCellDef > <div
class="header-wrapper">
<div class="department-name text-start">Invoice
Date</div>
<div class="filter-input">
<input matInput (keyup)="employeeFilter($event)"
placeholder="Filter" #input>
</div>
</div></th>
<td mat-cell *matCellDef="let
element">{{element.invoiceDate}}</td>
</ng-container>
<ng-container matColumnDef="InvoiceValue">
<th mat-header-cell *matHeaderCellDef > <div
class="header-wrapper">
<div class="department-name text-start">Invoice
Value</div>
<div class="filter-input">
<input matInput (keyup)="employeeFilter($event)"
placeholder="Filter" #input>
</div>
</div></th>
<td mat-cell *matCellDef="let
element">{{element.invoiceValue}}</td>
</ng-container>
<ng-container matColumnDef="PendingAmount">
<th mat-header-cell *matHeaderCellDef > <div
class="header-wrapper">
<div class="department-name text-start">Pending
Amount</div>
<div class="filter-input">
<input matInput (keyup)="employeeFilter($event)"
placeholder="Filter" #input>
</div>
</div></th>
<td mat-cell *matCellDef="let
element">{{element.pendingAmount}}</td>
</ng-container>
<ng-container matColumnDef="AmountPaid" >
<th mat-header-cell *matHeaderCellDef > <div
class="header-wrapper">
<div class="department-name text-start">Amount
Paid</div>
<div class="filter-input">
<input matInput (keyup)="employeeFilter($event)"
placeholder="Filter" #input>
</div>
</div></th>
<td mat-cell *matCellDef="let
element">{{element.amountPaid}}</td>
</ng-container>
<ng-container matColumnDef="Action" >
<th mat-header-cell *matHeaderCellDef >Action</th>
<td mat-cell *matCellDef="let element">
<a class="btn btn-success actionbtn" matTooltip="Edit"
matTooltipPosition="below"
(click)="openEditForm(element)">
<mat-icon>edit</mat-icon>
</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns:
displayedColumns;"></tr>
</table>
</div>
<mat-paginator [pageSizeOptions]="[25, 50]"
showFirstLastButtons></mat-paginator>
</div>
</div>
</div>

</div>

</body>

</html>

</body>
</html>

SCSS:
.container {
// display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
". advance ."
". . ."
". . .";
}

.advance { grid-area: advance; }

.body{
min-height: 75vh ;
height: auto ;
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
// overflow-y: auto;
}
.customerProfile{
border-style: solid;
border-color: #428bca;
}

.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 1px;
border-top-left-radius: 1px;
}

.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 15px;
color: inherit;
}

.pull-right {
float: right !important;
}
.backgroundcolor{
background-color: #428bca;
}

.container {
background-color: white;
height:50vh;
margin-top: 36px;

#button-gap {
margin-right: 5px;
}

.mat-elevation-z8{
overflow-x: scroll;
}
.clickable-link {
cursor: pointer;
}

.table-container {
height: 60vh; /* Set a fixed height of 50% of the viewport height */
overflow: auto; /* Enable vertical scrolling if content overflows */
overflow-x: auto;

}
.checkbox{
background-color: #fff;
}

/* Define the custom-table class for styling */


#custom-table {
width: 75%; /* Set the table width to 75% of its container */
border-collapse: collapse; /* Optional: Collapse borders between table cells */
}

.table-container {
height: 483px; /* Set the maximum height for the table container */
overflow-y: auto; /* Enable vertical scrolling */
background: white;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}

th {
background-color: #f2f2f2;
position: sticky;
top: 0;
}

.table-header {
display: flex;
align-items: center;
justify-content: center;
}

TS CODE:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { environment } from 'src/Environments/environment';
import { CoreService } from
'src/app/Services/CustomerVSEmployee/Core/core.service';
import { LoginService } from 'src/app/Services/Login/login.service';
import { EditVendorComponent } from '../edit-vendor/edit-vendor.component';
import { MatDialog } from '@angular/material/dialog';
import { VendorService } from 'src/app/Services/Vendor/vendor.service';
import { UpdatevendorComponent } from '../updatevendor/updatevendor.component';
import { SpinnerService } from '../../Spinner/spinner.service';
import { catchError } from 'rxjs';
import Swal from 'sweetalert2/src/sweetalert2.js'
@Component({
selector: 'app-vendor',
templateUrl: './vendor.component.html',
styleUrls: ['./vendor.component.scss']
})
export class VendorComponent implements OnInit {
ngOnInit(): void {
this.fetchtableData();
}
constructor(private spinnerService:SpinnerService, private
VendorService:VendorService, private http: HttpClient, private loginservice:
LoginService, private coreservice: CoreService, private _dialog: MatDialog) { }
dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
displayedColumns: string[] = ['VendorName', 'InvoiceNumber', 'InvoiceDate',
'InvoiceValue', 'PendingAmount', 'AmountPaid', 'Action'];
btnAccountEEdit(id: string) {
// Implement your edit logic here
}

fetchtableData() {
this.spinnerService.requestStarted();
this.http.get<any>(environment.apiURL +
`ITAsset/nGetVendorData`).pipe(catchError((error) => {
this.spinnerService.requestEnded();
return Swal.fire('Alert!', 'An error occurred while processing your request',
'error');
})).subscribe({
next:(data) => {
this.spinnerService.requestEnded();
this.dataSource = new MatTableDataSource(data.vendorGDetailList);
this.dataSource.paginator = this.paginator;
// this.dataSource.sort = this.sort;
},
error: (err: any) => {
this.spinnerService.resetSpinner();
}
});
}

employeeFilter(event: Event): void {


const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}

openvendor(){
const dialogRef = this._dialog.open(EditVendorComponent);
dialogRef.afterClosed().subscribe({
next: (val) => {
if (val) {
this.fetchtableData();
}
},
});
}

openEditForm(data:any){
const dialogRef = this._dialog.open(UpdatevendorComponent, {
data:{
type:"edit",
data:data
},
});
dialogRef.afterClosed().subscribe({
next: (val) => {
if (val) {
this.fetchtableData();
}
}
});
}
}

You might also like