From a325722ff40358d933ce30076d57f021ce82928f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20=20MENAGER?= <herve.menager@pasteur.fr>
Date: Wed, 6 Dec 2017 15:46:31 +0100
Subject: [PATCH] refactor menu lists on compounds list page + more/less links
Former-commit-id: aa0b65eb2886ffc98f4504b09ec06e4ddaff7e10
---
ippisite/ippidb/templates/base.html | 12 ++++
ippisite/ippidb/templates/compound_list.html | 61 +------------------
.../templates/multiselection_list_menu.html | 29 +++++++++
ippisite/ippidb/views.py | 25 +++++++-
4 files changed, 67 insertions(+), 60 deletions(-)
create mode 100644 ippisite/ippidb/templates/multiselection_list_menu.html
diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index 38929b5a..527c0626 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -9,6 +9,18 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static/Kekule.js-master/release/kekule.js?modules=chemWidget,openbabel,indigo"></script>
<script src="/static/js/ippidb.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ var modifyUrl = function(paramName, paramValue){
+ var url = new URL(location.href);
+ if(paramValue!=null){
+ url.searchParams.set(paramName, paramValue);
+ }else{
+ url.searchParams.delete(paramName);
+ }
+ var modifiedUrl = url.toString();
+ window.location = modifiedUrl;
+ };
+ </script>
</head>
<body>
diff --git a/ippisite/ippidb/templates/compound_list.html b/ippisite/ippidb/templates/compound_list.html
index 5139a412..e852b03a 100644
--- a/ippisite/ippidb/templates/compound_list.html
+++ b/ippisite/ippidb/templates/compound_list.html
@@ -29,69 +29,14 @@
</div>
</nav>
</div>
-{% include "kekule_display.html" %}
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form>
- <fieldset class="form-group row border border-info m-2">
- <div class="bg-info col-12"><legend>PPI</legend></div>
- {% for ppi in selected_ppis %}
- <div class="form-check col-12">
- <label class="form-check-label">
- <input class="form-check-input text-right" type="checkbox" checked value="{{ ppi.id }}" onchange="this.form.submit()" name="ppi" style="width: auto; margin-right: 1em;">
- {{ ppi.name }}
- </label>
- </div>
- {% endfor %}
- {% for ppi in ppis|slice:":5" %}
- <div class="form-check col-12">
- <label class="form-check-label">
- <input class="form-check-input text-right" type="checkbox" value="{{ ppi.id }}" onchange="this.form.submit()" name="ppi" style="width: auto; margin-right: 1em;">
- {{ ppi.name }}
- </label>
- </div>
- {% endfor %}
- </fieldset>
- <fieldset class="form-group row border border-info m-2">
- <div class="bg-info col-12"><legend>Disease</legend></div>
- {% for disease in selected_diseases %}
- <div class="form-check col-12">
- <label class="form-check-label">
- <input class="form-check-input text-right" type="checkbox" checked value="{{ disease.id }}" onchange="this.form.submit()" name="disease" style="width: auto; margin-right: 1em;">
- {{ disease.name }}
- </label>
- </div>
- {% endfor %}
- {% for disease in diseases|slice:":5" %}
- <div class="form-check col-12">
- <label class="form-check-label">
- <input class="form-check-input text-right" type="checkbox" value="{{ disease.id }}" onchange="this.form.submit()" name="disease" style="width: auto; margin-right: 1em;">
- {{ disease.name }}
- </label>
- </div>
- {% endfor %}
- </fieldset>
- <fieldset class="form-group row border border-info m-2">
- <div class="bg-info col-12"><legend>Organism</legend></div>
- {% for taxonomy in selected_taxonomies %}
- <div class="form-check col-12">
- <label class="form-check-label">
- <input class="form-check-input text-right" type="checkbox" checked value="{{ taxonomy.id }}" onchange="this.form.submit()" name="taxonomy" style="width: auto; margin-right: 1em;">
- {{ taxonomy.name }}
- </label>
- </div>
- {% endfor %}
- {% for taxonomy in taxonomies|slice:":5" %}
- <div class="form-check col-12">
- <label class="form-check-label">
- <input class="form-check-input text-right" type="checkbox" value="{{ taxonomy.id }}" onchange="this.form.submit()" name="taxonomy" style="width: auto; margin-right: 1em;">
- {{ taxonomy.name }}
- </label>
- </div>
- {% endfor %}
- </fieldset>
+ {% include "multiselection_list_menu.html" with label="PPI" selected_list=selected_ppis unselected_list=ppis param_name="ppi" limit_param_name="ppis_limit" limit_param_value=ppis_limit %}
+ {% include "multiselection_list_menu.html" with label="Disease" selected_list=selected_diseases unselected_list=diseases param_name="disease" limit_param_name="diseases_limit" limit_param_value=diseases_limit %}
+ {% include "multiselection_list_menu.html" with label="Organism" selected_list=selected_taxonomies unselected_list=taxonomies param_name="taxonomy" limit_param_name="taxonomies_limit" limit_param_value=taxonomies_limit %}
</form>
</div>
<main class="col-12 col-md-9 col-xl-10 pl-md-5 bd-content" role="main">
diff --git a/ippisite/ippidb/templates/multiselection_list_menu.html b/ippisite/ippidb/templates/multiselection_list_menu.html
new file mode 100644
index 00000000..9cc39d02
--- /dev/null
+++ b/ippisite/ippidb/templates/multiselection_list_menu.html
@@ -0,0 +1,29 @@
+ <fieldset class="form-group row border border-info m-2">
+ <div class="bg-info col-12">
+ <legend>{{ label }}
+ {% if limit_param_value %}
+ <a href="#" class="float-right text-light" title="Display all {{ label }}s" onclick="modifyUrl('{{ limit_param_name }}',null);">[+]</a>
+ <input type="hidden" name="{{ limit_param_name }}" value="{{ limit_param_value }}" />
+ {% endif %}
+ {% if not limit_param_value %}
+ <a href="#" class="float-right text-light" title="Show only top 5 {{ label }}s" onclick="modifyUrl('{{ limit_param_name }}',5);">[-]</a>
+ {% endif %}
+ </legend>
+ </div>
+ {% for element in selected_list %}
+ <div class="form-check col-12">
+ <label class="form-check-label">
+ <input class="form-check-input text-right" type="checkbox" checked value="{{ element.id }}" onchange="this.form.submit()" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
+ {{ element.name }}
+ </label>
+ </div>
+ {% endfor %}
+ {% for element in unselected_list %}
+ <div class="form-check col-12">
+ <label class="form-check-label">
+ <input class="form-check-input text-right" type="checkbox" value="{{ element.id }}" onchange="this.form.submit()" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
+ {{ element.name }}
+ </label>
+ </div>
+ {% endfor %}
+ </fieldset>
diff --git a/ippisite/ippidb/views.py b/ippisite/ippidb/views.py
index e229aeab..22e88df0 100644
--- a/ippisite/ippidb/views.py
+++ b/ippisite/ippidb/views.py
@@ -195,12 +195,30 @@ def compound_list(request):
compounds = compounds.filter(compoundaction__ppi__id__in=request.GET.getlist('ppi'))
if request.GET.get('disease'):
compounds = compounds.filter(compoundaction__ppi__diseases__id__in=request.GET.getlist('disease'))
- selected_ppis = Ppi.objects.filter(id__in=request.GET.getlist('ppi'))
+ try:
+ ppis_limit = int(request.GET.get('ppis_limit'))
+ except:
+ ppis_limit = None
+ try:
+ diseases_limit = int(request.GET.get('diseases_limit'))
+ except:
+ diseases_limit = None
+ try:
+ taxonomies_limit = int(request.GET.get('taxonomies_limit'))
+ except:
+ taxonomies_limit = None
+ selected_ppis = Ppi.objects.filter(id__in=request.GET.getlist('ppi'))
ppis = Ppi.objects.exclude(id__in=request.GET.getlist('ppi'))
+ if ppis_limit is not None:
+ ppis = ppis[:ppis_limit]
selected_diseases = Disease.objects.filter(id__in=request.GET.getlist('disease'))
diseases = Disease.objects.exclude(id__in=request.GET.getlist('disease'))
+ if diseases_limit is not None:
+ diseases = diseases[:diseases_limit]
selected_taxonomies = Taxonomy.objects.filter(id__in=request.GET.getlist('taxonomy'))
taxonomies = Taxonomy.objects.exclude(id__in=request.GET.getlist('taxonomy'))
+ if taxonomies_limit is not None:
+ taxonomies = taxonomies[:taxonomies_limit]
# handle pagination in compounds list
paginator = Paginator(compounds, 5)
page = request.GET.get('page')
@@ -215,10 +233,13 @@ def compound_list(request):
return render(request, 'compound_list.html', {'compounds': compounds,
'selected_ppis': selected_ppis,
'ppis': ppis,
+ 'ppis_limit': ppis_limit,
'selected_diseases': selected_diseases,
'diseases': diseases,
+ 'diseases_limit': ppis_limit,
'selected_taxonomies': selected_taxonomies,
- 'taxonomies': taxonomies})
+ 'taxonomies': taxonomies,
+ 'taxonomies_limit': taxonomies_limit})
def compound_card(request, compound_id):
try:
--
GitLab