cbsnexora/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.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="container">
  <mat-card>
    <form #accountFormRef [formGroup]="glAccountForm" (ngSubmit)="submit()">
      <mat-card-content>
        <div class="layout-row-wrap gap-2px responsive-column">
          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
            <mat-select required formControlName="type">
              @for (accountType of accountTypeData; track accountType) {
                <mat-option [value]="accountType.id">
                  {{ 'labels.inputs.accounting.' + accountType.value | translate }}
                </mat-option>
              }
            </mat-select>
            @if (
              glAccountForm.controls.type.hasError('required') &&
              (glAccountForm.controls.type.touched || glAccountForm.controls.type.dirty)
            ) {
              <mat-error>
                {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
            <input matInput required formControlName="name" />
            @if (
              glAccountForm.controls.name.hasError('required') &&
              (glAccountForm.controls.name.touched || glAccountForm.controls.name.dirty)
            ) {
              <mat-error>
                {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
            <mat-select required formControlName="usage">
              @for (accountUsage of accountUsageData; track accountUsage) {
                <mat-option [value]="accountUsage.id">
                  {{ accountUsage.value }}
                </mat-option>
              }
            </mat-select>
            @if (
              glAccountForm.controls.usage.hasError('required') &&
              (glAccountForm.controls.usage.touched || glAccountForm.controls.usage.dirty)
            ) {
              <mat-error>
                {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
            <input matInput required formControlName="glCode" />
            @if (
              glAccountForm.controls.glCode.hasError('required') &&
              (glAccountForm.controls.glCode.touched || glAccountForm.controls.glCode.dirty)
            ) {
              <mat-error>
                {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <mifosx-gl-account-selector
            class="flex-48"
            [inputFormControl]="glAccountForm.controls.parentId"
            [glAccountList]="parentData"
            [required]="false"
            [inputLabel]="'Parent'"
          >
          </mifosx-gl-account-selector>

          <mat-form-field class="flex-28">
            <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
            <mat-select formControlName="tagId">
              @for (tag of tagData; track tag) {
                <mat-option [value]="tag.id">
                  {{ tag.name }}
                </mat-option>
              }
            </mat-select>
          </mat-form-field>

          <div class="manual-entries-allowed-wrapper flex-18">
            <mat-checkbox labelPosition="before" formControlName="manualEntriesAllowed" class="manual-entries-allowed">
              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
            </mat-checkbox>
          </div>

          <mat-form-field class="flex-98">
            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
            <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
          </mat-form-field>
        </div>
      </mat-card-content>

      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">
          {{ 'labels.buttons.Cancel' | translate }}
        </button>
        <button
          mat-raised-button
          color="primary"
          [disabled]="!glAccountForm.valid || submitting"
          *mifosxHasPermission="'CREATE_GLACCOUNT'"
        >
          {{ 'labels.buttons.Submit' | translate }}
        </button>
      </mat-card-actions>
    </form>
  </mat-card>
</div>

<ng-template #templateAccountFormRef let-popover="popover">
  <h2>{{ 'labels.heading.Create GL account' | translate }}</h2>
  <p class="mw400">
    {{ 'labels.text.Filling Details' | translate }}
    <a [href]="'chartOfAccountsSetup' | documentationLink" target="_blank" rel="noopener noreferrer">{{
      'labels.inputs.Chart of Accounts' | 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.Create GL Account' | 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>