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

dashboard,dropdown search and payment issue fix

Browse Source
This commit is contained in:
Surendiran 2023-07-13 13:41:25 +05:30
parent 0f82b936a1
commit c8e4b175bb
11 changed files with 218 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ng-seed/Appointmnet_Frontend_Build.zip
View File

Binary file not shown.

15
ng-seed/package-lock.json generated
View File

@ -9904,6 +9904,21 @@
"tslib": "^2.0.0"
}
},
"ngx-mat-select-search": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-3.3.1.tgz",
"integrity": "sha512-U8CnG0ER/Z4WLcvucvzurBHg+WY3Dfr7HCwqSWv3nKG95dXrWCdCG1y34/uCRvv/CPwi7NoS1EoBXA/CNYuCNw==",
"requires": {
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"ngx-perfect-scrollbar": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-10.1.0.tgz",

1
ng-seed/package.json
View File

@ -56,6 +56,7 @@
"ngx-bootstrap": "^10.2.0",
"ngx-color-picker": "^11.0.0",
"ngx-daterangepicker-material": "^5.0.1",
"ngx-mat-select-search": "^3.3.1",
"ngx-perfect-scrollbar": "10.1.0",
"ngx-scrollbar": "^7.5.6",
"ngx-sortablejs": "^3.1.4",

2
ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
View File

@ -63,7 +63,7 @@
</ng-container> -->
<ng-container matColumnDef="paymentStatus">
<th mat-header-cell *matHeaderCellDef class="font-color mat-mob"> Payment Status </th>
<td mat-cell *matCellDef="let row" class="element-spc" [ngClass]="{'positive' :row.paymentStatus == 1,'cancelStatus' : row.paymentStatus == 0}"> <b>{{row.paymentStatus == 1 ? 'Paid' : 'Not Paid'}}</b></td>
<td mat-cell *matCellDef="let row" class="element-spc" [ngClass]="{'positive' :row.paymentStatus == 0,'cancelStatus' : row.paymentStatus == 1}"> <b>{{row.paymentStatus == 0 ? 'Paid' : 'Not Paid'}}</b></td>
</ng-container>
<ng-container matColumnDef="paymentMode">

6
ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
View File

@ -148,12 +148,12 @@
<div style="margin-top: 5px;margin-bottom: 15px;">
<mat-radio-group aria-label="Select an option" formControlName="paymentStatus" required>
<mat-radio-button value="1">Paid</mat-radio-button>
<mat-radio-button value="0" style="margin-left: 10px;">Not Paid</mat-radio-button>
<mat-radio-button value="0">Paid</mat-radio-button>
<mat-radio-button value="1" style="margin-left: 10px;">Not Paid</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field appearance="outline" class="mat-pane" *ngIf="form.get('paymentStatus').value == 1">
<mat-form-field appearance="outline" class="mat-pane" *ngIf="form.get('paymentStatus').value == 0">
<mat-label>Payment Mode</mat-label>
<mat-select placeholder="Select Payment Mode" formControlName="paymentMode" required>
<mat-option value="Cash">Cash</mat-option>

25
ng-seed/src/app/appoinment/business/add-business/add-business.component.html
View File

@ -49,11 +49,11 @@
<mat-select #country
name="country"
id="country"
formControlName="country" noEntriesFoundLabel="'no matching country found'">
formControlName="country" noEntriesFoundLabel="'no matching country found'" #singleSelect>
<mat-option>
<ngx-mat-select-search formControlName="country"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let country of countries" (click)="countryname(country)" [value]="country.name"> {{ country.flag }}&nbsp;&nbsp; {{ country.name }}</mat-option>
<ngx-mat-select-search [formControl]="countrySearchCtrl" ></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let country of filteredCountries | async" (click)="countryname(country)" [value]="country.name"> {{ country.flag }}&nbsp;&nbsp; {{ country.name }}</mat-option>
<mat-option value="invalid">Invalid option</mat-option>
</mat-select>
<mat-error *ngIf="myError('country', 'required')">Country is required</mat-error>
@ -64,9 +64,12 @@
<mat-select #state
name="state"
id="state"
formControlName="state">
<mat-option [value]="null">-- Select Your State --</mat-option>
<mat-option *ngFor="let state of states" (click)="statename(state)" [value]="state.name"> {{ state.name }}</mat-option>
formControlName="state" #singleSelect>
<mat-option>
<ngx-mat-select-search [formControl]="stateSearchCtrl" ></ngx-mat-select-search>
</mat-option>
<!-- <mat-option [value]="null">-- Select Your State --</mat-option> -->
<mat-option *ngFor="let state of filteredStates | async" (click)="statename(state)" [value]="state.name"> {{ state.name }}</mat-option>
<mat-option value="invalid">Invalid option</mat-option>
</mat-select>
<mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
@ -76,9 +79,11 @@
<mat-select #city
name="city"
id="city"
formControlName="city">
<mat-option [value]="null">-- Select Your City --</mat-option>
<mat-option *ngFor="let city of cities" (click)="cityname(city)" [value]="city.name"> {{ city.name }}</mat-option>
formControlName="city" #singleSelect>
<mat-option>
<ngx-mat-select-search [formControl]="citySearchCtrl" ></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let city of filteredCities | async" (click)="cityname(city)" [value]="city.name"> {{ city.name }}</mat-option>
<mat-option value="invalid">Invalid option</mat-option>
</mat-select>
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>

160
ng-seed/src/app/appoinment/business/add-business/add-business.component.ts
View File

@ -9,10 +9,26 @@ import { NotifierService } from 'angular-notifier';
import { environment } from 'environments/environment';
import { map } from 'rxjs/internal/operators/map';
import { Country, State, City } from 'country-state-city';
import { ReplaySubject, Subject } from 'rxjs';
import { MatSelect } from '@angular/material/select';
import { take, takeUntil } from 'rxjs/operators';
export interface UsersData {
name: string;
id: number;
}
export interface countriesName {
name: string;
isoCode: string;
}
export interface statesName {
name: string;
stateCode: string;
}
export interface cityName {
name: string;
cityCode: string;
}
@Component({
selector: 'app-add-business',
@ -43,7 +59,15 @@ export class AddBusinessComponent implements OnInit {
currentFileUpload: any;
countryevent:any=[];
isSubmitting: boolean = false;
private apiUrl = environment.apiEndpoint;
private apiUrl = environment.apiEndpoint;
public countrySearchCtrl: FormControl = new FormControl();
public filteredCountries: ReplaySubject<countriesName[]> = new ReplaySubject<countriesName[]>(1);
public stateSearchCtrl: FormControl = new FormControl();
public filteredStates: ReplaySubject<statesName[]> = new ReplaySubject<statesName[]>(1);
public citySearchCtrl: FormControl = new FormControl();
public filteredCities: ReplaySubject<cityName[]> = new ReplaySubject<cityName[]>(1);
protected _onDestroy = new Subject<void>();
@ViewChild('singleSelect') singleSelect: MatSelect;
constructor(private http: HttpClient,private notifierService: NotifierService,private router: Router,private formBuilder: FormBuilder,
public dialogRef: MatDialogRef<AddBusinessComponent>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
@ -52,6 +76,9 @@ export class AddBusinessComponent implements OnInit {
console.log(this.local_data)
this.action = this.local_data.action;
this.formData= new FormData();
}
get f(){
return this.form.controls;
@ -142,6 +169,22 @@ export class AddBusinessComponent implements OnInit {
this.dialogRef.close();
}
ngOnInit() {
console.log(this.countries)
// this.filteredCountryList.next(this.countries.slice());
this.filteredCountries.next(this.countries.slice());
// listen for search field value changes
this.countrySearchCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterCountries();
});
// if(this.countries.length != 0){
// }
let valData;
if(this.action == 'Add'){
valData= [this.validateUsernameAvailability.bind(this)]
@ -216,6 +259,7 @@ export class AddBusinessComponent implements OnInit {
this.form.patchValue(this.local_data)
// this.filterList()
}
public myError = (controlName: string, errorName: string) =>{
@ -289,6 +333,13 @@ export class AddBusinessComponent implements OnInit {
this.countryevent = country
this.states = State.getStatesOfCountry(country.isoCode);
console.log(country)
console.log(this.states)
this.filteredStates.next(this.states.slice());
this.stateSearchCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterStates();
});
this.form.controls['currency'].setValue(country.currency)
this.selectedCountry = country;
@ -299,7 +350,13 @@ export class AddBusinessComponent implements OnInit {
// console.log($event,$event.value)
this.cities = City.getCitiesOfState( this.countryevent.isoCode, state.isoCode)
console.log(this.cities)
this.selectedState = state;
this.filteredCities.next(this.cities.slice());
this.citySearchCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterCity();
});
this.selectedState = state;
// this.selectedCity = null;
}
@ -308,4 +365,103 @@ export class AddBusinessComponent implements OnInit {
this.selectedCity = city
}
// filterList() {
// console.log(this.countries)
// this.countrySearchCtrl.valueChanges.pipe().subscribe(()=>{
// this.applyFilter(this.countrySearchCtrl.value,this.filteredCountryList,this.countries,'name')
// })
// this.stateSearchCtrl.valueChanges.pipe().subscribe(()=>{
// this.applyFilter(this.stateSearchCtrl.value,this.filteredStateList,this.states.name,'name')
// })
// // this.branchFilterCtrl.valueChanges.pipe().subscribe(()=>{
// // this.applyFilter(this.branchFilterCtrl.value,this.filteredBranchList,this.lenderBranchList,'branch_name')
// // })
// }
// applyFilter(filtered_text,filter_list,raw_list,obj_name) {
// if (!raw_list) {
// return;
// }
// // get the search keyword
// let search = filtered_text;
// if (!search) {
// filter_list.next(raw_list.slice());
// return;
// } else {
// search = search.toLowerCase();
// }
// // filter the banks
// filter_list.next(
// raw_list.filter(bank => bank[obj_name].toLowerCase().indexOf(search) > -1)
// );
// }
/**
* Sets the initial value after the filteredCountries are loaded initially
*/
protected setInitialValue() {
this.filteredCountries.pipe(take(1),takeUntil(this._onDestroy)).subscribe(() => {
this.singleSelect.compareWith = (a:countriesName, b: countriesName) => a && b && a.isoCode === b.isoCode;
});
this.filteredStates.pipe(take(1),takeUntil(this._onDestroy)).subscribe(() => {
this.singleSelect.compareWith = (a:statesName, b: statesName) => a && b && a.stateCode === b.stateCode;
});
this.filteredCities.pipe(take(1),takeUntil(this._onDestroy)).subscribe(() => {
this.singleSelect.compareWith = (a:cityName, b: cityName) => a && b && a.cityCode === b.cityCode;
});
}
protected filterCountries() {
if (!this.countries) {
return;
}
// get the search keyword
let search = this.countrySearchCtrl.value;
if (!search) {
this.filteredCountries.next(this.countries.slice());
return;
} else {
search = search.toLowerCase();
}
// filter the banks
this.filteredCountries.next(this.countries.filter(val => val.name.toLowerCase().indexOf(search) > -1)
);
}
protected filterStates(){
if (!this.states) {
return;
}
// get the search keyword
let search = this.stateSearchCtrl.value;
if (!search) {
this.filteredStates.next(this.states.slice());
return;
} else {
search = search.toLowerCase();
}
// filter the banks
this.filteredStates.next(this.states.filter(val => val.name.toLowerCase().indexOf(search) > -1)
);
}
protected filterCity(){
if (!this.cities) {
return;
}
// get the search keyword
let search = this.citySearchCtrl.value;
if (!search) {
this.filteredCities.next(this.cities.slice());
return;
} else {
search = search.toLowerCase();
}
// filter the banks
this.filteredCities.next(this.cities.filter(val => val.name.toLowerCase().indexOf(search) > -1)
);
}
}

2
ng-seed/src/app/appoinment/business/business.module.ts
View File

@ -10,6 +10,7 @@ import { DemoMaterialModule } from 'app/shared/demo.module';
import { NgScrollbarModule } from 'ngx-scrollbar';
import { AddBusinessComponent } from './add-business/add-business.component';
import { NotifierModule, NotifierOptions } from 'angular-notifier';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
const customNotifierOptions: NotifierOptions = {
@ -68,6 +69,7 @@ const customNotifierOptions: NotifierOptions = {
ScrollingModule,
NgScrollbarModule,
NotifierModule.withConfig(customNotifierOptions),
NgxMatSelectSearchModule
]
})
export class BusinessModule { }

28
ng-seed/src/app/end-user/booking-summary/booking-summary.component.ts
View File

@ -4,6 +4,7 @@ import { Router } from '@angular/router';
import * as html2pdf from 'html2pdf.js'
import { environment } from 'environments/environment';
import { format } from 'date-fns';
import { local } from 'd3';
@ -28,7 +29,13 @@ export class BookingSummaryComponent implements OnInit {
constructor(public end_user:EndUserService,private router:Router,) {
this.logo = localStorage.getItem('logo')
this.busName = localStorage.getItem('busName')
let clickSummaryDetails = localStorage.getItem('goToFirstFirst')
if(clickSummaryDetails == '1'){
this.backRedireact()
} else{
localStorage.setItem('goToFirstFirst','1')
}
// this.end_user.bookedDetails_observable$.subscribe((res) => {
// console.log('booked2', res);
@ -101,15 +108,15 @@ export class BookingSummaryComponent implements OnInit {
// console.log(res)
// let serviceMap = res['data'][0].id
// let time = new Date().toLocaleTimeString()
let param= {
"busId": serviceDetails.busId,
"cusId": appointmentId,
"appoinmentDate": slot_array[0].date,
"userId": serviceDetails.userId,
"appoinmentSlots": JSON.stringify(slot_array[0].slots)
//"servicemap" :this.bookedAppointment_servicemap
}
// let param =paramPay
// let param= {
// "busId": serviceDetails.busId,
// "cusId": appointmentId,
// "appoinmentDate": slot_array[0].date,
// "userId": serviceDetails.userId,
// "appoinmentSlots": JSON.stringify(slot_array[0].slots)
// //"servicemap" :this.bookedAppointment_servicemap
// }
let param =paramPay
console.log(param)
this.end_user.CheckAppoinmentsDetails(param).subscribe(res => {
@ -227,6 +234,7 @@ export class BookingSummaryComponent implements OnInit {
}
Summaryhide(){
this.summary = true;
localStorage.setItem('goToFirstFirst','1')
}
download(){

5
ng-seed/src/app/end-user/customer-info/customer-info.component.ts
View File

@ -68,7 +68,8 @@ export class CustomerInfoComponent implements OnInit {
}
ngOnInit() {
localStorage.setItem('goToFirstFirst','0')
console.log(localStorage.getItem('goToFirstFirst'))
if (performance.navigation.type === 1) {
console.log(0)
// This condition checks if the page is refreshed
@ -475,7 +476,7 @@ this.paymentform = payment;
onclickfun(){
if(this.verifyOTP == 0){
this.getOTP(1)
}

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

@ -7,11 +7,11 @@ export const environment = {
production: false,
environmentName: 'Testing Environment',//Localhost Environment.
// apiEndpoint:'http://venbainfotech.com:5000/api/',
// apiEndpoint:'http://192.168.1.32:8080/api/',
// apiEndpoint:'http://192.168.1.14:8080/api/',
apiEndpoint:'https://dev.venbait.in/appointments/api/',
//EndUser URL
endUserUrl: window.location.origin+'/appointment/#/booking/',
endUserUrl: window.location.origin+'/#/booking/',
mailUrl:window.location.origin,
payment_api_key :'4cb964d4-9ef4-4a25-8f85-a2a13f43cbba',
payment_mode:'TEST',