Mini Shell
Mini Shell
| Direktori : /home/opti/workflow/src/views/account/contact/ |
| 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>