???File Path ========== ***...\ClientApp\srcpp\src\corporate\corporate-custom-select-data\corporate-custom-select-data.component.ts ???Check the points ================== 1) Check ...\ClientApp\srcpp\srcaseranchranch.component.ts and ...\ClientApp\srcpp\srcase\company\company.component.ts 2) Main Grouping Must -> // @@@@@@@ AREA=> FROM HTML INPUT AREA Called Functions(Not Button bar and List) @@@@@@@@@@@@@@ -> // @@@@@@@ FROM HTML MAIN LIST Called Functions @@@@@@@@@@@@@@ -> // @@@@@@@ AREA=> FROM HTML BUTTON BAR Called Functions @@@@@@@@@@@@@@ -> // @@@@@@@ AREA=> COMMON Functions @@@@@@@@@@@@@@ 3) Set GUI Heading in constructor(Eg:- insGlobalConstants.strGuiHeading = "***";) 4) Set GUI/Menu System Name in constructor(Eg:- insGlobalConstants.strSysModuleName = "***";) based on menu service 5) Set GUI Tittle(Browser Tab) in constructor(Eg:- insGlobalFunctions.fnSetGuiBasedBrowserTitle = "***";) // ??? Check and Use If you need... //--------------------------------- import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild } from '@angular/core'; import { DxDataGridComponent } from "devextreme-angular"; import * as globalConstantsService from '../../../services/global-constants.service'; import * as globalFunctionsService from '../../../services/global-functions.service'; import * as globalDataService from '../../../services/global-data.service'; import * as baseDataService from '../../../services/base/base-data.service'; import * as jspdfService from '../../../services/jspdf.service'; import * as menuService from '../../../services/menu.service'; import { MdlCorporateCustomSelectData, MdlReqCorporateCustomSelectData, MdlResCorporateCustomSelectData, MdlResCorporateCustomSelectDataInit, MdlResCorporateCustomSelectDataList } from '../../../models/corporate/corporate.model'; import { MdlResponse, MdlBaseIntId, MdlReqBaseIntId } from "../../../models/common.model"; import { HttpService } from '../../../services/http.service'; // ??? Check and Use If you need... //--------------------------------- export class CorporateCustomSelectDataComponent implements OnInit, AfterViewInit, OnDestroy { // ** initialize data public mdlCorporateCustomSelectData: MdlCorporateCustomSelectData = new MdlCorporateCustomSelectData(); public intActiveCorporateCustomSelectDataIndex: number = -1; // ** Select and Auto-completion // ??? Remove not use items !!! lstMdlCorporateCustomDataBaseIntId: MdlBaseIntId[] = []; lstMdlCustomerBaseIntId: MdlBaseIntId[] = []; // ** GUI Control public blnBtnDisabled: boolean = false; public blnMoreDivExpanded: boolean = false; // ** CorporateCustomSelectData List @ViewChild('#idDgCorporateCustomSelectDataList') idDgCorporateCustomSelectDataList!: DxDataGridComponent; public lstAllCorporateCustomSelectData: MdlCorporateCustomSelectData[] = []; public blnDgCorporateCustomSelectDataShowFilterRow: boolean = false; public blnDgCorporateCustomSelectDataHeaderFilter: boolean = false; public intActiveCorporateCustomSelectDataListItemIndex = -1; // ??? If you need, import and create instance other common classes !!! constructor(public insGlobalConstants: globalConstantsService.GlobalConstantsService, public insGlobalFunctions: globalFunctionsService.GlobalFunctionsService, public insGlobalData: globalDataService.GlobalDataService, public insBaseData: baseDataService.BaseDataService, private insHttpService: HttpService, public insJspdf: jspdfService.JspdfService) { insGlobalConstants.strGuiHeading = 'corporateCustomSelectData'; // ??? Check menu service !!! insGlobalConstants.strSysModuleName = "CORPORATECUSTOMSELECTDATA_MASTER"; insGlobalFunctions.fnSetGuiBasedBrowserTitle("CorporateCustomSelectData"); } ngOnInit(): void { this.blnBtnDisabled = true; document.body.style.cursor = "wait"; this.fnDefaultView(); // initialize Data Request this.insHttpService.get('Base/Organization/GetCorporateCustomSelectDataInitializeData') .then((mdlResCorporateCustomSelectDataInit: MdlResCorporateCustomSelectDataInit) => { if (mdlResCorporateCustomSelectDataInit.sinStatus == 1) { this.lstMdlCorporateCustomSelectData = mdlResCorporateCustomSelectDataInit.lstMdlCorporateCustomSelectData; // ??? Remove not use items !!! this.lstMdlCorporateCustomDataBaseIntId = mdlResCorporateCustomSelectDataInit.lstMdlCorporateCustomDataBaseIntId; this.lstMdlCustomerBaseIntId = mdlResCorporateCustomSelectDataInit.lstMdlCustomerBaseIntId; } else { console.log(mdlResCorporateCustomSelectDataInit.strMessage + " => " + mdlResCorporateCustomSelectDataInit.strErrorCode + ' -> ' + mdlResCorporateCustomSelectDataInit.strSysError); } }) .catch((err: any) => { console.log("Error->CORPORATECUSTOMSELECTDATA.COMPONENT.TS#001: " + JSON.stringify(err)); }); document.body.style.cursor = "default"; this.blnBtnDisabled = false; } ngAfterViewInit(): void { } ngOnDestroy() { } // @@@@@@@ AREA=> FROM HTML INPUT AREA Called Functions(Not Button bar and List) @@@@@@@@@@@@@ // ??? AUTO/ENTRY COMPLETE - Set Id[, Code, Name] -> OnFocusOut Event // ??? Any caculation/Display Based on user inputs // @@@@@@@@@@@@@@@@@@@@@@@ AREA=> FROM HTML MAIN LIST Called Functions @@@@@@@@@@@@@@@@@@@@@@@@ fnOnCorporateCustomSelectDataListEditButtonClick(objSelRow: any) { this.blnBtnDisabled = true; document.body.style.cursor = "wait"; this.fnSetDataAndGuiEditMode(objSelRow.row.data, objSelRow.row.rowIndex); document.body.style.cursor = "default"; this.blnBtnDisabled = false; } fnOnCorporateCustomSelectDataListRowDblClick(objDblClickRowData: any) { this.blnBtnDisabled = true; document.body.style.cursor = "wait"; this.fnSetDataAndGuiEditMode(objDblClickRowData.data, objDblClickRowData.rowIndex); document.body.style.cursor = "default"; this.blnBtnDisabled = false; } fnOnDgFilterRowEnableDisableClick() { this.blnDgShowFilterRow = !this.blnDgShowFilterRow; } fnOnDgHeadeFilterEnableDisableClick() { this.blnDgHeaderFilter = !this.blnDgHeaderFilter; } // @@@@@@@@@@@@@@@@@@@@@@ AREA=> FROM HTML BUTTON BAR Called Functions @@@@@@@@@@@@@@@@@@@@@@@@ async fnOnSaveButtonClick() { this.blnBtnDisabled = true; document.body.style.cursor = "wait"; this.fnDefaultView(false, true, true, false); // Add or Update try { // Input Validation this.fnInputValidation(this.mdlCorporateCustomSelectData); // Input Data set //.... // Set Save Request Inputs let mdlReqCorporateCustomSelectData: MdlReqCorporateCustomSelectData = new MdlReqCorporateCustomSelectData(); mdlReqCorporateCustomSelectData.mdlCorporateCustomSelectData = JSON.parse(JSON.stringify(this.mdlCorporateCustomSelectData)); // Request Data Reset //.... // Save Request await this.insHttpService.post('Base/Organization/SaveCorporateCustomSelectData', mdlReqCorporateCustomSelectData) .then((mdlResCorporateCustomSelectData: MdlResCorporateCustomSelectData) => { if (mdlResCorporateCustomSelectData.sinStatus == 1) { this.mdlCorporateCustomSelectData = mdlResCorporateCustomSelectData.mdlCorporateCustomSelectData; if (this.intActiveCorporateCustomSelectDataIndex == -1) { // New Item this.intActiveCorporateCustomSelectDataIndex = this.lstMdlCorporateCustomSelectData.length; this.lstMdlCorporateCustomSelectData.push(JSON.parse(JSON.stringify(this.mdlCorporateCustomSelectData))); } else { // Update this.lstMdlCorporateCustomSelectData[this.intActiveCorporateCustomSelectDataIndex] = JSON.parse(JSON.stringify(this.mdlCorporateCustomSelectData)); //this.lstMdlCorporateCustomSelectData.splice(this.intActiveCorporateCustomSelectDataIndex, 1, this.mdlCorporateCustomSelectData); } this.insGlobalConstants.fnSetSuccessMessage(mdlResCorporateCustomSelectData.strMessage); } else { this.insGlobalConstants.fnSetErrorMessage(mdlResCorporateCustomSelectData.strMessage, mdlResCorporateCustomSelectData.strSysError); console.log(mdlResCorporateCustomSelectData); } }) .catch((err: any) => { this.insGlobalConstants.fnSetErrorMessage(JSON.stringify(err)); }); } catch (ex: unknown) { if (ex instanceof Error) { //this.insGlobalConstants.strErrorMessages = ex.message; this.insGlobalConstants.fnSetErrorMessage(ex.message); } console.log("Error->CORPORATECUSTOMSELECTDATA.COMPONENT.TS#002: " + ex); } this.fnDefaultView(false, false, true, false); document.body.style.cursor = "default"; this.blnBtnDisabled = false; } fnOnNewButtonClick() { this.blnBtnDisabled = true; document.body.style.cursor = "wait"; this.fnDefaultView(true, true, true, false); document.body.style.cursor = "default"; this.blnBtnDisabled = false; } async fnOnDeleteButtonClick() { this.blnBtnDisabled = true; document.body.style.cursor = "wait"; this.fnDefaultView(false, true, false, false); // Delete try { // Input Validation if (this.mdlCorporateCustomSelectData.binCorporateCustomSelectDataId == null || this.mdlCorporateCustomSelectData.binCorporateCustomSelectDataId < 1) { throw new Error('Select CorporateCustomSelectData for DELETE.'); } // Set Delete Request Inputs let mdlReqCorporateCustomSelectDataBaseIntId: MdlReqBaseIntId = new MdlReqBaseIntId(); mdlReqCorporateCustomSelectDataBaseIntId.mdlBaseIntId.binPkId = this.mdlCorporateCustomSelectData.binCorporateCustomSelectDataId; mdlReqCorporateCustomSelectDataBaseIntId.mdlBaseIntId.binCustomValue = this.mdlCorporateCustomSelectData.intSysActionId; // Delete Request await this.insHttpService.post('Base/Organization/DeleteCorporateCustomSelectData', mdlReqCorporateCustomSelectDataBaseIntId) .then((mdlResponse: MdlResponse) => { if (mdlResponse.sinStatus == 1) { this.lstMdlCorporateCustomSelectData.splice(this.intActiveCorporateCustomSelectDataIndex, 1); this.fnDefaultView(true, false, false, false); this.insGlobalConstants.fnSetSuccessMessage(mdlResponse.strMessage); } else { this.insGlobalConstants.fnSetErrorMessage(mdlResponse.strMessage, mdlResponse.strSysError); console.log(mdlResponse); } }) .catch((err: any) => { this.insGlobalConstants.fnSetErrorMessage(JSON.stringify(err)); }); } catch (ex: unknown) { if (ex instanceof Error) { this.insGlobalConstants.fnSetErrorMessage(ex.message); } console.log("Error->CORPORATECUSTOMSELECTDATA.COMPONENT.TS#003: " + ex); } document.body.style.cursor = "default"; this.blnBtnDisabled = false; } // @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ AREA=> COMMON Functions @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ fnDefaultView(blnClearData: boolean = true, blnClearMessages: boolean = true, blnMoreDivExpanded: boolean = false, blnGotoBottom: boolean = false) { if (blnClearData) { this.mdlCorporateCustomSelectData = new MdlCorporateCustomSelectData(); this.intActiveCorporateCustomSelectDataIndex = -1; } this.blnMoreDivExpanded = blnMoreDivExpanded; if (blnClearMessages) { this.insGlobalConstants.strErrorMessages = ""; this.insGlobalConstants.strSuccessMessages = ""; } if (!blnGotoBottom) this.insGlobalFunctions.fnWindowScrollTop(); else { this.insGlobalFunctions.fnWindowScrollbottom(); } } fnSetDataAndGuiEditMode(mdlCorporateCustomSelectData: MdlCorporateCustomSelectData, intRowIndex: number) { this.mdlCorporateCustomSelectData = JSON.parse(JSON.stringify(mdlCorporateCustomSelectData)); this.intActiveCorporateCustomSelectDataIndex = intRowIndex; this.fnDefaultView(false, true, true, false); } fnInputValidation(mdlCorporateCustomSelectData: MdlCorporateCustomSelectData) { // ??? CHECK if (mdlCorporateCustomSelectData.binCorporateCustomDataId == 0) { throw new Error('Enter/Select Corporate Custom Data.'); } if (mdlCorporateCustomSelectData.binCustomerId == 0) { throw new Error('Enter/Select Customer.'); } // ??? CHECK CODE and NAME [Other UNIQUE Fields] Already exists }