diff options
Diffstat (limited to 'mod2/ui/src/app/ms-add-change/ms-add-change.component.html')
| -rw-r--r-- | mod2/ui/src/app/ms-add-change/ms-add-change.component.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/mod2/ui/src/app/ms-add-change/ms-add-change.component.html b/mod2/ui/src/app/ms-add-change/ms-add-change.component.html new file mode 100644 index 0000000..2fd19d7 --- /dev/null +++ b/mod2/ui/src/app/ms-add-change/ms-add-change.component.html @@ -0,0 +1,109 @@ +<!-- + # ============LICENSE_START======================================================= + # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved. + # ================================================================================ + # Licensed under the Apache License, Version 2.0 (the "License"); + # you may not use this file except in compliance with the License. + # You may obtain a copy of the License at + # + # http://www.apache.org/licenses/LICENSE-2.0 + # + # Unless required by applicable law or agreed to in writing, software + # distributed under the License is distributed on an "AS IS" BASIS, + # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + # See the License for the specific language governing permissions and + # limitations under the License. + # ============LICENSE_END========================================================= + --> + +<p-dialog *ngIf="visible" [header]="guiHeader" [(visible)]="visible" appendTo="body" [modal]="true" [transitionOptions]="'300ms'" + [closeOnEscape]="false" [closable]="false" [style]="{width: '645px'}" (onHide)="closeDialog()"> + + <!-- "Add / Change MS" Error Message --> + <p-toast key="msAddChangeError" [style]="{width: '500px'}"></p-toast> + + <!-- * * * * * Input fields * * * * * --> + <form [formGroup]="msAddForm" (ngSubmit)="saveMs()" class="bg-faded"> + <!-- * * * MS Name * * * --> + <div class="input"> + <label class="inputLabel">MS Name<span style="color:red">*</span></label> + <input class="inputFieldMed" type="text" pInputText formControlName="name"> + </div> + <!-- * * * MS Tag * * * --> + <div class="input"> + <label class="inputLabel">MS Tag<span style="color:red">*</span></label> + <input *ngIf="!currentRow" class="inputFieldMed" type="text" pInputText formControlName="tag"> + <!-- If Updating (vs ADDing) the data, the "Tag" is Read-Only --> + <input *ngIf="currentRow" class="inputFieldMed" type="text" pInputText formControlName="tag" style="border:none" readonly> + <!-- * * * (Validation Rules Display) * * * --> + <div class="validationMsg" *ngIf="msAddForm.controls['tag'].invalid && + !msAddForm.value['tag']=='' && + msAddForm.controls['tag'].value.length < 51"> + Format: lowercase alphanumeric with embedded dashes (5-50 characters) + </div> + <!-- * * * (Validation Rule - length > 50) * * * --> + <div class="validationMsg" *ngIf="msAddForm.controls['tag'].value.length > 50"> + MS Tag cannot exceed 50 chars + </div> + </div> + <!-- * * * Service Short Name * * * --> + <div class="input"> + <label class="inputLabel">Service Short Name</label> + <input class="inputFieldMed" type="text" pInputText formControlName="serviceName"> + <!-- * * * (Validation Rules Display) * * * --> + <div class="validationMsg" *ngIf="msAddForm.controls['serviceName'].invalid && + !msAddForm.value['serviceName']=='' && + msAddForm.controls['serviceName'].value.length < 26"> + Format: lowercase alpha with embedded dashes + </div> + <!-- * * * (Warning! Global vs Central/Edge Service Name length) * * * --> + <div class="validationMsgWarning" *ngIf="msAddForm.controls['serviceName'].valid && + msAddForm.controls['serviceName'].value.length > 12 && + msAddForm.controls['serviceName'].value.length < 26"> + Warning! Only Global Site short names can exceed 12 chars (max 25) + </div> + <!-- * * * (Validation Rule - length > 25) * * * --> + <div class="validationMsg" *ngIf="msAddForm.controls['serviceName'].value.length > 25"> + Global Site short names cannot exceed 25 chars + </div> + </div> + <!-- * * * Type * * * --> + <div class="input"> + <label class="inputLabel">Type<span style="color:red">*</span></label> + <p-dropdown [options]="types" placeholder="Select Type" optionLabel="type" formControlName="type"></p-dropdown> + </div> + <!-- * * * Location + <div class="input"> + <label class="inputLabel">Location<span style="color:red">*</span></label> + <p-dropdown [options]="locations" placeholder="Select Location" optionLabel="location" formControlName="location"></p-dropdown> + </div> + * * * --> + <!-- * * * Namespace * * * --> + <div class="input"> + <label class="inputLabel">Namespace</label> + <input class="inputFieldMed" type="text" pInputText formControlName="namespace"> + <!-- * * * (Validation Rules Display) * * * --> + <div class="validationMsg" *ngIf="msAddForm.controls['namespace'].invalid && !msAddForm.value['namespace']==''"> + Format: lowercase alphanumeric with embedded dashes + </div> + </div> + <!-- * * * Labels * * * --> + <div class="input"> + <label class="inputLabel">Labels</label> + <input class="inputFieldLg" type="text" pInputText formControlName="labels"> + </div> + <span style="padding: 9px 0px 0px 172px; font-size: 13px;">(Separate labels with a space)</span> + <!-- * * * Notes * * * --> + <div class="input"> + <label class="inputLabel" style="vertical-align: top">Notes</label> + <textarea class="inputFieldLg" [rows]="1" [cols]="30" pInputTextarea autoResize="autoResize" formControlName="notes"></textarea> + </div> + <!-- * * * ADD and CANCEL buttons * * * --> + <div style="float: right; padding: 20px 45px"> + <button pButton type="button" (click)="closeDialog()" style="margin-right: 10px" label="Cancel"></button> + <button pButton type="submit" class="ui-button-success" style="width: 77px; text-align:center" [label]="addOrUpdate" + [disabled]="!msAddForm.valid || !msAddForm.value['name'].trim()"></button> + </div> + </form> + +</p-dialog> |