Duplicates.html

<div class="row">
  <h1 translate lib="web">duplicates tracking</h1>
</div>

<div class=" col-md-6 text-right">
</div>

<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>

<div class="form-group form-horizontal">
  <div class="col-sm">
    <label class="sr-only">Uniqeness</label>
    <div class="input-group unframed-addons">
      <input ng-model="ctrl.uniqeness" ng-change="ctrl.loadData()" class="form-control input-md"
        ng-model-options="{debounce: 400}" placeholder="group by fields seperated by comma" />
      <p class="col-md-1 lead"></p>
      <div class="text-right">
        <i class="fas fa-cog fa-spin" ng-show="ctrl.loading==true"></i>
        <button class="btn btn-info" ng-disabled="ctrl.loading==true" ng-click="ctrl.MassDeleteOnlyOne()"><em
            class="fas fa-trash"></em> one</button>
        <button class="btn btn-info" ng-disabled="ctrl.loading==true" ng-click="ctrl.MassDeleteAllButOne()"><em
            class="fas fa-trash"></em> all but one</button>
        <button class="btn btn-info" ng-disabled="ctrl.loading==true" ng-click="ctrl.MassDeleteAll()"><em
            class="fas fa-trash"></em> all</button>
      </div>
    </div>
  </div>
</div>
<div class="form-group form-horizontal">
  <div class="input-group unframed-addons col-sm-9" ng-show="ctrl.keys.length < 8">
    <div ng-repeat="model in ctrl.keys" class="border">
      <input type="checkbox" ng-model="ctrl.uniqeness.split(',').indexOf(model) > -1"
        ng-click="ctrl.ToggleUniqeness(model)" ng-model-options="{debounce: 400}" />
      {{model}}
    </div>
  </div>
</div>
<div class="form-group form-horizontal" ng-show="ctrl.keys.length >= 8">
  <div class="input-group unframed-addons col-sm-9 ">
    <div id="list1" class="dropdown-check-list" tabindex="100">
      <span class="anchor">Select fields</span>
      <ul class="items">
        <li ng-repeat="model in ctrl.keys"><input type="checkbox"
            ng-model="ctrl.uniqeness.split(',').indexOf(model) > -1" ng-click="ctrl.ToggleUniqeness(model)" />{{model}}
        </li>
      </ul>
    </div>
  </div>
</div>

</div>
<table id=" table1" class="table table-striped table-hover table-sm" when-scrolled="ctrl.more()" style="width: 100%;">
  <caption></caption>
  <thead class="thead-dark">
    <tr>
      <th scope="col" ng-click="ctrl.ToggleOrder('_id')"><strong>_id</strong></th>
      <th scope="col" ng-click="ctrl.ToggleOrder('name')"><strong>name</strong></th>
      <th scope="col" class="w-50" ng-click="ctrl.ToggleOrder('count')"><strong>count</strong></th>
      <th scope="col" class="w-300"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td><a ng-click="ctrl.ShowData(model)">{{model._id}}</a></td>
      <td><a ng-click="ctrl.ShowData(model)">{{model.items[0].name}}</a></td>
      <td>{{model.count}}</td>
      <td>
        <a href ng-click="ctrl.DeleteOnlyOne(model)" ng-disabled="ctrl.loading==true" class="btn"><em
            class="fas fa-trash"></em> one</a>
        <a href ng-click="ctrl.DeleteAllButOne(model)" ng-disabled="ctrl.loading==true" class="btn"><em
            class="fas fa-trash"></em> all but one</a>
        <a href ng-click="ctrl.DeleteAll(model)" ng-disabled="ctrl.loading==true" ng-disabled="ctrl.loading==true"
          class="btn"><em class="fas fa-trash"></em> all</a>
      </td>
    </tr>
  </tbody>
</table>



<div class="modal" tabindex="-1" role="dialog" id="exampleModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">First 20 duplicates</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table id=" table1" class="table table-striped table-hover table-sm" when-scrolled="ctrl.more()"
          style="width: 100%;">
          <caption></caption>
          <thead class="thead-dark">
            <th scope="col"><strong>id</strong></th>
            <th scope="col"><strong>name</strong></th>
            <th scope="col"></th>
          </thead>
          <tbody>
            <tr ng-repeat="model in ctrl.model.items | limitTo: 20">
              <td class="btn-cell">
                <a ng-href="#/Entity/{{ctrl.collection}}/{{model._id}}" ng-click="ctrl.CloseModal()"
                  class="table-btn"><em class="fas fa-edit"></em>{{ model._id }}</a>
              </td>
              <td class="btn-cell">
                {{ model.name }}
              </td>
              <td class="btn-cell">
                <a href ng-click="ctrl.ModalDeleteOne(model)" ng-disabled="ctrl.loading==true" class="table-btn"><em
                    class="fas fa-trash"></em></a>
              </td>
            </tr>
          </tbody>
        </table>
        <div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



<style>
  .dropdown-check-list {
    display: inline-block;
  }

  .dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;
  }

  .dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

  .dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
  }

  .dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
  }

  .dropdown-check-list ul.items li {
    list-style: none;
  }

  .dropdown-check-list.visible .anchor {
    color: #0094ff;
  }

  .dropdown-check-list.visible .items {
    display: block;
  }
</style>