summaryrefslogtreecommitdiffstats
path: root/mod2/ui/src/app/ms-add-change/ms-add-change.component.html
blob: 2fd19d74df543f4c89daf15509a98ae39921e65c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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>