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">
  60           <div class="card-header" id="headingOne">
  61             <h2 class="mb-0">
  62               <button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#collapse-{{item.key}}"
  63                 aria-expanded="true" attr.aria-controls="collapse-{{item.key}}">
  64                 <div class="custom-control custom-checkbox">
  65                   <input (change)="setToDeleteSources($event,item)" type="checkbox" class="custom-control-input"
  66                     id="current-{{item.key}}" required>
  67                   <label class="custom-control-label" for="current-{{item.key}}"></label>
  68                 </div>
  69                 {{item.key}}
  70               </button>
  71             </h2>
  72           </div>
  73
  74           <div id="collapse-{{item.key}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
  75             <div class="card-body">
  76               <ace-editor [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
  77                 [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
  78               </ace-editor>
  79             </div>
  80           </div>
  81         </div>
  82
  83       </div>
  84
  85       <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions" [cdkDropListConnectedTo]="[todoList]"
  86         class="example-list1 sourceListScroll" (cdkDropListDropped)="drop($event)">
  87         <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
  88           <input type="checkbox" value="item.name">
  89           <mat-expansion-panel class="expansion-panel">
  90             <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
  91               <mat-panel-title>
  92                 {{item.name}}
  93               </mat-panel-title>
  94             </mat-expansion-panel-header>
  95             <br>
  96             <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true"
  97               [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'"
  98               #editor style="height:300px;">
  99             </ace-editor>
 100           </mat-expansion-panel>
 101         </div>
 102       </div> -->
 103       <div class="row deleteSource">
 104         <div class="col">
 105           <a type="button" (click)="deleteSource()" class="">Delete Source</a>
 106         </div>
 107       </div>
 108     </div>
 109   </div>
 110 </div>