Menu jquery-ified. Add customer autocomplete replaced with custom dialog box

This commit is contained in:
Karl Cordes 2010-03-16 14:20:38 +11:00
parent a6873f7823
commit 625eb8e42a
9 changed files with 365 additions and 225 deletions

View file

@ -101,11 +101,13 @@ class CustomersController extends AppController {
}
/* Autocomplete the customer name - Used in: add.ctp */
/* Autocomplete the customer name - Used in: find.ctp */
function completeCustomer() {
$query = strtolower($_GET["term"]);
//$this->set('customers_json', print_r($this->data));
if($query == null) {
return;
}
@ -142,6 +144,28 @@ class CustomersController extends AppController {
}
function similarCustomers() {
App::import('Core', 'Sanitize');
$query = Sanitize::clean($this->data['Customer']['name']);
$customers = $this->Customer->find('all', array(
'conditions' => array(
'Customer.name LIKE' => '%'.$query.'%'
),'fields' => array('Customer.name'),
'order' => array('Customer.name ASC')
));
$this->set('customers', $customers);
$this->layout = 'ajax';
}
function find() {
if(!empty($this->data)) {
$customer = $this->Customer->findByName($this->data['Customer']['name']);

View file

@ -8,7 +8,6 @@
<?php
echo $form->input('name', array('id'=>'customerName'));
echo "<br><br><span class=\"warning\">If the Customer you are adding appears automatically, it already exists in the ".$html->link('Customers Index', array('action' => 'index')). "<br>Do Not Add Duplicates.</span>";
echo $form->input('country_name', array('default'=>'Australia'));
echo $form->input('country_id', array('type'=>'hidden', 'value'=>1));
@ -44,3 +43,9 @@
</ul>
</div>
<div id="dialog" title="Is this customer already in the database?">
<p>Please confirm the customer you are adding is not one of these customers:</p>
<ul id="similarCustList">
</ul>
</div>

View file

@ -0,0 +1,8 @@
<?
foreach ($customers as $customer) {
echo "<li>";
echo $html->link($customer['Customer']['name'],array('controller'=>'customers', 'action'=>'view',$customer['Customer']['id']));
echo "</li>";
}
?>

View file

@ -23,6 +23,7 @@
echo $javascript->link('jquery-ui');
echo $javascript->link('jquery.form');
echo $javascript->link('menu');
echo $scripts_for_layout;
@ -50,59 +51,58 @@
?>
</div>
<div id = "nav">
<div id = "navdiv">
<ul id="nav">
<li><h3><?php echo $html->link('Enquiries', '/enquiries/index'); ?></h3>
<ul>
<li><?php echo $html->link('Enquiry Register', '/enquiries/index'); ?></li>
<li><?php echo $html->link('Enquiries', '/enquiries/index'); ?><ul>
<li class="last"><?php echo $html->link('Enquiry Register', '/enquiries/index'); ?></li>
</ul>
</li>
<li><h3><?php echo $html->link('Customers', '/customers/index'); ?></h3>
<li><?php echo $html->link('Customers', '/customers/index'); ?>
<ul>
<li><?php echo $html->link('Customer Index', '/customers/index'); ?></li>
<li><?php echo $html->link('Find Customer', '/customers/find'); ?></li>
<li><?php echo $html->link('Add Customer', '/customers/add'); ?></li>
<li><?php echo $html->link('Industries', '/industries/index'); ?></li>
<li class="last"><?php echo $html->link('Industries', '/industries/index'); ?></li>
</ul>
</li>
<li><h3><?php echo $html->link('Contacts', '/contacts/index'); ?></h3>
<li><?php echo $html->link('Contacts', '/contacts/index'); ?>
<ul>
<li><?php echo $html->link('Contact Index', '/contacts/index'); ?></li>
</ul>
</li>
<li><h3><?php echo $html->link('Products', '/products/index'); ?></h3>
<li><?php echo $html->link('Products', '/products/index'); ?>
<ul>
<li><?php echo $html->link('Product Index', '/products/index'); ?></li>
<li><?php echo $html->link('Add Product', '/products/add'); ?></li>
<li class="last"><?php echo $html->link('Add Product', '/products/add'); ?></li>
</ul>
</li>
<li><h3><?php echo $html->link('Quotes', '/quotes/index'); ?></h3>
<li><?php echo $html->link('Quotes', '/quotes/index'); ?>
<ul>
<li><?php echo $html->link('Quote Index', '/quotes/index'); ?></li>
<li><?php echo $html->link('Find Quote', '/quotes/find'); ?></li>
<li class="last"><?php echo $html->link('Find Quote', '/quotes/find'); ?></li>
</ul>
</li>
<li><h3><?php echo $html->link('Principles', '/principles/index'); ?></h3>
<li><?php echo $html->link('Principles', '/principles/index'); ?>
<ul>
<li><?php echo $html->link('Principle Index', '/principles/index'); ?></li>
<li><?php echo $html->link('Add Principle', '/principles/add'); ?></li>
<li class="last"><?php echo $html->link('Add Principle', '/principles/add'); ?></li>
</ul>
</li>
<li><h3><?php echo $html->link('Users', '/users/index'); ?></h3>
<li><?php echo $html->link('Users', '/users/index'); ?>
<ul>
<li><?php echo $html->link('Users Index', '/users/index'); ?></li>
<li><?php echo $html->link('Add User', '/users/add'); ?></li>
<li class="last"><?php echo $html->link('Add User', '/users/add'); ?></li>
</ul>
</li>
<li><h3><?php echo $html->link('Help', '/pages/help'); ?></h3>
<li><?php echo $html->link('Help', '/pages/help'); ?>
<ul>
<li><?php echo $html->link('About', '/pages/about'); ?></li>
<li class="last"><?php echo $html->link('About', '/pages/about'); ?></li>
</ul>
</li>

View file

View file

@ -135,7 +135,8 @@ ul.principle-emails {
#header{
/* background: #E9E9E9 url(../img/top-gradient2.png) repeat-x bottom; */
background: #7bf47b url(../img/gradient-blue4.png) repeat-x bottom;
/* background: #4686c3 url(../img/gradient-blue4.png) repeat-x bottom; */
background: #4686c3;
/* background: #6BBA70; */
padding-bottom: 2%;
}
@ -176,81 +177,95 @@ ul.principle-emails {
color: #FFFFFF;
}
/* nav CSS based on http://www.queness.com/post/1047/easy-to-style-jquery-drop-down-menu-tutorial */
#nav {
width: 100%;
margin:0;
padding:0;
list-style:none;
}
#nav h3 {
font-size: 120%;
font-weight: bold;
color:#FFFFFF;
/* background: #E9E9E9; */
padding-left: 0.1em;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
float:left;
display:block;
width:120px;
padding-right: 1em;
position:relative;
z-index:500;
margin:0 1px;
background: #4686c3;
}
#nav h3 a{
font-size: 160%;
font-weight: normal;
color:#FFFFFF;
width: 100%;
/* background: #E9E9E9; */
/* this is the parent menu */
#nav li a {
display:block;
width: 120px;
padding:8px 5px 0 5px;
height:23px;
text-decoration:none;
color:#fff;
text-align:center;
}
#nav h3 a:hover {
/* background: #E9E9E9; */
#nav li a:hover {
color:#fff;
}
#nav, #nav ul { /* all lists */
/* you can make a different style for default selected value */
#nav a.selected {
color:#f00;
}
/* submenu, it's hidden by default */
#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
/* border: 1px solid #000;*/
}
/* used in the nav. so the borders are clean and 1px without doubling up */
li .last {
border-bottom:1px solid #000;
}
/* display block will make the link fill the whole area of LI */
#nav ul a {
display:block;
height: auto;
padding: 8px 5px;
font-size: 80%;
}
#nav ul a:hover {
text-decoration:underline;
}
/*used for the jquery menu */
.clear {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
padding-left: 0.5em;
padding-bottom:0.5em;
display: block;
width: 10em;
}
#nav a:hover {
}
#nav li { /* all list items */
float: left;
width: 8em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none it read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#nav li ul a {
background: #4687c3;
color: #FFFFFF;
}
#nav li ul a:hover {
background:#5d9cd7;
clear: both;
}
/* END NAV */
#content{
background: #fff;
@ -1023,7 +1038,7 @@ div.tipbox {
li.selected { background-color: #ffb; }
span {
color: #2F782A;
font-weight: bold;
font-size: 100%;
}

View file

@ -9,20 +9,25 @@
$(function() {
$("#dialog").hide();
$("#customerName").change(function () {
$("#dialog").dialog('close'); //Remove any previously opened dialogs
$("#customerName").autocomplete({
source: "/customers/completeCustomer",
minLength: 1
$.post("/customers/similarCustomers", $("#customerName").serialize(), function(data) {
$("#similarCustList").html(data);
});
$("#dialog").dialog({position: 'right', width: 400});
}),
$("#CustomerCountryName").autocomplete({
source: "/countries/completeCountry",
minLength: 2,
minLength: 3,
select: function(event, ui) {
//alert("You selected " + ui.item.value + " ID:"+ ui.item.id);
$("#CustomerCountryId").val(ui.item.id);

View file

@ -0,0 +1,73 @@
/* This file isn't currently in use. Should complete / fix this up at some point.*/
$(function() {
$('#$enqid').editable('/enquiries/update_status', {
id : 'data[Enquiry][id]',
name: 'data[Enquiry][status_id]',
data : '$jsonList',
type : 'select',
indicator : 'Saving...',
submit : 'Update Status',
cssclass: 'MER-inplace-select',
callback : function(value, settings) {
var match = /won/i.test(value);
if(match == true) {
$('#row$enqid').removeClass().addClass('jobwon');
return;
}
match = /lost/i.test(value);
if(match == true) {
$('#row$enqid').removeClass().addClass('joblost');
return;
}
match = /cancelled/i.test(value);
if(match == true) {
$('#row$enqid').removeClass().addClass('joblost');
return;
}
match = /information sent/i.test(value);
if(match == true) {
$('#row$enqid').removeClass().addClass('informationsent');
return;
}
match = /issued/i.test(value);
if(match == true) {
$('#row$enqid').removeClass().addClass('quoted');
return;
}
match = /request for quotation/i.test(value);
if(match == true) {
$('#row$enqid').removeClass().addClass('requestforquote');
return;
}
match = /assigned/i.test(value);
if(match == true) {
$('#row$enqid').removeClass();
return;
}
}
});
}
function makeEditable(selectedID) {
}

10
webroot/js/menu.js Normal file
View file

@ -0,0 +1,10 @@
$(function() {
$('#nav li').hover(
function() {
$('ul', this).slideDown(100); //show submenu
},
function() {
$('ul', this).slideUp(100); //hide submenu
})
});