cbsnexora/src/app/accounting/accounting-rules/create-rule/create-rule.component.html

<div class="container">
  <mat-card>
    <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
      <mat-card-content>
        <div class="layout-row-wrap gap-2px responsive-column">
          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
            <input matInput required formControlName="name" />
            @if (accountingRuleForm.controls.name.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Accounting Rule 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.Office' | translate }}</mat-label>
            <mat-select required formControlName="officeId">
              @for (office of officeData; track office) {
                <mat-option [value]="office.id">
                  {{ office.name }}
                </mat-option>
              }
            </mat-select>
            @if (accountingRuleForm.controls.officeId.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <div class="rule-wrapper flex-48 layout-row responsive-column">
            <mat-label class="flex-50"
              >{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label
            >
            <mat-radio-group
              class="flex-50 layout-row gap-5percent radio-group-spacing"
              formControlName="debitRuleType"
            >
              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
              <mat-radio-button value="listOfAccounts">{{
                'labels.inputs.List of Accounts' | translate
              }}</mat-radio-button>
            </mat-radio-group>
          </div>

          @if (accountingRuleForm.controls.debitRuleType.value === 'fixedAccount') {
            <mat-form-field class="flex-48">
              <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
              <mat-select formControlName="accountToDebit">
                @for (glAccount of glAccountData; track glAccount) {
                  <mat-option [value]="glAccount.id">
                    {{ glAccount.name }}
                  </mat-option>
                }
              </mat-select>
            </mat-form-field>
          }

          @if (accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts') {
            <div class="flex-48 layout-row gap-2percent responsive-column">
              <mat-form-field class="flex-50">
                <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
                <mat-select formControlName="debitTags" multiple>
                  @for (debitTag of debitTagData; track debitTag) {
                    <mat-option [value]="debitTag.id">
                      {{ debitTag.name }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <div class="flex-50" ngClass.gt-md="entries-wrapper">
                <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
                  {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
                </mat-checkbox>
              </div>
            </div>
          }

          <div class="rule-wrapper flex-48 layout-row responsive-column">
            <mat-label class="flex-50"
              >{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label
            >
            <mat-radio-group
              class="flex-50 layout-row gap-5-percent radio-group-spacing"
              formControlName="creditRuleType"
            >
              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
              <mat-radio-button value="listOfAccounts">{{
                'labels.inputs.List of Accounts' | translate
              }}</mat-radio-button>
            </mat-radio-group>
          </div>

          @if (accountingRuleForm.controls.creditRuleType.value === 'fixedAccount') {
            <mat-form-field class="flex-48">
              <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
              <mat-select formControlName="accountToCredit">
                @for (glAccount of glAccountData; track glAccount) {
                  <mat-option [value]="glAccount.id">
                    {{ glAccount.name }}
                  </mat-option>
                }
              </mat-select>
            </mat-form-field>
          }

          @if (accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts') {
            <div class="flex-48 layout-row gap-2percent responsive-column">
              <mat-form-field class="flex-50">
                <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
                <mat-select formControlName="creditTags" multiple>
                  @for (creditTag of creditTagData; track creditTag) {
                    <mat-option [value]="creditTag.id">
                      {{ creditTag.name }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <div class="flex-50" ngClass.gt-md="entries-wrapper">
                <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
                  {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
                </mat-checkbox>
              </div>
            </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]="['../../']">
          {{ 'labels.buttons.Cancel' | translate }}
        </button>
        <button
          mat-raised-button
          color="primary"
          [disabled]="!accountingRuleForm.valid"
          *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'"
        >
          {{ 'labels.buttons.Submit' | translate }}
        </button>
      </mat-card-actions>
    </form>
  </mat-card>
</div>