VNMS/vnms_admin_fe
VNMS/vnms_admin_fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

searchable dropdown added

Browse Source
This commit is contained in:
venbaittech 2025-02-26 11:57:13 +05:30
parent 93dd41ba10
commit dc9919bf26
9 changed files with 368 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
VNMS_Frontend-live-26-02-2025.zip Normal file
View File

Binary file not shown.

35
src/app/pages/drivery-sheet/drivery-sheet.component.html
View File

@ -43,14 +43,45 @@
autocomplete="off"
[(ngModel)]="selectedDateRange"
name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
<nb-select selected="" style="width: 100% !important;margin-left: 2rem;" >
<nb-select [custom]="true" placeholder="Select Drivers" [autoClose]="false" style="width: 100% !important;margin-left: 2rem;">
<!-- Search Input -->
<nb-option>
<input
nbInput
placeholder="Search Driver..."
[(ngModel)]="searchQuery"
(ngModelChange)="filterDrivers()"
(click)="$event.stopPropagation()"
(keydown)="$event.stopPropagation()"
(keydown.arrowdown)="$event.preventDefault()"
(keydown.arrowup)="$event.preventDefault()"
(keydown.enter)="$event.preventDefault()"
autocomplete="off"
style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
/>
</nb-option>
<!-- Display Filtered Options -->
<nb-option
*ngFor="let user of filteredDrivers; index as i"
[value]="user.id"
(click)="val(user)"
>
{{ user.userName }}
</nb-option>
</nb-select>
<!-- <nb-select selected="" style="width: 100% !important;margin-left: 2rem;" >
<nb-option value="">Select Drivers</nb-option>
<nb-option *ngFor="let user of drivers; index as i; first as isFirst " (click)="val(user)" [value]="user.id
">{{user.userName }}</nb-option>
</nb-select>
</nb-select> -->
<button (click)="generate()" nbButton status="primary" style="margin-left: 2rem;" hero>
generate
</button>

30
src/app/pages/drivery-sheet/drivery-sheet.component.ts
View File

@ -20,8 +20,21 @@ export class DriverySheetComponent implements OnInit {
// moment().subtract(1, 'month').endOf('month')
// ]
};productDeatils:any =[]; DateDisplay:any =[];driverName:any =[]; selectDate:any =[]; driverId:any =[];
selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
};
productDeatils:any =[];
DateDisplay:any =[];
driverName:any =[];
selectDate:any =[];
driverId:any =[];
selectedDateRange:any =[];
drivers:any =[];
filteredDrivers: any[] = []; // Search query
searchQuery: string = '';
summaryaData:any=[];
driverval:any=[];
returnSummary:any =[];
constructor(public _api:PageapiService, private router:Router) { }
ngOnInit(): void {
@ -67,6 +80,18 @@ export class DriverySheetComponent implements OnInit {
return acc;
}, []);
}
// Filter customers based on search input
filterDrivers() {
if (this.searchQuery.trim() === '') {
this.filteredDrivers = [...this.drivers];
} else {
this.filteredDrivers = this.drivers.filter(user =>
user.userName?.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}
getDriverlistApi(){
// console.log(this.selectedDateRange)
let param ={}
@ -87,6 +112,7 @@ export class DriverySheetComponent implements OnInit {
this.drivers = driver
this.filteredDrivers = [...this.drivers];
// console.log(data)
}

111
src/app/pages/order/order-form/order-form.component.html
View File

@ -31,15 +31,41 @@
<div>
<label for="exampleInputEmail1" class="label">Customer</label> <br />
<span *ngIf="fieldTitle == 'View Order'">{{selectCustomer}}</span>
<nb-select selected="" [(ngModel)]="selectCustomer" *ngIf="fieldTitle != 'View Order'" [disabled]="fieldTitle =='Edit Order' ">
<!-- {{filteredCustomers | json}} -->
<nb-select
[(selected)]="selectCustomer"
[(ngModel)]="selectCustomer"
*ngIf="fieldTitle != 'View Order'"
[disabled]="fieldTitle == 'Edit Order'"
[custom]="true" placeholder="Select Customer" [autoClose]="false">
<nb-option value="" hidden>Select Customer</nb-option>
<!-- Search Input -->
<nb-option>
<input
nbInput
placeholder="Search Customer..."
[(ngModel)]="searchQuery"
(ngModelChange)="filterCustomers()"
(click)="$event.stopPropagation()"
(keydown)="$event.stopPropagation()"
(keydown.arrowdown)="$event.preventDefault()"
(keydown.arrowup)="$event.preventDefault()"
(keydown.enter)="$event.preventDefault()"
autocomplete="off"
style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
/>
</nb-option>
<nb-option *ngFor="let user of customer; index as i; first as isFirst " (click)="checkType(user)" [value]="user['CusDetails.cusName']
">{{user['CusDetails.cusName']
}}</nb-option>
<!-- Display Filtered Options -->
<nb-option
*ngFor="let user of filteredCustomers; index as i"
[value]="user['CusDetails.cusName']"
(click)="checkType(user)"
>
{{ user['CusDetails.cusName'] }}
</nb-option>
</nb-select>
</nb-select>
<hr>
<div style="font-size: larger;margin-top: 1rem;margin-bottom: 1rem;"> Shipping Information</div>
<div class="row show-grid" *ngIf="product.length>0">
@ -87,14 +113,42 @@
</nb-select>
<nb-select (ngModelChange)="onSelectChange1($event)" selected="" placeholder="Select Drivers" *ngIf="fieldTitle != 'View Order' && selectStatus == 'Out For Delivery'" [(ngModel)]="selectDriver" style="width: 57% !important;margin-right: 1rem;margin-top: 1rem;" >
<!-- <nb-option value="">Select Drivers</nb-option> -->
<nb-select [custom]="true" [autoClose]="false" placeholder="Select Drivers" *ngIf="fieldTitle != 'View Order' && selectStatus == 'Out For Delivery'" [(ngModel)]="selectDriver" style="width: 57% !important;margin-right: 1rem;margin-top: 1rem;">
<!-- Search Input -->
<nb-option>
<input
nbInput
placeholder="Search Driver..."
[(ngModel)]="searchDriverQuery"
(ngModelChange)="filterDrivers();onSelectChange1($event)"
(click)="$event.stopPropagation()"
(keydown)="$event.stopPropagation()"
(keydown.arrowdown)="$event.preventDefault()"
(keydown.arrowup)="$event.preventDefault()"
(keydown.enter)="$event.preventDefault()"
autocomplete="off"
style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
/>
</nb-option>
<!-- Display Filtered Options -->
<nb-option
*ngFor="let user of filteredDrivers; index as i"
[value]="user.id"
(click)="val(user)"
>
{{ user.userName }}
</nb-option>
</nb-select>
<!-- <nb-select (ngModelChange)="onSelectChange1($event)" selected="" placeholder="Select Drivers" *ngIf="fieldTitle != 'View Order' && selectStatus == 'Out For Delivery'" [(ngModel)]="selectDriver" style="width: 57% !important;margin-right: 1rem;margin-top: 1rem;" >
<nb-option *ngFor="let user of drivers; index as i; first as isFirst " [value]="user.id
">{{user.userName }}</nb-option>
</nb-select>
</nb-select> -->
<input nbInput *ngIf="fieldTitle != 'View Order' && selectStatus == 'Cancelled'" [(ngModel)]="CancelReason" placeholder="Reason" style=" margin-right: 2%;margin-top: 1rem;" id="text"> <br />
<button *ngIf="fieldTitle != 'View Order'" [disabled]="hiddenBtn" (click)="onSubmit2()" style="margin-top: 1rem;" type="submit" nbButton status="success" hero>
Save
@ -161,15 +215,46 @@
<div class="col-6 col-md-3">
<div >
<nb-select placeholder="Select Product" [(ngModel)]="fieldGroup.id" style="width: 100% !important;margin-right: 1rem;" [disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false" (ngModelChange)="onDropdownChange($event)" >
<!-- <nb-option value="">Select Drivers</nb-option> -->
<!-- (click)="onProductSelect(user.id,user.productName)" -->
<nb-select [custom]="true" [autoClose]="false" placeholder="Select Product"
[(ngModel)]="fieldGroup.id"
style="width: 100% !important; margin-right: 1rem;"
[disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false"
(ngModelChange)="onDropdownChange($event)">
<!-- Search Input -->
<nb-option>
<input
nbInput
placeholder="Search Product..."
[(ngModel)]="searchProductQuery"
(ngModelChange)="filterProduct()"
(click)="$event.stopPropagation()"
(keydown)="$event.stopPropagation()"
(keydown.arrowdown)="$event.preventDefault()"
(keydown.arrowup)="$event.preventDefault()"
(keydown.enter)="$event.preventDefault()"
autocomplete="off"
style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
/>
</nb-option>
<!-- Display Filtered Options -->
<nb-option
*ngFor="let user of filteredProducts; index as i"
[value]="user.id"
(click)="val(user)">
{{user.productName}} ({{user.skuId}})
</nb-option>
</nb-select>
<!-- <nb-select placeholder="Select Product" [(ngModel)]="fieldGroup.id" style="width: 100% !important;margin-right: 1rem;" [disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false" (ngModelChange)="onDropdownChange($event)" >
<nb-option *ngFor="let user of checkProductArray(); index as i; first as isFirst" [value]="user.id">
{{user.productName}}({{user.skuId }} )
</nb-option>
</nb-select>
</nb-select> -->
<!-- <label for="subject" style=" font-weight: 600;">Mixed Gas {{i+1}}:</label> -->
</div>

107
src/app/pages/order/order-form/order-form.component.ts
View File

@ -31,9 +31,15 @@ class Invoice{
})
export class OrderFormComponent implements OnInit {
customer:any =[];
product:any =[];ResultDisplay:any =[];
// Filtered customer list for display
filteredCustomers: any[] = []; // Search query
searchQuery: string = '';
product:any =[];
ResultDisplay:any =[];
// Selected customer
selectCustomer: string | null = null;
mixedGas:any =[];productfull:any=[];
selectCustomer:any ="";
// selectCustomer:any ="";
items = [
{ label: 'Item 1', quantity: 0 },
{ label: 'Item 2', quantity: 0 },
@ -54,7 +60,10 @@ fieldTitle:any ='New Order'
preventDuplicates = false;
status: NbComponentStatus = 'primary';
inputFieldGroups:any = [{id:'', qty: '1', productSpec: '' , productName : '' }];
selectCustomerData :any =[];selectStatus:any =[];CancelReason:any =[];selectDriver:any =[];drivers:any =[];
selectCustomerData :any =[];selectStatus:any =[];CancelReason:any =[];selectDriver:any =[];
drivers:any =[];
filteredDrivers: any[] = []; // Search query
searchDriverQuery: string = '';
invoice = new Invoice();
hiddenBtn= false;
dropdown_data: any = null;
@ -62,6 +71,8 @@ fieldTitle:any ='New Order'
selectedProductId: number | undefined = null;
addFormBtn: any;
selectedProductName: any;
filteredProducts: any[] = [];
searchProductQuery: string = '';
constructor(private dialogService: NbDialogService,private route :ActivatedRoute,private router: Router,public _api:PageapiService,private toastrService: NbToastrService,private service: SmartTableData ,private windowService: NbWindowService) {
this._api.orderDetails_observable$.subscribe((res) => {
@ -144,6 +155,19 @@ fieldTitle:any ='New Order'
}
// Filter customers based on search input
filterCustomers() {
if (this.searchQuery.trim() === '') {
this.filteredCustomers = [...this.customer];
} else {
this.filteredCustomers = this.customer.filter(user =>
user['CusDetails.cusName']
?.toLowerCase()
.includes(this.searchQuery.toLowerCase())
);
}
}
@ -162,6 +186,7 @@ fieldTitle:any ='New Order'
});
console.log(customer)
this.customer = customer
this.filteredCustomers = [...this.customer];
if( Object.keys(this.setData).length != 0){
localStorage.setItem('cusId', this.setData['OrderDetails.CusDetails.id'])
localStorage.setItem('driverId',this.setData.driverId)
@ -234,6 +259,8 @@ fieldTitle:any ='New Order'
this.product = product
this.filteredProducts = [...this.product];
console.log(this.product)
// this.productfull = product
if(this.setData != undefined){
@ -814,6 +841,7 @@ getDriverlistApi(){
this.drivers = driver
this.filteredDrivers = [...this.drivers];
if(this.setData != undefined){
if( Object.keys(this.setData).length != 0){
this.selectDriver = parseInt(this.setData.driverId)
@ -823,6 +851,17 @@ getDriverlistApi(){
})
}
// Filter customers based on search input
filterDrivers() {
if (this.searchDriverQuery.trim() === '') {
this.filteredDrivers = [...this.drivers];
} else {
this.filteredDrivers = this.drivers.filter(user =>
user.userName?.toLowerCase().includes(this.searchDriverQuery.toLowerCase())
);
}
}
onSelectChange(newValue: string) {
// Handle the selected value change here
@ -928,6 +967,8 @@ onSubmit2(){
// })
}
onDropdownChange(event: any) {
// Find the selected product in the array and get its name
const selectedProduct = this.checkProductArray().find(product => product.id === event);
@ -945,28 +986,64 @@ onDropdownChange(event: any) {
});
}
// checkProductArray() {
// // console.log(this.inputFieldGroups)
// const hasNullId = this.inputFieldGroups.some((group) => group.id === null);
// // console.log(hasNullId)
// if (!hasNullId) {
// // There's an object with id = null in the inputFieldGroups array
// // console.log('There is an object with id = null');
// return this.product;
// } else {
// // There is no object with id = null in the inputFieldGroups array
// // Filter products based on the condition (productName !== 'Mixed Gas' in inputFieldGroups)
// const filteredProducts = this.product.filter((product) => {
// const isSelected = this.inputFieldGroups.some((group) => group.id === product.id );
// return product.productName === 'Mixed Gas' || !isSelected;
// });
// return filteredProducts;
// }
// }
checkProductArray() {
// console.log(this.inputFieldGroups)
const hasNullId = this.inputFieldGroups.some((group) => group.id === null);
// console.log(hasNullId)
let filteredProducts;
if (!hasNullId) {
// There's an object with id = null in the inputFieldGroups array
// console.log('There is an object with id = null');
return this.product;
filteredProducts = [...this.product];
} else {
// There is no object with id = null in the inputFieldGroups array
// Filter products based on the condition (productName !== 'Mixed Gas' in inputFieldGroups)
const filteredProducts = this.product.filter((product) => {
const isSelected = this.inputFieldGroups.some((group) => group.id === product.id );
filteredProducts = this.product.filter((product) => {
const isSelected = this.inputFieldGroups.some((group) => group.id === product.id);
return product.productName === 'Mixed Gas' || !isSelected;
});
return filteredProducts;
}
// Apply search filtering
if (this.searchProductQuery.trim() !== '') {
return filteredProducts.filter(product =>
product.productName?.toLowerCase().includes(this.searchProductQuery.toLowerCase()) ||
product.skuId?.toString().toLowerCase().includes(this.searchProductQuery.toLowerCase())
);
}
return filteredProducts;
}
filterProduct() {
if (this.searchProductQuery.trim() === '') {
this.filteredProducts = this.checkProductArray();
} else {
this.filteredProducts = this.checkProductArray().filter(product =>
product.productName?.toLowerCase().includes(this.searchProductQuery.toLowerCase()) ||
product.skuId?.toString().toLowerCase().includes(this.searchProductQuery.toLowerCase())
);
}
}
addInputFieldGroup() {
if(this.fieldTitle != 'New Order'){
console.log(this.product)
@ -974,6 +1051,8 @@ addInputFieldGroup() {
console.log(activeProductList)
this.product = activeProductList
}
this.searchProductQuery = ''
this.filteredProducts = this.product
// this.inputFieldGroups.push({id:null, qty: '1', productSpec: '' });
// Add a new input field group to the array
const newGroup = { id: null, qty: 1, productSpec: '', isNew: true , productName : '' };

33
src/app/pages/return-sheet/return-sheet.component.html
View File

@ -44,14 +44,43 @@
[(ngModel)]="selectedDateRange"
name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
<nb-select selected="" style="width: 100% !important;margin-left: 2rem;" >
<nb-select [custom]="true" placeholder="Select Drivers" [autoClose]="false" style="width: 100% !important;margin-left: 2rem;">
<!-- Search Input -->
<nb-option>
<input
nbInput
placeholder="Search Driver..."
[(ngModel)]="searchQuery"
(ngModelChange)="filterDrivers()"
(click)="$event.stopPropagation()"
(keydown)="$event.stopPropagation()"
(keydown.arrowdown)="$event.preventDefault()"
(keydown.arrowup)="$event.preventDefault()"
(keydown.enter)="$event.preventDefault()"
autocomplete="off"
style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
/>
</nb-option>
<!-- Display Filtered Options -->
<nb-option
*ngFor="let user of filteredDrivers; index as i"
[value]="user.id"
(click)="val(user)"
>
{{ user.userName }}
</nb-option>
</nb-select>
<!-- <nb-select selected="" style="width: 100% !important;margin-left: 2rem;" >
<nb-option value="">Select Drivers</nb-option>
<nb-option *ngFor="let user of drivers; index as i; first as isFirst " (click)="val(user)" [value]="user.id
">{{user.userName }}</nb-option>
</nb-select>
</nb-select> -->
<button (click)="generate()" style="margin-left: 2rem;" nbButton status="primary" hero>
generate
</button>

20
src/app/pages/return-sheet/return-sheet.component.ts
View File

@ -23,7 +23,11 @@ export class ReturnSheetComponent implements OnInit {
// ]
};productDeatils:any =[]; DateDisplay:any =[];driverName:any =[]; selectDate:any =[]; driverId:any =[];
selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
selectedDateRange:any =[];
drivers:any =[];
filteredDrivers: any[] = []; // Search query
searchQuery: string = '';
summaryaData:any=[];driverval:any=[];returnSummary:any =[];
constructor(public _api:PageapiService, private router:Router) { }
ngOnInit(): void {
@ -69,6 +73,19 @@ export class ReturnSheetComponent implements OnInit {
return acc;
}, []);
}
// Filter customers based on search input
filterDrivers() {
if (this.searchQuery.trim() === '') {
this.filteredDrivers = [...this.drivers];
} else {
this.filteredDrivers = this.drivers.filter(user =>
user.userName?.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}
getDriverlistApi(){
// console.log(this.selectedDateRange)
let param ={}
@ -89,6 +106,7 @@ export class ReturnSheetComponent implements OnInit {
this.drivers = driver
this.filteredDrivers = [...this.drivers];
// console.log(data)
}

34
src/app/pages/summary-list/summary-list.component.html
View File

@ -44,14 +44,42 @@
autocomplete="off"
[(ngModel)]="selectedDateRange"
name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
<nb-select selected="" style="width: 100% !important;margin-left: 2rem;" >
<nb-select [custom]="true" placeholder="Select Drivers" [autoClose]="false" style="width: 100% !important;margin-left: 2rem;">
<!-- Search Input -->
<nb-option>
<input
nbInput
placeholder="Search Driver..."
[(ngModel)]="searchQuery"
(ngModelChange)="filterDrivers()"
(click)="$event.stopPropagation()"
(keydown)="$event.stopPropagation()"
(keydown.arrowdown)="$event.preventDefault()"
(keydown.arrowup)="$event.preventDefault()"
(keydown.enter)="$event.preventDefault()"
autocomplete="off"
style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
/>
</nb-option>
<!-- Display Filtered Options -->
<nb-option
*ngFor="let user of filteredDrivers; index as i"
[value]="user.id"
(click)="val(user)"
>
{{ user.userName }}
</nb-option>
</nb-select>
<!-- <nb-select selected="" style="width: 100% !important;margin-left: 2rem;" >
<nb-option value="">Select Drivers</nb-option>
<!-- [(ngModel)]="dId" -->
<nb-option *ngFor="let user of drivers; index as i; first as isFirst " (click)="val(user)" [value]="user.id
">{{user.userName }}</nb-option>
</nb-select>
</nb-select> -->
<button style=" margin-left: 2rem;" (click)="generate()" nbButton status="primary" hero>
generate

26
src/app/pages/summary-list/summary-list.component.ts
View File

@ -23,8 +23,17 @@ export class SummaryListComponent implements OnInit {
// moment().subtract(1, 'month').startOf('month'),
// moment().subtract(1, 'month').endOf('month')
// ]
};selectDate:any =[];driverId:any =[];DateDisplay:any =[];driverName:any =[];
selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
};selectDate:any =[];
driverId:any =[];
DateDisplay:any =[];
driverName:any =[];
selectedDateRange:any =[];
drivers:any =[];
filteredDrivers: any[] = []; // Search query
searchQuery: string = '';
summaryaData:any=[];
driverval:any=[];
returnSummary:any =[];
minimize = false;
maximize = false;
@ -92,6 +101,18 @@ const formattedDate = newDate.toString();
return acc;
}, []);
}
// Filter customers based on search input
filterDrivers() {
if (this.searchQuery.trim() === '') {
this.filteredDrivers = [...this.drivers];
} else {
this.filteredDrivers = this.drivers.filter(user =>
user.userName?.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}
getDriverlistApi(){
// console.log(this.selectedDateRange)
let param ={}
@ -112,6 +133,7 @@ const formattedDate = newDate.toString();
this.drivers = driver
this.filteredDrivers = [...this.drivers];
// console.log(data)
}