add sort and paging size.

aarhusstadsarkiv · Aug 2, 2023 · 2aaa7e4 · 2aaa7e4
1 parent 7eaca57
commit 2aaa7e4
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 30 deletions.
diff --git a/stadsarkiv_client/endpoints/records.py b/stadsarkiv_client/endpoints/records.py
@@ -57,9 +57,12 @@ def get_dates(request: Request):
 
 async def get_records_search(request: Request):
     q = await query.get_search(request)
-    query_params = await query.get_list(request, remove_keys=["q"])
+    query_params = await query.get_list(request, remove_keys=[])
     query_str = await query.get_str(request, remove_keys=["start", "size"])
 
+    size = request.query_params.get("size", 20)
+    sort = request.query_params.get("sort", "relevance")
+
     records = await api.proxies_records(request)
     normalized_facets = NormalizeFacets(request=request, records=records, query_params=query_params, query_str=query_str)
     facets = normalized_facets.get_transformed_facets()
@@ -73,6 +76,8 @@ async def get_records_search(request: Request):
         "query_params": query_params,
         "query_str": query_str,
         "q": q,
+        "sort": sort,
+        "size": size,
         "record_facets": records["facets"],
         "facets": facets,
         "facets_filters": facets_filters,

diff --git a/stadsarkiv_client/records/normalize_facets.py b/stadsarkiv_client/records/normalize_facets.py
@@ -143,7 +143,7 @@ def get_checked_facets(self):
         Add a remove_query key to the facet, which is the query string without the facet.
         """
         facets_checked = self._get_checked_facets_flatten()
-        ignore_keys = ["subjects", "content_types", "usability", "availability", "size", "start"]
+        ignore_keys = ["subjects", "content_types", "usability", "availability", "size", "start", "sort", "direction"]
 
         for query_name, definition in QUERY_PARAMS.items():
             if query_name not in ignore_keys and self.request.query_params.get(query_name):

diff --git a/stadsarkiv_client/static/css/default.css b/stadsarkiv_client/static/css/default.css
@@ -44,7 +44,7 @@ body {
 
 .flash-messages {
     margin-top: 10px;
-    bottom: 10px;
+    bottom: 20px;
     left: 2%;
     position: fixed;
     width: 96%;
@@ -60,7 +60,6 @@ body {
 .flash-success {
     background-color: var(--flash-success-color);
     color: var(--flash-color);
-    opacity: 0.9;
 }
 
 .flash-error {
@@ -103,18 +102,22 @@ body {
 
 .container-left {
     position: absolute;
-    width: 360px;
+    width: 350px;
     margin-left: 20px;
     height: 100%;
 }
 
 .container-main-center {
-    margin-left: 420px;
+    margin-left: 375px;
     max-width: 100%;
     height: 100%;
 }
 
 .container-search {
     width: 100%;
     margin-left: 420px;
+}
+
+summary {
+    cursor: pointer;
 }
diff --git a/stadsarkiv_client/static/css/dolphin.css b/stadsarkiv_client/static/css/dolphin.css
@@ -177,8 +177,6 @@ textarea:not([rows]) {
 }
 
 select {
-    background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
-    padding-right: 35px;
 }
 
 select::-ms-expand {

diff --git a/stadsarkiv_client/static/css/search.css b/stadsarkiv_client/static/css/search.css
@@ -122,4 +122,19 @@ button {
 
 details>summary.closed {
     list-style: none;
+}
+
+.search-form {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.search-options {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: flex-end;
+}
+.search-option {
+    margin-right: 10px;
 }
diff --git a/stadsarkiv_client/static/js/flash.js b/stadsarkiv_client/static/js/flash.js
@@ -55,9 +55,9 @@ class Flash {
     }
 }
 
-// On screen resize, set the width of the flash messages
-window.addEventListener('resize', function () {
-    Flash.setWidth(selector)
-})
+// // On screen resize, set the width of the flash messages
+// window.addEventListener('resize', function () {
+//     Flash.setWidth(selector)
+// })
 
 export {Flash}
diff --git a/stadsarkiv_client/static/js/search.js b/stadsarkiv_client/static/js/search.js
@@ -151,4 +151,33 @@ function searchEvents() {
     }
 }
 
+
+var selectElement = document.querySelector('.select-size');
+selectElement.addEventListener('change', function() {
+    document.getElementById('size').submit();
+});
+
+var selectElement = document.querySelector('.select-sort');
+selectElement.addEventListener('change', function() {
+
+    var selectedValue = selectElement.value;
+    if (selectedValue == 'date_to') {
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'direction';
+        input.value = 'desc';
+        document.getElementById('sort').appendChild(input);
+    }
+
+    if (selectedValue == 'date_from') {
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'direction';
+        input.value = 'asc';
+        document.getElementById('sort').appendChild(input);
+    }
+
+    document.getElementById('sort').submit();
+});
+
 export { searchEvents }
diff --git a/stadsarkiv_client/templates/records/search.html b/stadsarkiv_client/templates/records/search.html
@@ -73,14 +73,65 @@
 {% endmacro %}
 
 {% macro parse_search_form() %}
-<form id="search" method="GET" action="{{ url_for('records_search')}}">
-    {% for key, value in query_params if key not in ['start'] %}
+<div>
+<form id="search" method="get" action="{{ url_for('records_search')}}">
+    {% for key, value in query_params if key not in ['start', 'q'] %}
     <input type="hidden" name="{{ key }}" value="{{ value }}">
     {% endfor %}
     <input type="text" name="q" placeholder="{{ translate('Search') }}" aria-label="{{ translate('search') }}"
         value="{{ q }}">
     <button type="submit" class="contrast">{{ translate('Search') }}</button>
 </form>
+</div>
+{% endmacro %}
+
+{% macro parse_size_form() %}
+<div class="search-option">
+<form class="size" id="size" method="get" action="{{ url_for('records_search')}}">
+    {% for key, value in query_params if key not in ['start', 'size'] %}
+    <input type="hidden" name="{{ key }}" value="{{ value }}">
+    {% endfor %}
+    <select name="size" class="select-size">
+        <option value="20" {% if size == "20" %}selected{% endif %}>20 per side</option>
+        <option value="50" {% if size == "50" %}selected{% endif %}>50 per side</option>
+        <option value="100" {% if size == "100" %}selected{% endif %}>100 per side</option>
+    </select>
+</form>
+</div>
+{% endmacro %}
+
+{% macro parse_sort_form() %}
+<div class="search-option">
+<form class="sort" id="sort" method="get" action="{{ url_for('records_search')}}">
+    {% for key, value in query_params if key not in ['sort', 'direction'] %}
+    <input type="hidden" name="{{ key }}" value="{{ value }}">
+    {% endfor %}
+    <select name="sort" class="select-sort">
+        <option value="_score" {% if sort == "_score" %}selected{% endif %}>Relavans</option>
+        <option value="date_from" {% if sort == "date_from" %}selected{% endif %}>Ældste dato først</option>
+        <option value="date_to" {% if sort == "date_to" %}selected{% endif %}>Nyeste dato først</option>
+    </select>
+</form>
+</div>
+{% endmacro %}
+
+{% macro parse_search() %}
+<div class="search-form">
+{{ parse_search_form() }}
+    <div class="search-options">
+        {{ parse_size_form() }}
+        {{ parse_sort_form() }}
+    </div>
+</div>
+{% endmacro %}
+
+{% macro parse_search_title(result) %}
+{% if result.label %}
+<div class="summary">{{ result.label|truncate(truncate_summary) }}</div>
+{% endif %}
+{% if result.summary %}
+<div class="summary">{{ result.summary|truncate(truncate_summary) }}</div>
+{% endif %}
 {% endmacro %}
 
 {% macro parse_search_title(result) %}
@@ -204,22 +255,19 @@
 {% endblock head %}
 
 {% block content %}
-
-
-    <div class="container-left">
-        {{ parse_top_level_facets(facets) }}
-    </div>
-    <div class="container-main-center">
-    {{ parse_search_form() }}
-    {{ parse_facets_filters(facets_filters) }}
-    {{ pagination_total(pagination_data) }}
-    {{ parse_pagination(pagination_data) }}
-    {{ parse_search_results(records) }}
-    {% if pagination_data["total"] > pagination_data["size"] * pagination_data["current_page"] %}
-    {{ parse_pagination(pagination_data) }}
-    {% endif %}
-    </div>
-
+<div class="container-left">
+    {{ parse_top_level_facets(facets) }}
+</div>
+<div class="container-main-center">
+{{ parse_search() }}
+{{ parse_facets_filters(facets_filters) }}
+{{ pagination_total(pagination_data) }}
+{{ parse_pagination(pagination_data) }}
+{{ parse_search_results(records) }}
+{% if pagination_data["total"] > pagination_data["size"] * pagination_data["current_page"] %}
+{{ parse_pagination(pagination_data) }}
+{% endif %}
+</div>
 
 <script type="module">
     import { searchEvents } from "/static/js/search.js";