mod2/ui/src/app/ms-add-change/ms-add-change.component.html

   1 <!--
   2   # ============LICENSE_START=======================================================
   3   # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
   4   # ================================================================================
   5   # Licensed under the Apache License, Version 2.0 (the "License");
   6   # you may not use this file except in compliance with the License.
   7   # You may obtain a copy of the License at
   8   #
   9   #      http://www.apache.org/licenses/LICENSE-2.0
  10   #
  11   # Unless required by applicable law or agreed to in writing, software
  12   # distributed under the License is distributed on an "AS IS" BASIS,
  13   # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14   # See the License for the specific language governing permissions and
  15   # limitations under the License.
  16   # ============LICENSE_END=========================================================
  17  -->
  18
  19 <p-dialog *ngIf="visible" [header]="guiHeader" [(visible)]="visible" appendTo="body" [modal]="true" [transitionOptions]="'300ms'"
  20           [closeOnEscape]="false" [closable]="false" [style]="{width: '645px'}" (onHide)="closeDialog()">
  21
  22     <!-- "Add / Change MS" Error Message -->
  23     <p-toast key="msAddChangeError" [style]="{width: '500px'}"></p-toast>
  24
  25     <!-- * * * * * Input fields * * * * * -->
  26     <form [formGroup]="msAddForm" (ngSubmit)="saveMs()" class="bg-faded">
  27         <!-- * * * MS Name * * * -->
  28         <div class="input">
  29             <label class="inputLabel">MS Name<span style="color:red">*</span></label>
  30             <input class="inputFieldMed" type="text" pInputText formControlName="name">
  31         </div>
  32         <!-- * * * MS Tag * * * -->
  33         <div class="input">
  34             <label class="inputLabel">MS Tag<span style="color:red">*</span></label>
  35             <input *ngIf="!currentRow" class="inputFieldMed" type="text" pInputText formControlName="tag">
  36             <!-- If Updating (vs ADDing) the data, the "Tag" is Read-Only -->
  37             <input *ngIf="currentRow" class="inputFieldMed" type="text" pInputText formControlName="tag" style="border:none" readonly>
  38             <!-- * * * (Validation Rules Display) * * * -->
  39             <div class="validationMsg" *ngIf="msAddForm.controls['tag'].invalid &&
  40                                              !msAddForm.value['tag']=='' &&
  41                                               msAddForm.controls['tag'].value.length < 51">
  42                 Format: lowercase alphanumeric with embedded dashes (5-50 characters)
  43             </div>
  44             <!-- * * * (Validation Rule - length > 50) * * * -->
  45             <div class="validationMsg" *ngIf="msAddForm.controls['tag'].value.length > 50">
  46                 MS Tag cannot exceed 50 chars
  47             </div>
  48         </div>
  49         <!-- * * * Service Short Name * * * -->
  50         <div class="input">
  51             <label class="inputLabel">Service Short Name</label>
  52             <input class="inputFieldMed" type="text" pInputText formControlName="serviceName">
  53             <!-- * * * (Validation Rules Display) * * * -->
  54             <div class="validationMsg" *ngIf="msAddForm.controls['serviceName'].invalid &&
  55                                              !msAddForm.value['serviceName']=='' &&
  56                                               msAddForm.controls['serviceName'].value.length < 26">
  57                 Format: lowercase alpha with embedded dashes
  58             </div>
  59             <!-- * * * (Warning! Global vs Central/Edge Service Name length) * * * -->
  60             <div class="validationMsgWarning" *ngIf="msAddForm.controls['serviceName'].valid &&
  61                                                      msAddForm.controls['serviceName'].value.length > 12 &&
  62                                                      msAddForm.controls['serviceName'].value.length < 26">
  63                 Warning! Only Global Site short names can exceed 12 chars (max 25)
  64             </div>
  65             <!-- * * * (Validation Rule - length > 25) * * * -->
  66             <div class="validationMsg" *ngIf="msAddForm.controls['serviceName'].value.length > 25">
  67                 Global Site short names cannot exceed 25 chars
  68             </div>
  69         </div>
  70         <!-- * * * Type * * * -->
  71         <div class="input">
  72             <label class="inputLabel">Type<span style="color:red">*</span></label>
  73             <p-dropdown [options]="types" placeholder="Select Type" optionLabel="type" formControlName="type"></p-dropdown>
  74         </div>
  75         <!-- * * * Location
  76         <div class="input">
  77             <label class="inputLabel">Location<span style="color:red">*</span></label>
  78             <p-dropdown [options]="locations" placeholder="Select Location" optionLabel="location" formControlName="location"></p-dropdown>
  79         </div>
  80         * * * -->
  81         <!-- * * * Namespace * * * -->
  82         <div class="input">
  83             <label class="inputLabel">Namespace</label>
  84             <input class="inputFieldMed" type="text" pInputText formControlName="namespace">
  85             <!-- * * * (Validation Rules Display) * * * -->
  86             <div class="validationMsg" *ngIf="msAddForm.controls['namespace'].invalid && !msAddForm.value['namespace']==''">
  87                 Format: lowercase alphanumeric with embedded dashes
  88             </div>
  89         </div>
  90         <!-- * * * Labels * * * -->
  91         <div class="input">
  92             <label class="inputLabel">Labels</label>
  93             <input class="inputFieldLg" type="text" pInputText formControlName="labels">
  94         </div>
  95         <span style="padding: 9px 0px 0px 172px; font-size: 13px;">(Separate labels with a space)</span>
  96         <!-- * * * Notes * * * -->
  97         <div class="input">
  98             <label class="inputLabel" style="vertical-align: top">Notes</label>
  99             <textarea class="inputFieldLg" [rows]="1" [cols]="30" pInputTextarea autoResize="autoResize" formControlName="notes"></textarea>
 100         </div>
 101         <!-- * * * ADD and CANCEL buttons * * * -->
 102         <div style="float: right; padding: 20px 45px">
 103             <button pButton type="button" (click)="closeDialog()" style="margin-right: 10px" label="Cancel"></button>
 104             <button pButton type="submit" class="ui-button-success" style="width: 77px; text-align:center" [label]="addOrUpdate"
 105                     [disabled]="!msAddForm.valid || !msAddForm.value['name'].trim()"></button>
 106         </div>
 107     </form>
 108
 109 </p-dialog>