<!-- Main content -->
<section class="content-header clearfix">
    <h2 translate class="subheader-title">
        <span class="subheader-icon fal fa-users"></span>&nbsp;   User Project Mapping
    <small> </small>
  </h2>
</section>


  <!--<div class="row pull-right">
      <app-helpdesk [menuId]="sendMenuId" [pageName]="sendPageName"></app-helpdesk>
    </div>-->



  <section class="content">
    <div class="box padding-15" style="display: block;">
      <form [formGroup]="userProjectForm">
        <div class="row">
        <div class="col-md-10 col-sm-12 col-lg-8" >
          <div class="form-group row">
            <label class="col-sm-4 control-label" for="Project">Select Project Definition Subtitle </label>
            <div class="col-sm-8">
              <select class="form-control" formControlName="project_definitionid" id="project_definitionid"
                (change)="GetMappedUserList()">
                <option [value]="0">--Select--</option>
                <option *ngFor="let projectDefinition of projectDefinitions"
                  [value]="projectDefinition.projectdefinitionid">
                  {{projectDefinition.project_subtitle}}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-4 control-label" for="Project">Select Department</label>
            <div class="col-sm-8">
              <select class="form-control" formControlName="departmentid" id="departmentid" (change)="GetUser()">
                <option [value]="0">--Select--</option>
                <option *ngFor="let department of departments" [value]="department.departmentid">
                  {{department.department}}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-4 control-label" for="Project">Select Users</label>
            <div class="col-sm-8">
              <dual-list [source]="userList" key="userid" display="firstname" [filter]="filter"
                [(destination)]="selectedUserList" (destinationChange)="destinationChange($event)" height="200px"
                [format]="format"></dual-list>
            </div>
          </div>
          <div class="form-group row text-right">       
            <div class="col-sm-12" style="margin: 15px 0px;">
              <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm m-r-10" [disabled]="!formTocuhed"
                (click)="MapUserProject()">
                Save
              </button>
              <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="clear()">
                Cancel
              </button>
            </div>
          </div>
        </div>
		</div>	
      </form>
  </div>
  </section>

  <ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
  </ngx-spinner>