fabric8-analytics-dep-editor/src/app/add-dependency/add-dependency.component.html

Dependency editor

<div class="cards-pf addDependecyComponent">
  <div class="row">
    <div class="col-sm-12 fit">
      <p id="heading">
        <span id="head-title">Dependencies</span>
        <span class="number" *ngIf="dependencies">
          <span class="dep-count">{{ existDependencies?.length+dependencies?.length }}</span>
        </span>
      </p>
    </div>
    <div class="col-sm-12 added-dep fit">
      <div class="card-pf dep-card">
        <h2 class="card-pf-title search-box">
          <span id="search-text">You can add dependencies either by searching or by browsing the list of dependencies</span>
          <div class="row">
            <div id="date-2" class="input-group date col-sm-8">
              <input type="text" class="form-control bootstrap-datepicker" [(ngModel)]="dependencySearchString" (change)="listenInputSearch()"
                placeholder="Web, Devtools, SQL...">
              <span class="input-group-addon" (click)="getDependencies()">
                <span class="pficon-search"></span>
              </span>
            </div>

            <div class="pre-loader" *ngIf="isLoading">
              <div class="pre-loader-spinner spinner"></div>
            </div>
            <ul class="dropdown-menu" *ngIf="dependencySearchResult?.length">
              <li *ngFor="let dep of dependencySearchResult">
                <a (click)="addSearchDependency(dep)">
                  <div>
                    <b>{{ dep.name }}</b>
                  </div>
                  <div>{{ dep.version }}</div>
                </a>
              </li>
            </ul>
            <div class="col-sm-5 browse" (click)="showPackageModal($event)" *ngIf="existDependencies?.length">Browse All Dependencies</div>
            <div class="col-sm-5 browse ubrowse" *ngIf="!existDependencies">Browse All Dependencies</div>
          </div>
        </h2>
        <section class="fit dependency-strech">
          <div *ngIf="existDependencies?.length">
            <span *ngFor="let dependency of existDependencies" class="package-chip">{{dependency.package}}</span>
          </div>
          <div *ngIf="!existDependencies?.length" class="pre-loader">
            <!-- <div class="pre-loader-spinner spinner spinner-lg"></div> -->
          </div>
        </section>
        <section class="fit dependency-strech">
          <div class="card-pf-body dep-area" *ngIf="dependencies?.length || dependencyAdded?.length">
            <span *ngFor="let dependency of dependencies" class="package-chip a">{{dependency.name}}
              <button class="btn btn-default close" (click)="removeDependency(dependency)">
                <span class="pficon pficon-close"></span>
              </button>
            </span>
          </div>
        </section>
        <div class="card-pf-body" *ngIf="!dependencies">
          <div class="pre-loader">
            <div class="pre-loader-spinner spinner spinner-lg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<modal #PackagePreview id="PackagePreview" modalClass="modal-lg modal-fullscreen modal-width-class" title="Choose Dependency"
  role="dialog">
  <modal-content class="contents">
    <div class="modal-body">
      <div class="search-dependencies">
        <input  id="search-dep" class="search-box" type="text" [(ngModel)]="queryString" placeholder="Search for Dependencies..">
        <span id="dep-search-icon" class="fa fa-search search-icon" aria-hidden="true"></span>
      </div>
      <div class="main">
        <div class="toast-pf alert alert-success alert-dismissable" *ngIf="toast">
          <button type="button" class="close alert-close" data-dismiss="alert" aria-hidden="true">
            <span class="pficon pficon-close" (click)="toast=!toast"></span>
          </button>
          <span class="pficon pficon-ok"></span>
          <span *ngFor="let tagname of saveTagname">
            <b>{{tagname.name}}</b>,
          </span>has been added.
        </div>
        <div class="categories">
          <div class="list-group list-view-pf list-view-pf-view tag-list">
            <div class="list-group-item tag-list-item">
              <div class="list-view-pf-actions">
                <label class="mix-label">{{tagZero}}</label>
              </div>
              <div class="list-view-pf-main-info">
                <div class="list-view-pf-body">
                  <div class="list-view-pf-description">
                    <div class="list-group-item-heading">
                      All
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-group-item tag-list-item-n" *ngFor="let tags of categoryResult">
              <div class="list-view-pf-actions">
                <label class="mix-label">{{tags.count}}</label>
              </div>
              <div class="list-view-pf-main-info">
                <div class="list-view-pf-body">
                  <div class="list-view-pf-description">
                    <div class="list-group-item-heading">
                      {{tags.package[0].category}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dependencies">
          <div class="depn">
            <div class="depn-select">Dependencies selected
              <span id="select">
                <button class="added" (click)="addDependency()" [ngStyle]="{'border': noOfTags > 0 ? '1px solid #00659c' : '1px solid #d1d1d1' , 'background-image': noOfTags > 0 ? 'linear-gradient(-180deg, #39a5dc 0%, #0088ce 100%)' : 'none','color': noOfTags > 0 ? '#fff' : '#8b8d8f'}">
                  Add ({{noOfTags}})</button>
              </span>
            </div>
            <div class="display-dependencies">
              <div class="list-group list-view-pf" *ngFor="let master of masterTags | FilterPipe: queryString ; let i = index;">
                <div class="list-group-item list-view-pf-stacked list-view-pf-top-align" [ngStyle]="{'background-color' : master.type ? '#def3ff' : (master.grouped ? '#ededed' : '#fff')}">
                  <div class="check">
                    <div class="list-view-pf-checkbox">
                      <input id="check-it" type="checkbox" [disabled]="master.grouped" [checked]="master.type" (change)="changeTagname(master,master.type)">
                    </div>
                  </div>
                  <div class="list-view-pf-main-info">
                    <div class="list-view-pf-body">
                      <div class="col-sm-5 list-view-pf-description">
                        <div class="list-group-item-heading">
                          <label class="control control--checkbox">{{master.name}}
                          </label>
                        </div>
                        <div class="list-group-item-text">
                        </div>
                        <div>
                          <div>
                            <div class="tag-border">{{master.category}}</div>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-7 list-view-pf-additional-info">
                        <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked col-sm-8">
                          <div class="col-sm-6 master-version">
                            <label (click)="false" class="dropbtn drop-toggle">
                              {{master.version}}
                              <span id="version-icon" class="fa fa-angle-down" style="margin-left: 6px;">
                              </span>
                            </label>
                          </div>
                          <div class="grouped col-sm-4" *ngIf="master.grouped">
                            Added
                          </div>
                        </div>
                        <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked col-xs-4 block">
                          <strong *ngIf="master?.security?.length">
                            <span class="pficon-warning-triangle-o"></span>
                          </strong>
                          <strong *ngIf="!master?.security?.length">
                            <span class="pficon-ok"></span>
                          </strong>
                          <span id="sec">Security</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default foot-button-edit" data-dismiss="modal" (click)="closemodal()">Done</button>
    </div>
  </modal-content>
</modal>