SNWR037.component.html

<div class="container-fluid">
  <form-header formID="SNWR037"></form-header>

  <mat-tab-group (selectedTabChange)="SelectedTabChange($event)">
    <mat-tab label="Outer case">
      <ng-template matTabContent>
        <div class="form-box">
          <div class="row">
            <div class="col-md-2">
              <mat-form-field class="w-100" floatLabel="always">
                <mat-label>Outer Case Type</mat-label>
                <input matInput autocompleteOff class="can-input text-uppercase" type="text" [(ngModel)]="paramSearchOuter.CASE_TYPE" (change)="autoCompleteCaseType.query()"/>
                <auto-complete-query matSuffix [config]="lookupOuterCaseTypeConfig" [textInput]="paramSearchOuter.CASE_TYPE"
                                      (datacallback)="SetSelectedOuterCaseType($event)" #autoCompleteCaseType></auto-complete-query>
              </mat-form-field>
            </div>
            <div class="col-md-2">
              <button mat-raised-button (click)="Search()">
                <i class="material-icons">search</i>
                Search
              </button>
            </div>
            <div class="col text-right">
              <button mat-raised-button color="secondary" (click)="OpenPrintDialog()" class="mr-1">
                <i class="material-icons">print</i>
                Print Outer Case QRcode
              </button>
              <button mat-raised-button color="primary" (click)="Add()" class="ml-1">
                <i class="material-icons">add</i>
                Add
              </button>
            </div>
          </div>
        </div>
      
        <div class="form-box">
          <div class="row">
            <div class="col-md-12">
              <auto-table tableName="SNWR037" [tableData]="tableDataOuter" [showPagination]="true" (editClick)="Edit($event)" (deleteClick)="Delete($event)"></auto-table>
            </div>
          </div>
        </div>
      </ng-template>
    </mat-tab>

    <mat-tab label="Inner case">
      <ng-template matTabContent>
        <div class="form-box">
          <div class="row">
            <div class="col-md-2">
              <mat-form-field class="w-100" floatLabel="always">
                <mat-label>Inner Case Type</mat-label>
                <input matInput autocompleteOff class="can-input text-uppercase" type="text" [(ngModel)]="paramSearchInner.CASE_TYPE" (change)="autoCompleteInnerCaseType.query()"/>
                <auto-complete-query matSuffix [config]="lookupInnerCaseTypeConfig" [textInput]="paramSearchInner.CASE_TYPE"
                                      (datacallback)="SetSelectedInnerCaseType($event)" #autoCompleteInnerCaseType></auto-complete-query>
              </mat-form-field>
            </div>
            <div class="col-md-2">
              <button mat-raised-button (click)="Search()">
                <i class="material-icons">search</i>
                Search
              </button>
            </div>
            <div class="col text-right">
              <button mat-raised-button color="secondary" (click)="OpenPrintDialog()" class="mr-1">
                <i class="material-icons">print</i>
                Print Inner Case QRcode
              </button>
              <button mat-raised-button color="primary" (click)="Add()" class="ml-1">
                <i class="material-icons">add</i>
                Add
              </button>
            </div>
          </div>
        </div>
      
        <div class="form-box">
          <div class="row">
            <div class="col-md-12">
              <auto-table tableName="SNWR037_INNER" [tableData]="tableDataInner" [showPagination]="true" (editClick)="Edit($event)" (deleteClick)="Delete($event)"></auto-table>
            </div>
          </div>
        </div>
      </ng-template>
    </mat-tab>
  </mat-tab-group>

</div>

<dialog-template hidden iconName="save" #dialogAction>
  <ng-template #content>
    <fieldset class="form-box mt-3">
      <div class="row">
        <div class="col-md-4">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Case Group</mat-label>
            <input type="text" class="can-input" maxlength="20" matInput autocompleteOff required disabled [ngModelOptions]="{updateOn: 'blur'}" 
                    [(ngModel)]="formData.CASE_GROUP_TEXT" [disabled]="true"/>
          </mat-form-field>
        </div>
        <div class="col-md-2" *ngIf="formData.CASE_GROUP == 'OT'">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Can Config</mat-label>
            <mat-select class="can-input" [(ngModel)]="formData.CAN_CONFIG" required>
              <mat-option [value]="'Y'">Yes</mat-option>
              <mat-option [value]="'N'">No</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="col-md-6">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Case Name</mat-label>
            <input type="text" class="can-input text-uppercase" maxlength="20" matInput autocompleteOff required [ngModelOptions]="{updateOn: 'blur'}" 
                    [(ngModel)]="formData.CASE_NAME"/>
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <div class="col-md-5" *ngIf="formData.CASE_GROUP == 'OT'">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Case Type</mat-label>
            <input matInput autocompleteOff class="can-input text-uppercase" type="text" required [(ngModel)]="formData.CASE_TYPE" (change)="autoCompleteTypeListDialog.query()"/>
            <auto-complete-query matSuffix [config]="lookupTypeListConfigDialog" [textInput]="formData.CASE_TYPE"
                                  (datacallback)="SetSelectedTypeListDialog($event)" #autoCompleteTypeListDialog></auto-complete-query>
          </mat-form-field>
        </div>
        <div class="col-md-5" *ngIf="formData.CASE_GROUP == 'IN'">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Case Type</mat-label>
            <input matInput autocompleteOff class="can-input text-uppercase" type="text" [(ngModel)]="formData.CASE_TYPE" (change)="autoCompleteTypeListDialog.query()"/>
            <auto-complete-query matSuffix [config]="lookupInnerTypeListConfigDialog" [textInput]="formData.CASE_TYPE"
                                  (datacallback)="SetSelectedTypeListDialog($event)" #autoCompleteTypeListDialog></auto-complete-query>
          </mat-form-field>
        </div>
        <div class="col-md-7">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Case Type Description</mat-label>
            <input type="text" class="can-input" matInput autocompleteOff [(ngModel)]="formData.CASE_TYPE_DESCRIPTION" disabled/>
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Width (mm)</mat-label>
            <input type="number" class="can-input text-right" min="0" max="99999" maxlength="5" matInput autocompleteOff [ngModelOptions]="{updateOn: 'blur'}" 
              oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" 
                    [(ngModel)]="formData.CASE_WIDTH" [required]="formData.CAN_CONFIG == 'N'"/>
          </mat-form-field>
        </div>
        <div class="col-md-6">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Depth (mm)</mat-label>
            <input type="number" class="can-input text-right" min="0" max="99999" maxlength="5" matInput autocompleteOff  [ngModelOptions]="{updateOn: 'blur'}" 
              oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" 
                  [(ngModel)]="formData.CASE_DEPTH" [required]="formData.CAN_CONFIG == 'N'"/>
          </mat-form-field>
        </div>
        <div class="col-md-6">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Height (mm)</mat-label>
            <input type="number" class="can-input text-right" min="0" max="99999" maxlength="5" matInput autocompleteOff [ngModelOptions]="{updateOn: 'blur'}"
              oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" 
                     [(ngModel)]="formData.CASE_HEIGHT" [required]="formData.CAN_CONFIG == 'N'"/>
          </mat-form-field>
        </div>
        <div class="col-md-6">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>ETG Code</mat-label>
            <input type="text" class="can-input text-uppercase" maxlength="10" matInput autocompleteOff required [ngModelOptions]="{updateOn: 'blur'}"
                     [(ngModel)]="formData.ETG_CODE"/>
          </mat-form-field>
        </div>
      </div>

      <div class="row" *ngIf="formData.TYPE == 'EDIT'">
        <div class="col-md-6">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Update By</mat-label>
            <input class="can-input" type="text" matInput autocompleteOff [(ngModel)]="formData.LAST_UPD_BY" disabled />
          </mat-form-field>
        </div>
        <div class="col-md-6">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Update Date</mat-label>
            <input class="can-input" type="text" matInput autocompleteOff [ngModel]="formData.LAST_UPD_DATE | dateTimeFormat" disabled />
          </mat-form-field>
        </div>
      </div>
    </fieldset>
  </ng-template>

  <ng-template #action>
    <div class="col-md-12">
      <div class="row justify-content-center" *ngIf="formData.TYPE == 'ADD'">
        <div class="col-md-4">
          <button mat-raised-button color="primary" (click)="SaveAdd()" [disabled]="!formData">
            <i class="material-icons">save</i>
            Save
          </button>
        </div>
        <div class="col-md-4">
          <button mat-raised-button (click)="CancelAdd()">
            <i class="material-icons">close</i>
            Cancel
          </button>
        </div>
      </div>
      
      <div class="row justify-content-center" *ngIf="formData.TYPE == 'EDIT'">
        <div class="col-md-4">
          <button mat-raised-button color="primary" (click)="SaveEdit()" [disabled]="!formData">
            <i class="material-icons">save</i>
            Save
          </button>
        </div>
        <div class="col-md-4">
          <button mat-raised-button (click)="CancleEdit()">
            <i class="material-icons">close</i>
            Cancel
          </button>
        </div>
      </div>
    </div>
  </ng-template>
</dialog-template>

<dialog-template hidden iconName="save" #dialogPrint>
  <ng-template #content>
    <fieldset class="form-box mt-3">
      <div class="row">
        <div class="col-md-3">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>ETG Code</mat-label>
            <input type="text" class="can-input text-uppercase" maxlength="20" matInput autocompleteOff [ngModelOptions]="{updateOn: 'blur'}" 
                    [(ngModel)]="formDataPrint.ETG_CODE" disabled/>
          </mat-form-field>
        </div>
        <div class="col-md-3">
          <mat-form-field class="w-100" floatLabel="always">
            <mat-label>Case Type</mat-label>
            <input type="text" class="can-input text-uppercase" maxlength="20" matInput autocompleteOff [ngModelOptions]="{updateOn: 'blur'}" 
                    [(ngModel)]="formDataPrint.CASE_TYPE" disabled/>
          </mat-form-field>
        </div>
        <div class="col-md-4">
          <ng-template [ngIf]="formDataPrint.CASE_GROUP == 'OT'">
            <mat-form-field class="w-100" floatLabel="always">
              <mat-label>{{caseGroup.TEXT}} Name</mat-label>
              <input matInput autocompleteOff required class="can-input" [(ngModel)]="formDataPrint.CASE_NAME" (change)="autoCompleteOuterCaseName.query()" />
              <auto-complete-query matSuffix [config]="lookupOuterCaseNameConfig" [textInput]="formDataPrint.CASE_NAME"
                                   (datacallback)="SetSelectedCaseName($event)" #autoCompleteOuterCaseName></auto-complete-query>
            </mat-form-field>
          </ng-template>
          <ng-template [ngIf]="formDataPrint.CASE_GROUP == 'IN'">
            <mat-form-field class="w-100" floatLabel="always">
              <mat-label>{{caseGroup.TEXT}} Name</mat-label>
              <input matInput autocompleteOff required class="can-input" [(ngModel)]="formDataPrint.CASE_NAME" (change)="autoCompleteInnerCaseName.query()" />
              <auto-complete-query matSuffix [config]="lookupInnerCaseNameConfig" [textInput]="formDataPrint.CASE_NAME"
                                   (datacallback)="SetSelectedCaseName($event)" #autoCompleteInnerCaseName></auto-complete-query>
            </mat-form-field>
          </ng-template>
        </div>
        <div class="col-md-2">
          <mat-form-field class="w-100" floatLabel="always"> 
            <mat-label>No. to print</mat-label>      
            <input type="number" class="can-input text-right" step="1" min="0" max="10000" 
              matInput autocompleteOff [(ngModel)]="formDataPrint.QTY" 
              onchange="this.value = Math.abs(this.value) >= this.max ? Math.abs(this.max) : Math.abs(this.value)">
          </mat-form-field> 
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="w-100 flex-fill" *ngIf="fileUrl">
            <iframe [src]="fileUrl | safe: 'RESOURCE_URL'"
                    style="width: 100%; height: 400px"
                    #iframe></iframe>
          </div>
        </div>
      </div>
    </fieldset>
  </ng-template>
  <ng-template #action>
    <div class="col-md-12">
      <div class="row justify-content-center">
        <div class="col-md-4">
          <button mat-raised-button color="primary" (click)="PreviewCaseNameQRCode()" [disabled]="!formDataPrint.CASE_NAME">
            <i class="material-icons">print</i>
            Preview QR Code
          </button>
          <!-- <button mat-raised-button color="primary" (click)="PrintCaseNameQRCode()" [disabled]="!formDataPrint.CASE_NAME">
            <i class="material-icons">print</i>
            Print
          </button> -->
        </div>
        <div class="col-md-4">
          <button mat-raised-button (click)="dialogPrint.Close();">
            <i class="material-icons">close</i>
            Cancel
          </button>
        </div>
      </div>
    </div>
  </ng-template>
</dialog-template>