cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html

   1 <!--/*
   2 * ============LICENSE_START=======================================================
   3 * ONAP : CDS
   4 * ================================================================================
   5 * Copyright 2019 TechMahindra
   6 *
   7 * Modifications Copyright (C) 2019 IBM
   8 *=================================================================================
   9 * Licensed under the Apache License, Version 2.0 (the "License");
  10 * you may not use this file except in compliance with the License.
  11 * You may obtain a copy of the License at
  12 *
  13 *     http://www.apache.org/licenses/LICENSE-2.0
  14 *
  15 * Unless required by applicable law or agreed to in writing, software
  16 * distributed under the License is distributed on an "AS IS" BASIS,
  17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18 * See the License for the specific language governing permissions and
  19 * limitations under the License.
  20 * ============LICENSE_END=========================================================
  21 */-->
  22 <div cdkDropListGroup>
  23   <div class="sources-container">
  24         <div
  25       cdkDropList
  26       [cdkDropListData]="sourcesOptions"
  27       class="sources-list"
  28       (cdkDropListDropped)="drop($event)">
  29         <div class="sources-box" *ngFor="let item of sourcesOptions;let i = index" cdkDrag>
  30           <mat-expansion-panel class="expansion-panel" (opened)="selected(item)">
  31                         <mat-expansion-panel-header>
  32                                 <mat-panel-title>
  33                   {{item.name}}
  34                                 </mat-panel-title>
  35                         </mat-expansion-panel-header>
  36             <json-editor [options]="options" [data]="item.data" on-change="onChange(item,$event)"></json-editor>
  37                          </mat-expansion-panel>
  38                          <button matSuffix mat-icon-button (click)="delete(item,i)"><mat-icon class="icon">delete</mat-icon></button>
  39         </div>
  40     </div>
  41   </div>
  42
  43   <div class="list-container">
  44     <h3>Source Options</h3>
  45         <mat-form-field>
  46         <input [(ngModel)]="searchText" type="input" matInput placeholder="search sources">
  47       <button matSuffix mat-icon-button (click)="getResources()"><mat-icon>search</mat-icon></button>
  48         <mat-hint>db,mdsal,input,default,..</mat-hint>
  49         </mat-form-field>
  50         <br><br>
  51     <div
  52       cdkDropList
  53       [cdkDropListData]="option"
  54       class="options-list"
  55       (cdkDropListDropped)="drop($event)">
  56       <div class="options-box" *ngFor="let item of option | search :searchText" cdkDrag>{{item.name}}</div>
  57     </div>
  58    </div>
  59    <div>
  60         <button mat-button class="matStepNextBtn" (click)="UploadSourcesData()">Save Sources Data</button>
  61    </div>
  62 </div>