cbsnexora/src/app/centers/create-center/create-center.component.html

<div class="container">
  <mat-card>
    <form [formGroup]="centerForm">
      <mat-card-content>
        <div class="layout-column">
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
            <input matInput required formControlName="name" />
            @if (centerForm.controls.name.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
            @if (centerForm.controls.name.hasError('pattern')) {
              <mat-error>
                {{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
                {{ 'labels.inputs.begin with a special character or number' | translate }}
              </mat-error>
            }
          </mat-form-field>

          <mat-form-field>
            <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 (centerForm.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>

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
            <mat-select formControlName="staffId">
              @for (staff of staffData; track staff) {
                <mat-option [value]="staff.id">
                  {{ staff.displayName }}
                </mat-option>
              }
            </mat-select>
          </mat-form-field>

          <mat-checkbox labelPosition="before" formControlName="active">
            {{ 'labels.inputs.Active' | translate }}
          </mat-checkbox>

          @if (this.centerForm.controls.active.value) {
            <mat-form-field (click)="activationDatePicker.open()">
              <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
              <input
                matInput
                [min]="minDate"
                [max]="maxDate"
                [matDatepicker]="activationDatePicker"
                required
                formControlName="activationDate"
              />
              <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #activationDatePicker></mat-datepicker>
              @if (centerForm.controls.activationDate.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          }

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
            <input matInput formControlName="externalId" />
          </mat-form-field>

          <mat-form-field (click)="submittedOnDatePicker.open()">
            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
            <input
              matInput
              [min]="minDate"
              [max]="maxDate"
              [matDatepicker]="submittedOnDatePicker"
              required
              formControlName="submittedOnDate"
            />
            <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #submittedOnDatePicker></mat-datepicker>
            @if (centerForm.controls.submittedOnDate.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Select and Add groups' | translate }}</mat-label>
            <mat-select [formControl]="groupChoice">
              @for (group of groupsData; track group) {
                <mat-option [value]="group">
                  {{ group.name }}
                </mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>

        <div class="layout-row">
          @if (groupChoice.value) {
            <div class="mat-table">
              <div class="mat-header-row">
                <div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
                <button mat-icon-button (click)="addGroup()">
                  <fa-icon icon="plus"></fa-icon>
                </button>
              </div>
              <div class="mat-row">
                <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
                <div class="mat-cell">{{ groupChoice.value.name }}</div>
              </div>
              <div class="mat-row">
                <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
                <div class="mat-cell">{{ groupChoice.value.id }}</div>
              </div>
              <div class="mat-row">
                <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
                <div class="mat-cell">{{ groupChoice.value.officeName }}</div>
              </div>
            </div>
          }

          @if (groupMembers.length) {
            <mat-nav-list>
              <h3 matSubheader>{{ 'labels.heading.Selected Groups' | translate }}</h3>
              @for (group of groupMembers; track group; let i = $index) {
                <div mat-list-item>
                  <button mat-icon-button (click)="removeGroup(i)">
                    <fa-icon icon="trash"></fa-icon>
                  </button>
                  <span matLine>{{ group.name }}</span>
                </div>
              }
            </mat-nav-list>
          }
        </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]="!centerForm.valid"
          (click)="submit()"
          *mifosxHasPermission="'CREATE_CENTER'"
        >
          {{ 'labels.buttons.Submit' | translate }}
        </button>
      </mat-card-actions>
    </form>
  </mat-card>
</div>