cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html

   1 <tour-step-template></tour-step-template>
   2 <div class="card creat-card">
   3     <div class="single-line-model">
   4         <label class="label-name">Mode</label>
   5         <div class="label-input">
   6             <label name="trst" *ngFor="let mode of modes; let i = index" class="pl-0">
   7                 <input class="form-check-input" [(ngModel)]="modeType" type="radio" name="radioMode" id="radioMode"
   8                     [value]="mode.name">
   9
  10                 <span>
  11                     <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
  12                     {{mode.name}}
  13                 </span>
  14             </label>
  15         </div>
  16     </div>
  17     <div class="single-line">
  18         <label class="label-name">Dictionary Library Instance</label>
  19         <div class="label-input">
  20             <select class="form-control" id="exampleFormControlSelect1">
  21                 <option>Select Library Instance</option>
  22                 <option>Library Instance 1</option>
  23                 <option>Library Instance 2</option>
  24                 <option>Library Instance 3</option>
  25                 <option>Library Instance 4</option>
  26                 <option>Library Instance 5</option>
  27             </select>
  28         </div>
  29     </div>
  30
  31 </div>
  32 <div class="card creat-card">
  33     <div class="single-line-model">
  34         <label class="label-name">Name <span>*</span></label>
  35         <div class="label-input">
  36             <input tourAnchor="mt-packageName" type="input"  [readOnly]="!isNameEditable"  (change)="checkRequiredElements()"
  37                 [(ngModel)]="metaDataTab.name" placeholder="Package name">
  38         </div>
  39         <!--<div class="model-note-container error-message">
  40             Package name already exists with this version. Please enter a different name or enter different version
  41             number.
  42         </div>-->
  43     </div>
  44
  45     <div class="single-line-model">
  46         <label class="label-name">Version <span>*</span></label>
  47         <div class="label-input">
  48             <input tourAnchor="mt-packageVersion" type="input" (change)="checkRequiredElements()"
  49                 [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()"
  50                 pattern="(\d+)\.(\d+)\.(\d+)" placeholder="Example: 1.0.0">
  51         </div>
  52         <div class="model-note-container tag-notes">Must follow this format (1.0.0)</div>
  53         <div class="model-note-container error-message">{{errorMessage}}</div>
  54     </div>
  55     <div class="single-line-model">
  56         <label class="label-name">Description <span>*</span></label>
  57         <div class="label-input">
  58             <input tourAnchor="mt-packageDescription" type="input" [(ngModel)]="metaDataTab.description"
  59                 (change)="checkRequiredElements()" placeholder="Descripe the package">
  60         </div>
  61     </div>
  62
  63     <div class="single-line-model">
  64         <label class="label-name">Tags</label>
  65         <div class="label-input">
  66             <input tourAnchor="mt-packageTags" type="input" (keyup.enter)="addTag($event)"
  67                 (keyup.Space)="addTag($event)" placeholder="Ex., vDNS-CDS">
  68         </div>
  69         <div class="model-note-container tag-notes">Use ENTER/SPACE to add tag</div>
  70         <div class="model-note-container tages-container">
  71             <span *ngFor="let tag of tags" class="single-tage">{{tag}}
  72                 <i (click)="removeTag(tag)" class="fa fa-times-circle"></i>
  73             </span>
  74         </div>
  75     </div>
  76 </div>
  77 <div id="container">
  78     <div id="target">
  79         <div class="card creat-card">
  80             <div class="single-line customKeyTitle">
  81                 <h5 class="label-name w-100 ">
  82                     Custom key
  83                 </h5>
  84                 <span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span>
  85
  86             </div>
  87             <div *ngFor="let map of  this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key">
  88                 <div class="single-line-custom-key">
  89                     <label class="label-name"><span>{{i + 1}}.</span> Name</label>
  90                     <div class="label-input">
  91                         <input value="{{map.key}}" name="key" type="input" placeholder="Enter name">
  92                     </div>
  93                 </div>
  94                 <div class="single-line-custom-key">
  95                     <label class="label-name">Value</label>
  96                     <div class="label-input">
  97                         <input value="{{map.value}}" name="value" type="input" placeholder="Enter value">
  98                     </div>
  99                 </div>
 100                 <div class="single-line-custom-key-delete">
 101                     <button (click)="removeKey($event,map.key)" class="custom-key-delete"><i aria-hidden="true"
 102                             class="icon-delete-sm"></i></button>
 103                 </div>
 104             </div>
 105
 106             <div class="single-custom-key">
 107                 <div class="single-line-custom-key">
 108                     <label class="label-name"><span>{{customKeysMap.size + 1}}.</span> Name</label>
 109                     <div class="label-input">
 110                         <input tourAnchor="mt-packageKeys" (keyup.enter)="addCustomKey()" name="key" type="input"
 111                             class="mapKey" placeholder="Enter name">
 112                     </div>
 113                 </div>
 114                 <div class="single-line-custom-key">
 115                     <label class="label-name">Value</label>
 116                     <div class="label-input">
 117                         <input (keyup.enter)="addCustomKey()" class="mapValue" name="value" type="input"
 118                             placeholder="Enter value">
 119                     </div>
 120                 </div>
 121                 <!-- <div class="single-line-custom-key-delete"><button (click)="removeKey($event)"
 122                         class="custom-key-delete"><i aria-hidden="true" class="icon-delete-sm"></i></button></div> -->
 123             </div>
 124
 125         </div>
 126     </div>
 127 </div>