Users.html

<style type="text/css">
  .nonmultitenant {
    /* width: 130px; */
    white-space:nowrap
  }
  .multitenant {
    /* width: 245px; */
    white-space:nowrap
  }
  .validated {
    /* width: 20px; */
    white-space:nowrap
  }
  .dbusage {
    /* width: 80px; */
    white-space:nowrap
  }
</style>
<div id="title" class="row">
  <h1 translate lib="web">users</h1>
</div>

<div class="col-sm-12 text-right">
  <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true"></em>
  <input type="checkbox" id="checkbox-1" ng-model="ctrl.skipcustomerfilter" ng-change="ctrl.Search()"
    ng-show="menuctrl.WebSocketClientService.multi_tenant">
  <label for="checkbox-1" ng-show="menuctrl.WebSocketClientService.multi_tenant"><span translate lib="web">show
      all</span></label>
  <a href="#/User" class="btn btn-info" translate lib="web">Adduser</a>
</div>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<table id="table1" class="table table-striped" when-scrolled="ctrl.more()" style="width: 100%;">
  <thead class="thead-dark">
    <tr>
      <th ng-click="ctrl.ToggleOrder('name')"><b translate lib="web">name</b></th>
      <th ng-click="ctrl.ToggleOrder('username')"><b translate lib="web">username</b></th>
      <th ng-click="ctrl.ToggleOrder('_created')"><b translate lib="web">created</b></th>
      <th ng-click="ctrl.ToggleOrder('lastseen')"><b translate lib="web">lastseen</b></th>
      <th ng-click="ctrl.ToggleOrder('dbusage')" class="dbusage"><b translate lib="web">dbusage</b></th>
      <th ng-show="ctrl.WebSocketClientService.validate_user_form != ''" ng-click="ctrl.ToggleOrder('validated')" class="validated">
        <em class="fas fa-check"></em>
      </th>
      <th class="text-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td class="text-truncate"><a style="color: inherit; text-decoration: inherit;" ng-href="#/User/{{model._id}}">{{model.name}}</a></td>
      <td class="text-truncate">{{model.username}}</td>
      <td>
        <timesince ng-model="model._created" />
      </td>
      <td>
        <timesince ng-model="model.lastseen" />
      </td>
      <td class="dbusage">
        <div >
          <format-bytes ng-model="model.dbusage" />
        </div>
      </td>
      <td ng-show="ctrl.WebSocketClientService.validate_user_form != ''" class="validated">
        <em ng-show="model.validated" class="fas fa-check"></em>
      </td>
      <td
      ng-class="{multitenant: menuctrl.WebSocketClientService.multi_tenant == true, nonmultitenant: menuctrl.WebSocketClientService.multi_tenant == false}"
  >
        <div 
        class="text-right"
          >
          <a href ng-click="ctrl.ShowPlans(model)" class="btn" role="button" ng-show="menuctrl.user.customerid != null && menuctrl.WebSocketClientService.multi_tenant && model.customerid && model.customerid != '' &&
          (menuctrl.hasrole('admins') || menuctrl.hasrole('customer admins') || menuctrl.hasrole('resellers'))          
          ">
          <em class="fas fa-money-bill-wave"></em></a>
          <a ng-href="#/Customer/{{model.customerid}}" class="btn" role="button" ng-show="menuctrl.user.customerid != null && menuctrl.WebSocketClientService.multi_tenant && model.customerid && model.customerid != ''">
          <em class="fas fa-industry"></em></a>
          <a ng-href ng-click="ctrl.Impersonate(model)" class="btn"
            ng-show="model._id != ctrl.WebSocketClientService.user._id"><em class="fas fa-user-secret"></em></a>
          <em class="btn fas fa-user-secret disabled" ng-show="model._id == ctrl.WebSocketClientService.user._id"></em>

          <a class="btn" ng-href="#/User/{{model._id}}">
            <em class="fas fa-edit"></em>
          </a>
          <a href ng-click="ctrl.DeleteOne(model)" class="btn" ng-disabled="ctrl.loading==true"
          ng-class="{'btn-danger': ctrl.shiftdown==true && ctrl.collection == 'users' && (model._type == 'user' || model._type == 'customer')}"><em
              class="fas fa-trash"></em></a>
        </div>
      </td>
    </tr>
  </tbody>
</table>



<div class="modal" id="resourceModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <h5 class="modal-title">Services for {{ctrl.user.name}}</h5>
      <p>
      <div ng-repeat="Resource in ctrl.Resources | orderBy: 'order'">
        <div class="row" ng-repeat="Product in Resource.products | orderBy: 'order'"
          ng-show="Resource.userassign == 'multiplevariants'">
          <div class="col">{{Product.name}}</div>
          <div class="col">{{ Product.count }}</div>
          <div class="col">

            <a href ng-click="ctrl.AddPlan(Resource, Product)" class="btn" role="button"
              ng-show="(Product.count == 0 || Product.userassign == 'multiple') && ctrl.loading==false">
              <em class="fas fa-money-bill-wave"></em></a>
            <a href ng-click="ctrl.RemovePlan(Resource, Product)" class="btn" role="button"
              ng-show="Product.count > 0 && ctrl.loading==false">
              <em class="fas fa-trash"></em></a>

          </div>
        </div>
        <div class="row" ng-show="Resource.userassign == 'singlevariant'">
          <div class="col">{{Resource.name}}</div>
          <div class="col">
            <select ng-model="Resource.newproduct"
              ng-options="item as item.name for item in Resource.products | orderBy: 'order'"
              ng-disabled="ctrl.loading==true">
            </select>
          </div>
          <div class="col">
            <a href ng-click="ctrl.AddPlan(Resource, Resource.newproduct)" class="btn" role="button"
              ng-show="(Resource.newproduct.count == 0 || Resource.newproduct.userassign == 'multiple') && ctrl.loading==false">
              <em class="fas fa-money-bill-wave"></em></a>
            <em class="fas fa-money-bill-wave disabled btn"
              ng-show="(Resource.newproduct.count > 0 && Resource.newproduct.userassign != 'multiple') || Resource.newproduct == null || ctrl.loading==true"></em>
            <a href ng-click="ctrl.RemovePlan(Resource, Resource.newproduct)" class="btn" role="button"
              ng-show="Resource.newproduct.count > 0 && ctrl.loading==false">
              <em class="fas fa-trash"></em></a>
            <em class="fas fa-trash disabled btn"
              ng-show="(Resource.newproduct.count == 0) || Resource.newproduct == null || ctrl.loading==true"></em>

          </div>
        </div>
      </div>
      </p>
      <div class="text-right mt-20">
        <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
        <a href class="btn mr-5" role="button" ng-click="ctrl.ToggleModal()">Close</a>
      </div>
    </div>
  </div>
</div>




<div class="modal modal-full" id="NextInvoiceModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <h5 class="modal-title" ng-show="!ctrl.proration">Next Invoice for
        {{ctrl.WebSocketClientService.customer.name}}</h5>
      <h5 class="modal-title" ng-show="ctrl.proration">Accept next Invoice for
        {{ctrl.WebSocketClientService.customer.name}}</h5>
      <h6>{{ ctrl.period_start }} to {{ ctrl.period_end }}</h6>
      <p>
      <div class="row" ng-repeat="line in ctrl.nextinvoice.lines.data">
        <div class="col">{{line.description}}</div>
        <div class="col">{{ line.quantity }}</div>
        <div class="col">{{ line.amount / 100 }} {{ line.currency }}</div>
      </div>
      <hr
        ng-show="(ctrl.nextinvoice.tax && ctrl.nextinvoice.tax > 0) || (ctrl.nextinvoice.total_discount_amounts && ctrl.nextinvoice.total_discount_amounts.length > 0)">
      <div class="row" ng-show="ctrl.nextinvoice.tax && ctrl.nextinvoice.tax > 0">
        <div class="col">Tax</div>
        <div class="col"></div>
        <div class="col">{{ ctrl.nextinvoice.tax / 100 }} {{ ctrl.nextinvoice.currency }}</div>
      </div>
      <div class="row" ng-repeat="item in ctrl.nextinvoice.total_discount_amounts">
        <div class="col">Discount</div>
        <div class="col"></div>
        <div class="col">{{ item.amount / 100 }} {{ ctrl.nextinvoice.currency }}</div>
      </div>
      <hr>
      <div class="row">
        <div class="col">Total</div>
        <div class="col"></div>
        <div class="col">{{ ctrl.nextinvoice.amount_due / 100 }} {{ ctrl.nextinvoice.currency }}</div>
      </div>
      </p>
      <div class="text-right mt-20">

        <a href ng-show="ctrl.proration" class="btn mr-5 btn-success" role="button"
          ng-click="ctrl.AddPlan2()">Accept</a>
        <a href class="btn mr-5" role="button" ng-click="ctrl.ToggleNextInvoiceModal()">Close</a>
      </div>
    </div>
  </div>
</div>