Allow autocomplete results to be grouped.

Show past events in event linking fields. Fixes #737

Author: fbacall

app/assets/javascripts/autocompleters.js

@@ -1,9 +1,36 @@
 var Autocompleters = {
+    formatResultWithHint: function (suggestion, currentValue) {
+        var result = $.Autocomplete.formatResult(suggestion, currentValue);
+
+        if (suggestion.data && suggestion.data.hint) {
+            result += '<span class="autocomplete-hint">' + suggestion.data.hint + '</span>';
+        }
+
+        return result;
+    },
     transformFunctions: {
         default: function (response, config) {
             return {
                 suggestions: $.map(response, function(item) {
-                    return { value: item[config.labelField], data: item[config.idField], item: item };
+                    return { value: item[config.labelField], data: { id: item[config.idField], item: item } };
+                })
+            };
+        },
+        events: function (response, config) {
+            var today = new Date();
+            return {
+                suggestions: $.map(response, function(item) {
+                    var group;
+                    if (item.end && new Date(item.end) < today) {
+                        group = 'Past';
+                    } else {
+                        group = 'Upcoming';
+                    }
+                    var hint = null;
+                    if (item.start) {
+                        hint = item.start.substr(0,10);
+                    }
+                    return { value: item[config.labelField], data: { id: item[config.idField], group: group, item: item, hint: hint } };
                 })
             };
         },
@@ -15,7 +42,7 @@ var Autocompleters = {
                         name = name + " (" + item.firstname + " " + item.surname + ")";
                     }
                     item.name = name;
-                    return { value: name, data: item[config.idField], item: item };
+                    return { value: name, data: { id: item[config.idField], item: item } };
                 })
             };
         }
@@ -32,6 +59,7 @@ var Autocompleters = {
             var labelField = $(element).data("labelField") || "title";
             var idField = $(element).data("idField") || "id";
             var singleton = $(element).data("singleton") || false;
+            var groupBy = $(element).data("groupBy") || false;
             var templateName = $(element).data("template") ||
                 (singleton ? "autocompleter/singleton_resource" : "autocompleter/resource");
             var transformFunction = Autocompleters.transformFunctions[$(element).data("transformFunction") || "default"];
@@ -52,13 +80,16 @@ var Autocompleters = {
                 dataType: "json",
                 deferRequestBy: 300, // Wait 300ms before submitting to stop search being flooded
                 paramName: "q",
+                groupBy: groupBy,
+                formatResult: Autocompleters.formatResultWithHint,
                 transformResult: function(response) {
                     return transformFunction(response, { labelField: labelField, idField: idField });
                 },
                 onSelect: function (suggestion) {
                     // Don't add duplicates
-                    if (!$("[data-id='" + suggestion.data + "']", listElement).length) {
-                        var obj = { item: suggestion.item };
+                    var id = suggestion.data.id;
+                    if (!$("[data-id='" + id + "']", listElement).length) {
+                        var obj = { item: suggestion.data.item };
                         if (prefix) {
                             obj.prefix = prefix;
                         }
@@ -72,7 +103,6 @@ var Autocompleters = {
                     $(this).val('').focus();
                 },
                 onSearchStart: function (query) {
-                    query.q = query.q + "*";
                     inputElement.addClass("loading");
                 },
                 onSearchComplete: function () {

app/assets/javascripts/collaborations.js

@@ -15,7 +15,7 @@ var Collaborations = {
                 });
             },
             onSelect: function (suggestion) {
-                Collaborations.add(suggestion.data)
+                Collaborations.add(suggestion.data.id)
                 $(this).val('').focus();
             }
         });

app/assets/stylesheets/autocomplete.scss

@@ -5,7 +5,7 @@
 }
 
 .autocomplete-suggestion {
-  padding: 2px 5px;
+  padding: 2px 5px 2px 10px;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
@@ -21,10 +21,17 @@
 }
 
 .autocomplete-group {
-  padding: 2px 5px;
+  padding: 5px 5px;
+  background: #eee;
 }
 
 .autocomplete-group strong {
   display: block;
-  border-bottom: 1px solid #000;
+  color: inherit;
+  font-weight: bold;
 }
+
+.autocomplete-hint {
+  color: #999;
+  padding-left: 1em;
+}

app/helpers/application_helper.rb

@@ -391,6 +391,7 @@ def autocompleter(name, options = {})
                                                                   form_field_name: options[:form_field_name],
                                                                   existing_items_method: options[:existing_items_method],
                                                                   transform_function: options[:transform_function],
+                                                                  group_by: options[:group_by],
                                                                   singleton: options[:singleton],
       })
     end

app/views/collections/_form.html.erb

@@ -19,7 +19,11 @@
 
     <%= f.autocompleter :materials %>
 
-    <%= f.autocompleter :events %>
+    <%= f.autocompleter :events,
+                        url: events_path(include_expired: true, sort: 'late'),
+                        group_by: 'group',
+                        transform_function: 'events'
+    %>
 
     <div class="form-group actions">
       <%= f.submit ( f.object.new_record? ? "Create" : "Update") + " collection", :class => 'btn btn-primary' %>

app/views/common/_autocompleter.html.erb

@@ -3,13 +3,15 @@
   form_field_name ||= "#{model_name}[#{field_name.to_s.singularize}_#{id_field.to_s}#{singleton ? '' : 's'}]"
   template ||= nil
   transform_function ||= nil
+  group_by ||= nil
   existing_items_method ||= field_name
   data = { role: 'autocompleter-group', url: url, prefix: form_field_name,
            'label-field' => label_field.to_s,
            'id-field' => id_field.to_s }
   data[:template] = template if template
   data[:singleton] = singleton unless singleton.nil?
   data['transform-function'] = transform_function if transform_function
+  data['group-by'] = group_by if group_by
   json = Array(f.object.send(existing_items_method)).map do |r|
     { item: { id: r.send(id_field),
               id_field => r.send(id_field),

app/views/materials/_form.html.erb

@@ -50,7 +50,11 @@
   <%= f.multi_input :contributors, suggestions: people_suggestions, title: t('materials.hints.contributors') %>
 
   <!-- Field: Events -->
-  <%= f.autocompleter :events, input_html: { title: t('materials.hints.events') } %>
+  <%= f.autocompleter :events, input_html: { title: t('materials.hints.events') },
+                                             url: events_path(include_expired: true, sort: 'late'),
+                                             group_by: 'group',
+                                             transform_function: 'events'
+  %>
 
   <!-- Field: Target Audience -->
   <%= f.multi_input :target_audience, label: 'Target audiences', errors: @material.errors[:target_audience],