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="col-11">
  21   <div class="row ">
  22     <div class="card creat-card source1">
  23       <h5 class="label-name"> Sources Options</h5>
  24       <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i>
  25         <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources">
  26       </div>
  27
  28       <div class="example-container">
  29         <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="option" [cdkDropListConnectedTo]="[doneList]"
  30           class="example-list" (cdkDropListDropped)="drop($event)">
  31           <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag>
  32             <input type="checkbox" class="checkbox" [(ngModel)]="checked"
  33               (change)="onChange(item, $event.target.checked)">
  34             {{item.name}}
  35           </div>
  36
  37         </div>
  38
  39       </div>
  40       <div class="footer row">
  41         <a class="select-button col-sm-05">Select all</a>
  42         <button class="action-button1 col-sm-04">Add to list</button>
  43       </div>
  44     </div>
  45
  46     <div class="card creat-card source">
  47       <h5 class="label-name">Sources List</h5>
  48       <div class="example-container2 card creat-card">
  49         <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions"
  50           [cdkDropListConnectedTo]="[todoList]" class="example-list1" (cdkDropListDropped)="drop($event)">
  51
  52           <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
  53             <input type="checkbox" value="item.name">
  54             <mat-expansion-panel class="expansion-panel">
  55               <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
  56                 <mat-panel-title>
  57                   {{item.name}}
  58                 </mat-panel-title>
  59               </mat-expansion-panel-header>
  60               <br>
  61               <ace-editor  [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
  62                 (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor
  63                 style="height:300px;">
  64               </ace-editor>
  65             </mat-expansion-panel>
  66           </div>
  67
  68         </div>
  69
  70       </div>
  71       <div>
  72         <a type="submit" class="delete">Delete</a>
  73       </div>
  74     </div>
  75   </div>
  76 </div>