cbsnexora/src/app/organization/currencies/manage-currencies/manage-currencies.component.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/.
-->

<div class="mc-container">
  <!-- Header -->
  <div class="mc-header">
    <button mat-stroked-button [routerLink]="['../']" class="mc-back">
      <i class="fas fa-arrow-left"></i> {{ 'labels.heading.Currency Configuration' | translate }}
    </button>
    <h2 class="mc-header__title">{{ 'labels.buttons.Add/Edit' | translate }}</h2>
  </div>

  <!-- Card -->
  <div class="mc-card">
    <!-- Add Currency Section -->
    <div class="mc-section">
      <div class="mc-section__header">
        <i class="fas fa-plus-circle"></i>
        <h3>{{ 'labels.buttons.Add Currency' | translate }}</h3>
      </div>
      <div class="mc-add" #currencyFormRef>
        <form #formRef="ngForm" [formGroup]="currencyForm" (ngSubmit)="addCurrency()" class="mc-add__form">
          <mat-form-field appearance="outline" class="mc-add__field">
            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
            <mat-select required formControlName="currency">
              <mat-option>
                <ngx-mat-select-search
                  placeholderLabel="{{ placeHolderLabel }}"
                  noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
                  [formControl]="filterFormCtrl"
                ></ngx-mat-select-search>
              </mat-option>
              @for (currency of currencyData | async; track currency) {
                <mat-option [value]="currency"> ({{ currency.code }}) {{ currency.name }} </mat-option>
              }
            </mat-select>
            @if (currencyForm.controls.currency.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <button
            type="submit"
            mat-flat-button
            color="primary"
            class="mc-add__btn"
            [disabled]="!currencyForm.valid"
            [attr.aria-label]="'labels.buttons.Add Currency' | translate"
            [title]="'labels.buttons.Add Currency' | translate"
            *mifosxHasPermission="'UPDATE_CURRENCY'"
          >
            <i class="fas fa-plus"></i> Add
          </button>
        </form>
      </div>
    </div>

    <!-- Selected Currencies Section -->
    <div class="mc-section">
      <div class="mc-section__header">
        <i class="fas fa-coins"></i>
        <h3>Selected Currencies</h3>
      </div>
      <div class="mc-list">
        @for (currency of selectedCurrencies; track currency; let i = $index) {
          <div class="mc-currency">
            <div class="mc-currency__info">
              <span class="mc-currency__code">{{ currency.code }}</span>
              <span class="mc-currency__name">{{ currency.name }}</span>
            </div>
            <button
              type="button"
              mat-icon-button
              class="mc-currency__delete"
              (click)="deleteCurrency(currency.code, i)"
              [attr.aria-label]="'labels.buttons.Delete' | translate"
              [title]="'labels.buttons.Delete' | translate"
              *mifosxHasPermission="'UPDATE_CURRENCY'"
            >
              <i class="fas fa-trash"></i>
            </button>
          </div>
        }
        @if (!selectedCurrencies || selectedCurrencies.length === 0) {
          <div class="mc-empty">
            <i class="fas fa-coins"></i>
            <p>No currencies selected</p>
          </div>
        }
      </div>
    </div>
  </div>
</div>

<ng-template #templateCurrencyFormRef let-popover="popover">
  <h4>{{ 'labels.heading.Add Currency Form' | translate }}</h4>
  <p class="mw400">
    {{ 'labels.text.Used to add currency' | translate }}:
    <a [href]="'currencyConfiguration' | documentationLink" target="_blank" rel="noopener noreferrer">{{
      'labels.inputs.Currency Configuration' | translate
    }}</a>
  </p>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close()">
      {{ 'labels.buttons.Add Currency' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>