From 340320625e8da301e4c03752143db6d4837ca545 Mon Sep 17 00:00:00 2001 From: Bart Visscher Date: Wed, 7 Mar 2012 21:50:55 +0100 Subject: [PATCH] Contacts: Add UI for categories --- apps/contacts/ajax/saveproperty.php | 1 + apps/contacts/index.php | 2 + apps/contacts/js/contacts.js | 10 +++- apps/contacts/js/jquery.multi-autocomplete.js | 47 +++++++++++++++++++ apps/contacts/lib/app.php | 4 ++ apps/contacts/templates/index.php | 1 + apps/contacts/templates/part.contact.php | 3 ++ 7 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 apps/contacts/js/jquery.multi-autocomplete.js diff --git a/apps/contacts/ajax/saveproperty.php b/apps/contacts/ajax/saveproperty.php index db209fedfc..c1d5cebfd0 100644 --- a/apps/contacts/ajax/saveproperty.php +++ b/apps/contacts/ajax/saveproperty.php @@ -92,6 +92,7 @@ switch($element) { case 'N': case 'ORG': case 'NICKNAME': + case 'CATEGORIES': debug('Setting string:'.$name.' '.$value); $vcard->setString($name, $value); break; diff --git a/apps/contacts/index.php b/apps/contacts/index.php index 0a21ddd04b..b8dfc1b770 100644 --- a/apps/contacts/index.php +++ b/apps/contacts/index.php @@ -48,6 +48,7 @@ OC_Util::addScript('contacts','contacts'); OC_Util::addScript('contacts','jquery.combobox'); OC_Util::addScript('contacts','jquery.inview'); OC_Util::addScript('contacts','jquery.Jcrop'); +OC_Util::addScript('contacts','jquery.multi-autocomplete'); OC_Util::addStyle('','jquery.multiselect'); //OC_Util::addStyle('contacts','styles'); OC_Util::addStyle('contacts','jquery.combobox'); @@ -58,6 +59,7 @@ $tmpl = new OC_Template( "contacts", "index", "user" ); $tmpl->assign('uploadMaxFilesize', $maxUploadFilesize); $tmpl->assign('uploadMaxHumanFilesize', OC_Helper::humanFileSize($maxUploadFilesize)); $tmpl->assign('property_types',$property_types); +$tmpl->assign('categories',OC_Contacts_App::getCategories()); $tmpl->assign('phone_types',$phone_types); $tmpl->assign('addressbooks', $addressbooks); $tmpl->assign('contacts', $contacts); diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js index 94876f5cd0..0c63b5fcb7 100644 --- a/apps/contacts/js/contacts.js +++ b/apps/contacts/js/contacts.js @@ -223,6 +223,7 @@ Contacts={ click: function() { $(this).dialog('close'); } } ] ); + $('#categories').multiple_autocomplete({source: categories}); Contacts.UI.loadListHandlers(); }, Card:{ @@ -371,7 +372,7 @@ Contacts={ this.loadSingleProperties(); }, loadSingleProperties:function() { - var props = ['BDAY', 'NICKNAME', 'ORG']; + var props = ['BDAY', 'NICKNAME', 'ORG', 'CATEGORIES']; // Clear all elements $('#ident .propertycontainer').each(function(){ if(props.indexOf($(this).data('element')) > -1) { @@ -407,6 +408,12 @@ Contacts={ $('#contact_identity').find('#org_label').show(); $('#contact_identity').find('#org_value').show(); break; + case 'CATEGORIES': + $('#contact_identity').find('#categories').val(value); + $('#contact_identity').find('#categories_value').data('checksum', checksum); + $('#contact_identity').find('#categories_label').show(); + $('#contact_identity').find('#categories_value').show(); + break; } } else { $('#contacts_propertymenu a[data-type="'+props[prop]+'"]').parent().show(); @@ -596,6 +603,7 @@ Contacts={ case 'NICKNAME': case 'ORG': case 'BDAY': + case 'CATEGORIES': $('dl dt[data-element="'+type+'"],dd[data-element="'+type+'"]').show(); $('#contacts_propertymenu a[data-type="'+type+'"]').parent().hide(); break; diff --git a/apps/contacts/js/jquery.multi-autocomplete.js b/apps/contacts/js/jquery.multi-autocomplete.js new file mode 100644 index 0000000000..4be8d901c9 --- /dev/null +++ b/apps/contacts/js/jquery.multi-autocomplete.js @@ -0,0 +1,47 @@ +/** + * Inspired by http://jqueryui.com/demos/autocomplete/#multiple + */ + +(function( $ ) { + $.widget('ui.multiple_autocomplete', { + _create: function() { + function split( val ) { + return val.split( /,\s*/ ); + } + function extractLast( term ) { + return split( term ).pop(); + } + //console.log('_create: ' + this.options['id']); + var self = this; + this.element.bind( "keydown", function( event ) { + if ( event.keyCode === $.ui.keyCode.TAB && + $( this ).data( "autocomplete" ).menu.active ) { + event.preventDefault(); + } + }) + .autocomplete({ + minLength: 0, + source: function( request, response ) { + // delegate back to autocomplete, but extract the last term + response( $.ui.autocomplete.filter( + self.options.source, extractLast( request.term ) ) ); + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function( event, ui ) { + var terms = split( this.value ); + // remove the current input + terms.pop(); + // add the selected item + terms.push( ui.item.value ); + // add placeholder to get the comma-and-space at the end + terms.push( "" ); + this.value = terms.join( ", " ); + return false; + } + }); + }, + }); +})( jQuery ); diff --git a/apps/contacts/lib/app.php b/apps/contacts/lib/app.php index 1fa441475d..cc33c73300 100644 --- a/apps/contacts/lib/app.php +++ b/apps/contacts/lib/app.php @@ -155,6 +155,10 @@ class OC_Contacts_App { } } + public static function getCategories() { + return self::$categories->categories(); + } + public static function setLastModifiedHeader($contact) { $rev = $contact->getAsString('REV'); if ($rev) { diff --git a/apps/contacts/templates/index.php b/apps/contacts/templates/index.php index e81597f23d..efd797e25c 100644 --- a/apps/contacts/templates/index.php +++ b/apps/contacts/templates/index.php @@ -1,5 +1,6 @@
diff --git a/apps/contacts/templates/part.contact.php b/apps/contacts/templates/part.contact.php index 5be20964f4..783dc46907 100644 --- a/apps/contacts/templates/part.contact.php +++ b/apps/contacts/templates/part.contact.php @@ -13,6 +13,7 @@ $id = isset($_['id']) ? $_['id'] : '';
  • t('Phone'); ?>
  • t('Email'); ?>
  • t('Address'); ?>
    • +
  • t('Categories'); ?>
    • @@ -53,6 +54,8 @@ $id = isset($_['id']) ? $_['id'] : ''; + +