cbsnexora/src/app/system/manage-hooks/edit-hook/edit-hook.component.html

<div class="container">
  <mat-card>
    <form [formGroup]="hookForm" (ngSubmit)="submit()">
      <mat-card-content>
        <div class="layout-row-wrap responsive-column gap-4percent">
          <mat-form-field class="flex-40">
            <mat-label>{{ 'labels.inputs.Hook Template' | translate }}</mat-label>
            <mat-select required formControlName="name">
              @for (hookTemplate of hooksTemplateData.templates; track hookTemplate) {
                <mat-option [value]="hookTemplate.name">
                  {{ hookTemplate.name | translateKey: 'text' }}
                </mat-option>
              }
            </mat-select>
            @if (hookForm.controls.name.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <mat-form-field class="flex-40">
            <mat-label>{{ 'labels.inputs.Display Name' | translate }}</mat-label>
            <input matInput required formControlName="displayName" />
            @if (hookForm.controls.displayName.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          <div class="is-active-wrapper">
            <mat-checkbox class="is-active flex-10" labelPosition="before" formControlName="isActive">
              {{ 'labels.inputs.Is Active' | translate }}?
            </mat-checkbox>
          </div>
        </div>

        <div class="layout-row-wrap responsive-column gap-4percent">
          @if (hookForm.controls.name.value === 'Web') {
            <mat-form-field class="flex-fill flex-40">
              <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
              <mat-select required formControlName="contentType">
                <mat-option [value]="'json'">
                  {{ 'labels.inputs.json' | translate }}
                </mat-option>
                <mat-option [value]="'form'">
                  {{ 'labels.inputs.form' | translate }}
                </mat-option>
              </mat-select>
              @if (hookForm.controls.contentType.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          }

          @if (hookForm.controls.name.value === 'SMS Bridge') {
            <mat-form-field class="flex-fill flex-40">
              <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
              <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
              <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
              @if (hookForm.controls.phoneNumber.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          }

          <mat-form-field class="flex-40">
            <mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
            <input matInput required formControlName="payloadUrl" />
            @if (hookForm.controls.payloadUrl.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>
        </div>

        @if (hookForm.controls.name.value === 'SMS Bridge') {
          <div class="layout-row-wrap responsive-column gap-4percent">
            <mat-form-field class="flex-30">
              <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
              <input matInput required formControlName="smsProvider" />
              @if (hookForm.controls.smsProvider.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
            <mat-form-field class="flex-30">
              <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
              <input matInput required formControlName="smsProviderAccountId" />
              @if (hookForm.controls.smsProviderAccountId.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
            <mat-form-field class="flex-30">
              <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
              <input matInput required formControlName="smsProviderToken" />
              @if (hookForm.controls.smsProviderToken.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          </div>
        }

        <br />

        <mat-divider [inset]="true"></mat-divider>

        <br />

        <div class="layout-row-wrap responsive-column">
          <p class="mat-title flex-20">{{ 'labels.inputs.Events' | translate }} <span class="red">*</span></p>

          <button mat-raised-button class="AddEventButton flex-20" type="button" color="primary" (click)="addEvent()">
            <fa-icon icon="plus" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Events' | translate }}
          </button>
        </div>

        <table mat-table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="entityName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity Name' | translate }}</th>
            <td mat-cell *matCellDef="let event">{{ event.entityName }}</td>
          </ng-container>

          <ng-container matColumnDef="actionName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ 'labels.inputs.Action' | translate }} {{ 'labels.inputs.Name' | translate }}
            </th>
            <td mat-cell *matCellDef="let event">{{ event.actionName }}</td>
          </ng-container>

          @if (cannotDeleteLastEvent) {
            <div class="error-message">
              <p>At least one event is required. Cannot delete the last event.</p>
            </div>
          }

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
            <td mat-cell *matCellDef="let i = index">
              <button type="button" color="warn" mat-icon-button (click)="deleteEvent(i)">
                <fa-icon icon="trash" size="lg"></fa-icon>
              </button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </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]="(!hookForm.valid || hookForm.pristine) && !eventsDataChanged"
          *mifosxHasPermission="'UPDATE_HOOK'"
        >
          {{ 'labels.buttons.Submit' | translate }}
        </button>
      </mat-card-actions>
    </form>
  </mat-card>
</div>