Merge branch 'kerl/bds_autocomplete' into 'master'

Autocomplétion du BDS et deuxième ébauche de page d'accueil

See merge request klub-dev-ens/gestioCOF!422
This commit is contained in:
Ludovic Stephan 2020-07-01 23:26:01 +02:00
commit 637572ab58
16 changed files with 463 additions and 43 deletions

37
bds/autocomplete.py Normal file
View file

@ -0,0 +1,37 @@
from django.contrib.auth import get_user_model
from django.db.models import Q
from shared.views import autocomplete
User = get_user_model()
class BDSMemberSearch(autocomplete.ModelSearch):
model = User
search_fields = ["username", "first_name", "last_name"]
def get_queryset_filter(self, *args, **kwargs):
qset_filter = super().get_queryset_filter(*args, **kwargs)
qset_filter &= Q(bds__is_member=True)
return qset_filter
class BDSOthersSearch(autocomplete.ModelSearch):
model = User
search_fields = ["username", "first_name", "last_name"]
def get_queryset_filter(self, *args, **kwargs):
qset_filter = super().get_queryset_filter(*args, **kwargs)
qset_filter &= Q(bds__isnull=True) | Q(bds__is_member=False)
return qset_filter
class BDSSearch(autocomplete.Compose):
search_units = [
("members", "username", BDSMemberSearch),
("others", "username", BDSOthersSearch),
("clippers", "clipper", autocomplete.LDAPSearch),
]
bds_search = BDSSearch()

5
bds/mixins.py Normal file
View file

@ -0,0 +1,5 @@
from django.contrib.auth.mixins import PermissionRequiredMixin
class StaffRequiredMixin(PermissionRequiredMixin):
permission_required = "bds:is_team"

View file

@ -0,0 +1,82 @@
html, body {
padding: 0;
margin: 0;
background: #ddcecc;
font-size: 18px;
}
a {
text-decoration: none;
color: #a82305;
}
/* header */
nav {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background: #3e2263;
height: 3em;
padding: 0.4em 1em;
}
nav a, nav a img {
height: 100%;
}
input[type="text"] {
font-size: 18px;
}
#search_autocomplete {
flex: 1;
width: 480px;
margin: 0;
border: 0;
padding: 10px 10px;
}
.highlight {
text-decoration: underline;
font-weight: bold;
}
.yourlabs-autocomplete ul {
width: 500px;
list-style: none;
padding: 0;
margin: 0;
}
.yourlabs-autocomplete ul li {
height: 2em;
line-height: 2em;
width: 500px;
padding: 0;
}
.yourlabs-autocomplete ul li.hilight {
background: #e8554e;
}
.yourlabs-autocomplete ul li a {
color: inherit;
}
.autocomplete-item {
display: block;
width: 480px;
height: 100%;
padding: 2px 10px;
margin: 0;
}
.autocomplete-header {
background: #b497e1;
}
.autocomplete-value, .autocomplete-new, .autocomplete-more {
background: white;
}

View file

@ -0,0 +1,15 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="300px" height="246px" viewBox="0 0 3000 2460" preserveAspectRatio="xMidYMid meet">
<g id="layer101" fill="#ffffff" stroke="none">
<path d="M0 1230 l0 -1230 1500 0 1500 0 0 1230 0 1230 -1500 0 -1500 0 0 -1230z"/>
</g>
<g id="layer102" fill="#3e2263" stroke="none">
<path d="M0 1230 l0 -1230 1500 0 1500 0 0 1230 0 1230 -1500 0 -1500 0 0 -1230z m1716 765 c103 -17 204 -46 284 -83 l55 -25 -40 -8 c-80 -16 -169 -10 -245 16 -123 42 -232 59 -385 59 -126 0 -278 -18 -341 -40 -13 -5 -16 -4 -9 4 14 15 166 60 254 76 102 19 315 19 427 1z m-703 -217 c15 -6 27 -13 27 -17 0 -4 -37 -25 -82 -47 -86 -43 -182 -120 -193 -155 -8 -26 32 -113 78 -167 44 -52 46 -62 10 -62 -39 1 -106 33 -165 80 -40 31 -54 38 -64 29 -21 -18 -17 -50 16 -116 57 -113 151 -199 259 -235 49 -16 51 -18 16 -13 -123 19 -260 151 -322 310 -15 39 -14 -81 1 -147 25 -107 55 -176 112 -251 49 -65 52 -73 38 -88 -21 -23 -104 -62 -216 -100 -51 -18 -97 -35 -102 -40 -4 -4 32 -10 80 -14 106 -9 256 13 317 48 l39 22 56 -33 c32 -18 114 -61 184 -95 80 -39 126 -67 123 -74 -6 -19 12 -16 19 3 9 24 28 5 22 -22 -7 -26 8 -34 18 -9 11 29 28 16 21 -18 -6 -30 -5 -31 10 -13 8 11 15 24 15 29 0 4 5 5 10 2 6 -3 8 -18 4 -33 -5 -26 -5 -26 10 -8 15 19 18 19 118 -12 113 -35 284 -72 329 -72 24 0 29 4 29 25 0 34 -36 125 -63 158 l-22 28 -59 -30 c-74 -39 -165 -43 -233 -10 -24 11 -43 25 -43 30 0 4 28 6 63 2 49 -4 71 -2 98 12 46 23 79 55 79 75 0 16 -48 66 -135 139 l-40 33 43 -23 c55 -30 166 -121 188 -154 9 -13 13 -29 9 -36 -15 -23 -100 -69 -129 -69 -17 0 -38 -5 -46 -10 -12 -8 -10 -10 10 -10 49 1 104 19 149 51 l45 31 24 -28 c33 -40 72 -128 79 -180 10 -79 -25 -96 -233 -114 -84 -7 -148 -7 -218 0 -106 12 -269 51 -317 76 -28 14 -31 13 -62 -10 -56 -43 -167 -89 -225 -94 l-55 -5 6 29 c2 16 14 55 26 86 21 57 27 112 15 142 -3 9 -34 38 -68 64 l-62 49 -104 7 c-166 12 -192 34 -83 70 34 12 65 24 68 28 4 4 -7 27 -24 52 -118 171 -124 402 -16 571 18 29 50 88 70 131 42 93 99 154 168 184 82 35 212 44 280 18z m540 -39 c60 -16 70 -41 75 -196 l5 -134 -39 3 -39 3 -5 114 c-4 93 -8 116 -22 125 -31 19 -41 -7 -47 -126 l-6 -113 -32 -3 c-41 -4 -44 6 -34 151 9 143 25 172 101 186 3 0 22 -4 43 -10z m322 -34 c0 -30 0 -30 -64 -33 l-64 -3 7 -130 7 -129 -35 0 -36 0 0 165 0 166 93 -3 92 -3 0 -30z m115 -55 l5 -84 18 27 c21 33 39 34 60 5 15 -22 16 -18 16 60 l1 82 35 0 35 0 -2 -162 -3 -163 -40 0 c-38 0 -41 2 -53 43 -16 49 -24 48 -42 -7 -12 -38 -16 -41 -50 -41 -34 0 -38 3 -44 31 -8 43 -8 284 1 293 4 4 19 6 33 4 24 -3 25 -6 30 -88z m370 -42 c193 -243 228 -505 100 -759 -61 -120 -195 -260 -328 -343 -66 -41 -60 -26 13 33 36 29 92 85 125 126 182 230 209 500 75 753 -42 79 -45 89 -45 163 0 44 4 79 9 79 5 0 28 -24 51 -52z m-1111 -294 c76 -30 94 -102 41 -156 -27 -27 -29 -32 -17 -47 34 -40 25 -100 -19 -120 -30 -13 -143 -15 -164 -1 -11 7 -15 42 -18 164 l-4 156 23 9 c37 15 115 13 158 -5z m571 -9 c84 -43 61 -135 -43 -173 -46 -18 -52 -23 -52 -48 0 -39 30 -42 79 -9 l37 25 -3 -41 c-4 -49 -32 -76 -90 -85 -32 -6 -41 -2 -68 24 -24 25 -30 39 -30 74 0 57 21 85 87 114 40 18 54 29 51 42 -5 29 -71 28 -111 -2 -19 -14 -36 -26 -39 -26 -11 0 -16 55 -7 72 24 45 131 63 189 33z m-303 -12 c56 -26 75 -65 71 -150 -3 -67 -6 -75 -38 -108 -43 -44 -94 -61 -146 -48 l-39 9 -3 144 c-1 79 0 150 2 157 8 19 110 17 153 -4z"/>
<path d="M1503 633 c4 -3 10 -3 14 0 3 4 0 7 -7 7 -7 0 -10 -3 -7 -7z"/>
<path d="M1532 448 c3 -7 15 -14 29 -16 23 -2 23 -2 5 13 -24 18 -39 20 -34 3z"/>
<path d="M1140 1231 c0 -45 10 -61 36 -61 26 0 64 32 64 53 0 23 -23 37 -62 37 -35 0 -38 -2 -38 -29z"/>
<path d="M1140 1070 c0 -35 17 -45 56 -36 20 5 25 12 22 34 -3 23 -8 27 -40 30 -36 3 -38 2 -38 -28z"/>
<path d="M1430 1151 c0 -72 3 -91 14 -91 28 0 47 13 61 41 31 60 10 121 -47 135 l-28 6 0 -91z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:ns1="http://sozi.baierouge.fr"
xmlns:cc="http://web.resource.org/cc/"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
id="Layer_1"
enable-background="new 0 0 40 40"
xml:space="preserve"
viewBox="0 0 40 40"
version="1.1"
y="0px"
x="0px"
>
<polygon
points="36.351 32.435 25.5 36.271 25.5 3.94 36.351 6.242"
fill="#ffffff"
/>
<g
fill="#ffffff"
>
<path
d="m13.627 29.253l8.123-8.941c0.241-0.241 0.379-0.58 0.379-0.934s-0.138-0.693-0.379-0.934l-8.123-8.943c-0.346-0.348-0.853-0.44-1.286-0.238-0.436 0.203-0.717 0.662-0.717 1.171v3.193h-7.745c-0.658 0-1.191 0.572-1.191 1.277v8.943c0 0.705 0.533 1.276 1.191 1.276h7.745v3.194c0 0.509 0.281 0.969 0.716 1.172 0.434 0.204 0.94 0.112 1.287-0.236z"
/>
<path
d="m13.627 29.253l8.123-8.941c0.241-0.241 0.379-0.58 0.379-0.934s-0.138-0.693-0.379-0.934l-8.123-8.943c-0.346-0.348-0.853-0.44-1.286-0.238-0.436 0.203-0.717 0.662-0.717 1.171v3.193h-7.745c-0.658 0-1.191 0.572-1.191 1.277v8.943c0 0.705 0.533 1.276 1.191 1.276h7.745v3.194c0 0.509 0.281 0.969 0.716 1.172 0.434 0.204 0.94 0.112 1.287-0.236z"
/>
</g
>
<path
stroke-linejoin="round"
d="m24.166 6.224h-1.288c-1.78 0-3.223 1.442-3.223 3.223v3.981"
stroke="#ffffff"
stroke-linecap="round"
stroke-miterlimit="10"
fill="none"
/>
<path
stroke-linejoin="round"
d="m19.655 25.495v3.733c0 1.78 1.442 3.223 3.223 3.223h1.288"
stroke="#ffffff"
stroke-linecap="round"
stroke-miterlimit="10"
fill="none"
/>
<metadata
><rdf:RDF
><cc:Work
><dc:format
>image/svg+xml</dc:format
><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
/><cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
/><dc:publisher
><cc:Agent
rdf:about="http://openclipart.org/"
><dc:title
>Openclipart</dc:title
></cc:Agent
></dc:publisher
></cc:Work
><cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/"
><cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/><cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/><cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/></cc:License
></rdf:RDF
></metadata
></svg
>

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -0,0 +1,23 @@
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{{ site.name }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{# CSS #}
<link rel="stylesheet" href="{% static "bds/css/bds.css" %}">
{# Javascript #}
<script src="{% static 'vendor/jquery/jquery-3.3.1.min.js' %}"></script>
<script src="{% static "vendor/jquery/jquery.autocomplete-light.min.js" %}"></script>
</head>
<body>
{% include "bds/nav.html" %}
{% block content %}{% endblock %}
</body>
</html>

View file

@ -0,0 +1,22 @@
{% extends "bds/base.html" %}
{% block content %}
<div style="width: 60%; margin: auto; padding-top: 2em;">
Bienvenue sur GestioBDS&#8239;!
<br>
<br>
Le site est encore en développement.
<br>
Suivez notre avancement sur
<a href="https://git.eleves.ens.fr/klub-dev-ens/gestioCOF/merge_requests?milestone_title=Int%C3%A9gration+du+BDS">
cette milestone</a> sur le gitlab de l'ENS.
<br>
Faites vos remarques par mail à
<a href="mailto:klub-dev@ens.fr"><tt>klub-dev@ens.fr</tt></a>
ou en ouvrant une
<a href="#https://git.eleves.ens.fr/klub-dev-ens/gestioCOF/issues?milestone_title=Int%C3%A9gration+du+BDS">
issue</a>.
</div>
{% endblock %}

View file

@ -0,0 +1,40 @@
{% load i18n %}
{% load static %}
<nav id="search-bar">
<a href="{% url "bds:home" %}">
<img src="{% static "bds/images/logo.svg" %}" alt="bds-logo">
</a>
<div>
<input
type="text"
name="q"
id="search_autocomplete"
spellcheck="false"
placeholder="{% trans "Chercher une personne" %}" />
<div class="yourlabs-autocomplete"></div>
</div>
<a href="#TODO">
<img src="{% static "bds/images/logout.svg" %}" alt="logout">
</a>
</nav>
<script type="text/javascript">
$(document).ready(function() {
$('input#search_autocomplete').yourlabsAutocomplete({
url: '{% url 'bds:autocomplete' %}',
minimumCharacters: 3,
id: 'search_autocomplete',
choiceSelector: 'li:has(a)',
box: $(".yourlabs-autocomplete"),
});
$('input#search_autocomplete').bind(
'selectChoice',
function(e, choice, autocomplete) {
window.location = choice.find('a:first').attr('href');
}
);
});
</script>

View file

@ -0,0 +1,75 @@
{% load i18n %}
{% load search_utils %}
<ul>
{% if members %}
<li class="autocomplete-header">
<span class="autocomplete-item">{% trans "Membres" %}</span>
</li>
{% for user in members %}
{% if forloop.counter < 5 %}
<li class="autocomplete-value">
<a class="autocomplete-item" href="#TODO">
{{ user|highlight_user:q }}
</a>
</li>
{% elif forloop.counter == 5 %}
<li class="autocomplete-more">
<span class="autocomplete-item">...</span>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% if others %}
<li class="autocomplete-header">
<span class="autocomplete-item">{% trans "Non-membres" %}</span>
</li>
{% for user in others %}
{% if forloop.counter < 5 %}
<li class="autocomplete-value">
<a class="autocomplete-item" href="#TODO">
{{ user|highlight_user:q }}
</a>
</li>
{% elif forloop.counter == 5 %}
<li class="autocomplete-more">
<span class="autocomplete-item">...</span>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% if clippers %}
<li class="autocomplete-header">
<span class="autocomplete-item">{% trans "Utilisateurs <tt>clipper</tt>" %}</span>
</li>
{% for clipper in clippers %}
{% if forloop.counter < 5 %}
<li class="autocomplete-value">
<a class="autocomplete-item" href="#TODO">
{{ clipper|highlight_clipper:q }}
</a>
</li>
{% elif forloop.counter == 5 %}
<li class="autocomplete-more">
<span class="autocomplete-item">...</span>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% if total %}
<li class="autocomplete-header">
<span class="autocomplete-item">{% trans "Pas dans la liste ?" %}</span>
</li>
{% else %}
<li class="autocomplete-header">
<span class="autocomplete-item">{% trans "Aucune correspondance trouvée" %}</span>
</li>
{% endif %}
<li class="autocomplete-new">
<a class="autocomplete-item" href="#TODO">{% trans "Créer un compte" %}</a>
</li>
</ul>

View file

@ -1,2 +1,9 @@
app_label = "bds"
urlpatterns = []
from django.urls import path
from bds import views
app_name = "bds"
urlpatterns = [
path("", views.Home.as_view(), name="home"),
path("autocomplete", views.AutocompleteView.as_view(), name="autocomplete"),
]

View file

@ -1 +1,24 @@
# Create your views here.
from django.http import Http404
from django.views.generic import TemplateView
from bds.autocomplete import bds_search
from bds.mixins import StaffRequiredMixin
class AutocompleteView(StaffRequiredMixin, TemplateView):
template_name = "bds/search_results.html"
def get_context_data(self, *args, **kwargs):
ctx = super().get_context_data(*args, **kwargs)
if "q" not in self.request.GET:
raise Http404
q = self.request.GET["q"]
ctx["q"] = q
results = bds_search.search(q.split())
ctx.update(results)
ctx["total"] = sum((len(r) for r in results.values()))
return ctx
class Home(StaffRequiredMixin, TemplateView):
template_name = "bds/home.html"

View file

@ -1,4 +1,4 @@
{% load utils %}
{% load search_utils %}
<ul>
{% if members %}

View file

@ -1,7 +1,4 @@
import re
from django import template
from django.utils.safestring import mark_safe
register = template.Library()
@ -15,29 +12,3 @@ def key(d, key_name):
value = settings.TEMPLATE_STRING_IF_INVALID
return value
def highlight_text(text, q):
q2 = "|".join(re.escape(word) for word in q.split())
pattern = re.compile(r"(?P<filter>%s)" % q2, re.IGNORECASE)
return mark_safe(
re.sub(pattern, r"<span class='highlight'>\g<filter></span>", text)
)
@register.filter
def highlight_user(user, q):
if user.first_name and user.last_name:
text = "%s %s (<tt>%s</tt>)" % (user.first_name, user.last_name, user.username)
else:
text = user.username
return highlight_text(text, q)
@register.filter
def highlight_clipper(clipper, q):
if clipper.fullname:
text = "%s (<tt>%s</tt>)" % (clipper.fullname, clipper.clipper)
else:
text = clipper.clipper
return highlight_text(text, q)

View file

@ -0,0 +1,32 @@
import re
from django import template
from django.utils.safestring import mark_safe
register = template.Library()
def highlight_text(text, q):
q2 = "|".join(re.escape(word) for word in q.split())
pattern = re.compile(r"(?P<filter>%s)" % q2, re.IGNORECASE)
return mark_safe(
re.sub(pattern, r"<span class='highlight'>\g<filter></span>", text)
)
@register.filter
def highlight_user(user, q):
if user.first_name and user.last_name:
text = "%s %s (<tt>%s</tt>)" % (user.first_name, user.last_name, user.username)
else:
text = user.username
return highlight_text(text, q)
@register.filter
def highlight_clipper(clipper, q):
if clipper.fullname:
text = "%s (<tt>%s</tt>)" % (clipper.fullname, clipper.clipper)
else:
text = clipper.clipper
return highlight_text(text, q)

View file

@ -1,3 +1,4 @@
import logging
from collections import namedtuple
from dal import autocomplete
@ -12,6 +13,9 @@ else:
ldap = None
django_logger = logging.getLogger("django.request")
class SearchUnit:
"""Base class for all the search utilities.
@ -128,17 +132,21 @@ class LDAPSearch(SearchUnit):
if ldap is None or query == "(&)":
return []
ldap_obj = ldap.initialize(self.ldap_server_url)
res = ldap_obj.search_s(
self.domain_component, ldap.SCOPE_SUBTREE, query, self.search_fields
)
return [
Clipper(
clipper=attrs["uid"][0].decode("utf-8"),
fullname=attrs["cn"][0].decode("utf-8"),
try:
ldap_obj = ldap.initialize(self.ldap_server_url)
res = ldap_obj.search_s(
self.domain_component, ldap.SCOPE_SUBTREE, query, self.search_fields
)
for (_, attrs) in res
]
return [
Clipper(
clipper=attrs["uid"][0].decode("utf-8"),
fullname=attrs["cn"][0].decode("utf-8"),
)
for (_, attrs) in res
]
except ldap.LDAPError as err:
django_logger.error("An LDAP error occurred", exc_info=err)
return []
# ---