uoa-repository-manager-service/app/features/administration/forms/verification-rule-form/verification-rule-form.component.html

<div [formGroup]="verificationRuleForm">

  <div class="p-fluid"
       [ngClass]="{'p-formgrid': !dialogLayout}">

    <div class="p-grid">
      <div class="p-field p-col-12 p-lg-6">
        <label for="document-classification">
          Document Classification
        </label>
        <p-dropdown inputId="document-classification"
                    [options]="documentClassificationsList"
                    optionLabel="classificationName"
                    placeholder="Select"
                    formControlName="documentClassification"
                    [disabled]="editMode"
                    (onChange)="documentClassificationSelected($event)">
        </p-dropdown>
        <app-validation-message [control]="verificationRuleForm.get('documentClassification')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>
    </div>

    <div class="p-grid">
      <div class="p-field p-col-12 p-lg-6">
        <label for="ipower-name">
          iPower Client Name
        </label>
        <p-autoComplete id="ipower-name"
                        formControlName="ipowerName"
                        [suggestions]="iPowerClientNameSuggestions"
                        [forceSelection]="true"
                        (completeMethod)="autosuggestIPowerClientName($event)"
                        [disabled]="editMode"
                        (onSelect)="iPowerClientNameSelected($event)">
        </p-autoComplete>
        <app-validation-message [control]="verificationRuleForm.get('ipowerName')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>

      <div class="p-field p-col-12 p-lg-6">
        <label for="ipower-code">
          iPower Client Code
        </label>
        <p-autoComplete id="ipower-code"
                        formControlName="ipowerCode"
                        [suggestions]="iPowerClientCodeSuggestions"
                        [forceSelection]="true"
                        (completeMethod)="autosuggestIPowerClientCode($event)"
                        [disabled]="editMode"
                        (onSelect)="iPowerClientCodeSelected($event)">
        </p-autoComplete>
        <app-validation-message [control]="verificationRuleForm.get('ipowerCode')"
          [validationMessage]="'This field is required.'"
          [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>
    </div>

    <div class="p-grid">
      <div class="p-field p-col-12 p-lg-6">
        <label for="category-name">
          Category Name
        </label>
        <p-autoComplete id="category-name"
                        formControlName="categoryName"
                        [suggestions]="categoryNameSuggestions"
                        [forceSelection]="true"
                        (completeMethod)="autosuggestCategoryName($event)"
                        [disabled]="editMode"
                        (onSelect)="categoryNameSelected($event)">
        </p-autoComplete>
        <app-validation-message [control]="verificationRuleForm.get('categoryName')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>

      <div class="p-field p-col-12 p-lg-6">
        <label for="category-code">
          Category Code
        </label>
        <p-autoComplete id="category-code"
                        formControlName="categoryCode"
                        [suggestions]="categoryCodeSuggestions"
                        [forceSelection]="true"
                        (completeMethod)="autosuggestCategoryCode($event)"
                        [disabled]="editMode"
                        (onSelect)="categoryCodeSelected($event)">
        </p-autoComplete>
        <app-validation-message [control]="verificationRuleForm.get('categoryCode')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>
    </div>

    <div class="p-grid">
      <div class="p-field p-col-12 p-lg-6">
        <label for="document-subclassification">
          Sub-Category Name
        </label>
        <p-dropdown inputId="document-subclassification"
                    [options]="availableDocumentSubclassifications"
                    [disabled]="subCategoryCodeDisabled || editMode"
                    optionLabel="subclassificationName"
                    placeholder="Select a Document Classification first"
                    formControlName="subCategoryCode">
        </p-dropdown>
        <app-validation-message [control]="verificationRuleForm.get('subCategoryCode')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>
    </div>

    <div class="p-grid"
         [ngClass]="{'p-pt-4': (initiallySetFormValue && initiallySetFormValue.id)}">
      <div class="p-field p-col-12 p-lg-6">
        <label for="capturing-verification">
          Capturing Verification
        </label>
        <p-dropdown inputId="capturing-verification"
                    formControlName="capturingVerification"
                    [options]="capturingVerificationsList"
                    optionLabel="capturingVerificationName"
                    placeholder="Select">
        </p-dropdown>
        <app-validation-message [control]="verificationRuleForm.get('capturingVerification')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>

      <div class="p-field p-col-12 p-lg-6">
        <label for="journal-verification">
          Journal Verification
        </label>
        <p-dropdown inputId="journal-verification"
                    formControlName="journalVerification"
                    [options]="journalVerificationsList"
                    optionLabel="journalVerificationName"
                    placeholder="Select">
        </p-dropdown>
        <app-validation-message [control]="verificationRuleForm.get('journalVerification')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>
    </div>

    <div class="p-grid">
      <div class="p-field p-col-12 p-lg-6">
        <label for="confidence-level">
          Confidence Level
        </label>
        <input id="confidence-level"
               type="number"
               pInputText
               formControlName="confidenceLevelMinThreshold">
        <app-validation-message [control]="verificationRuleForm.get('confidenceLevelMinThreshold')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>

      <div class="p-field p-col-12 p-lg-6">
        <label for="alteryx-routine-id">
          Alteryx Routine Name
        </label>
        <input id="alteryx-routine-id"
               type="text"
               pInputText
               formControlName="alteryxRoutineId">
        <app-validation-message [control]="verificationRuleForm.get('alteryxRoutineId')"
                                [validationMessage]="'This field is required.'"
                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">
        </app-validation-message>
      </div>
    </div>

    <div class="p-grid p-jc-center" *ngIf="editMode">
      <div class="p-field p-col-5 p-m-2">
      </div>

      <div class="p-field p-col-5 p-m-2">
        <p-checkbox id="verification-rule-status" name="verification-rule-status"
          [formControl]="verificationRuleForm.get('verificationRuleStatus')" binary="true" label="Rule Status"
          [disabled]="!canEditRuleStatus()">
        </p-checkbox>
      </div>
    </div>

  </div>

</div>