gerrit.onap Code Review - ccsdk/cds.git/blob

   1 <!--/*
   2 * ============LICENSE_START=======================================================
   3 * ONAP : CDS
   4 * ================================================================================
   5 * Copyright (C) 2020 TechMahindra
   6 *=================================================================================
   7 * Licensed under the Apache License, Version 2.0 (the "License");
   8 * you may not use this file except in compliance with the License.
   9 * You may obtain a copy of the License at
  10 *
  11 *     http://www.apache.org/licenses/LICENSE-2.0
  12 *
  13 * Unless required by applicable law or agreed to in writing, software
  14 * distributed under the License is distributed on an "AS IS" BASIS,
  15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16 * See the License for the specific language governing permissions and
  17 * limitations under the License.
  18 * ============LICENSE_END=========================================================
  19 */-->
  20 <div class="row">
  21   <!--Sources Options-->
  22   <div class="col-3">
  23     <div class="card sourceOptions">
  24       <h5>Sources Options</h5>
  25       <div class="searchBox">
  26         <input class="searchText" [(ngModel)]="searchText" type="input" placeholder="Search">
  27       </div>
  28       <div class="row sourceOtionsScroll">
  29         <div class="col">
  30           <div class="sourceOption" *ngFor="let item of option| search :searchText">
  31             <!-- <input type="checkbox" class="checkbox" [(ngModel)]="checked"
  32               (change)="onChange(item, $event.target.checked)">
  33             {{item.name}} -->
  34             <div class="custom-control custom-checkbox">
  35               <input [disabled]="sourcesOptions.has(item.name)" [checked]="tempSources.has(item.name)"
  36                 (change)="setTempSources($event,item)" type="checkbox" class="custom-control-input"
  37                 id="input-{{item.name}}">
  38               <label class="custom-control-label" for="input-{{item.name}}">{{item.name}}</label>
  39             </div>
  40           </div>
  41         </div>
  42       </div>
  43       <div class="row sourceOptionActions">
  44         <div (click)="selectAll()" class="col">
  45           <a>Select all</a>
  46         </div>
  47         <div class="col">
  48           <button (click)="addSources()" class="btn">Add to list</button>
  49         </div>
  50       </div>
  51     </div>
  52   </div>
  53   <!--Sources List-->
  54   <div class="col-9">
  55     <div class="card sourceList">
  56       <h5>Sources List</h5>
  57
  58       <div class="accordion sourceListItems" id="accordionExample">
  59         <div class="card" *ngFor="let item of sourcesOptions | keyvalue; let i=index; trackBy:identify">
  60           <div class="card-header" id="headingOne">
  61             <h2 class="mb-0">
  62               <button class="btn btn-link" type="button" data-toggle="collapse"
  63                 attr.data-target="#collapse-{{item.key}}" aria-expanded="true"
  64                 attr.aria-controls="collapse-{{item.key}}">
  65                 <div class="custom-control custom-checkbox">
  66                   <input (change)="setToDeleteSources($event,item)" type="checkbox" class="custom-control-input"
  67                     id="current-{{item.key}}" required>
  68                   <label class="custom-control-label" for="current-{{item.key}}"></label>
  69                 </div>
  70                 {{item.key}}
  71               </button>
  72             </h2>
  73           </div>
  74
  75           <div id="collapse-{{item.key}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
  76             <div class="card-body">
  77               <ace-editor [mode]="'json'" (textChange)="addProperties(item,editor.text)" [autoUpdateContent]="true"
  78                 [durationBeforeCallback]="500" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
  79               </ace-editor>
  80             </div>
  81           </div>
  82         </div>
  83
  84       </div>
  85
  86       <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions" [cdkDropListConnectedTo]="[todoList]"
  87         class="example-list1 sourceListScroll" (cdkDropListDropped)="drop($event)">
  88         <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
  89           <input type="checkbox" value="item.name">
  90           <mat-expansion-panel class="expansion-panel">
  91             <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
  92               <mat-panel-title>
  93                 {{item.name}}
  94               </mat-panel-title>
  95             </mat-expansion-panel-header>
  96             <br>
  97             <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true"
  98               [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'"
  99               #editor style="height:300px;">
 100             </ace-editor>
 101           </mat-expansion-panel>
 102         </div>
 103       </div> -->
 104       <div class="row deleteSource">
 105         <div class="col">
 106           <a type="button" (click)="deleteSource()" class="">Delete Source</a>
 107         </div>
 108       </div>
 109     </div>
 110   </div>
 111 </div>