OneQlik/src/app/dealers-info/dealers-info.component.html

<div class="limiter">
  <app-all-menus></app-all-menus>
  <div id="dvTable" style="position: absolute; top: 200px"></div>
  <div id="toast">
    <div id="desc">{{ data_descip }}</div>
  </div>
  <div class="container-table100">
    <div class="wrap-table100">
      <div class="row" style="
          width: 100%;
          text-align: center;
          align-items: center;
          background: #426e86;
          padding-top: 10px;
          padding-bottom: 10px;
          color: white;
          box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
        ">
        <div class="col-6">
          <i class="fas fa-plus-circle" (click)="addDealer()" mdTooltip="{{ 'Add Dealer' | translate }}" style="
              box-shadow: 3px 1px 5px 0px #b2b0ae;
              cursor: pointer;
              float: left;
              font-size: 24px;
              border-radius: 50px;
              margin-left: 20px;
            "></i>
          <i class="fas fa-download" (click)="downloadXlsx()" mdTooltip="{{ 'download XLSX' | translate }}" style="
              box-shadow: 3px 1px 5px 0px #b2b0ae;
              cursor: pointer;
              float: left;
              font-size: 24px;
              border-radius: 50px;
              margin-left: 20px;
            "></i>
          <h4 style="display: inline-block; float: right">
            {{ "Dealers" | translate }}
          </h4>
          <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
        </div>
        <div class="col-6">
          <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px">
            {{ "Next" | translate }} >>
          </button>
          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262">
            << {{ "Previous" | translate }} </button>
              <input type="search" style="
              width: 225px;
              float: right;
              border-radius: 0px;
              line-height: 1.9;
              background: #efecec;
              margin-right: 5px;
            " class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput"
                (ngModelChange)="searchFilter($event)" placeholder="{{ 'Dealer Search' | translate }}" />
        </div>
      </div>

      <div class="table100 ver1" id="deviceTable">
        <div class="table100-firstcol">
          <table>
            <thead>
              <tr>
                <th class="cell100 column1" style="font-weight: 600; background: #add8e6">
                  <div class="row">
                    <div class="col-5">
                      <p>{{ "NAME" | translate }}</p>
                    </div>
                    <div class="col-5">
                      <p>{{ "EMAIL" | translate }}</p>
                    </div>
                    <div class="col-2">
                      <p>{{ "PHONE" | translate }}</p>
                    </div>
                  </div>
                </th>
                <!-- <th class="cell100 column1" style='font-weight:600;background: #ADD8E6;text-align: left;'>EMAIL</th> -->
                <!-- <th class="cell100 column111" style='font-weight:600;background: #ADD8E6;'>PHONE</th>          -->
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let dealer of dealers_info">
                <td class="ftd-mp cell100 column1" (click)="dealerSwitch(dealer)">
                  <div class="row">
                    <div class="col-sm-5">
                      <p title="{{ dealer.first_name }} {{ dealer.last_name }}" style="
                          display: inline-block;
                          width: 180px;
                          white-space: nowrap;
                          overflow: hidden !important;
                          text-overflow: ellipsis;
                        ">
                        {{ dealer.first_name }} {{ dealer.last_name }}
                      </p>
                    </div>
                    <div class="col-sm-5">
                      <p title="{{ dealer.email }}" style="
                          display: inline-block;
                          width: 180px;
                          white-space: nowrap;
                          overflow: hidden !important;
                          text-overflow: ellipsis;
                        " (click)="dealerSwitch(dealer)">
                        {{ dealer.email }}
                      </p>
                    </div>
                    <div class="col-sm-2">
                      <p title="{{ dealerPhone(dealer) }}" style="
                          display: inline-block;
                          width: 180px;
                          white-space: nowrap;
                          overflow: hidden !important;
                          text-overflow: ellipsis;
                        " (click)="dealerSwitch(dealer)">
                        {{ dealerPhone(dealer) }}
                      </p>
                    </div>
                  </div>
                </td>
                <!-- <td class="cell100 column1" style="cursor: pointer;"  (click)="dealerSwitch(dealer)"></td>
                  <td class="cell100 column1" style="cursor: pointer;" (click)="dealerSwitch(dealer)"></td> -->
              </tr>
            </tbody>
          </table>
        </div>
        <div class="wrap-table100-nextcols js-pscroll" style="height: 660px">
          <div class="table100-nextcols">
            <table>
              <thead>
                <tr class="row100 head">
                  <th class="cell100 column2" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                      padding-left: 55px;
                    ">
                    {{ "USER ID" | translate }}
                  </th>
                  <th class="cell100 column3" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "PASSWORD" | translate }}
                  </th>
                  <th class="cell100 column4" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "CREATED ON" | translate }}
                  </th>
                  <th class="cell100 column5" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "EXPIRES ON" | translate }}
                  </th>
                  <th class="cell100 column6" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "LAST ACTIVITY" | translate }}
                  </th>
                  <th class="cell100 column7" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "LAST LOGIN" | translate }}
                  </th>
                  <th class="cell100 column8" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "LOGIN TYPE" | translate }}
                  </th>
                  <th class="cell100 column9" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "TOTAL VEHICLES" | translate }}
                  </th>
                  <th class="cell100 column10" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "DELETED VEHICLES" | translate }}
                  </th>
                  <th class="cell100 column11" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "ALLOCATED POINTS" | translate }}
                  </th>
                  <th class="cell100 column11" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "AVAILABLE POINTS" | translate }}
                  </th>
                  <th class="cell100 column12" style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "TOKEN" | translate }}
                  </th>
                  <th class="cell100 column13" style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "DOCUMENTS" | translate }}
                  </th>
                  <th class="cell100 column14" style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "EDIT" | translate }}
                  </th>
                  <th class="cell100 column15" style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "DELETE" | translate }}
                  </th>
                  <th class="cell100 column16" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "DEALER STATUS" | translate }}
                  </th>
                  <th class="cell100 column17" style="
                      text-align: left;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "DEALER PERMISSION" | translate }}
                  </th>
                  <th class="cell100 column18" style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "ADD POINTS" | translate }}
                  </th>
                  <th class="cell100 column18" style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "SUSPEND ACCOUNT" | translate }}
                  </th>
                  <th class="cell100 column18" style="
                      text-align: center;
                      font-weight: 600;
                      background: #add8e6;
                    ">
                    {{ "SUSPEND ACCOUNT" | translate }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr class="row100 body" *ngFor="let dealer of dealers_info">
                  <td class="cell100 column2" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.user_id ? dealer.user_id : "NA" }}
                  </td>
                  <td class="cell100 column3" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.pass ? dealer.pass : "Not saved" }}
                  </td>
                  <td class="cell100 column4" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.created_on | date : "short" }}
                  </td>
                  <td class="cell100 column5" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.expire_date | date : "short" }}
                  </td>
                  <td class="cell100 column6" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{
                    dealer.last_activity_on | date : "dd/MM/yyyy , h:mm:ss a"
                    }}
                  </td>
                  <td class="cell100 column7" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.last_login | date : "dd/MM/yyyy , h:mm:ss a" }}
                  </td>
                  <td class="cell100 column8" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.login_type ? dealer.login_type : "NA" }}
                  </td>
                  <td class="cell100 column9" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.total_vehicle ? dealer.total_vehicle : 0 }}
                  </td>
                  <td class="cell100 column10" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.delDevices ? dealer.delDevices : 0 }}
                  </td>
                  <td class="cell100 column11" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ dealer.point_Allocated ? dealer.point_Allocated : 0 }}
                  </td>
                  <td class="cell100 column11" style="cursor: pointer" (click)="dealerSwitch(dealer)">
                    {{ availablePoint(dealer) }}
                  </td>
                  <td class="cell100 column12" style="cursor: pointer; text-align: center"
                    (click)="dealerSwitch(dealer)">
                    {{
                    dealer.notificationTokenCount
                    ? dealer.notificationTokenCount
                    : 0
                    }}
                  </td>
                  <td class="cell100 column13" style="text-align: center">
                    <i class="far fa-folder-open" md-tooltip="View/Download" style="cursor: pointer"
                      (click)="viewDocuments(dealer)"></i>
                  </td>
                  <td class="cell100 column14" style="text-align: center">
                    <i class="far fa-edit" md-tooltip="Edit" style="cursor: pointer; color: #08de85"
                      (click)="edit_DealerDetail(dealer)"></i>
                  </td>
                  <td class="cell100 column15" style="text-align: center">
                    <i class="fas fa-trash-alt" md-tooltip="Delete" style="cursor: pointer; color: #ff0707"
                      (click)="delete_DealerDetail(dealer)"></i>
                  </td>
                  <td class="cell100 column16" style="text-align: center">
                    <md-slide-toggle [(ngModel)]="dealer.status" style="height: 0px !important" ngDefaultControl
                      (change)="onChange(dealer, $event)"></md-slide-toggle>
                  </td>
                  <td class="cell100 column17" style="text-align: center">
                    <i class="fas fa-user-shield" title="Additonal Access" (click)="user_permission(dealer)"></i>
                  </td>
                  <td class="cell100 column18" style="text-align: center">
                    <i id="pointShare" style="cursor: pointer; color: #f5b515" class="fas fa-coins"
                      (click)="addPoints(dealer)"></i>
                  </td>
                  <td class="cell100 column16" style="text-align: center">
                    <md-slide-toggle [(ngModel)]="dealer.accountSuspended" style="height: 0px !important"
                      ngDefaultControl (change)="accountStatusonChange(dealer, $event)"></md-slide-toggle>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>