new modification
sajan
3 years ago
parent
92249688d9
commit
3435381a7b
@ -0,0 +1,15 @@
|
||||
|
||||
export class PaymentInfoDto {
|
||||
|
||||
userId:string
|
||||
|
||||
tenderId:number
|
||||
|
||||
transId:number
|
||||
|
||||
status?:string
|
||||
|
||||
finalBidAmt?:number;
|
||||
|
||||
id?:any;
|
||||
}
|
||||
@ -0,0 +1,220 @@
|
||||
<div class="buttonCard">
|
||||
<button mat-stroked-button (click)="backButton()" class="backButton">
|
||||
<i class="fa fa-arrow-left" aria-hidden="true"
|
||||
style="top: 0px;position: relative;font-size: small;"></i>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="section-to-print" class="container" style="background-color: white;">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="table-container" #table>
|
||||
|
||||
|
||||
<div class="reportHeader">
|
||||
<div class="row" style="text-align: center;">
|
||||
<h2 class="bidHeading">Payment Details</h2>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h3 class="tenderInfo">Tender Information:</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
|
||||
<span class="subHead">
|
||||
{{'tender'|translate}} :
|
||||
<span class="subDetail"> {{headerData?.title}} </span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row" style="margin-top: 5px;">
|
||||
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
|
||||
<span class="subHead">
|
||||
{{'tenderId'|translate}} :
|
||||
<span class="subDetail"> {{tenderInputId}} </span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="row">
|
||||
<h3 class="tenderInfo">Payment Summary:</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table hidden="true">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th>{{title | translate}}</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
|
||||
<td>Tender Name</td>
|
||||
<td>
|
||||
{{headerData?.title}}
|
||||
</td>
|
||||
|
||||
<td></td>
|
||||
<td>Published Date</td>
|
||||
<td>
|
||||
{{headerData?.publishDate }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
|
||||
<td>Tender Id</td>
|
||||
<td>
|
||||
{{tenderInputId }}
|
||||
</td>
|
||||
<td></td>
|
||||
<td>Bid Open Date</td>
|
||||
<td>
|
||||
{{headerData?.bidOpenDate}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr></tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<mat-table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort matSortDisableClear="true"
|
||||
(matSortChange)="sortData($event)">
|
||||
|
||||
<ng-container matColumnDef="slNo">
|
||||
<th mat-header-cell *matHeaderCellDef style="text-align: center;width:80px" class="table-headers">
|
||||
<div>
|
||||
{{'slNo'|translate}}
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element let i=index" class="table-content" style="text-align: center;">
|
||||
{{i+1}}
|
||||
</td>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:140px"
|
||||
class="table-headers">
|
||||
<div>
|
||||
{{'name'|translate}}
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="table-content">
|
||||
{{element?.userName}}
|
||||
</td>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="admissionNo">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;" class="table-headers">
|
||||
<div>
|
||||
{{'admissionNo'|translate}}
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="table-content">
|
||||
{{element.rollNo }}
|
||||
</td>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
<ng-container matColumnDef="mobileNumber">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:170px"
|
||||
class="table-headers">
|
||||
<div>
|
||||
{{'mobileNumber'|translate}}
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="table-content">
|
||||
{{element?.mobileNumber}}
|
||||
</td>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="email">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:170px" class="table-headers">
|
||||
<div>
|
||||
{{'emailId'|translate}}
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="table-content">
|
||||
{{element?.email}}
|
||||
</td>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
<ng-container matColumnDef="transId">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:200px" class="table-headers">
|
||||
<div>
|
||||
{{'TransactionId'|translate}}
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="table-content">
|
||||
{{element?.transId}}
|
||||
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
|
||||
<ng-container matColumnDef="Paymentstatus">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:200px" class="table-headers">
|
||||
<div>
|
||||
{{'Paymentstatus'|translate}}
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="table-content">
|
||||
|
||||
|
||||
<mat-select style="width: 65%;font-family: nucleo;"
|
||||
[(ngModel)]="element.paymentStatus"
|
||||
[ngModelOptions]="{standalone: true}" (ngModelChange)="onPaymentStatusChange(element.userId, element.paymentStatus)">
|
||||
<mat-option *ngIf="element.status === 'P';" style="font-family: nucleo;" value="P">Pending</mat-option>
|
||||
<mat-option style="font-family: nucleo;" value="D">Decline</mat-option>
|
||||
<mat-option style="font-family: nucleo;" value="S">Confirm</mat-option>
|
||||
</mat-select>
|
||||
|
||||
|
||||
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displaycolumns ;sticky: true;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displaycolumns;"></tr>
|
||||
|
||||
</mat-table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonCardBottom">
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,409 @@
|
||||
// .header {
|
||||
// margin-left: 4%;
|
||||
// margin-top: 20px;
|
||||
// }
|
||||
|
||||
// .header>h6{
|
||||
// a {
|
||||
// text-decoration: none;
|
||||
// color: #262627;
|
||||
// }
|
||||
|
||||
// a:hover {
|
||||
// text-decoration: underline;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
|
||||
// mat-card{
|
||||
// min-width: 180px ;
|
||||
// // max-width: 20vw;
|
||||
// height: 200px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
// mat-card:hover{
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
.nav-link:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 10px;
|
||||
// border: 1px solid #ccc;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-family: sans-serif;
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.table td {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.table-break-word {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #e3e3e3;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.header>h6>a {
|
||||
text-decoration: none;
|
||||
color: #262627;
|
||||
}
|
||||
|
||||
.header>h6>a:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.top-left-float {
|
||||
display: flex;
|
||||
min-width: 282px;
|
||||
}
|
||||
|
||||
.top-right-float {
|
||||
display: flex;
|
||||
min-width: 161px;
|
||||
}
|
||||
|
||||
.top-left-float>button,
|
||||
.top-right-float>button {
|
||||
margin: 5px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
mat-table {
|
||||
padding-top: 10px !important;
|
||||
// table-layout: fixed;
|
||||
width: 100%;
|
||||
display: table;
|
||||
overflow-x: scroll;
|
||||
|
||||
.table-headers {
|
||||
padding: 5px;
|
||||
color: #505050;
|
||||
font-weight: 900;
|
||||
font-size: medium;
|
||||
background-color: #f0f0f0;
|
||||
font-family: nucleo;
|
||||
}
|
||||
|
||||
.table-headers:hover {
|
||||
background-color: #ececec;
|
||||
color: #46AC9E;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
padding: 5px;
|
||||
overflow-wrap: inherit;
|
||||
font-family: nucleo;
|
||||
|
||||
}
|
||||
|
||||
.table-column {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
border-bottom: 1px solid silver;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) {
|
||||
|
||||
.mat-slide-toggle-thumb {
|
||||
background-color: #46AC9E;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-bar {
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// .dialog-body {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// div {
|
||||
// width: 90%;
|
||||
// }
|
||||
// }
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 97%;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn-group-left {
|
||||
// min-width: 150px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.btn-group-right {
|
||||
// min-width: 95px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host ::ng-deep {
|
||||
.mat-form-field-infix {
|
||||
border-bottom: 0px solid white;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
tr {
|
||||
|
||||
th,
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.img-fluid {
|
||||
margin-right: 5px;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
// .navbar {
|
||||
// background-position: center;
|
||||
// }
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.card {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media print {
|
||||
.buttonCard {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.printButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.excelButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-row:nth-child(even) {
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.mat-row:nth-child(odd) {
|
||||
background-color: rgb(241, 241, 241);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
|
||||
.backButton {
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
color: #424242;
|
||||
background-color: white;
|
||||
height: 37px;
|
||||
border-radius: 9px;
|
||||
font-family: nucleo;
|
||||
// width: 8%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(5px);
|
||||
|
||||
}
|
||||
|
||||
.backButton:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
/* You can adjust the shadow values to your preference */
|
||||
}
|
||||
|
||||
.printButton {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
background-color: white;
|
||||
color: #424242;
|
||||
height: 37px;
|
||||
border-radius: 9px;
|
||||
font-family: nucleo;
|
||||
width: 8%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.printButton:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
/* You can adjust the shadow values to your preference */
|
||||
}
|
||||
|
||||
.excelButton {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
color: #424242;
|
||||
background-color: white;
|
||||
height: 37px;
|
||||
border-radius: 9px;
|
||||
font-family: nucleo;
|
||||
width: 8%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.excelButton:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
/* You can adjust the shadow values to your preference */
|
||||
}
|
||||
|
||||
.buttonCard {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 50px;
|
||||
margin: 0px;
|
||||
padding: 0px 16px 0px 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.buttonCardBottom{
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 50px;
|
||||
margin: 0px;
|
||||
padding: 0px 16px 0px 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reportHeader {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
// height: 50px;
|
||||
margin: 5px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.bidHeading {
|
||||
font-family: texg;
|
||||
color: #353535;
|
||||
}
|
||||
|
||||
.tenderInfo {
|
||||
font-family: texg;
|
||||
color: #353535;
|
||||
}
|
||||
|
||||
.subHead {
|
||||
font-family: texg;
|
||||
color: #353535;
|
||||
}
|
||||
|
||||
.subDetail {
|
||||
font-family: nucleo;
|
||||
color: #353535;
|
||||
}
|
||||
|
||||
.captchaFont {
|
||||
font-family: captcha;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.captchaDiv {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-image: url('/assets/img/captchaback.jpeg');
|
||||
}
|
||||
|
||||
.captchaSubmit{
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
color: #424242;
|
||||
background-color: white;
|
||||
height: 37px;
|
||||
border-radius: 9px;
|
||||
font-family: nucleo;
|
||||
// width: 8%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
margin-right: 5px;
|
||||
}
|
||||
.captchaSubmit:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
background-color: rgb(240, 240, 240);
|
||||
|
||||
/* You can adjust the shadow values to your preference */
|
||||
}
|
||||
|
||||
.rotate-icon {
|
||||
animation: rotate 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
@ -0,0 +1,124 @@
|
||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
||||
import { MatSort, Sort } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { apiUrl } from 'src/app/_providers/_resources/api-url.properties';
|
||||
import { MasterService } from 'src/app/_providers/_services/master.service';
|
||||
import { UiService } from 'src/app/_providers/_services/ui.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment-details',
|
||||
templateUrl: './payment-details.component.html',
|
||||
styleUrls: ['./payment-details.component.scss']
|
||||
})
|
||||
export class PaymentDetailsComponent implements OnInit {
|
||||
|
||||
|
||||
title = 'Payment Details';
|
||||
|
||||
today: Date = new Date();
|
||||
|
||||
@ViewChild('table', { static: false }) table: ElementRef;
|
||||
|
||||
@ViewChild(MatSort, { static: false }) sort: MatSort;
|
||||
|
||||
displaycolumns: string[] = ['slNo', 'name', 'mobileNumber', 'email', 'transId', 'Paymentstatus'];
|
||||
|
||||
dataSource: MatTableDataSource<unknown>;
|
||||
|
||||
tenderId: number;
|
||||
|
||||
headerData: any;
|
||||
|
||||
tableData: any;
|
||||
|
||||
tenderInputId: any;
|
||||
|
||||
|
||||
paymentStatus: any;
|
||||
userId: string;
|
||||
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _masterService: MasterService,
|
||||
private route: ActivatedRoute,
|
||||
private _ui:UiService,
|
||||
) {
|
||||
this.tenderId = +this.route.snapshot.paramMap.get('id');
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getHeaderData(this.tenderId);
|
||||
this.getTableData(this.tenderId);
|
||||
}
|
||||
|
||||
getHeaderData(id) {
|
||||
this._masterService.getMasterDatabyId(apiUrl.getTender, id).then(res => {
|
||||
this.headerData = res;
|
||||
|
||||
this.tenderInputId = res.tenderId
|
||||
})
|
||||
}
|
||||
|
||||
getTableData(id) {
|
||||
this._masterService.getMasterDatabyId(apiUrl.bidReport, id).then(res => {
|
||||
console.log("res",res);
|
||||
|
||||
this.tableData = res.report
|
||||
this.tableData.forEach(element => {
|
||||
if (element.status === 'P') {
|
||||
element.paymentStatus = 'P';
|
||||
}
|
||||
if(element.status === 'S'){
|
||||
element.paymentStatus = 'S';
|
||||
}
|
||||
if(element.status === 'D'){
|
||||
element.paymentStatus = 'D';
|
||||
}
|
||||
});
|
||||
|
||||
this.tableData.sort((a, b) => {
|
||||
if (a.status === 'P' && b.status !== 'P') {
|
||||
return -1;
|
||||
} else if (a.status !== 'P' && b.status === 'P') {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
this.dataSource = new MatTableDataSource(this.tableData);
|
||||
this.dataSource.sort = this.sort;
|
||||
})
|
||||
}
|
||||
|
||||
navigateTo(destination) {
|
||||
this._router.navigate([destination])
|
||||
}
|
||||
|
||||
backButton() {
|
||||
this.navigateTo('/dashboard')
|
||||
// this.backClick.emit()
|
||||
}
|
||||
|
||||
sortData(sort: Sort) {}
|
||||
|
||||
onPaymentStatusChange(userId, paymentStatus){
|
||||
console.log("this.paymentStatus",paymentStatus);
|
||||
|
||||
|
||||
let body = {
|
||||
status : paymentStatus
|
||||
}
|
||||
this._masterService.postMasterData(apiUrl.paymentupdatePaymentStatus,body,`${userId}/${this.tenderId}`).then((res) =>{
|
||||
console.log(res);
|
||||
this._ui.toastMessage(res.data)
|
||||
|
||||
},err=>{
|
||||
this._ui.toastMessage(err.error.message);
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<br>
|
||||
<br>
|
||||
<div [hidden]="!qrImage" style="text-align: center;">
|
||||
<p>Payment Status : <b>{{paymentStatus}}</b></p>
|
||||
<br>
|
||||
<p>Amount need to be paid : ₹{{amountReq}}/- Only</p>
|
||||
|
||||
<img id="qrImage" alt="QR Code" >
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-1 col-sm-1 col-md-3 col-lg-3 col-xl-3"></div>
|
||||
<div class="col-10 col-sm-10 col-md-6 col-lg-6 col-xl-6">
|
||||
<p>Please provide the transaction id of payment you've made successfully.</p>
|
||||
|
||||
<mat-form-field class="input-style" appearance="outline" style="width:100%;">
|
||||
<mat-label >Transaction ID </mat-label>
|
||||
<input matInput placeholder="Enter Transaction ID" type="text" [(ngModel)]="transactionData.transId"/>
|
||||
</mat-form-field>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<button mat-raised-button (click)="submit()" [disabled]="paymentStatus == 'Success'">Submit</button>
|
||||
</div>
|
||||
|
||||
<div style="text-align: right;">
|
||||
<a style="cursor: pointer;color: blue;" (click)="openHelpDialog(help)">help?</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1 col-sm-1 col-md-3 col-lg-3 col-xl-3"></div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ng-template #help>
|
||||
<div>
|
||||
<h6>How can I pay? </h6>
|
||||
<ul>
|
||||
<li>Launch the payment app on your smartphone</li>
|
||||
<li>scan the code</li>
|
||||
<li>Review the payment details to ensure they're correct, and then confirm the transaction</li>
|
||||
</ul>
|
||||
<h6>How do I get my Transaction Id? </h6>
|
||||
<ul>
|
||||
<li>The method to obtain a transaction ID for a QR code payment can vary depending on the payment app you're using and the platform through which you made the payment. Generally, when you make a payment using a QR code, the transaction ID is usually generated and provided to you as a confirmation of the completed payment. please check your payment app or mail for Transaction ID</li>
|
||||
</ul>
|
||||
<h6>How can I ensure that the payment was successful?</h6>
|
||||
<ul>
|
||||
<li>After your successfull payment,enter the transaction Id</li>
|
||||
<li>After the confirmation from Bank, your payment status will be changed from Pending to Paid</li>
|
||||
</ul>
|
||||
<h6>Can I change the Transaction ID once it has been saved?</h6>
|
||||
<ul>
|
||||
<li>You can edit the transaction ID after saving also</li>
|
||||
<li>Editing Must be before the appropriate date</li>
|
||||
</ul>
|
||||
<p>more info : tscb178@gmail.com</p>
|
||||
|
||||
<div style="text-align: right;">
|
||||
<a style="color: #46AC9E;cursor: pointer;" (click)="closeDialog()">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
@ -0,0 +1,6 @@
|
||||
|
||||
.md-dialog-container {
|
||||
background-color: #000;
|
||||
width: 600px;
|
||||
height: 600px
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { QrPaymentComponent } from './qr-payment.component';
|
||||
|
||||
describe('QrPaymentComponent', () => {
|
||||
let component: QrPaymentComponent;
|
||||
let fixture: ComponentFixture<QrPaymentComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ QrPaymentComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(QrPaymentComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,167 @@
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import * as QRCode from 'qrcode';
|
||||
import { PaymentInfoDto } from 'src/app/_dto/payment-info.dto';
|
||||
import { apiUrl } from 'src/app/_providers/_resources/api-url.properties';
|
||||
import { ErrorTranslateService } from 'src/app/_providers/_services/error-translate.service';
|
||||
import { MasterService } from 'src/app/_providers/_services/master.service';
|
||||
import { UiService } from 'src/app/_providers/_services/ui.service';
|
||||
import { environment } from 'src/environments/environment.prod';
|
||||
|
||||
@Component({
|
||||
selector: 'app-qr-payment',
|
||||
templateUrl: './qr-payment.component.html',
|
||||
styleUrls: ['./qr-payment.component.scss']
|
||||
})
|
||||
export class QrPaymentComponent implements OnInit {
|
||||
|
||||
secuLevel: string;
|
||||
|
||||
userId: string;
|
||||
|
||||
tenderId: number;
|
||||
|
||||
transactionData: PaymentInfoDto;
|
||||
|
||||
amountReq: any;
|
||||
|
||||
dialogRef: any;
|
||||
|
||||
paymentStatus: any;
|
||||
|
||||
paymentId: any;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private _ui: UiService,
|
||||
private _errorTranslate: ErrorTranslateService,
|
||||
private _masterService: MasterService,
|
||||
private dialog: MatDialog,
|
||||
private datePipe: DatePipe
|
||||
) {
|
||||
this.secuLevel = localStorage.getItem('seculevel');
|
||||
this.userId = localStorage.getItem('userId');
|
||||
this.tenderId = +this.route.snapshot.paramMap.get('id');
|
||||
}
|
||||
|
||||
qrImage: boolean = false;
|
||||
|
||||
transId: any
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.transactionData = new PaymentInfoDto()
|
||||
|
||||
this.getData();
|
||||
}
|
||||
|
||||
|
||||
// ngAfterViewInit(): void {
|
||||
|
||||
// setTimeout(() => {
|
||||
// }, 1000);
|
||||
// }
|
||||
|
||||
getData() {
|
||||
this._masterService.getMasterDatabyId(apiUrl.getTender, this.tenderId).then(res => {
|
||||
this.amountReq = res.tenderFee;
|
||||
this.generateUPIQRCode(environment.upiId, this.amountReq);
|
||||
|
||||
})
|
||||
this.paymentCheck();
|
||||
|
||||
}
|
||||
|
||||
paymentCheck() {
|
||||
this._masterService.getMasterDatabyId(apiUrl.paymentUserCheck + `/${this.userId}`, this.tenderId).then(res => {
|
||||
console.log(res);
|
||||
if (res && res[0].status) {
|
||||
if (res[0].status == 'P') {
|
||||
this.paymentStatus = 'Pending'
|
||||
}
|
||||
if (res[0].status == 'D') {
|
||||
this.paymentStatus = 'Declined'
|
||||
}
|
||||
if (res[0].status == 'S') {
|
||||
this.paymentStatus = 'Success'
|
||||
}
|
||||
this.paymentId = res[0].id
|
||||
}
|
||||
|
||||
}, err => {
|
||||
if (err.error.message.trim() == "User Payment Not Found") {
|
||||
this.paymentStatus = 'Payment Not Started'
|
||||
this.transactionData.status = 'P'
|
||||
}
|
||||
})
|
||||
}
|
||||
generateUPIQRCode(upiID: string, amount: string): void {
|
||||
const upiLink = `upi://pay?pa=${upiID}&am=${amount}&tn=Tender%20Fee`;
|
||||
|
||||
QRCode.toDataURL(upiLink, { errorCorrectionLevel: 'L' }, (err, qrDataURL) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
// console.log('url==', qrDataURL);
|
||||
|
||||
const qrImageElement = document.getElementById('qrImage') as HTMLImageElement;
|
||||
qrImageElement.src = qrDataURL;
|
||||
this.qrImage = true
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
openHelpDialog(templateRef) {
|
||||
this.dialogRef = this.dialog.open(templateRef, {
|
||||
width: '700px',
|
||||
disableClose: false
|
||||
});
|
||||
}
|
||||
|
||||
closeDialog() {
|
||||
this.dialogRef.close()
|
||||
}
|
||||
|
||||
preSave() {
|
||||
|
||||
if (this.transactionData.transId == 0 || this.transactionData.transId == null || this.transactionData.transId == undefined) {
|
||||
this._ui.toastMessage(this._errorTranslate.translate("pleaseEnterTransId"), 2000, true);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
submit() {
|
||||
if (!this.preSave())
|
||||
return
|
||||
|
||||
this.transactionData.userId = this.userId;
|
||||
this.transactionData.tenderId = this.tenderId;
|
||||
// this.transactionData.
|
||||
console.log('this.paymentId==',this.paymentId);
|
||||
|
||||
|
||||
if(this.paymentId){
|
||||
this.transactionData.id = this.paymentId
|
||||
this._masterService.updateMasterData(apiUrl.paymentMaster, this.transactionData,this.paymentId).then(res=>{
|
||||
console.log('res==.',res);
|
||||
this.transactionData = new PaymentInfoDto()
|
||||
this.getData();
|
||||
|
||||
})
|
||||
}
|
||||
else
|
||||
this._masterService.saveMasterData(apiUrl.paymentInfo, this.transactionData).then(res => {
|
||||
console.log(res);
|
||||
this.transactionData = new PaymentInfoDto()
|
||||
this.getData();
|
||||
})
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Loading…
Reference in New Issue