Added smart form elements

9 files changed, 198 insertions, 12 deletions

diff --git a/lib/client/kolab_client_task_user.php b/lib/client/kolab_client_task_user.php
index 8f9a800..bbd378d 100644
--- a/lib/client/kolab_client_task_user.php
+++ b/lib/client/kolab_client_task_user.php
@@ -327,16 +327,19 @@ class kolab_client_task_user extends kolab_client_task
                         'label' => 'user.alias',
                         'description' => 'user.alias.desc',
                         'type'        => kolab_form::INPUT_TEXTAREA,
+                        'data-type'   => kolab_form::TYPE_LIST,
                     ),
                     'kolabdelegate' => array(
                         'label' => 'user.delegate',
                         'description' => 'user.delegate.desc',
                         'type'        => kolab_form::INPUT_TEXTAREA,
+                        'data-type'   => kolab_form::TYPE_LIST,
                     ),
                     'kolabAllowSMTPRecipient' => array(
                         'label' => 'user.smtp-recipients',
                         'description' => 'user.smtp-recipients.desc',
                         'type'        => kolab_form::INPUT_TEXTAREA,
+                        'data-type'   => kolab_form::TYPE_LIST,
                     ),
                 ),
             ),
@@ -377,6 +380,7 @@ class kolab_client_task_user extends kolab_client_task
             );
         }
 */
+
         // Parse elements and add them to the form object
         foreach ($fields as $section_idx => $section) {
             if (empty($section['fields'])) {
@@ -389,8 +393,14 @@ class kolab_client_task_user extends kolab_client_task
                 $field['section']     = $section_idx;
                 $field['label']       = kolab_html::escape($this->translate($field['label']));
 
-                if (isset($data[$idx])) {
-                    $field['value'] = kolab_html::escape($data[$idx]);
+                if (!empty($data[$idx])) {
+                    if (is_array($data[$idx])) {
+                        $field['value'] = array_map(array('kolab_html', 'escape'), $data[$idx]);
+                        $field['value'] = implode("\n", $field['value']);
+                    }
+                    else {
+                        $field['value'] = kolab_html::escape($data[$idx]);
+                    }
                 }
 
                 if (!empty($field['suffix'])) {
diff --git a/lib/functions.php b/lib/functions.php
index 31414cd..acf606c 100644
--- a/lib/functions.php
+++ b/lib/functions.php
@@ -84,7 +84,8 @@ function write_log($name, $line)
     $log_dir = dirname(__FILE__) . '/../logs';
     $logfile = $log_dir . '/' . $name;
     $date    = date('d-M-Y H:i:s O');
-    $line    = sprintf("[%s](%s): %s\n", $date, session_id(), $line);
+    $sess_id = session_id();
+    $line    = sprintf("[%s]%s: %s\n", $date, $sess_id ? "($sess_id)" : '', $line);
 
     if ($fp = @fopen($logfile, 'a')) {
         fwrite($fp, $line);
diff --git a/lib/kolab_form.php b/lib/kolab_form.php
index f1dcdc5..cb1792f 100644
--- a/lib/kolab_form.php
+++ b/lib/kolab_form.php
@@ -13,6 +13,8 @@ class kolab_form
     const INPUT_SELECT = 8;
     const INPUT_HIDDEN = 9;
 
+    const TYPE_LIST = 1;
+
     private $attribs  = array();
     private $elements = array();
     private $sections = array();
@@ -149,7 +151,7 @@ class kolab_form
         }
 
         // Add event trigger, so UI can rebuild the form e.g. adding tabs
-        $content .= kolab_html::script('kadm.trigger_event(\'form-loaded\', \'' . $this->attribs['id'] . '\')');
+        $content .= kolab_html::script('kadm.trigger_event(\'form-load\', \'' . $this->attribs['id'] . '\')');
 
         return $content;
     }
@@ -213,6 +215,16 @@ class kolab_form
                 $attribs['cols'] = 50;
             }
 
+            if (!empty($attribs['data-type'])) {
+                switch ($attribs['data-type']) {
+                    case self::TYPE_LIST:
+                        $attribs['data-type'] = 'list';
+                    break;
+                    default:
+                        unset($attribs['data-type']);
+                }
+            }
+
             $content = kolab_html::textarea($attribs, true);
             break;
 
diff --git a/lib/locale/en_US.php b/lib/locale/en_US.php
index 3e7a24f..e9b6301 100644
--- a/lib/locale/en_US.php
+++ b/lib/locale/en_US.php
@@ -76,7 +76,7 @@ $LANG['group.add'] = 'Add Group';
 
 $LANG['MB'] = 'MB';
 $LANG['days'] = 'days';
-$LANG['submit.button'] = 'Sumbit';
+$LANG['submit.button'] = 'Submit';
 $LANG['delete.button'] = 'Delete';
 $LANG['about.community'] = 'This is the Community Edition of the <b>Kolab Server</b>.';
 $LANG['about.warranty'] = 'It comes with absolutely <b>no warranties</b> and is typically run entirely self supported. You can find help & information on the community <a href="http://kolab.org">web site</a> & <a href="http://wiki.kolab.org">wiki</a>.';
diff --git a/public_html/api/index.php b/public_html/api/index.php
index 0760e9e..af7e474 100644
--- a/public_html/api/index.php
+++ b/public_html/api/index.php
@@ -9,7 +9,7 @@ try {
     $postdata = $_SERVER['REQUEST_METHOD'] == 'POST' ? file_get_contents('php://input') : null;
     $controller->dispatch($postdata);
 } catch(Exception $e) {
-    error_log($e->getMessage());
+    error_log('API Error: ' . $e->getMessage());
     $controller->output->error($e->getMessage(), $e->getCode());
 }
 
diff --git a/public_html/js/kolab_admin.js b/public_html/js/kolab_admin.js
index 46d3dc9..a024047 100644
--- a/public_html/js/kolab_admin.js
+++ b/public_html/js/kolab_admin.js
@@ -396,7 +396,9 @@ function kolab_admin()
     for (i in query)
       json[query[i].name] = query[i].value;
 
-    return json;
+    this.trigger_event('form-serialize', {id: id, json: json});
+
+    return i.json;
   };
 
   /*********************************************************/
@@ -432,7 +434,8 @@ function kolab_admin()
 
   this.user_save = function(props)
   {
-    this.api_post('user.add', {}, 'user_save_response');
+    var data = this.serialize_form('#'+props);
+    this.api_post('user.add', data, 'user_save_response');
   };
 
   this.user_save_response = function(response)
diff --git a/public_html/skins/default/images/buttons.png b/public_html/skins/default/images/buttons.png
index 5cf64e5..0492d09 100644
--- a/public_html/skins/default/images/buttons.png
+++ b/public_html/skins/default/images/buttons.png
diff --git a/public_html/skins/default/style.css b/public_html/skins/default/style.css
index 83a2343..74c64a4 100644
--- a/public_html/skins/default/style.css
+++ b/public_html/skins/default/style.css
@@ -483,6 +483,78 @@ textarea.readonly {
 }
 
 
+/********* Form smart inputs *********/
+
+span.listarea {
+  display: block;
+  width: 370px;
+  margin: 0 0 1px;
+  padding: 0;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+}
+
+span.listelement {
+  display: block;
+  padding: 0;
+  margin: 0;
+  height: 20px;
+  overflow: hidden;
+  border-top: 1px solid #d0d0d0;
+}
+
+span.listelement:first-child {
+  border: none;
+}
+
+span.listelement input {
+  border: none;
+  background-color: white;
+  margin-left: 2px;
+  width: 325px;
+}
+
+span.listelement input:focus {
+  outline: none;
+}
+
+span.listelement span.actions {
+  float: left;
+  padding: 1px;
+  margin-left: -1px;
+  margin-top: -1px;
+  height: 18px;
+  width: 37px;
+  border: 1px solid #d0d0d0;
+  background-color: #f0f0f0;
+  cursor: pointer;
+}
+
+span.listelement span.actions span {
+  display: block;
+  float: left;
+  width: 18px;
+  height: 18px;
+  background: url(images/buttons.png) 0 0 no-repeat;
+}
+
+span.listelement span.actions span:hover {
+  background-color: white;
+}
+
+span.listelement span.actions span.reset {
+  background-position: -1px 0;
+  border-left: 1px solid #e0e0e0;
+}
+
+span.listelement span.actions span.add {
+  background-position: -43px 0;
+}
+
+
 /***** tabbed interface elements *****/
 
 div.tabsbar
diff --git a/public_html/skins/default/ui.js b/public_html/skins/default/ui.js
index cfe0562..ff16952 100644
--- a/public_html/skins/default/ui.js
+++ b/public_html/skins/default/ui.js
@@ -92,13 +92,101 @@ function show_tab(id, index)
   });
 }
 
-function form_loaded(data)
+/**
+ * HTML form events handlers
+ */
+
+// Form "onload" handler
+function form_load(id)
+{
+  if (id != 'search-form')
+    init_tabs(id);
+
+  form_init(id);
+}
+
+// Form "onserialize" handler
+function form_serialize(data)
+{
+  var form = $(data.id);
+
+  // replace some textarea fields with pretty/smart input lists
+  $('textarea[data-type="list"]', form).not(':disabled')
+    .each(function() {
+    var i, value = [], re = RegExp('^' + this.name + '\[[0-9]+\]$');
+
+    for (i in data.json) {
+      if (i.match(re)) {
+        if (i.value)
+          value.push(i.value);
+        delete data.json[i];
+      }
+    }
+
+    data.json[this.name] = value.join("\n");
+  });
+
+  return data;
+}
+
+// Form initialization
+function form_init(id)
 {
-  if (data != 'search-form')
-    init_tabs(data);
+  var form = $('#'+id), separator = /[,\s\r\n]+/;
+
+  // replace some textarea fields with pretty/smart input lists
+  $('textarea[data-type="list"]', form).not(':disabled')
+    .each(function() {
+    var i, len, elem, e = $(this),
+      list = this.value.split(separator),
+      area = $('<span class="listarea">');
+
+    e.hide();
+    for (i=0, len=list.length; i<len; i++) {
+      elem = form_list_element(form, {name: this.name+'['+i+']', value: list[i]});
+      elem.appendTo(area);
+    }
+    area.appendTo(this.parentNode);
+  });
+}
+
+// Creates smart list element
+function form_list_element(form, data)
+{
+  var elem = $('<span class="listelement"><span class="actions">'
+    + '<span title="" class="add"></span><span title="" class="reset"></span>'
+    + '</span><input></span>');
+
+  $('input', elem).attr({name: data.name, value: data.value});
+
+  // attach element creation event
+  $('span[class="add"]', elem).click(function() {
+    var dt = (new Date()).getTime(),
+      span = $(this.parentNode.parentNode),
+      name = data.name.replace(/\[[0-9]+\]$/, ''),
+      elem = form_list_element(form, {name: name+'['+dt+']'});
+
+    span.after(elem);
+    $('input', elem).focus();
+  });
+
+  // attach element deletion event
+  $('span[class="reset"]', elem).click(function() {
+    var l, span = $(this.parentNode.parentNode),
+      name = data.name.replace(/\[[0-9]+\]$/, ''),
+      l = $('input[name^="' + name + '"]', form);
+
+    if (l.length > 1)
+      span.remove();
+    else
+      $('input', span).val('').focus();
+  });
+
+  return elem;
 }
 
 /**
  * UI Initialization
  */
-kadm.add_event_listener('form-loaded', form_loaded);
+kadm.add_event_listener('form-load', form_load);
+kadm.add_event_listener('form-serialize', form_serialize);