OneQlik/src/app/device-setting/device-setting.component.html

<div style="top: 0;position: absolute;">
  <app-all-menus></app-all-menus>

</div>
<div class="loading" *ngIf="Load">Loading&#8230;</div>
<div class="main">
  <!-- <div class="card"> -->
    <div class="topnav">
      <a class="active">Device Transfer</a>
     
      <div class="search-container">
        <form [formGroup]="searchForm" (ngSubmit)="submit()">
          <input type="text" placeholder="Search.." formControlName="imei" [ngClass]="{ 'is-invalid': submitted && f.imei.errors }" name="imei">
          <button type="submit"><i class="fa fa-search"></i></button>
        
          <div *ngIf="submitted && f.imei.errors" class="invalid-feedback">
            <div *ngIf="f.imei.errors.required">Please Enter IMEI Number</div>
          </div>
        </form>
      </div>
      
    </div>
    

    <div style="padding-left:16px;height: 100vh;">
    <form [formGroup]="deviceForm" class="row g-3 mt-3">
      <div class="col-md-4">
        <label class="form-label">IMEI Number</label>
        <input type="text" readonly formControlName="imei" class="form-control">
      </div>

      <div class="col-md-4">
        <label class="form-label">Registration Number</label>
        <input type="text" readonly formControlName="registrationNumber" class="form-control">
      </div>

       <div class="col-md-4">
          <label class="form-label">Status</label>
          <input type="text" readonly formControlName="status" class="form-control">
        </div>

      
<!-- formControlName="superAdmin" (change)="selectSupAdmin($event)" -->
   
        <div class="col-md-4">
          <div>
            <label class="form-label">Super Admin</label>

          </div>
          <select id="distributer" multiple="multiple">
            <option *ngFor="let item of ditributers" [value]="item._id" [selected] = "item._id === selectedSupAdmin" >{{item.first_name?item.first_name:""}} {{item.last_name?item.last_name:""}}</option>

          </select>
          <!-- <input type="text"  formControlName="superAdmin" class="form-control"> -->
        </div>

        <div class="col-md-4">
          <div>
            <label class="form-label">Dealer</label>
          </div>
           <select id="dealer" multiple="multiple">
            <option *ngFor="let item of dealers" [value]="item._id" [selected] = "item._id === selectedDealer">{{item.first_name?item.first_name:""}} {{item.last_name?item.last_name:""}}</option>

          </select>
          <!-- <input type="text" readonly formControlName="dealaer" class="form-control"> -->
        </div>

        <div class="col-md-4">
          <div>

            <label class="form-label">User</label>
          </div>

          <select id="user" multiple="multiple">
            <option *ngFor="let item of users" [value]="item._id"  [selected] = "item._id === selectedUser">{{item.first_name?item.first_name:""}} {{item.last_name?item.last_name:""}}</option>

          </select>
          <!-- <input type="text" readonly formControlName="user" class="form-control"> -->
        </div>

         <!-- <div class="col-md-4">
        <label class="form-label">Sim 2</label>
        <input type="text" readonly formControlName="sim2" class="form-control">
      </div>


        <div class="col-md-4">
          <label class="form-label">Vehicle Type</label>
          <input type="text" readonly formControlName="vehicleType" class="form-control">
        </div>

        <div class="col-md-4">
          <label class="form-label">Device Model</label>
          <input type="text" readonly formControlName="deviceModel" class="form-control">
        </div>

     <div class="col-md-4">
        <label class="form-label">Sim 1</label>
        <input type="text" readonly formControlName="sim1" class="form-control">
      </div>

        <div class="col-md-4">
          <label class="form-label">Creation date</label>
          <input type="text" readonly formControlName="creationDate" class="form-control">
        </div>

        <div class="col-md-4">
          <label class="form-label">Expiration date</label>
          <input type="text" readonly formControlName="expirationDate" class="form-control">
        </div>

        <div class="col-md-4">
          <label class="form-label">Last Renewal Date</label>
          <input type="text" readonly formControlName="lastRenewal" class="form-control">
        </div>

        <div class="col-md-4">
          <label class="form-label">Deleted</label>
          <input type="text" readonly formControlName="deleted" class="form-control">
        </div>

        <div *ngIf="!deleteShow" class="col-md-4">
          <label class="form-label">Deleted By</label>
          <input type="text" readonly formControlName="deletedBy" class="form-control">
        </div>
        
        <div *ngIf="!deleteShow" class="col-md-4">
          <label class="form-label">Deleted At</label>
          <input type="text" readonly formControlName="deletedAt" class="form-control">
        </div>

        <div *ngIf="!deleteShow" class="col-md-4">
          <label class="form-label">Deleted From</label>
          <input type="text" readonly formControlName="deletedFrom" class="form-control">
        </div> -->

        <!-- <div *ngIf="deleteShow" class="col-md-12 text-center mt-4">
            <button class="btn btn-danger" (click)="deleteDevice()">Delete <i class="fa fa-trash"></i></button>
        </div>

         <div *ngIf="deleted" class="col-md-12 text-center mt-4">
            <button class="btn btn-danger" (click)="deleteDevicePermenatly()">Delete Permanatly <i class="fa fa-trash"></i></button>
        </div> -->

      <div *ngIf="deleteShow" class="col-md-12 text-center mt-4">
            <button class="btn btn-primary" (click)="deleteDevice()">Save <i class="fa fa-save"></i></button>
        </div>
    </form>
    </div>
   
  </div>
<!-- </div> -->