changeset 1078:6bf83070b19f

Convert member search to V3 design.
author Brian Neal <bgneal@gmail.com>
date Fri, 22 Apr 2016 22:20:47 -0500
parents 26f2b83e7468
children 75189bd9c4ba
files bio/forms.py bio/views.py sg101/static/js/v3/autocomplete.js sg101/templates/bio/member_search.html
diffstat 4 files changed, 80 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/bio/forms.py	Tue Apr 19 21:01:48 2016 -0500
+++ b/bio/forms.py	Fri Apr 22 22:20:47 2016 -0500
@@ -9,6 +9,7 @@
 from django import forms
 from django.conf import settings
 from django.core.files.base import ContentFile
+from django.core.urlresolvers import reverse
 from django.contrib.auth.models import User
 
 import pytz
@@ -18,7 +19,6 @@
 from core.html import ImageCheckError
 from core.images.utils import parse_image, downscale_image_square
 from core.markup import site_markup
-from core.widgets import AutoCompleteUserInput
 
 
 class EditUserForm(forms.ModelForm):
@@ -134,12 +134,21 @@
     """
     A form to search for users.
     """
-    username = forms.CharField(max_length=30, widget=AutoCompleteUserInput())
+    username = forms.CharField(
+                    max_length=30,
+                    widget=forms.TextInput(attrs={
+                       'class': 'sg101-autocomplete',
+                    }))
+
+    def __init__(self, *args, **kwargs):
+        super(SearchUsersForm, self).__init__(*args, **kwargs)
+        url = reverse('core-ajax_users')
+        self.fields['username'].widget.attrs['data-autocomplete-url'] = url
 
     def clean_username(self):
-      username = self.cleaned_data['username'].strip()
-      try:
-         User.objects.get(username=username, is_active=True)
-      except User.DoesNotExist:
-         raise forms.ValidationError("That username does not exist.")
-      return username
+        username = self.cleaned_data['username'].strip()
+        try:
+            User.objects.get(username=username, is_active=True)
+        except User.DoesNotExist:
+            raise forms.ValidationError("That username does not exist.")
+        return username
--- a/bio/views.py	Tue Apr 19 21:01:48 2016 -0500
+++ b/bio/views.py	Fri Apr 22 22:20:47 2016 -0500
@@ -261,4 +261,7 @@
         username = form.cleaned_data['username']
         return redirect('bio-view_profile', username=username)
 
-    return render(request, 'bio/member_search.html', {'form': form})
+    return render(request, 'bio/member_search.html', {
+        'form': form,
+        'V3_DESIGN': True,
+    })
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sg101/static/js/v3/autocomplete.js	Fri Apr 22 22:20:47 2016 -0500
@@ -0,0 +1,41 @@
+$(function() {
+   $(".sg101-autocomplete").each(function(index) {
+      var $this = $(this);
+      var cache = {};
+      var cacheSize = 0;
+      var url = $this.data('autocompleteUrl');
+
+      $this.autocomplete({
+         delay: 400,
+         minLength: 1,
+         source: function(request, response) {
+            if (cache[request.term]) {
+              response(cache[request.term]);
+              return;
+            }
+            $.ajax({
+               url: url,
+               type: "GET",
+               data: {
+                  q: request.term,
+                  limit: 15
+               },
+               dataType: "json",
+               success: function(data, textStatus) {
+                  if (cacheSize >= 128) {
+                    cache = {};
+                    cacheSize = 0;
+                  }
+                  cache[request.term] = data;
+                  ++cacheSize;
+                  response(data);
+               },
+               error: function(xhr, textStatus, ex) {
+                  alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
+                   xhr.responseText);
+               }
+            });
+         }
+      });
+   });
+});
--- a/sg101/templates/bio/member_search.html	Tue Apr 19 21:01:48 2016 -0500
+++ b/sg101/templates/bio/member_search.html	Fri Apr 22 22:20:47 2016 -0500
@@ -1,17 +1,27 @@
-{% extends "base.html" %}
+{% extends "v3/base.html" %}
+{% load static from staticfiles %}
 {% load script_tags %}
 {% block title %}Member Search{% endblock %}
-{% block custom_js %}
-{% script_tags 'jquery-ui' %}
+{% block custom_css %}
+{% css_tags 'jquery-ui' %}
 {% endblock %}
 {% block content %}
 <h2>Member Search</h2>
 <p>Looking for a member? Start typing a username in the form below.</p>
 <form action="." method="get">
-<fieldset>
-<legend>Member Search</legend>
-   {{ form.as_p }}
-   <p><input type="submit" value="View Profile" /></p>
-</fieldset>
+   <div class="row">
+      <div class="small-12 medium-6 columns">
+      {{ form.as_p }}
+      </div>
+   </div>
+   <div class="row">
+      <div class="small-12 medium-6 columns">
+         <p><input type="submit" class="primary button" value="View Profile" /></p>
+      </div>
+   </div>
 </form>
 {% endblock %}
+{% block custom_js %}
+{% js_tags 'jquery-ui' %}
+<script src="{% static 'js/v3/autocomplete.js' %}"></script>
+{% endblock %}