<div class="section">
<div class="row form_head">
<h3>Region Master Table</h3>
</div>
<div class="ag_grid">
<ag-grid-angular [rowClass]="rowClass" class="ag-theme-alpine"
style="width:100%; height:426px;"
[rowData]="rowData" (cellValueChanged)="onCellValueChanged($event)"
[columnDefs]="columnDefs" [pagination]=true [paginationPageSize]=9
(gridReady)="onGridReady($event)" [rowClass]="rowClass"
>
</ag-grid-angular>
<div class="add_mat">
<i class="fa fa-plus" aria-hidden="true"
(click)="onFactoryButtonClick($event)" style="cursor: pointer;"></i>
</div>
</div>
</div>
import { Component } from '@angular/core';
import {
GridApi,
GridReadyEvent,
CellValueChangedEvent,
ICellRendererParams,
} from 'ag-grid-community';
import 'ag-grid-enterprise';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { RegionActionComponent } from './region-action/region-action.component';
import { ConfigurationalmasterService } from
'src/app/@shared/services/configurationalmaster.service';
import { RegionDialogComponent } from './region-dialog/region-dialog.component';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-region',
templateUrl: './region.component.html',
styleUrls: ['./region.component.scss']
})
export class RegionComponent {
errorMessage: any;
id: any;
new_region_id: any;
segment_id: any;
rowClass: any;
private gridApi!: GridApi<any>;
rowData: any;
count: any = 0;
segmentData: any = [];
id1: any;
id2: any;
name: any;
allSegmentList:any;
constructor(
private _configurationalMasterService: ConfigurationalmasterService,
public dialog: MatDialog,
private route: Router,
private activetRoute: ActivatedRoute,
private toaster: ToastrService
) {
this.rowClass = 'rowClass';
}
ngOnInit(): void {
this.getRegion();
this.getSegment();
this.activetRoute.queryParams.subscribe((params: any) => {
this.id = params;
console.log(this.id, 'this.id');
this.new_region_id = this.id.new_region_id;
console.log(this.new_region_id, 'this.regionid');
});
}
public columnDefs: any = [
{
headerName: 'S. No',
field: 'new_region_id',
sortable: true,
resizable: true,
wrapHeaderText: true,
autoHeaderHeight: true,
cellClass: 'grid-cell-centered',
flex: 1,
minWidth:150
},
{
headerName: 'Segment',
field: 'segment_name',
sortable: true,
resizable: true,
wrapHeaderText: true,
autoHeaderHeight: true,
cellClass: 'grid-cell-centered',
flex: 1,
minWidth:150,
editable: true,
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: this.segmentData,
},
},
{
headerName: 'Region',
field: 'new_region_name',
sortable: true,
resizable: true,
wrapHeaderText: true,
autoHeaderHeight: true,
cellClass: 'grid-cell-centered',
flex: 1,
minWidth:150,
editable: true,
},
{
headerName: 'Status',
field: 'status',
sortable: true,
resizable: true,
wrapHeaderText: true,
autoHeaderHeight: true,
cellClass: 'grid-cell-centered',
flex: 1,
minWidth:150,
},
{
headerName: 'Action',
field: 'new_region_name',
flex: 1,
minWidth:150,
cellRenderer: RegionActionComponent,
cellRendererParams: {
className: 'mat-blue',
hideRequestButton: true,
hideDetailsButton: false,
hideDownloadIcon: false,
showCustomIcon: false, // Hide attachment icon
},
},
];
getSegment() {
this._configurationalMasterService.getSegment().subscribe((response) => {
console.log(response.data, 'all segment');
this.allSegmentList = response.data;
response.data.forEach((element: any) => {
this.segmentData.push(element.segment_name);
});
this.columnDefs[1].cellEditorParams.values = this.segmentData;
});
}
public cellValue: any;
allSegmentData: any;
reloadCurrentRoute() {
let currentUrl = this.route.url;
this.route.navigateByUrl('/', { skipLocationChange: true }).then(() => {
this.route.navigate([currentUrl]);
});
}
agInit(params: ICellRendererParams): void {
this.cellValue = this.getValueToDisplay(params);
console.log('params', params);
}
getValueToDisplay(params: ICellRendererParams) {
console.log('params', params);
return params.valueFormatted
? params.valueFormatted
: params.data.new_region_id;
}
refresh(params: ICellRendererParams): boolean {
console.log('params', params);
// wrirte code to modify cell
if (params) {
const segment = this.allSegmentData.find(
(e: any) => e.segment_name === params.data.segment_name
);
console.log(segment, 'selected segment');
const data: any = {
segment_id: segment.segment_id,
new_region_name: params.data.new_region_name,
};
console.log('MY DATA', data);
if (params.data.color === null && params.data.color !== '') {
this.createRegion(data);
} else {
const new_region_id: number = Number(params.data.new_region_id);
const segment_id: number = Number(params.data.segment_id);
this.updateSingleRegion(new_region_id, data);
// this.updateSingleCountry(countryss_id,data)
console.log('MY Data', params.data.status);
}
} else {
this.toaster.error(
'Something went wrong please try again',
'Error Message'
);
}
this.cellValue = this.getValueToDisplay(params);
return true;
}
createRegion(data: any) {
// alert("Hellow");
this._configurationalMasterService.createRegion(data).subscribe(
(res: any) => {
console.log(res);
this.toaster.success('Region Created Successfully');
this.reloadCurrentRoute();
},
(err: any) => {
console.log(err);
this.toaster.error(
'Something went wrong please try again',
'Error Message'
);
}
);
}
updateSingleRegion(id: any, data: any) {
this._configurationalMasterService.updateRegion(id, data).subscribe(
(res: any) => {
console.log(res);
this.toaster.success('Region Updated Successfully');
},
(err: any) => {
this.toaster.error(
'Something went wrong please try again',
'Error Message'
);
console.log(err);
}
);
}
onCellValueChanged(event: CellValueChangedEvent) {
console.log(event);
this.id1 = event.data.segment_id;
this.id2 = event.data.new_region_id;
(this.name = event.newValue), console.log('Segment Id1', this.id1);
let sta = event.data;
let sta1 = event.data.segment_id;
console.log('Segment', this.name);
let segment = this.allSegmentList.find((e:any)=> e.segment_name ===
event.data.segment_name)
let reg = this.rowData.find((e:any)=> e.segment_id === event.data.segment_id)
console.log(segment, 'single segment');
console.log(reg, 'single reg');
if (this.name == event.data.segment_name && event.data.segment_id === this.id1)
{
this._configurationalMasterService
.updateSingleSegment(this.id1, sta)
.subscribe(
(res: any) => {
console.log(res);
this.toaster.success('Segment Updated Successfully');
},
(err: any) => {
// this.toaster.error('Something went wrong please try again', 'Error
Message');
console.log(err);
}
);
}
// if (this.name == event.data.status) {
// this._configurationalMasterService
// .updateRegion(this.id2, sta)
// .subscribe(
// (res: any) => {
// console.log(res);
// this.toaster.success('Status Updated Successfully');
// },
// (err: any) => {
// // this.toaster.error('Something went wrong please try again',
'Error Message');
// console.log(err);
// }
// );
// }
}
onGridReady(params: GridReadyEvent) {
this.gridApi = params.api;
console.log(this.gridApi);
}
addRecordToGrid(data: any) {
// if data missing or data has no it, do nothing
if (!data || data.id == null) {
return;
}
const api = this.gridApi;
// do nothing if row is already in the grid, otherwise we would have duplicates
const rowAlreadyInGrid = !!api.getRowNode(data.id);
if (rowAlreadyInGrid) {
console.log('not adding row to avoid duplicates in the grid');
return;
}
const transaction = {
add: [data],
};
api.applyTransaction(transaction);
}
onFactoryButtonClick(e: any) {
this.count++;
if (this.count === 1) {
var button = e.currentTarget,
buttonColor = button.getAttribute('data-color'),
side = button.getAttribute('data-side'),
data = createDataItem(buttonColor);
this.addRecordToGrid(data);
this.gridApi.paginationGoToLastPage();
} else {
this.toaster.warning("can't add without feel");
}
}
onPageSizeChanged() {
var value = (document.getElementById('page-size') as HTMLInputElement)
.value;
this.gridApi.paginationSetPageSize(Number(value));
}
getRegion() {
this._configurationalMasterService.getRegion().subscribe((res: any) => {
this.rowData = res.data;
let data = res.data;
let filterArr:any = []
for(let i=0; i<data.length; i++){
let obj = {...data[i], segment_name:data[i].segment.segment_name};
filterArr.push(obj)
}
console.log(filterArr, 'filterArr');
this.rowData = filterArr
});
}
}
let rowIdSequence = 100;
function createDataItem(color: string) {
const obj = {
id: rowIdSequence++,
color: color,
value1: Math.floor(Math.random() * 100),
value2: Math.floor(Math.random() * 100),
};
return obj;
}
