mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim-api.git
synced 2026-08-19 04:24:01 +00:00
added Contacts page frontend and search contacts page is complete
This commit is contained in:
Aqeeb Imtiaz Harun
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>AzureUI - CONTACT</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,900" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/global.style.css">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Wrapper Content Start Here -->
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- Wrapper Inline Start Here -->
|
||||
<div class="wrapper-inline">
|
||||
<div class="search-result-header fix-searchbar">
|
||||
<a id="btnback" type="button" class="search-result-btn" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Page Content Start Here -->
|
||||
<main class="fix-top-menu">
|
||||
<section class="container">
|
||||
|
||||
<!-- Navigation Body Start Here -->
|
||||
<div class="cont-menu">
|
||||
|
||||
<!-- Navigation Menu Start Here -->
|
||||
<cont class="menu">
|
||||
<div class="form-divider"></div>
|
||||
<a> Add New Friend</a>
|
||||
<div class="list-box-emp">
|
||||
<a href="#" class="list-item">
|
||||
<i class="fa fa-user"></i>
|
||||
<em class="seperate-contact"></em>
|
||||
<span class="list-item-title-contact">Chua</span>
|
||||
<br />
|
||||
<span class="list-item-title-contact" style="margin-top:-13px; color: #029900">Izyim Exist</span>
|
||||
<span class="list-item-title-role" style="margin-top:-13px; float: right">Add</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-box-emp">
|
||||
<a href="#" class="list-item">
|
||||
<i class="fa fa-user" style="color: #000"></i>
|
||||
<em class="seperate-contact"></em>
|
||||
<span class="list-item-title-contact">John</span>
|
||||
<br />
|
||||
<span class="list-item-title-contact" style="margin-top:-13px;">012-3124455</span>
|
||||
<span class="list-item-title-role" style="margin-top:-13px; float: right">Invite</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Menu navigation start -->
|
||||
<div class="cont-container">
|
||||
<ul id="search_results" class="main-menu" style="background-color: #FFF">
|
||||
|
||||
</ul>
|
||||
<div class="form-divider"></div>
|
||||
</div>
|
||||
<!-- Menu navigation end -->
|
||||
|
||||
</cont>
|
||||
<!-- Navigation Menu End Here-->
|
||||
|
||||
</div>
|
||||
<!-- Navigation Body Start Here -->
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<!-- Page Content End Here -->
|
||||
|
||||
</div>
|
||||
<!-- Wrapper Inline End Here -->
|
||||
|
||||
</div>
|
||||
<!-- Wrapper Content End Here -->
|
||||
|
||||
<div class="popup-overlay" id="formPopup5" style="display: none">
|
||||
<!-- if you dont want overlay add class .no-overlay -->
|
||||
<div class="popup-container">
|
||||
<div class="popup-header">
|
||||
<h3 class="popup-title" >Add a Contact</h3>
|
||||
<span class="popup-close" data-dismiss="true"><i class="fa fa-times"></i></span>
|
||||
</div>
|
||||
<div class="popup-content">
|
||||
|
||||
<div class="form-row-group with-icons-no-padding">
|
||||
<div class="form-row no-padding">
|
||||
<div class="form-element-title">
|
||||
<label id="companyname" style="color: #000">Company Name</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-divider"></div>
|
||||
|
||||
<div class="form-row no-padding">
|
||||
<div class="form-element-title">
|
||||
<label id="telno" style="color: #000">Telephone number</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-divider"></div>
|
||||
|
||||
<div class="form-row no-padding">
|
||||
<div class="form-element-title">
|
||||
<label id="contactpers" style="color: #000">Contact Person</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-divider"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="popup-footer">
|
||||
<button class="button blue" id="addContact" data-dismiss="true">Add Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="js/global.script.js"></script>
|
||||
<!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
|
||||
|
||||
<script type="text/javascript">
|
||||
//var company_name, tel_no, contact_person;
|
||||
$('#search').on('keyup', function(){
|
||||
$('#search_results').empty();
|
||||
var ul, li, data;
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "api/company/search",
|
||||
headers: {"Authorization": 'Bearer' + localStorage.getItem('token')},
|
||||
data: {search: $('#search').val()},
|
||||
|
||||
success:function(data){
|
||||
console.log(data);
|
||||
for(i=0; i<data.length; i++){
|
||||
$('#search_results').append('<li style="display: show;"> <a href="#" onclick="displayCompany(' + "'" + data[i].company_name + "'" + ',' + "'" + data[i].tel_no + "'" + ',' + "'" + data[i].contact_person + "'" + ',' + "'" + data[i].com_id + "'" + ')"> <i class="fa fa-user"></i>' + data[i].company_name + '<span class="list-item-title-role" style="margin-top:-10px">' + data[i].tel_no + '</span> <br> <span class="list-item-title-role" style="margin-top:-10px">'+ data[i].contact_person);
|
||||
}
|
||||
//$('#searchresults').show();
|
||||
},
|
||||
error:function(data){
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
//displayCompany.apply(this, data);
|
||||
function displayCompany(company_name, tel_no, contact_person, com_id){
|
||||
$('#companyname').text(company_name);
|
||||
$('#telno').text(tel_no);
|
||||
$('#contactpers').text(contact_person);
|
||||
|
||||
$('#formPopup5').show();
|
||||
$('#addContact').click(function() {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "api/contacts",
|
||||
headers: {"Authorization": 'Bearer' + localStorage.getItem('token')},
|
||||
data: {
|
||||
com_id: com_id,
|
||||
},
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// function CSearch() {
|
||||
// // Declare variables
|
||||
// var input, filter, ul, li, a, i;
|
||||
// input = document.getElementById('searchInput');
|
||||
// filter = input.value.toUpperCase();
|
||||
// ul = document.getElementById("searchresults");
|
||||
// li = ul.getElementsByTagName('li');
|
||||
// if (input.value.length == 0) {
|
||||
// ul.style.display = "none";
|
||||
// } else {
|
||||
// ul.style.display = "block";
|
||||
// }
|
||||
// // Loop through all list items, and hide those who don't match the search query
|
||||
// for (i = 0; i < li.length; i++) {
|
||||
// a = li[i].getElementsByTagName("a")[0];
|
||||
// if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
|
||||
// li[i].style.display = "block";
|
||||
// } else {
|
||||
// li[i].style.display = "none";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// document.getElementById("btnback").onclick = function () {
|
||||
// javascript: history.back();
|
||||
// };
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+2
-2
@@ -1241,7 +1241,7 @@
|
||||
<div class="popup-footer">
|
||||
<div class="txt-center">
|
||||
<button class="button red" data-dismiss="true">Delete Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1268,7 +1268,7 @@
|
||||
<a href="#" class="button block blue">Print Marking</a>
|
||||
<div class="form-divider-2"></div>
|
||||
<a href="#" class="button block blue">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,9 +23,9 @@
|
||||
<!-- or without .fix-searchbar -->
|
||||
<form class="fix-searchbar">
|
||||
<input type="text" id="search" name="search" class="form-element" placeholder="search by company/phone no/name">
|
||||
<!--
|
||||
<!--
|
||||
<input type="text" id="searchInput" class="form-element" placeholder="search by company/phone no/name" onkeyup="CSearch()">-->
|
||||
<button id="btnback" type="button" class="search-result-btn"><i class="fa fa-arrow-left"></i></button>
|
||||
<a id="btnback" type="button" class="search-result-btn" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user