Skip to content

Commit

Permalink
Merge pull request #19 from uktrade/ORPD-31-document-details-page
Browse files Browse the repository at this point in the history 
Document details page and front end fixes
  • Loading branch information
@gdbarnes
gdbarnes authored Oct 15, 2024
2 parents 8398b0d + 11400de commit ee085d8
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 74 deletions.
31 changes: 14 additions & 17 deletions front_end/stylesheets/search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,24 +57,21 @@
}
}

.orp-search-results {
.orp-topics-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;

.orp-topics-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;

li {
padding-right: 10px;
margin-right: 10px;
margin-bottom: 10px;
border-right: 1px solid govuk-colour("dark-grey");
}
li {
padding-right: 10px;
margin-right: 10px;
margin-bottom: 10px;
border-right: 1px solid govuk-colour("dark-grey");
}

li:last-child {
border-right: none;
}
li:last-child {
border-right: none;
}
}
2 changes: 1 addition & 1 deletion orp/config/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
orp_search_views.download_search_csv,
name="download_csv",
),
path("details/<str:id>", orp_search_views.details, name="details"),
path("document/<str:id>", orp_search_views.document, name="document"),
path("healthcheck/", core_views.health_check, name="healthcheck"),
path(
"accessibility-statement/",
Expand Down
38 changes: 22 additions & 16 deletions orp/orp_search/templates/details.html → orp/orp_search/templates/document.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
{% extends "base.html" %}

{% block head_title %}{{service_name}}{% endblock %}
{% block head_title %}{{service_name}} - {{ result.title }}{% endblock %}
{% block service_name %}{{service_name}}{% endblock %}

{% block body_content %}
<div class="govuk-width-container">
<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Search results</a>
<a class="govuk-breadcrumbs__link" href="{{ request.META.HTTP_REFERER }}">Search results</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">{{ result.title }}</a>
{{ result.title }}
</li>
</ol>
</nav>
<main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
<div class="govuk-grid-row govuk-!-margin-bottom-4">
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column-two-thirds">
<span class="govuk-caption-xl">{{ result.type }}</span>
<h1 class="govuk-heading-xl">{{ result.title }}</h1>
</div>
</div>
<div class="govuk-grid-row govuk-body">
<div class="govuk-grid-column-three-quarters">
<div class="govuk-grid-column-two-thirds">
<p class="govuk-body">
{{ result.description }}
</p>
<h2 class="govuk-heading-m">Document details</h2>
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Link to document on publisher’s website
Link to document on publisher's website
</dt>
<dd class="govuk-summary-list__value">
<a class="govuk-link" href="{{ result.identifier }}">{{ result.title }}</a>
<a class="govuk-link" href="{{ result.identifier }}">{{ result.title }}</a> from {{ result.publisher }}
</dd>
</div>
<div class="govuk-summary-list__row">
Expand Down Expand Up @@ -70,19 +71,24 @@ <h2 class="govuk-heading-m">Document details</h2>
</div>
</dl>
<h2 class="govuk-heading-m">Related content on legislation.gov.uk</h2>
<p class="govuk-body">
<a class="govuk-link" href="#">{{ result.related_legislation }}</a>
</p>
<!--
The design shows these links as document titles which we don't have.
We'd need to look up each one using the legislation.gov.uk API
-->
<div class="govuk-!-margin-bottom-6">
{% for legislation in result.related_legislation %}
<p class="govuk-body govuk-!-margin-bottom-2">
<a class="govuk-link" href="{{legislation}}">{{ legislation }}</a>
</p>
{% endfor %}
</div>

<h2 class="govuk-heading-m">Regulatory topics</h2>
<ul class="govuk-list orp-topics-list">
<li class="govuk-body-s orp-secondary-text-colour">
{% for topic in result.regulatory_topics %}
<p>{{ topic }}</p>
{% endfor %}
</li>
{% for topic in result.regulatory_topics %}
<li class="govuk-body-s orp-secondary-text-colour">{{ topic }}</li>
{% endfor %}
</ul>

</div>
</div>
</main>
Expand Down
71 changes: 39 additions & 32 deletions orp/orp_search/templates/orp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,19 +106,22 @@ <h2 class="govuk-fieldset__heading">
</div>
<div class="govuk-checkboxes govuk-checkboxes--small orp-max-height-250" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher" name="publisher" type="checkbox" value="healthandsafetyexecutive">
<input class="govuk-checkboxes__input" id="publisher" name="publisher" type="checkbox"
value="healthandsafetyexecutive">
<label class="govuk-label govuk-checkboxes__label" for="publisher">
Health and Safety Executive
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-2" name="publisher" type="checkbox" value="civilaviationauthority">
<input class="govuk-checkboxes__input" id="publisher-2" name="publisher" type="checkbox"
value="civilaviationauthority">
<label class="govuk-label govuk-checkboxes__label" for="publisher-2">
Civil Aviation Authority
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-3" name="publisher" type="checkbox" value="environmentagency">
<input class="govuk-checkboxes__input" id="publisher-3" name="publisher" type="checkbox"
value="environmentagency">
<label class="govuk-label govuk-checkboxes__label" for="publisher-3">
Environment Agency
</label>
Expand All @@ -130,43 +133,50 @@ <h2 class="govuk-fieldset__heading">
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-5" name="publisher" type="checkbox" value="officeofgasandelectricitymarkets">
<input class="govuk-checkboxes__input" id="publisher-5" name="publisher" type="checkbox"
value="officeofgasandelectricitymarkets">
<label class="govuk-label govuk-checkboxes__label" for="publisher-5">
Office of Gas and Electricity Markets
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-6" name="publisher" type="checkbox" value="officeofrailandroad">
<input class="govuk-checkboxes__input" id="publisher-6" name="publisher" type="checkbox"
value="officeofrailandroad">
<label class="govuk-label govuk-checkboxes__label" for="publisher-6">
Office of Rail and Road
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-7" name="publisher" type="checkbox" value="naturalengland">
<input class="govuk-checkboxes__input" id="publisher-7" name="publisher" type="checkbox"
value="naturalengland">
<label class="govuk-label govuk-checkboxes__label" for="publisher-7">
Natural England
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-8" name="publisher" type="checkbox" value="historicengland">
<input class="govuk-checkboxes__input" id="publisher-8" name="publisher" type="checkbox"
value="historicengland">
<label class="govuk-label govuk-checkboxes__label" for="publisher-8">
Historic England
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-9" name="publisher" type="checkbox" value="nationalhighways">
<input class="govuk-checkboxes__input" id="publisher-9" name="publisher" type="checkbox"
value="nationalhighways">
<label class="govuk-label govuk-checkboxes__label" for="publisher-9">
National Highways
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-10" name="publisher" type="checkbox" value="homesengland">
<input class="govuk-checkboxes__input" id="publisher-10" name="publisher" type="checkbox"
value="homesengland">
<label class="govuk-label govuk-checkboxes__label" for="publisher-10">
Homes England
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="publisher-11" name="publisher" type="checkbox" value="departmentfortransport">
<input class="govuk-checkboxes__input" id="publisher-11" name="publisher" type="checkbox"
value="departmentfortransport">
<label class="govuk-label govuk-checkboxes__label" for="publisher-11">
Department for Transport
</label>
Expand All @@ -180,23 +190,24 @@ <h2 class="govuk-fieldset__heading">
</button>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<p class="govuk-body">
<a id="download-csv-link" href="#" class="govuk-link govuk-link--no-visited-state govuk-!-float-right">Download search results as CSV
<a id="download-csv-link" href="#"
class="govuk-link govuk-link--no-visited-state govuk-!-float-right">Download search results as CSV
file</a>
</p>

<script>
// Function to get the current query parameters from the address bar
function getQueryParameters() {
return window.location.search;
}
<script>
// Function to get the current query parameters from the address bar
function getQueryParameters() {
return window.location.search;
}

document.addEventListener('DOMContentLoaded', function() {
var csvLink = document.getElementById('download-csv-link');
var queryParams = getQueryParameters();
var baseURL = '{% url "download_csv" %}';
csvLink.href = baseURL + queryParams;
});
</script>
document.addEventListener('DOMContentLoaded', function () {
var csvLink = document.getElementById('download-csv-link');
var queryParams = getQueryParameters();
var baseURL = '{% url "download_csv" %}';
csvLink.href = baseURL + queryParams;
});
</script>
</form>
</div>

Expand Down Expand Up @@ -256,7 +267,7 @@ <h2 class="govuk-fieldset__heading">
<div class="govuk-summary-list__row--no-border">
<span class="govuk-caption-m">{{ result.document_type }}</span>
<h2 class="govuk-heading-m">
<a href="/details/{{ result.id }}" class="govuk-link">
<a href="/document/{{ result.id }}" class="govuk-link">
{{result.title}}
</a>
</h2>
Expand All @@ -268,16 +279,12 @@ <h2 class="govuk-heading-m">
Published by: {{ result.publisher}}
</p>
<p class="govuk-body-s orp-secondary-text-colour">
Last updated: {{ result.date_modified | date:"j F Y" }}
Last updated: {{ result.date_modified }}
</p>
<ul class="govuk-list orp-topics-list">
<!-- <li class="govuk-body-s orp-secondary-text-colour">
{{ result.subject }}
</li> -->
<li class="govuk-body-s orp-secondary-text-colour">
{{ result.regulatory_topics }}

</li>
{% for topic in result.regulatory_topics %}
<li class="govuk-body-s orp-secondary-text-colour">{{ topic }}</li>
{% endfor %}
</ul>
</div>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
Expand Down
19 changes: 11 additions & 8 deletions orp/orp_search/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@


@require_http_methods(["GET"])
def details(request: HttpRequest, id) -> HttpResponse:
"""Details view.
def document(request: HttpRequest, id) -> HttpResponse:
"""Document details view.
Handles the GET request to fetch details based on the provided id.
"""
Expand All @@ -31,7 +31,7 @@ def details(request: HttpRequest, id) -> HttpResponse:
logger.info("document id: %s", document_id)
if not document_id:
context["error"] = "no document id provided"
return render(request, template_name="details.html", context=context)
return render(request, template_name="document.html", context=context)

# Create a SearchDocumentConfig instance and set the id parameter
config = SearchDocumentConfig(search_terms="", dummy=True, id=document_id)
Expand All @@ -47,12 +47,17 @@ def details(request: HttpRequest, id) -> HttpResponse:
"regulatory_topics"
].split("\n")

if "related_legislation" in search_result:
search_result["related_legislation"] = search_result[
"related_legislation"
].split("\n")

context["result"] = search_result
return render(request, template_name="details.html", context=context)
return render(request, template_name="document.html", context=context)
except Exception as e:
logger.error("error fetching details: %s", e)
context["error"] = f"error fetching details: {e}"
return render(request, template_name="details.html", context=context)
return render(request, template_name="document.html", context=context)


@require_http_methods(["GET"])
Expand Down Expand Up @@ -191,9 +196,7 @@ def search(request: HttpRequest) -> HttpResponse:
"date_issued": result["date_issued"],
"date_modified": result["date_modified"],
"document_type": result["type"],
"regulatory_topics": " | ".join(
result["regulatory_topics"].split("\n")
),
"regulatory_topics": result["regulatory_topics"].split("\n"),
}
for result in paginated_search_results
]
Expand Down

0 comments on commit ee085d8

Please sign in to comment.