Skip to content

Commit

Permalink
TP2000-1241 Implement new homepage design (#1173)
Browse files Browse the repository at this point in the history 
* Update header and footer

* Add new homepage

* Add search bar to homepage

* Add tests

* Filter in ERRORED workbaskets

* Tweak homepage card padding

* Add Resources view

* Style workbasket action links as buttons

* Remove unused permission boolean

* Change worbasket action buttons styling

* Save workbasket icon in svg file

* Close img tag

* Add docstring to get_search_result

* Add missing alt attribute on workbasket icon img

* Amend doctstring

* Keep search icon inline if form error message is displayed

* Add placeholder cards and text for Test & Train session

* Add notification icon placeholder

* Tweak UI for Test & Train session

* Revert test & train placeholder code

* Fix homepage view unit test
  • Loading branch information
@dalecannon
dalecannon authored Mar 20, 2024
1 parent 862d604 commit fa3f064
Show file tree
Hide file tree
Showing 18 changed files with 849 additions and 322 deletions.
113 changes: 31 additions & 82 deletions common/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,20 @@

from crispy_forms_gds.fields import DateInputField
from crispy_forms_gds.helper import FormHelper
from crispy_forms_gds.layout import HTML
from crispy_forms_gds.layout import Div
from crispy_forms_gds.layout import Field
from crispy_forms_gds.layout import Fieldset
from crispy_forms_gds.layout import Layout
from crispy_forms_gds.layout import Size
from crispy_forms_gds.layout import Submit
from django import forms
from django.contrib.postgres.forms.ranges import DateRangeField
from django.core.exceptions import ValidationError
from django.db.models import TextChoices
from django.forms.renderers import get_default_renderer
from django.forms.utils import ErrorList

from common.util import TaricDateRange
from common.util import get_model_indefinite_article
from common.validators import AlphanumericValidator
from common.widgets import FormSetFieldWidget
from common.widgets import MultipleFileInput
from common.widgets import RadioNestedWidget
Expand Down Expand Up @@ -235,85 +233,6 @@ def get_bound_field(self, form, field_name):
return super().get_bound_field(form, field_name)


class WorkbasketActions(TextChoices):
CREATE = "CREATE", "Create a new workbasket"
EDIT = "EDIT", "Edit workbaskets"


class DITTariffManagerActions(TextChoices):
PACKAGE_WORKBASKETS = "PACKAGE_WORKBASKETS", "Package workbaskets"


class HMRCCDSManagerActions(TextChoices):
PROCESS_ENVELOPES = "PROCESS_ENVELOPES", "Process envelopes"


class CommonUserActions(TextChoices):
SEARCH = "SEARCH", "Search the tariff"
# Change this to be dependent on permissions later


class ImportUserActions(TextChoices):
IMPORT = "IMPORT", "Import EU TARIC files"


class WorkbasketManagerActions(TextChoices):
WORKBASKET_LIST_ALL = "WORKBASKET_LIST_ALL", "Search for workbaskets"


class HomeForm(forms.Form):
def __init__(self, *args, **kwargs):
self.user = kwargs.pop("user")
super().__init__(*args, **kwargs)

choices = []

if self.user.has_perm("workbaskets.add_workbasket"):
choices += WorkbasketActions.choices

if self.user.has_perm("publishing.manage_packaging_queue"):
choices += DITTariffManagerActions.choices

if self.user.has_perm("publishing.consume_from_packaging_queue"):
choices += HMRCCDSManagerActions.choices

choices += CommonUserActions.choices

if self.user.has_perm("common.add_trackedmodel") or self.user.has_perm(
"common.change_trackedmodel",
):
choices += ImportUserActions.choices

if self.user.has_perm("workbaskets.view_workbasket"):
choices += WorkbasketManagerActions.choices

self.fields["workbasket_action"] = forms.ChoiceField(
label="",
choices=choices,
widget=forms.RadioSelect,
required=True,
)

self.helper = FormHelper(self)
self.helper.layout = Layout(
Fieldset(
HTML.h3("What would you like to do?"),
HTML.details(
"What is a workbasket?",
"A workbasket is used to collect all the changes you make to the UK's import and export tariff data. "
"Workbaskets group these changes so they can be checked by the Customs Declaration Service (CDS) before going live.",
),
"workbasket_action",
),
Submit(
"submit",
"Continue",
data_module="govuk-button",
data_prevent_double_click="true",
),
)


class DescriptionHelpBox(Div):
template = "components/description_help.jinja"

Expand Down Expand Up @@ -814,3 +733,33 @@ def clean(self, data, initial=None):
else:
files = cleaned_data(data, initial)
return files


class HomeSearchForm(forms.Form):
search_term = forms.CharField(
required=False,
widget=forms.TextInput(
attrs={"placeholder": "Search by tariff element name or ID"},
),
validators=[AlphanumericValidator],
max_length=18,
)

def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)

self.helper = FormHelper(self)
self.helper.label_size = Size.SMALL
self.helper.legend_size = Size.SMALL
self.helper.layout = Layout(
Div(
Field.text("search_term"),
Submit(
"submit",
"Search",
data_module="govuk-button",
data_prevent_double_click="true",
),
css_id="homepage-search-form",
),
)
165 changes: 165 additions & 0 deletions common/jinja2/common/homepage.jinja
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
{% extends "layouts/form.jinja" %}

{% set page_title = "Home" %}

{% block content %}
<h1 class="govuk-heading-xl govuk-!-margin-bottom-3">Search the Tariff Application Platform</h1>
<span class="govuk-caption-l govuk-!-margin-bottom-4">This service lets you manage the UK's import and export tariff data</span>

{% block form %}
<div class="govuk-grid-row">
<div id="homepage-search" class="govuk-grid-column-full">
{% call django_form() %}
{{ crispy(form) }}
{% endcall %}
</div>
</div>
{% endblock %}

<div id="homepage-articles" class="govuk-grid-row">
{% if can_view_workbasket %}
<article class="homepage-card">
<h3 class="govuk-heading-m">What would you like to do?</h3>
<p class="govuk-body">
Create a new workbasket, edit an existing workbasket, package or search for workbaskets.
</p>

<div class="govuk-grid-row">
{% if can_add_workbasket %}
<div class="govuk-grid-column-one-half">
<a
href="{{ url('workbaskets:workbasket-ui-create') }}"
class="govuk-button homepage-workbasket-action"
>Create a <br> workbasket</a>
</div>

<div class="govuk-grid-column-one-half">
<a
href="{{ url('workbaskets:workbasket-ui-list') }}"
class="govuk-button homepage-workbasket-action"
>Edit a <br> workbasket</a>
</div>
{% endif %}

{% if can_manage_packaging %}
<div class="govuk-grid-column-one-half">
<a
href="{{ url('publishing:packaged-workbasket-queue-ui-list') }}"
class="govuk-button homepage-workbasket-action"
>Package <br> workbaskets</a>
</div>
{% endif %}

<div class="govuk-grid-column-one-half">
<a
href="{{ url('workbaskets:workbasket-ui-list-all') }}"
class="govuk-button homepage-workbasket-action"
>Search for <br> workbaskets</a>
</div>
</div>
</article>

<article class="homepage-card">
<h3 class="govuk-heading-m">Currently working on</h3>
{% if not assigned_workbaskets %}
<p class="govuk-body">You are not currently assigned to a workbasket.</p>
{% else %}
<ul class="govuk-list">
{% for workbasket in assigned_workbaskets %}
<li>
<p class="homepage-workbasket-details govuk-body">
<a
href="{{ url("workbaskets:workbasket-ui-detail", kwargs={"pk": workbasket["id"]}) }}"
class="govuk-link"
>Workbasket ID {{ workbasket["id"] }}</a>
<span>
{% if workbasket["rule_violations_count"] %}
- {{ workbasket["assignment_type"] }}, rule violation{{ workbasket["rule_violations_count"]|pluralize }}
<span class="rule-violation-badge">{{ workbasket["rule_violations_count"] }}</span>
{% else %}
- {{ workbasket["assignment_type"] }}
{% endif %}
</span>
</p>
</li>
{% endfor %}
</ul>
{% endif %}
</article>
{% endif %}

{% if can_import_taric %}
<article class="homepage-card">
<h3 class="govuk-heading-m">EU TARIC files</h3>
<p class="govuk-body">
<a href="{{ url('commodity_importer-ui-list') }}"
class="govuk-link"
>View EU import list and import new TARIC files</a>
</p>
</article>
{% endif %}

{% if can_consume_packaging %}
<article class="homepage-card">
<h3 class="govuk-heading-m">Envelopes</h3>
<p class="govuk-body">
<a href="{{ url('publishing:envelope-queue-ui-list') }}"
class="govuk-link"
>Process envelopes</a>
</p>
</article>
{% endif %}

<article class="homepage-card">
<h3 class="govuk-heading-m">Resources</h3>
<p class="govuk-body">
We have a range of resources you can use with the Tariff Application Platform.
</p>
<ul id="homepage-tap-resources" class="govuk-list govuk-list--spaced">
<li>
<a href="{{ url('app-info') }}" class="govuk-link">Application information</a>
</li>
{% if request.user.is_superuser %}
<li>
<a href="{{ url('import_batch-ui-list') }}" class="govuk-link">Importer V1</a>
</li>
<li>
<a href="{{ url('taric_parser_import_ui_list') }}" class="govuk-link">Importer V2</a>
</li>
{% endif %}
{% if can_view_reports %}
<li>
<a href="{{ url('reports:index') }}" class="govuk-link"><abbr title="Tariff Application Platform">TAP</abbr> reports</a>
</li>
{% endif %}
<li>
<a href="https://uktrade.github.io/tariff-data-manual/#home" class="govuk-link" rel="noreferrer noopener" target="_blank">Tariff data manual</a>
</li>
</ul>
</article>
</div>

<hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">

<div class="govuk-grid-row">
<h2 class="govuk-heading-l govuk-grid-column-full govuk-!-margin-bottom-3">How can we support you?</h2>

<article class="homepage-card">
<h3 class="govuk-heading-m">Get help</h3>
<p class="govuk-body">
Find documentation, guidance, training and updates in the
<a
href="https://data-services-help.trade.gov.uk/tariff-application-platform/"
class="govuk-link"
>
<abbr title="Tariff Application Platform">TAP</abbr> help centre.
</a>
</p>
</article>

<article class="homepage-card govuk-!-padding-bottom-5">
<h3 class="govuk-heading-m">Get in touch</h3>
<p class="govuk-body"><a class="govuk-link" href="mailto:[email protected]">Contact us</a> if you have a question or suggestion.</p>
</article>
</div>
{% endblock %}
21 changes: 16 additions & 5 deletions common/jinja2/common/maintenance.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,24 @@
{% set page_title = "Sorry, the service is unavailable" %}

{% set workbasket_html %}{% endset %}
{% set logout_login_link %}{% endset %}
{% set can_view_workbasket %}{% endset %}
{% set can_import_taric %}{% endset %}
{% set can_manage_packaging %}{% endset %}
{% set can_consume_packaging %}{% endset %}

{% block header %}
{{ govukHeader({
"homepageUrl": "https://gov.uk/",
"serviceName": service_name,
"serviceUrl": "/",
}) }}
<header class="govuk-header" role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logotype">
<a
href="/"
class="govuk-header__link govuk-header__link--service-name govuk-!-margin-right-1"
>{{ service_name }}</a>
<strong class="govuk-tag govuk-phase-banner__content__tag ">{{ phase_banner_tag }}</strong>
</div>
</div>
</header>
{% endblock %}

{% block breadcrumb %}{% endblock %}
Expand Down
Loading

0 comments on commit fa3f064

Please sign in to comment.