# PaymentDetailsComponent

**Kind:** Class

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

**Part of:** [Frontend](subsystem-frontend-src-app)

`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