%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/views/employee/
Upload File :
Create Path :
Current File : /home/opti/workflow/src/views/employee/index.ejs

   <% include ../partials/header %>

   <!-- ////////////////////////////////////////////////////////////////////////////-->

   <% include ../partials/sidebar %>
  <style>
  .quick-btn { background: #EEEEEE;
  box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
  color: #444444;
  display: inline-block;
  height: 80px;
  margin: 10px;
  padding-top: 16px;
  text-align: center;
  text-decoration: none;
  width: 90px;
  position: relative;
  }
  .quick-btn span {
  display: block;
  }
  .quick-btn .label {
  position: absolute;
  right: -5px;
  top: -5px;
  }
  .quick-btn:hover {
  text-decoration: none;
  color: #fff;
  background-color: #4d7589;
  box-shadow: 3px 4px 1px #ccc;
  }
  .quick-btn.small {
  width: 40px;
  height: 30px;
  padding-top: 6px;
  }

  td form{
    display: inline-block;
  }

  .logo {
    display:flex;
    justify-content:center;
  }

  .logo img {
    margin: 3px 0px;
  }

  .flex {
    display: flex;
    flex-direction: row;

  }
  .flex label{
    flex: 1 1 20%;
  }
  .flex input[type="checkbox"] {
    flex: 1 1 80%;
  }

  td:last-child {
    display: flex;
  }

  td:last-child *{
    flex: 33.333%;
  }

  </style>
   <div class="app-content content">
    <div class="content-wrapper">
      <div class="content-header row">
      </div>
      <div class="content-body">
          <!-- Breadcrumb starts-->

          <div class="content-header row">
              <div class="content-header-left col-md-6 col-12 mb-1">
                <h2 class="content-header-title"> <%= title %></h2>
              </div>
              <div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-12">
                <div class="breadcrumb-wrapper col-12">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a>
                    </li>
                  </ol>
                </div>
              </div>
            </div>
        <!-- Breadcrumb ends-->

        <%- format_messages(messages) %>
        <section id="dom">
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-header">
                    <!-- <h4 class="card-title">DOM / jQuery events</h4> -->
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                      <ul class="list-inline mb-0">
                        <!-- <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        <!-- <li><a data-action="close"><i class="ft-x"></i></a></li> -->
                      </ul>
                    </div>
                  </div>
                  <div class="card-content collapse show">
                    <div class="card-body card-dashboard">
                      <!-- <p class="card-text">Events assigned to the table can be exceptionally useful for
                        user interaction, however you must be aware that DataTables
                        will add and remove rows from the DOM as they are needed (i.e.
                        when paging only the visible elements are actually available
                        in the DOM). As such, this can lead to the odd hiccup when
                        working with events.</p> -->
                        <div class="mb-1 create text-center">
                          <a class="quick-btn" href="#" data-toggle="modal" data-target="#addStaff">
                            <i class="ft-plus"></i><br>
                            Add New
                          </a>
                        </div>
                      <table id="example" class="table table-striped table-bordered dom-jQuery-events">
                        <thead>
                          <tr>
                            <th>S/N</th>
                            <th>Logo</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <!-- <th>Positon</th> -->
                            <%/*
                              <th>Start date</th>
                              <th>Edit/Delete</th>
                            */%>
                            <th>
                                Actions
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                        <% if(allEmployees){ %>
                        <% allEmployees.forEach(function(employee, index){ %>
                        <tr>
                          <td><%= (index + 1) %></td>
                          <td style="display:flex; justify-content: center;"> <img style="height:60px; width: 60px; border-radius: 100%;" src="/assets/images/users/<%= employee.image %>"  /> </td>
                          <td><%= employee.firstName + " " + employee.lastName%></td>
                          <td><%= employee.email %></td>
                          <td> <%= employee.phone %> </td>
                          <td style="">

                            <a href="/employee/view/<%= employee.id %>" class="btn btn-blue" ><i class="la la-eye"></i></a>
                            <button style="margin: 0 2px;" type="button" class="btn btn-icon btn-warning" data-toggle="modal" data-target="#editStaff"
                              id="<%= employee.id %>"
                              firstName="<%= employee.firstName %>"
                              middleName="<%= employee.middleName %>"
                              lastName="<%= employee.lastName %>"
                              gender="<%= employee.gender %>"
                              dob="<%= employee.dob %>"
                              image="<%= employee.image %>"
                              regionId="<%= employee.regionId %>"
                              unitId="<%= employee.unitId %>"
                              departmentId="<%= employee.departmentId %>"
                              branchId="<%= employee.branchId %>"
                              email="<%= employee.email %>"
                              password="<%= employee.password %>"
                              phone="<%= employee.phone %>"
                              gradeId="<%= employee.gradeId %>"
                            ><i class="la la-pencil"></i></button>


                            <form method="POST" action="/employee/delete">
                              <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">
                              <input type="hidden" name="id" value="<%= employee.id %>" />

                              <button style="margin: 0;" type="submit" class="btn btn-icon btn-danger" ><i class="la la-close"></i></button>

                          </form>
                            </td>
                        </tr>
                        <% }); %>

                        <% } else { %>
                        <tr>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                        </tr>
                        <%}%>

                        </tbody>

                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- DOM - jQuery events table -->


      </div>
    </div>
  </div>
<!--
  <div class="modal fade text-left" id="addStaff" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" style="background-color:#1E9FF2;">
        <h3 class="modal-title" id="myModalLabel35"> Create New Employee</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form method="POST" action="/employees" >
    <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">
        <div class="modal-body">
          <fieldset class="form-group floating-label-form-group">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name">
          </fieldset>
          <fieldset class="form-group floating-label-form-group">
            <label for="lastName">Last Name</label>
            <input class="form-control" name="lastName" id="lastName" rows="3" placeholder="Last Name" />
          </fieldset>
          <fieldset class="form-group floating-label-form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" name="email" id="email" placeholder="Email">
          </fieldset>
          <fieldset class="form-group floating-label-form-group">
            <label for="phone">Phone</label>
            <input type="text" class="form-control" name="phone" id="phone" placeholder="Phone Number">
          </fieldset>
          <fieldset class="form-group floating-label-form-group">
            <label for="gender">Gender</label>

            <select class="custom-select" name="gender" id="gender">
              <option value="">Select Gender </option>
              <option value="male">Male</option>
              <option value="female">Female </option>
            </select>
          </fieldset>
          <fieldset class="form-group floating-label-form-group">
            <label for="orgId">Organizations</label>

            <select class="custom-select" name="orgId" id="orgId">
              <option value="">Select Structure </option>

              <% /* allOrganizationStructure.forEach(function(structure, index){ */ %>
                <option value="<%= /* structure.id */ %>"><%= /* structure.name */ %></option>
              <% /* }); */ %>
            </select>
          </fieldset>
        </div>
        <div class="modal-footer">
          <input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
          <input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
        </div>
      </form>
    </div>
  </div>
</div> -->

<!-- ////////////////////////////////////////////////////////////////////////////-->
<form method="POST" action="/employee/add" enctype="multipart/form-data" >
  <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">

<div class="modal fade text-left" id="addStaff" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header" style="background-color:#1E9FF2;">
      <h3 class="modal-title" id="myModalLabel35"> Create New Employee</h3>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div id="accordionWrap1" role="tablist" aria-multiselectable="true">
                <div class="card collapse-icon accordion-icon-rotate" style="">
                  <div id="heading11" class="card-header">
                    <a data-toggle="collapse" data-parent="#accordionWrap1" href="#accordion11" aria-expanded="false" aria-controls="accordion11" class="card-title lead collapsed">User Details <i class="la ft-chevrons-down"></i></a>
                  </div>
                  <div id="accordion11" role="tabpanel" aria-labelledby="heading11" class="collapse show" style="">
                    <div class="card-content">
                      <div class="card-body">
                      <div class="logo">
                          <img id="employeeImage" height="120px" width="120px" style="border-radius: 100%; background-color: black; margin-bottom: 10px;" />
                        </div>
                        <fieldset class="form-group floating-label-form-group row">
                          <div class="col-md-12 row">
                            <div class="col-md-4">
                              <label for="firstName">First Name</label>
                              <input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name">
                              </div>
                              <div class="col-md-4">
                              <label for="middleName">Midlle Name</label>
                              <input type="text" class="form-control" name="middleName" id="middleName" placeholder="Middle Name">
                            </div>
                            <div class="col-md-4">
                              <label for="lastName">Last Name</label>
                              <input type="text" class="form-control" name="lastName" id="lastName" placeholder="Last Name">
                            </div>
                          </div>
                        </fieldset>

                        <fieldset class="form-group floating-label-form-group row">
                          <div class="col-md-12 row">
                          <div class="col-md-4">
                              <label for="gender">Phone No</label>
                             <input class="form-control" type="text" name="phone" id="phone" />
                              </div>
                            <div class="col-md-4">
                              <label for="gender">Gender</label>
                              <select class="custom-select" name="gender" id="gender" >
                                  <option value="male">Male </option>
                                  <option value="female">Female </option>

                              </select>
                              </div>
                              <div class="col-md-4">
                              <label for="dob">Date of Birth</label>
                              <input type="date" class="form-control " name="dob" id="dob" placeholder="Date of birth">
                            </div>
                          </div>
                        </fieldset>



                        <fieldset class="form-group">



                      <div class="custom-file">

                        <input type="file" class="custom-file-input" name="logo" id="image">
                        <label class="custom-file-label" name="file" id="fileLabel" for="image">Choose file</label>
                      </div>
                    </fieldset>
                      </div>
                    </div>
                  </div>
                  <div id="heading12" class="card-header">
                    <a data-toggle="collapse" data-parent="#accordionWrap1" href="#accordion12" aria-expanded="false" aria-controls="accordion12" class="card-title lead collapsed">Business Details <i class="la ft-chevrons-down"></i></a></a>
                  </div>
                  <div id="accordion12" role="tabpanel" aria-labelledby="heading12" class="collapse" aria-expanded="false" style="">
                    <div class="card-content">
                      <div class="card-body">
                      <fieldset class="form-group floating-label-form-group row">
                      <div class="col-md-12 row">
                        <div class="col-md-6">
                          <label for="cOrganisationStructure">Assigned to</label>
                          <select class="custom-select required" name="organisationStructureId" id="cOrganisationStructure" >
                            <option>Select</option>
                            <% if(allOrgStructures && allOrgStructures.length > 0){ %>
                              <% allOrgStructures.forEach( orgStructure => { %>
                                <option value="<%= orgStructure.id %>"><%= orgStructure.structure.name %></option>

                              <% }) %>

                            <% }else { %>

                            <% } %>
                        </select>
                        </div>
                        <div class="col-md-6">
                          <label for="companyStructure">Select <span id="companyStructureName1"></span></label>
                          <select class="custom-select required" name="companyStructureId" id="cCompanyStructure" >
                            <option>Select where to assign first</option>

                        </select>
                        </div>
                      </div>
                    </fieldset>
                    <fieldset class="form-group floating-label-form-group row">
                    <div class="col-md-12 row">

                  <div class="col-md-6">
                    <label for="grade">Grade</label>
                    <select class="custom-select" name="gradeId" id="grade" >

                      <% if(allGrades.length !== 0){ %>
                      <% allGrades.forEach(function(grade){ %>
                      <option value="<%= grade.id %>" > <%= grade.title %> </option>
                      <% })%>
                      <% } else { %>
                      <option value="">No Grade </option>
                      <%}%>

                  </select>
                  </div>

                  <div class="col-md-6">
                      <label for="cOrganisationStructure">Role</label>
                      <select class="custom-select required" name="cOrganisationStructure" id="cOrganisationStructure" >
                        <option value="">Select Role</option>
                        <% if(allRoles && allRoles.length > 0){ %>
                          <% allRoles.forEach( role => { %>
                            <option value="<%= role.id %>"><%= role.name %></option>

                          <% }) %>

                        <% }else { %>
                          <option value="">No Role </option>
                        <% } %>
                      </select>
                    </div>
                    </div>
                  </fieldset>
                  <fieldset class="form-group floating-label-form-group row">
                    <div class="col-md-12 row">

                      <div class="col-md-6">
                        <label for="region">Region</label>
                        <select class="custom-select" name="regionId" id="cRegion" >
                        <option  value="">Select Region </option>
                        <% if(allRegions){ %>
                        <% allRegions.forEach(function(region){ %>
                        <option value="<%= region.id %>" > <%= region.name %> </option>
                        <% })%>
                        <% } else { %>
                        <option value="">No Roles </option>
                        <%}%>

                        </select>
                      </div>
                      <div class="col-md-6">
                        <label for="branch">Branch</label>
                        <select class="custom-select" name="branchId" id="cBranch" >
                        <option value="">Select a Region First </option>

                        </select>
                      </div>

                    </div>
                  </fieldset>
                      </div>
                    </div>
                  </div>
                  <div id="heading13" class="card-header">
                    <a data-toggle="collapse" data-parent="#accordionWrap1" href="#accordion13" aria-expanded="true" aria-controls="accordion13" class="card-title lead">Access Details <i class="la ft-chevrons-down"></i></a>
                  </div>
                  <input type="hidden" name="orgId" value="<%= user.orgId %>" />

                  <div id="accordion13" role="tabpanel" aria-labelledby="heading13" class="collapse" aria-expanded="false" style="">
                    <div class="card-content">
                      <div class="card-body">
                      <fieldset class="form-group floating-label-form-group row">
                      <div class="col-md-12 row">
                        <div class="col-md-6">
                          <label for="email">Email</label>
                          <input type="text" class="form-control" name="email" id="email" placeholder="Email">
                          </div>
                          <div class="col-md-6">
                          <label for="password">Password</label>
                          <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                        </div>

                      </div>

                    </fieldset>


                      </div>
                    </div>

                  </div>
                  <div style="display: flex; justify-content: center;">
                      <button class="btn btn-success btn-min-width mr-1 mb-1" type="submit">Save</button>
                    </div>
                </div>
               </div>
  </div>
</div>
</div>
</form>

<form method="POST" action="/employee/edit" id="editForm" enctype="multipart/form-data" >
  <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">

<div class="modal fade text-left" id="editStaff" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header" style="background-color:#1E9FF2;">
      <h3 class="modal-title" id="myModalLabel35">  Update Employee</h3>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div id="accordionWrap2" role="tablist" aria-multiselectable="true">
                <div class="card collapse-icon accordion-icon-rotate" style="height: 438px;">

                  <div id="heading11" class="card-header">
                    <a data-toggle="collapse" data-parent="#accordionWrap2" href="#accordion21" aria-expanded="false" aria-controls="accordion11" class="card-title lead collapsed">User Details <i class="la ft-chevrons-down"></i></a>
                  </div>
                  <div id="accordion21" role="tabpanel" aria-labelledby="heading11" class="collapse show" style="">
                    <div class="card-content">
                      <div class="card-body">
                      <div class="logo">
                          <img id="employeeImage" height="120px" width="120px" style="border-radius: 100%; background-color: black; margin-bottom: 10px;" />
                        </div>
                        <fieldset class="form-group floating-label-form-group row">
                          <div class="col-md-12 row">
                            <div class="col-md-4">
                              <label for="firstName">First Name</label>
                              <input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name">
                              </div>
                              <div class="col-md-4">
                              <label for="middleName">Midlle Name</label>
                              <input type="text" class="form-control" name="middleName" id="middleName" placeholder="Middle Name">
                            </div>
                            <div class="col-md-4">
                              <label for="lastName">Last Name</label>
                              <input type="text" class="form-control" name="lastName" id="lastName" placeholder="Last Name">
                            </div>
                          </div>
                        </fieldset>

                        <fieldset class="form-group floating-label-form-group row">
                          <div class="col-md-12 row">
                          <div class="col-md-4">
                              <label for="gender">Phone No</label>
                             <input class="form-control" type="text" name="phone" id="phone" />
                              </div>
                            <div class="col-md-4">
                              <label for="gender">Gender</label>
                              <select class="custom-select" name="gender" id="gender" >
                                  <option value="male">Male </option>
                                  <option value="female">Female </option>

                              </select>
                              </div>
                              <div class="col-md-4">
                              <label for="dob">Date of Birth</label>
                              <input type="date" class="form-control required" name="dob" id="dob" placeholder="Date of birth">
                            </div>
                          </div>

                        </fieldset>



                        <fieldset class="form-group">
                        <div class="row">
                            <div class="custom-file col-md-10">

                                <input type="file" class="custom-file-input" name="logo" id="image">
                                <input type="hidden" name="id" />
                                <label class="custom-file-label" name="file" id="fileLabel" for="image">Choose file</label>
                            </div>

                        </div>




                    </fieldset>
                      </div>
                    </div>
                  </div>
                  <div id="heading12" class="card-header">
                    <a data-toggle="collapse" data-parent="#accordionWrap2" href="#accordion22" aria-expanded="false" aria-controls="accordion12" class="card-title lead collapsed">Business Details <i class="la ft-chevrons-down"></i></a></a>
                    <div class="flex">
                        <label for="editBusiness">Edit Business Details?</label>
                        <input class="form-control" type="checkbox" id="editBusiness" name="editBusiness">
                    </div>
                  </div>
                  <div id="accordion22" role="tabpanel" aria-labelledby="heading12" class="collapse" aria-expanded="false" style="">
                    <div class="card-content">
                      <div class="card-body">
                      <fieldset class="form-group floating-label-form-group row">
                      <div class="col-md-12 row">
                              <div class="col-md-6">
                                <label for="uOrganisationStructure">Assigned to</label>
                                <select class="custom-select required" name="uOrganisationStructure" id="uOrganisationStructure" >
                                  <option value="">Select</option>
                                  <% if(allOrgStructures && allOrgStructures.length > 0){ %>
                                    <% allOrgStructures.forEach( orgStructure => { %>
                                      <option value="<%= orgStructure.id %>"><%= orgStructure.structure.name %></option>

                                    <% }) %>

                                  <% }else { %>
                                    <option value="">No Organisation Structure</option>
                                  <% } %>
                              </select>
                              </div>
                              <div class="col-md-6">
                                <label for="companyStructure">Select <span id="companyStructureName2"></span></label>
                                <select class="custom-select required" name="companyStructure" id="uCompanyStructure" >
                                  <option>Select where to assign first</option>

                              </select>
                              </div>
                      </div>
                    </fieldset>
                    <fieldset class="form-group floating-label-form-group row">
                    <div class="col-md-12 row">


                      <div class="col-md-6">
                    <label for="grade">Grade</label>
                    <select class="custom-select" name="gradeId" id="grade" >
                      <option class="">Select  Grade </option>
                      <% if(allGrades.length !== 0){ %>
                      <% allGrades.forEach(function(role){ %>
                      <option value="<%= role.id %>" > <%= role.title %> </option>
                      <% })%>
                      <% } else { %>
                      <option value="" >No Grade </option>
                      <%}%>
                  </select>
                  </div>

                  <div class="col-md-6">
                      <label for="cOrganisationStructure">Role</label>
                      <select class="custom-select required" name="cOrganisationStructure" id="cOrganisationStructure" >
                        <option>Select Role</option>
                        <% if(allRoles && allRoles.length > 0){ %>
                          <% allRoles.forEach( role => { %>
                            <option value="<%= role.id %>"><%= role.name %></option>

                          <% }) %>

                        <% }else { %>
                          <option >No Role </option>
                        <% } %>
                      </select>
                    </div>

                    </div>
                  </fieldset>
                  <fieldset class="form-group floating-label-form-group row">
                    <div class="col-md-12 row">
                    <div class="col-md-6">
                    <label for="region">Region</label>
                    <select class="custom-select" name="region" id="uRegionId" >
                    <option value="">Select a Region </option>
                    <% if(allRegions.length > 0) { %>
                    <% allRegions.forEach(function(region){ %>
                    <option value="<%= region.id %>" > <%= region.name %> </option>
                      <% })%>
                    <% } else { %>
                    <option value="">No Region </option>
                    <%}%>

                  </select>
                  </div>
                      <div class="col-md-6">
                        <label for="branch">Branch</label>
                        <select class="custom-select" name="branch" id="uBranch" >
                            <option value="">Select Region First </option>

                        </select>
                      </div>

                    </div>
                  </fieldset>

                      </div>
                    </div>
                  </div>
                  <!-- <div id="heading13" class="card-header">
                    <a data-toggle="collapse" data-parent="#accordionWrap2" href="#accordion33" aria-expanded="true" aria-controls="accordion13" class="card-title lead">Access Details <i class="la ft-chevrons-down"></i></a>
                  </div> -->


              <!--    <div id="accordion33" role="tabpanel" aria-labelledby="heading13" class="collapse" aria-expanded="false" style="">
                    <div class="card-content">
                      <div class="card-body">
                      <fieldset class="form-group floating-label-form-group row">
                      <div class="col-md-12 row">
                        <div class="col-md-6">
                          <label for="email">Email</label>
                          <input type="text" class="form-control" name="email" id="email" placeholder="Email">
                          </div>
                          <div class="col-md-6">
                          <label for="password">Password</label>
                          <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                        </div>

                      </div>

                    </fieldset>



                      </div>
                    </div>

                  </div>
                -->
                  <div style="display: flex; justify-content: center;">
                      <button class="btn btn-success btn-min-width mr-1 mb-1" type="submit">Save</button>
                    </div>

                </div>

              </div>
  </div>
</div>
</div>
</form>

   <% include ../partials/footer %>


   <script>

      //var imagePath = $(this).val();
      var file = document.getElementById('image').files[0];
      document.getElementById('image').onchange = function (evt) {
      var tgt = evt.target || window.event.srcElement,
          files = tgt.files;

      $('#fileLabel').html(files[0].name)
      // FileReader support
      if (FileReader && files && files.length) {
          var fr = new FileReader();
          fr.onload = function () {
              document.getElementById('employeeImage').src = fr.result;
          }
          fr.readAsDataURL(files[0]);

      }

      // Not supported
      else {
          // fallback -- perhaps submit the input to an iframe and temporarily store
          // them on the server until the user's session ends.
      }
    }
   </script>

   <script>
  //  $('table#example').DataTable();


    $('#editStaff').on('show.bs.modal', function (e) {

      var opener = e.relatedTarget; // Button that triggered the modal

      var firstName = $(opener).attr('firstName'); // Extract info from data-* attributes
      var middleName = $(opener).attr('middleName');
      var lastName = $(opener).attr('lastName');
      var gender = $(opener).attr('gender');
      var dob = $(opener).attr('dob');

      var image = $(opener).attr('image');
      var user_role = $(opener).attr('user_role');
      var unitId = $(opener).attr('unitId');
      var regionId = $(opener).attr('regionId');
      var departmentId = $(opener).attr('departmentId');
      var id = $(opener).attr('id');
      var email = $(opener).attr('email');
      // var password = $(opener).attr('password');
      var phone = $(opener).attr('phone');
      var gradeId = $(opener).attr('gradeId');
      console.log(departmentId)

      $('#editForm').find('[name="firstName"]').val(firstName);
      $('#editForm').find('[name="middleName"]').val(middleName);
      $('#editForm').find('[name="lastName"]').val(lastName);
      $('#editForm').find('[name="gender"]').val(gender.toLowerCase());
      $('#editForm').find('[name="dob"]').val(dob);
      $('#editForm').find('[name="image"]').val(image);
      $('#editForm').find('[name="user_role"]').val(user_role);
      $('#editForm').find('[name="unitId"]').val(unitId)
      $('#editForm').find('[name="phone"]').val(phone);
      $('#editForm').find('[name="id"]').val(id);
      $('#editForm').find('[name="departmentId"]').val(departmentId);
      $('#editForm').find('[name="email"]').val(email);
      $('#editForm').find('[name="regionId"]').val(regionId)
      $('#editForm').find('[name="gradeId"]').val(gradeId)



  });
   </script>



   <script>

    function populateCompanyStructures(structures, selector){
      var element = $(selector);
      element.html('');
      element.append("<option>Select</option>");
      structures.forEach(function(structure){
        element.append('<option value="'+ structure.id +'">' + structure.name + '</option>')
      })
    }

    function getCompanyStructures(orgStructureId, next){

      $('#spinnerContainer').addClass('show');
        // $.ajax({
        //     type: 'get',
        //     url: '/structure/company/get',
        //     dataType: 'jsonp',
        //     data: { orgStructId: orgStructureId},
        //     success: function(data) {
        //       // data = JSON.parse(data)
        //       console.log("Data: ", data);
        //       $('#spinnerContainer').removeClass('show');
        //       alert("Success")

        //     },
        //     error: function(err){
        //       $('#spinnerContainer').removeClass('show');
        //       //$.alert(err)
        //       console.log(err, "Error")
        //     }
        //   });

        let fetchData = {
            method: 'get',

            headers: new Headers()
        }
        // var myHeaders = new Headers();

        // var myInit = { method: 'GET',
        //               headers: myHeaders,
        //               mode: 'cors',
        //               cache: 'default' };

        // var myRequest = new Request('flowers.jpg', myInit);

        fetch('/structure/company/get?orgStructId=' + orgStructureId, fetchData) // Call the fetch function passing the url of the API as a parameter
        .then(function(res) {
            // Your code for handling the data you get from the API
            res.json().then(function(data){
              console.log(data, "Data")
              $('#spinnerContainer').removeClass('show');
              next(data)
            })

        })
        .catch(function(err) {
            // This is where you run code if the server returns any errors
            console.log(err, "Error")

        });

     }


     $('#cOrganisationStructure').change(function(e){
      var value = $(this).val();
      var text = $("#cOrganisationStructure option:selected").text();
      $('#companyStructureName1').html(text)
      console.log(text)
      if(value){
        getCompanyStructures(value, function(data){
          populateCompanyStructures(data, '#cCompanyStructure')
        })
      }
      })

      $('#uOrganisationStructure').change(function(e){
      var value = $(this).val();
      var text = $("#uOrganisationStructure option:selected").text();
      $('#companyStructureName2').html(text)
      console.log(text)
      if(value){
        getCompanyStructures(value, function(data){
          populateCompanyStructures(data, '#uCompanyStructure')
        })
      }
      })
   </script>

   <script>

   function getRegionBranches(regionId, next){
    let fetchData = {
            method: 'get',

            headers: new Headers()
        }

        fetch('/branch/get/' + regionId , fetchData) // Call the fetch function passing the url of the API as a parameter
        .then(function(res) {
            // Your code for handling the data you get from the API
            res.json().then(function(data){
              console.log(data, "Data")
              $('#spinnerContainer').removeClass('show');
              next(data)
            })

        })
        .catch(function(err) {
            // This is where you run code if the server returns any errors
            console.log(err, "Error")

        });

   }

   $('#uRegionId').change(function(e){
     var regionId = $(this).val();
     getRegionBranches(regionId, function(data){
      var branchElement =$('#uBranch');
      branchElement.html('')
      branchElement.append("<option>Select Branch</option>");
       data.forEach(function(branch){
         branchElement.append('<option value="' + branch.id + '">'+  branch.name + '</option>')
       })

     })
   })

   $('#cRegion').change(function(e){
     var regionId = $(this).val();
     getRegionBranches(regionId, function(data){
      var branchElement =$('#cBranch');
      branchElement.html('')
      branchElement.append("<option>Select Branch</option>");
       data.forEach(function(branch){
         branchElement.append('<option value="' + branch.id + '">'+  branch.name + '</option>')
       })

     })
   })
   </script>

Zerion Mini Shell 1.0