public/src/app/general/general.component.html

<form #generalForm="ngForm" novalidate style="display: flex; margin: 1em;">
  <div class="left">

    <div class="import-wrapper" style="display: flex" *ngIf="store.generalflow === 'import' && !importCompleted">
      <div class="field" style="width:70%">
        <div class="field-label required" style="display: flex;">
          <span>Select existing VFCMT</span>
        </div>
        <ng-select name="vfcmt" [items]="vfcmts" required [virtualScroll]="true" placeholder="Select VFCMT" [(ngModel)]="selectedVfcmt"
          class="vfcmt-list" (change)="vfcmtChange($event)">
        </ng-select>
      </div>

      <div class="field" style="width:30%">
        <div class="field-label required" style="display: flex;">
          <span>Select version</span>
        </div>
        <select name="version" required data-tests-id="vfcmtVersion" [(ngModel)]="selectedVersion" [style.background]="versions.length == 0 ? '#ebebe4' : 'white'"
          (ngModelChange)="versionChange($event)" [disabled]="versions.length == 0" style="width: 100%; height: 30px;">
          <option [ngValue]="null" disabled>Select version</option>
          <option *ngFor="let item of versions" [value]="item.version">{{item.version}}</option>
        </select>
      </div>
    </div>

    <div class="field">
      <div class="field-label required">Name</div>
      <input type="text" name="name" ngModel required [(ngModel)]="newVfcmt.name" class="field-text" [disabled]="this.store.isEditMode || disableName"
        data-tests-id="nameMc" />
    </div>

    <div class="field">
      <div class="field-label required">Description</div>
      <textarea required name="description" ngModel [(ngModel)]="newVfcmt.description" style="resize: none;" cols="30" rows="10"
        class="field-text" data-tests-id="descMc" [disabled]="this.store.isEditMode || disableDescription"></textarea>
    </div>

    <div class="field" *ngIf="store.generalflow === 'new'">
      <div class="field-label required" style="display: flex;">
        <span>Template</span>
        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
      </div>
      <select name="template" [disabled]="this.store.isEditMode" required [(ngModel)]="newVfcmt.template" (ngModelChange)="onChangeTemplate($event)"
        data-tests-id="templateDdl" class="field-text" [style.background]="this.store.isEditMode ? '#ebebe4' : 'white'">
        <option [ngValue]="null" disabled>Select template</option>
        <option *ngFor="let template of templates" [value]="template.uuid" data-tests-id="templateOptions">{{template.name}}</option>
      </select>
    </div>

    <div class="field" *ngIf="store.generalflow === 'import' || store.generalflow === 'edit'">
      <div class="field-label required" style="display: flex;">
        <span>Flow type</span>
        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
      </div>
      <select name="flowType" [disabled]="this.store.isEditMode || disableFlowType" required [(ngModel)]="newVfcmt.flowType" data-tests-id="flowTypeDdl"
        class="field-text" [style.background]="this.store.isEditMode || disableFlowType ? '#ebebe4' : 'white'">
        <option [ngValue]="null" disabled>Select Flow Type</option>
        <option *ngFor="let flowType of flowTypes" [value]="flowType" data-tests-id="flowTypeOptions">{{flowType}}</option>
      </select>
    </div>

    <div class="field">
      <div class="field-label required" style="display: flex;">
        <span>Attached to</span>
        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
      </div>
      <select name="serviceAttached" [disabled]="this.store.isEditMode || disableVnfiList" required [(ngModel)]="newVfcmt.vfni"
        data-tests-id="vfniDdl" (ngModelChange)="onChangeVfni($event)" class="field-text" [style.background]="this.store.isEditMode || disableVnfiList ? '#ebebe4' : 'white'">
        <option [ngValue]="null" disabled>Select VNFi</option>
        <option *ngFor="let vfi of vfniList" [value]="vfi.resourceInstanceName">{{vfi.resourceInstanceName}}</option>
      </select>
    </div>
  </div>

  <div class="right">
    <div style="padding: 0.5em 0; padding-top: 1em; color: #5a5a5a;">
      Flow diagram
    </div>
    <div>
      <app-diagram [list]="list"></app-diagram>
    </div>
  </div>
</form>