PaymentDetailsComponent

reference

3 min readUpdated 2026-08-11

Kind: Class

Source: Frontend/src/app/components/payments/payment-details/payment-details.component.ts (line 55)

Part of: Frontend

PaymentDetailsComponent manages the payment-details view in the frontend application. It loads payment records, currencies, and tab state; applies authorization and edit checks; prepares table data; and controls actions such as reset and library opening.

Implements: OnInit, ComponentCanDeactivate

Methods

Method	Signature	Returns
`GetAuthorizationAccess`	`GetAuthorizationAccess(url: string)`	`void`
`checkAllowedToEdit`	`checkAllowedToEdit()`	`void`
`ngOnInit`	`ngOnInit()`	`void`
`getRecord`	`getRecord()`	`void`
`getOpenedTabs`	`getOpenedTabs()`	`void`
`reset`	`reset()`	`void`
`openLibrary`	`openLibrary()`	`void`
`getCurrencies`	`getCurrencies()`	`void`
`fillTableView`	`fillTableView()`	`void`
`disablingAllocatedAmount`	`disablingAllocatedAmount()`	`void`
`fillColumns`	`fillColumns()`	`void`
`cellUpdated_Handler`	`cellUpdated_Handler(e: InvoicesForPayment)`	`void`
`ifInOwnCurrency`	`ifInOwnCurrency(dataField: undefined)`	`boolean`
`displayFormattedCurrency`	`displayFormattedCurrency(value: undefined, dataField: undefined, rowData: undefined)`	`void`
`formatCells`	`formatCells(e: undefined)`	`void`
`getClients`	`getClients()`	`void`
`getPrinciples`	`getPrinciples()`	`void`
`getReceivingMethod`	`getReceivingMethod()`	`void`
`selectText`	`selectText(e: undefined)`	`void`
`applyFilter`	`applyFilter()`	`void`
`onKeyDown`	`onKeyDown(e: KeyboardEvent)`	`void`
`getPaymentByPaymentID`	`getPaymentByPaymentID()`	`void`
`changeTabs`	`changeTabs(targetTab: undefined)`	`void`
`savePayment`	`savePayment(SaveAndLeave: undefined)`	`void`
`ValidatePayment`	`ValidatePayment()`	`boolean`
`SelectAccount`	`SelectAccount(ID: undefined)`	`void`
`DeSelectAccount`	`DeSelectAccount(ID: undefined)`	`void`
`GetInvoicesbyAccountID`	`GetInvoicesbyAccountID(withoutNewAllocated: boolean)`	`void`
`AutomaticAmountDivision`	`AutomaticAmountDivision()`	`void`
`display`	`display(data: undefined)`	`void`
`DataChanged`	`DataChanged()`	`void`
`gridItem_KeyPress_Number`	`gridItem_KeyPress_Number(event: undefined)`	`void`
`chanegRecievingMethod`	`chanegRecievingMethod(e: undefined)`	`void`
`getCurrencyRate`	`getCurrencyRate(currency: CurrencyRate)`	`void`
`currencyChanged`	`currencyChanged(e: undefined)`	`void`
`enteringAmount`	`enteringAmount(e: undefined)`	`void`
`ngOnDestroy`	`ngOnDestroy()`	`void`
`openPopup`	`openPopup(n: string, t: string, i: string, btnTxt: string)`	`void`
`OnOpenedPopup`	`OnOpenedPopup()`	`void`
`savePopup`	`savePopup()`	`void`
`check`	`check()`	`void`
`closePopup`	`closePopup()`	`void`
`saveAndClose`	`saveAndClose()`	`void`
`close`	`close()`	`void`
`leavePage`	`leavePage()`	`void`
`ClosewithDonotSave`	`ClosewithDonotSave()`	`void`
`canDeactivate`	`canDeactivate(nextUrl: RouterStateSnapshot)`	`void`
`changeRateAssistantList`	`changeRateAssistantList(e: undefined, index: number)`	`void`
`selectNumber`	`selectNumber(e: undefined, input: undefined)`	`void`
`disSelectNumber`	`disSelectNumber(e: undefined, input: undefined)`	`void`

Properties

Property	Type
`sharedPopup`	`SharedPopupComponent`
`DataValidator`	`DxValidationGroupComponent`
`FileLibrary`	`FilesComponent`
`attachedDropdown`	`SharedAttachedDocsComponent`
`environment`	`any`
`RelatedToType`	`any`
`displayedInvoices`	`InvoicesForPayment[]`
`allocateddInvoices`	`InvoicesForPayment[]`
`checkChangesInvoices`	`InvoicesForPayment[]`
`allowedtoEdit`	`boolean`
`allowedtoEnableEdit`	`boolean`
`allowedtoNew`	`boolean`
`IsNewPayment`	`boolean`
`paymentID`	`number`
`_passIdAsInput`	`number`
`firstInitialized`	`boolean`
`EnableEditingMode`	`boolean`
`disabledNewAllocation`	`boolean`
`pendingNavigationUrl`	`RouterStateSnapshot`
`popup`	`any`
`scriptPreventionPattern`	`any`
`receivingPaymentMethod`	`ReceivingMethod[]`
`recevingMethodsEnum`	`any`
`ModuleEnumId`	`any`
`LogModuleId`	`any`
`selectedDocs`	`FileData[]`
`payment`	`PaymentDetails`
`oldPayment`	`PaymentDetails`
`CompletelyAllocatedInvoices`	`string[]`
`dataSource`	`any`
`idColumnsName`	`any`
`selectedIDs`	`any[]`
`clientList`	`Client[]`
`principalList`	`Supplier[]`
`NoChange_CanLeave`	`boolean`
`Change_Saved_CanLeave`	`boolean`
`Change_NoSave_WantLeave`	`boolean`
`isLeaving`	`boolean`
`allowleave`	`boolean`
`Changed`	`boolean`
`DateDisplayFormat`	`any`
`salesInvoiceType`	`boolean`
`tabsSwitch`	`string`
`LodingPanalMessage`	`any`
`loadingVisible`	`any`
`subscription`	`Subscription`
`currencyRate`	`CurrencyRate`
`defaultCurrency`	`any`
`isProcessActiveBoolean`	`boolean`
`tViewNewBtn`	`addButton`

Where it refuses work

PaymentDetailsComponent stops the work with an early return when this.allowedtoEdit.
PaymentDetailsComponent stops the work with an early return when this.allowedtoNew.
PaymentDetailsComponent stops the work with an early return when dataField == "TotalAmount" || dataField == "PaidAmount" || dataField == "DeductionAmount"….
PaymentDetailsComponent stops the work with an early return when !this.ValidatePayment().
PaymentDetailsComponent stops the work with an early return when this.NoChange_CanLeave.
PaymentDetailsComponent stops the work with an early return when this.Change_Saved_CanLeave.

Diagram

mermaid
graph LR
    Init[ngOnInit] --> Auth[GetAuthorizationAccess]
    Init --> Record[getRecord]
    Init --> Tabs[getOpenedTabs]
    Init --> Currencies[getCurrencies]

    Record --> Table[fillTableView]
    Table --> Allocation[disablingAllocatedAmount]

    Auth --> Edit[checkAllowedToEdit]
    Edit --> Reset[reset]
    Edit --> Library[openLibrary]

Usage

typescript
import { TestBed } from '@angular/core/testing';
import { PaymentDetailsComponent } from './payment-details.component';

const fixture = TestBed.createComponent(PaymentDetailsComponent);
const component = fixture.componentInstance;

// Initialize payment data and access state.
component.ngOnInit();

// Refresh data when the active payment record changes.
component.getRecord();
component.getCurrencies();
component.fillTableView();

// Apply allocation-related field rules after table data is available.
component.disablingAllocatedAmount();

fixture.detectChanges();

AI Coding Instructions

Keep authorization checks in sync with edit-state behavior through GetAuthorizationAccess() and checkAllowedToEdit().
Load record, tab, and currency data before calling fillTableView() or allocation-related UI logic.
Preserve the reset flow in reset() so payment state and related table state are cleared together.
Route library-opening behavior through openLibrary() rather than adding duplicate dialog or navigation logic.

Used by

2 references from 2 files. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

Imported by (2)

PaymentsComponentsModule — Frontend/src/app/components/payments/payments-components.module.ts:1
PaymentsRoutingModule — Frontend/src/app/components/payments/payments-routing.module.ts:1

Was this page helpful?

Download as PDF

ADocs generated by Atloria — from the code, always in sync →