136 lines
4.7 KiB
HTML
136 lines
4.7 KiB
HTML
<!--
|
|
Copyright since 2025 Mifos Initiative
|
|
|
|
This Source Code Form is subject to the terms of the Mozilla Public
|
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
-->
|
|
|
|
<!-- Dialog Header -->
|
|
<div class="arc-header">
|
|
<div class="arc-header__icon">
|
|
<mat-icon>person_add</mat-icon>
|
|
</div>
|
|
<div class="arc-header__text">
|
|
<h2 class="arc-header__title">Add Related Client / Partner</h2>
|
|
<p class="arc-header__sub">Search and link an existing client with their ownership share</p>
|
|
</div>
|
|
<button mat-icon-button class="arc-header__close" (click)="cancel()">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<mat-dialog-content>
|
|
<form [formGroup]="form" class="arc-dialog-form">
|
|
<!-- Step 1: Client Search -->
|
|
<div class="arc-step-label">
|
|
<span class="arc-step-badge">1</span>
|
|
<span>Select Client</span>
|
|
</div>
|
|
|
|
<div class="arc-search-section">
|
|
<mat-form-field appearance="outline" class="arc-full-width">
|
|
<mat-label>Search by Name / CIF / Account No</mat-label>
|
|
<mat-icon matPrefix class="arc-search-icon">search</mat-icon>
|
|
<input
|
|
matInput
|
|
formControlName="searchText"
|
|
(input)="onSearchInput($event.target.value)"
|
|
autocomplete="off"
|
|
placeholder="Type at least 2 characters..."
|
|
/>
|
|
@if (isSearching) {
|
|
<mat-progress-spinner matSuffix diameter="18" mode="indeterminate"></mat-progress-spinner>
|
|
}
|
|
@if (selectedClient) {
|
|
<button matSuffix mat-icon-button type="button" (click)="clearSelection()">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<!-- Search Results -->
|
|
@if (searchResults.length > 0) {
|
|
<div class="arc-search-results">
|
|
@for (client of searchResults; track client) {
|
|
<div class="arc-search-result-item" (click)="selectClient(client)">
|
|
<div class="arc-result-avatar">
|
|
{{ (client.displayName || '?')[0].toUpperCase() }}
|
|
</div>
|
|
<div class="arc-result-body">
|
|
<span class="arc-result-name">{{ client.displayName }}</span>
|
|
<span class="arc-result-meta">
|
|
@if (client.cifNumber) {
|
|
<span class="arc-chip">{{ client.cifNumber }}</span>
|
|
}
|
|
@if (client.officeName) {
|
|
<span class="arc-chip">{{ client.officeName }}</span>
|
|
}
|
|
@if (client.status?.value) {
|
|
<span class="arc-chip arc-chip--status" [class.arc-chip--active]="client.status?.id === 300">
|
|
{{ client.status.value }}
|
|
</span>
|
|
}
|
|
</span>
|
|
</div>
|
|
<mat-icon class="arc-result-arrow">chevron_right</mat-icon>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Selected Client Card -->
|
|
@if (selectedClient) {
|
|
<div class="arc-selected-client">
|
|
<div class="arc-selected-avatar">
|
|
{{ (selectedClient.displayName || '?')[0].toUpperCase() }}
|
|
</div>
|
|
<div class="arc-client-info">
|
|
<span class="arc-client-name">{{ selectedClient.displayName }}</span>
|
|
<span class="arc-client-sub">{{ selectedClient.cifNumber || selectedClient.accountNumber || 'N/A' }}</span>
|
|
</div>
|
|
<span class="arc-selected-badge">Selected</span>
|
|
</div>
|
|
}
|
|
|
|
<!-- Step 2: Share Percentage -->
|
|
<div class="arc-step-label arc-step-label--mt">
|
|
<span class="arc-step-badge">2</span>
|
|
<span>Ownership Share</span>
|
|
</div>
|
|
|
|
<div class="arc-share-row">
|
|
<mat-form-field appearance="outline" class="arc-share-field">
|
|
<mat-label>Share Percentage</mat-label>
|
|
<input matInput type="number" formControlName="sharePercentage" min="1" max="100" />
|
|
<span matSuffix class="arc-percent-suffix">%</span>
|
|
<mat-error>Enter a value between 1 and 100</mat-error>
|
|
</mat-form-field>
|
|
|
|
<div class="arc-share-hints">
|
|
@for (hint of [25, 33, 50, 100]; track hint) {
|
|
<button type="button" class="arc-hint-chip" (click)="form.get('sharePercentage').setValue(hint)">
|
|
{{ hint }}%
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="arc-actions">
|
|
<button mat-stroked-button type="button" (click)="cancel()" class="arc-btn-cancel">Cancel</button>
|
|
<button
|
|
mat-flat-button
|
|
color="primary"
|
|
type="button"
|
|
class="arc-btn-add"
|
|
[disabled]="!selectedClient || form.get('sharePercentage').invalid"
|
|
(click)="confirm()"
|
|
>
|
|
<mat-icon>add</mat-icon>
|
|
Add Partner
|
|
</button>
|
|
</mat-dialog-actions>
|