From 2ba48e7266857e1ad12ba3c2595f19cb11c2234d Mon Sep 17 00:00:00 2001 From: Paul Schilling Date: Fri, 17 Nov 2023 16:56:01 +0100 Subject: [PATCH 1/2] [#1706] Redesign personal info page --- .../scss/components/List/_List.scss | 2 +- .../Profile/_personal-overview.scss | 8 +- .../scss/components/Table/Tabled.scss | 18 + .../templates/pages/profile/me.html | 327 ++++++++++++------ 4 files changed, 242 insertions(+), 113 deletions(-) diff --git a/src/open_inwoner/scss/components/List/_List.scss b/src/open_inwoner/scss/components/List/_List.scss index 515138cab1..efa74d1d3f 100644 --- a/src/open_inwoner/scss/components/List/_List.scss +++ b/src/open_inwoner/scss/components/List/_List.scss @@ -6,7 +6,7 @@ overflow-y: auto; .case-list, - .contactmomenten-list { + .contactmomenten-list .profile-list { text-decoration: none; } } diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss index 0a6e7f6a36..1e4fb945bf 100644 --- a/src/open_inwoner/scss/components/Profile/_personal-overview.scss +++ b/src/open_inwoner/scss/components/Profile/_personal-overview.scss @@ -1,6 +1,10 @@ -.personal-overview { +.profile-section { h2, .h2 { - margin: var(--row-height) 0 0 0; + margin: calc(var(--row-height) * 1.5) 0 0 0; } } + +#title { + padding-bottom: var(--spacing-medium); +} diff --git a/src/open_inwoner/scss/components/Table/Tabled.scss b/src/open_inwoner/scss/components/Table/Tabled.scss index f87dffd456..e73aa7b4ad 100644 --- a/src/open_inwoner/scss/components/Table/Tabled.scss +++ b/src/open_inwoner/scss/components/Table/Tabled.scss @@ -24,6 +24,12 @@ margin: var(--row-height) 0 0 0; } + .card { + .profile__link { + text-decoration: none; + } + } + .tabled__header { display: grid; grid-template-columns: 1fr 1fr; @@ -41,11 +47,19 @@ } } + .tabled__section { + border-bottom: 1px solid var(--color-gray-light); + } + .tabled__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--color-gray-light); + &--blank { + border-bottom-width: 0; + } + @media (min-width: 768px) { grid-template-columns: 1fr 1fr 125px 125px; } @@ -54,10 +68,14 @@ .tabled__item { font-family: var(--font-family-body); padding: var(--spacing-medium); + padding-left: 0; &--bold { font-weight: bold; } + &--lighter { + font-weight: lighter; + } &--right { @media (min-width: 768px) { diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html index 5eb6b601c4..caabc46dd2 100644 --- a/src/open_inwoner/templates/pages/profile/me.html +++ b/src/open_inwoner/templates/pages/profile/me.html @@ -1,95 +1,237 @@ {% extends 'master.html' %} -{% load i18n l10n link_tags file_tags button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %} +{% load i18n l10n link_tags file_tags grid_tags list_tags button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %} {% block sidebar_content %} -{% anchor_menu anchors desktop=True %} + {% anchor_menu anchors desktop=True %} {% endblock sidebar_content %} {% block content %} -

- {% trans "Persoonlijke gegevens" %} - {% button_row align="right" %} - {% dropdown icon="settings" secondary=True %} -
- {% button href="profile:edit" text=_("Bewerken") icon="edit" transparent=True %} +{% with user=request.user %} + +
+

{% trans "Welkom" %}, {{ user.first_name }}

+ {%trans "voor het laats ingelogd op" %}: {{ user.last_login|date:"d.m.Y" }} om {{ user.last_login|date:"H:i" }} uur +
+ +{# What to do with change password/export to pdf? #} + + +
+
+

{% trans "Persoonlijke gegevens" %} +
+ {% button href="profile:edit" text=_("Bewerken") icon="edit" transparent=True %} {% button href="password_change" text=_("Password") icon="key" transparent=True %}
- {% if can_change_password %} -
- {% button href="password_change" text=_("Wijzig wachtwoord") icon="key" transparent=True %} -
- {% endif %} - {% enddropdown %} - {% button href="profile:export" icon="file-pdf" text=_("Exporteer naar PDF") hide_text=True icon_outlined=True transparent=True secondary=True %} - {% endbutton_row %} -

- -
-
- {% icon icon="person_outline" %}
- {{ request.user.get_full_name }}
- {{ request.user.email }}
- {% if request.user.phonenumber %}{{ request.user.phonenumber }}
{% endif %} - {% if request.user.get_address %}{{ request.user.get_address }}{% else %}-{% endif %} +

+ +
+
{% trans "Voornaam" %}
+
{{ user.first_name }}
+
+
+
{% trans "Achternaam" %}
+
{{ user.last_name }}
-
- {% icon icon="calendar_today" %}
- {% trans "Geboortedatum" %}:
- {% if request.user.birthday %}{{ request.user.birthday|date:"d-m-Y" }}{% else %}-{% endif %} +
+
{% trans "Geboortedatum" %}
+
{{ user.birthday|date:"d.m.Y" }}
-
- {% icon icon="desktop_windows" %}
- {% trans "Actief sinds" %}:
- {{ request.user.date_joined|date:"d-m-Y" }} +
+
{% trans "Adres" %}
+
{{ user.street }} {{ user.housenumber }}
{{user.postcode}} {{ user.city }}
-
- {% icon icon="content_paste" %}
- {% trans "Volgende actie" %}:
- {{ next_action.end_date|date:"d-m-Y" }} +
+
{% trans "E-mail adres" %}
+
{{ user.get_contact_email }}
+
+
+
{% trans "Telefoonnummer" %}
+
{{ user.phonenumber }}
-
-

{% trans "Overzicht" %}

- {% if request.user.is_digid_and_brp and view.config.my_data %} -
-
{% link href="profile:categories" text=_('My details') %}
-
{{request.user.get_full_name}}{% if request.user.get_address %}, {{ request.user.get_address }}{% endif %}
-
{% link href="profile:data" text="Bekijken" icon="arrow_forward" icon_position="after" primary=True %}
-
- {% endif %} - - {% if view.config.mentors %} -
-
- {% if mentor_contacts %} - {% url 'profile:contact_list' as mentor_url %} - {% link href=mentor_url|add:"?type=begeleider" text=_('My mentor(s)') %} - {% else %} - {% trans "Begeleider(s)" %} - {% endif %} -
- {% if mentor_contacts %} -
{{ mentor_contacts|join:", " }}
- {% url 'profile:contact_list' as mentor_url %} - {% if inbox_page_is_published %} -
{% link href=mentor_url|add:"?type=begeleider" text="Stuur een bericht" icon="arrow_forward" icon_position="after" secondary=True %}
- {% endif %} - {% else %} -
{% trans "U heeft (nog) geen gemeentelijke begeleider." %}
-
+ +
+
+

{% trans "Notificatie voorkeuren" %} +
{% button href="profile:notifications" text=_("Bewerken") icon="edit" transparent=True %}
+

+
+
+
{% trans "Communicatiekanaal" %}
+
(currently not supported)
+
+
+
{% trans "Ontvang notificaties over" %}
+
+ {% if user.cases_notifications %} +
{% trans "Zaken" %}
+ {% endif %} + {% if user.messages_notifications %} +
{% trans "Berichten" %}
+ {% endif %} + {% if user.plans_notifications %} +
{% trans "Samenwerken" %}
{% endif %}
- {% endif %} +
+
- {% if view.config.my_contacts %} -
-
{% link href="profile:contact_list" text=_('My contacts') %}
-
{{ contact_text }}
-
{% link href="profile:contact_list" text=_("Beheer contacten") icon="arrow_forward" icon_position="after" secondary=True %}
-
- {% endif %} + +
+

{% trans "Overzicht" %}

+ {% render_grid %} + + {% if view.config.selected_categories %} + {% render_column start=forloop.counter_0|multiply:4 span=4 %} +
+
+ +

{% trans "Mijn onderwerpen" %}

+ {% render_list %} + + {% list_item text="Lorem ipsum..." compact=True strong=False %} + {% list_item text="dolor sit amet..." compact=True strong=False %} + + {% endrender_list %} + + + {% trans "Aanpassen" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + + + +
+
+ {% endrender_column %} + {% endif %} + + {% if view.config.mentors %} + {% render_column start=forloop.counter_0|multiply:4 span=4 %} +
+
+ {% if mentor_contacts %} + {% url 'profile:contact_list' as mentor_url %} + {% link href=mentor_url|add:"?type=begeleider" text=_('Mijn begeleider') %} + {% else %} + {% trans "Begeleider(s)" %} + {% endif %} + {% render_list %} + + {% list_item text=mentor_contacts|join:', ' compact=True strong=False %} + + {% endrender_list %} + + + {% trans "Stuur een bericht" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + + +
+
+ {% endrender_column %} + {% endif %} + + {% if view.config.my_contacts %} + {% render_column start=forloop.counter_0|multiply:4 span=4 %} +
+
+ +

{% trans "Mijn contacten" %}

+ {% render_list %} + + {% list_item text="Mr. Jones" compact=True strong=False %} + {% list_item text="Ms. Jones" compact=True strong=False %} + + {% endrender_list %} + + + {% trans "Beheer contacten" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + + + +
+
+ {% endrender_column %} + {% endif %} + + {% if view.config.actions %} + {% render_column start=forloop.counter_0|multiply:4 span=4 %} +
+
+ +

{% trans "Acties" %}

+ {% render_list %} + + {% list_item text="Lorem ipsum..." compact=True strong=False %} + {% list_item text="dolor sit amet..." compact=True strong=False %} + + {% endrender_list %} + + + {% trans "Beheer acties" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + + + +
+
+ {% endrender_column %} + {% endif %} + + {% if view.config.ssd %} + {% render_column start=forloop.counter_0|multiply:4 span=4 %} +
+
+ +

{% trans "Mijn uitkeringen" %}

+ {% render_list %} + + {% list_item text="Jaaropgaven" compact=True strong=False active=False %} + {% list_item text="Maandspecificaties" compact=True strong=False %} + + {% endrender_list %} + + + {% trans "Bekijk uitkeringen" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + + +
+
+ {% endrender_column %} + {% endif %} + + {% if view.config.questions %} + {% render_column start=forloop.counter_0|multiply:4 span=4 %} +
+
+ +

{% trans "Mijn vragen" %}

+ {% render_list %} + + {% list_item text="Why is 2 + 2 = 4?" compact=True strong=False active=False %} + + {% endrender_list %} + + + {% trans "Bekijken" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + + +
+
+ {% endrender_column %} + {% endif %} + {% endrender_grid %} +
+{% endwith %} + +{# Should this be included? #} +{# comment #} {% if questionnaire_exists and view.config.selfdiagnose %}
{% link href="products:questionnaire_list" text=_('Zelftest') %}
@@ -97,42 +239,7 @@

{% trans "Overzicht" %}

{% link href='products:questionnaire_list' text=_('Start zelfdiagnose') icon="arrow_forward" icon_position="after" secondary=True %}
{% endif %} - - {% if view.config.actions %} -
-
{% link href="profile:action_list" text=_('Actions') %}
-
{{ action_text }}
-
{% link href="profile:action_list" text="Aanpassen" icon="arrow_forward" icon_position="after" secondary=True %}
-
- {% endif %} - - {% if view.config.notifications %} -
-
{% link href="profile:notifications" text=_('Receive notifications for') %}
-
{{ request.user.get_active_notifications }}
-
{% link href="profile:notifications" text="Aanpassen" icon="arrow_forward" icon_position="after" secondary=True %}
-
- {% endif %} - {% if view.config.questions %} -
-
{% link href="cases:contactmoment_list" text=_('My questions') %}
-
-
{% link href="cases:contactmoment_list" text=_('Bekijken') icon="arrow_forward" icon_position="after" secondary=True %}
-
- {% endif %} - {% if view.config.ssd %} -
-
{% link href="profile:monthly_benefits_index" text=_('My benefits') %}
-
Jaaropgaven, Maandspecificaties
-
{% link href="ssd:monthly_benefits_index" text=_("Bekijken") icon="arrow_forward" icon_position="after" secondary=True %}
-
- {% endif %} - {% comment %}
-
{% trans "Afspraken" %}
-
4 afspraken, eerstvolgende voor 6 september
-
{% link href="#" text="Aanpassen" icon="arrow_forward" icon_position="after" primary=True %}
-
{% endcomment %} -
+{# endcomment #} {% render_form form=form method="POST" id="delete-form" extra_classes="confirm" spaceless=True data_confirm_title=_("Weet u zeker dat u uw account wilt verwijderen?") data_confirm_text=_("Hiermee worden alleen uw persoonlijke voorkeuren verwijderd. U krijgt dan bijvoorbeeld geen e-mail meer van ons over wijzigingen van uw lopende zaken. Uw persoonsgegevens en uw lopende zaken zelf worden hiermee niet verwijderd.") data_confirm_cancel=_("Nee") data_confirm_default=_("Ja") %} {% csrf_token %} From 99aa32c7c94f5dd9fa1676853e1bb26ec09ca626 Mon Sep 17 00:00:00 2001 From: Paul Schilling Date: Fri, 24 Nov 2023 15:47:29 +0100 Subject: [PATCH 2/2] [#1706] Refactor tests to reflect changes in profile template --- src/open_inwoner/accounts/forms.py | 2 +- src/open_inwoner/accounts/models.py | 11 +- src/open_inwoner/accounts/tests/test_auth.py | 11 +- .../accounts/tests/test_profile_views.py | 36 ++-- src/open_inwoner/accounts/views/profile.py | 78 +++++--- .../components/AnchorMenu/AnchorMenu.html | 2 +- .../configurations/tests/test_show_actions.py | 8 +- .../Profile/_personal-overview.scss | 4 - .../scss/components/Table/Tabled.scss | 42 +++- .../templates/pages/profile/edit.html | 2 +- .../templates/pages/profile/me.html | 182 ++++++++---------- 11 files changed, 215 insertions(+), 163 deletions(-) diff --git a/src/open_inwoner/accounts/forms.py b/src/open_inwoner/accounts/forms.py index 0941a8b40e..e0ec09c5ac 100644 --- a/src/open_inwoner/accounts/forms.py +++ b/src/open_inwoner/accounts/forms.py @@ -196,7 +196,7 @@ def __init__(self, user, *args, **kwargs): self.fields["infix"].required = False self.fields["last_name"].required = True - if user.is_digid_and_brp(): + if user.is_digid_user_with_brp: self.fields["first_name"].disabled = True self.fields["infix"].disabled = True self.fields["last_name"].disabled = True diff --git a/src/open_inwoner/accounts/models.py b/src/open_inwoner/accounts/models.py index ec4d6e30b9..11a126b18c 100644 --- a/src/open_inwoner/accounts/models.py +++ b/src/open_inwoner/accounts/models.py @@ -368,7 +368,7 @@ def get_active_notifications(self) -> str: def require_necessary_fields(self) -> bool: """returns whether user needs to fill in necessary fields""" if ( - self.is_digid_and_brp() + self.is_digid_user_with_brp and self.email and not self.email.endswith("@example.org") ): @@ -427,12 +427,17 @@ def get_plan_contact_new_count(self): def clear_plan_contact_new_count(self): PlanContact.objects.filter(user=self).update(notify_new=False) - def is_digid_and_brp(self) -> bool: + @property + def is_digid_user(self) -> bool: + return self.login_type == LoginTypeChoices.digid + + @property + def is_digid_user_with_brp(self) -> bool: """ Returns whether user is logged in with digid and data has been requested from haal centraal """ - return self.login_type == LoginTypeChoices.digid and self.is_prepopulated + return self.is_digid_user and self.is_prepopulated class Document(models.Model): diff --git a/src/open_inwoner/accounts/tests/test_auth.py b/src/open_inwoner/accounts/tests/test_auth.py index 518b054f4f..9b84717ccd 100644 --- a/src/open_inwoner/accounts/tests/test_auth.py +++ b/src/open_inwoner/accounts/tests/test_auth.py @@ -11,6 +11,7 @@ import requests_mock from django_webtest import WebTest from furl import furl +from pyquery import PyQuery as PQ from open_inwoner.configurations.models import SiteConfiguration from open_inwoner.haalcentraal.tests.mixins import HaalCentraalMixin @@ -1340,14 +1341,20 @@ def test_password_change_form_done_custom_template_is_rendered(self): def test_password_change_button_is_rendered_with_default_login_type(self): response = self.app.get(reverse("profile:detail"), user=self.user) - self.assertContains(response, _("Wijzig wachtwoord")) + + doc = PQ(response.content) + link = doc.find("[aria-label='Wachtwoord']")[0] + self.assertTrue(doc(link).is_("a")) def test_password_change_button_is_not_rendered_with_digid_login_type(self): digid_user = UserFactory( login_type=LoginTypeChoices.digid, email="john@smith.nl" ) response = self.app.get(reverse("profile:detail"), user=digid_user) - self.assertNotContains(response, _("Wijzig wachtwoord")) + + doc = PQ(response.content) + links = doc.find("[aria-label='Wachtwoord']") + self.assertEqual(len(links), 0) def test_anonymous_user_is_redirected_to_login_page_if_password_change_is_accessed( self, diff --git a/src/open_inwoner/accounts/tests/test_profile_views.py b/src/open_inwoner/accounts/tests/test_profile_views.py index 78a80014c9..cbaf73b30b 100644 --- a/src/open_inwoner/accounts/tests/test_profile_views.py +++ b/src/open_inwoner/accounts/tests/test_profile_views.py @@ -60,25 +60,28 @@ def test_login_required(self): def test_user_information_profile_page(self): response = self.app.get(self.url, user=self.user) - self.assertContains(response, self.user.get_full_name()) + self.assertContains(response, self.user.first_name) + self.assertContains(response, self.user.last_name) + self.assertContains(response, self.user.infix) self.assertContains(response, self.user.email) self.assertContains(response, self.user.phonenumber) - self.assertContains(response, self.user.get_address()) + self.assertContains(response, self.user.street) + self.assertContains(response, self.user.housenumber) + self.assertContains(response, self.user.city) def test_get_empty_profile_page(self): response = self.app.get(self.url, user=self.user) self.assertEquals(response.status_code, 200) - self.assertContains(response, _("U heeft nog geen contacten.")) - self.assertContains(response, "0 acties staan open.") + self.assertContains(response, _("U heeft nog geen contacten")) + self.assertContains(response, "0 acties staan open") self.assertNotContains(response, reverse("products:questionnaire_list")) - self.assertContains(response, _("messages, plans")) def test_get_filled_profile_page(self): ActionFactory(created_by=self.user) contact = UserFactory() self.user.user_contacts.add(contact) - category = CategoryFactory() + CategoryFactory() QuestionnaireStepFactory(published=True) response = self.app.get(self.url, user=self.user) @@ -87,14 +90,13 @@ def test_get_filled_profile_page(self): response, f"{contact.first_name} ({contact.get_contact_type_display()})", ) - self.assertContains(response, "1 acties staan open.") + self.assertContains(response, "1 acties staan open") self.assertContains(response, reverse("products:questionnaire_list")) def test_only_open_actions(self): - action = ActionFactory(created_by=self.user, status=StatusChoices.closed) + ActionFactory(created_by=self.user, status=StatusChoices.closed) response = self.app.get(self.url, user=self.user) - self.assertEquals(response.status_code, 200) - self.assertContains(response, "0 acties staan open.") + self.assertIn("0 acties staan open", response) def test_mydata_shown_with_digid_and_brp(self): user = UserFactory( @@ -123,8 +125,18 @@ def test_mydata_not_shown_without_digid(self): self.assertNotContains(response, _("My details")) def test_active_user_notifications_are_shown(self): - response = self.app.get(self.url, user=self.user) - self.assertContains(response, _("messages, plans")) + user = UserFactory( + bsn="999993847", + first_name="name", + last_name="surname", + is_prepopulated=False, + login_type=LoginTypeChoices.digid, + messages_notifications=True, + plans_notifications=True, + cases_notifications=False, + ) + response = self.app.get(self.url, user=user) + self.assertContains(response, _("Mijn Berichten, Samenwerken")) def test_expected_message_is_shown_when_all_notifications_disabled(self): self.user.cases_notifications = False diff --git a/src/open_inwoner/accounts/views/profile.py b/src/open_inwoner/accounts/views/profile.py index 446e7a7f44..6c1a50ac1e 100644 --- a/src/open_inwoner/accounts/views/profile.py +++ b/src/open_inwoner/accounts/views/profile.py @@ -1,4 +1,5 @@ from datetime import date, datetime +from typing import Generator, Union from django.conf import settings from django.contrib import messages @@ -48,27 +49,65 @@ class MyProfileView( def crumbs(self): return [(_("Mijn profiel"), reverse("profile:detail"))] + @staticmethod + def stringify( + items: list, string_func: callable, lump: bool = False + ) -> Union[Generator, str]: + """ + Create string representation(s) of `items` for display + + :param string_func: the function used to stringify elements in `items` + :param lump: if `True`, `string_func` is applied to `items` collectively + :returns: a `Generator` of strings representing elements in `items`, or a + `str` representing `items` as a whole, depending on whether `lump` is + `True` + """ + if lump: + return string_func(items) + return (string_func(item) for item in items) + def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) user = self.request.user today = date.today() context["anchors"] = [ - ("#title", _("Persoonlijke gegevens")), - ("#overview", _("Persoonlijk overzicht")), + ("#personal-info", _("Persoonlijke gegevens")), + ("#notifications", _("Voorkeuren voor meldingen")), + ("#overview", _("Overzicht")), ] user_files = user.get_all_files() - # List of names of 'mentor' users that are a contact of me - mentor_contacts = [ - c.get_full_name() - for c in user.user_contacts.filter( - contact_type=ContactTypeChoices.begeleider - ) - ] - + # Mentor contacts + names for display + mentor_contacts = user.user_contacts.filter( + contact_type=ContactTypeChoices.begeleider + ) context["mentor_contacts"] = mentor_contacts + context["mentor_contact_names"] = self.stringify( + mentor_contacts, + string_func=lambda m: m.get_full_name, + ) + + # Regular contacts + names for display + contacts = user.get_active_contacts() + context["contact_names"] = self.stringify( + contacts, + string_func=lambda c: f"{c.first_name} ({c.get_contact_type_display()})", + ) + + # Actions + actions = ( + Action.objects.visible() + .connected(self.request.user) + .filter(status=StatusChoices.open) + ) + context["action_text"] = self.stringify( + actions, + string_func=lambda actions: f"{actions.count()} acties staan open", + lump=True, + ) + context["next_action"] = ( Action.objects.visible() .connected(self.request.user) @@ -76,23 +115,8 @@ def get_context_data(self, **kwargs): .order_by("end_date") .first() ) - context["files"] = user_files - context["action_text"] = _( - f"{Action.objects.visible().connected(self.request.user).filter(status=StatusChoices.open).count()} acties staan open." - ) - contacts = user.get_active_contacts() - # Invited contacts - contact_names = [ - f"{contact.first_name} ({contact.get_contact_type_display()})" - for contact in contacts[:3] - ] - if contacts.count() > 0: - context[ - "contact_text" - ] = f"{', '.join(contact_names)}{'...' if contacts.count() > 3 else ''}" - else: - context["contact_text"] = _("U heeft nog geen contacten.") + context["files"] = user_files context["questionnaire_exists"] = QuestionnaireStep.objects.filter( published=True @@ -183,7 +207,7 @@ def update_klant_api(self, user_form_data: dict): def get_form_class(self): user = self.request.user - if user.is_digid_and_brp(): + if user.is_digid_user_with_brp: return BrpUserForm return super().get_form_class() diff --git a/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html b/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html index 7fb39c5db0..5d4bc42bde 100644 --- a/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html +++ b/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html @@ -39,7 +39,7 @@ {% endif %} - + {# dynamic anchor item for products #}
{% if not product.has_cta_tag %} {% if product.form %} diff --git a/src/open_inwoner/configurations/tests/test_show_actions.py b/src/open_inwoner/configurations/tests/test_show_actions.py index 07d45ee27b..aba55fe05e 100644 --- a/src/open_inwoner/configurations/tests/test_show_actions.py +++ b/src/open_inwoner/configurations/tests/test_show_actions.py @@ -33,8 +33,8 @@ def test_default_enabled(self): def test_when_enabled_and_user_is_logged_in(self): response = self.app.get(self.profile_url, user=self.user) - links = response.pyquery(".personal-overview") - self.assertNotEqual(links.find(".personal-overview__actions"), []) + links = response.pyquery(".profile-section") + self.assertNotEqual(links.find("#profile-section-actions"), []) self.assertNotEqual(links.find(f'a[href="{self.actions_list_url}"]'), []) def test_when_disabled_and_user_is_logged_in(self): @@ -42,8 +42,8 @@ def test_when_disabled_and_user_is_logged_in(self): self.profile_config.save() response = self.app.get(self.profile_url, user=self.user) - links = response.pyquery(".personal-overview") - self.assertEqual(links.find(".personal-overview__actions"), []) + links = response.pyquery(".profile-section") + self.assertEqual(links.find("#profile-section-actions"), []) self.assertEqual(links.find(f'a[href="{self.actions_list_url}"]'), []) def test_action_pages_show_404_when_disabled(self): diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss index 1e4fb945bf..0f9a4b1a9d 100644 --- a/src/open_inwoner/scss/components/Profile/_personal-overview.scss +++ b/src/open_inwoner/scss/components/Profile/_personal-overview.scss @@ -4,7 +4,3 @@ margin: calc(var(--row-height) * 1.5) 0 0 0; } } - -#title { - padding-bottom: var(--spacing-medium); -} diff --git a/src/open_inwoner/scss/components/Table/Tabled.scss b/src/open_inwoner/scss/components/Table/Tabled.scss index e73aa7b4ad..0774bf53d3 100644 --- a/src/open_inwoner/scss/components/Table/Tabled.scss +++ b/src/open_inwoner/scss/components/Table/Tabled.scss @@ -2,6 +2,23 @@ display: flex; flex-direction: column; + .h2 { + &.title--extra-padding { + padding-bottom: var(--spacing-large); + } + } + + &__key { + color: var(--color-gray-90); + } + &__value { + color: var(--color-gray-dark); + } + + &__title { + padding-bottom: var(--spacing-extra-large); + } + &.tabled--tiny-end { .tabled__header, .tabled__row { @@ -25,9 +42,21 @@ } .card { + .h4 .link { + color: var(--color-black); + } + .profile__link { text-decoration: none; } + + .list-item { + p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } } .tabled__header { @@ -48,7 +77,11 @@ } .tabled__section { - border-bottom: 1px solid var(--color-gray-light); + padding-bottom: var(--spacing-extra-large); + + .title { + border-bottom: 1px solid var(--color-gray-light); + } } .tabled__row { @@ -70,13 +103,6 @@ padding: var(--spacing-medium); padding-left: 0; - &--bold { - font-weight: bold; - } - &--lighter { - font-weight: lighter; - } - &--right { @media (min-width: 768px) { display: flex; diff --git a/src/open_inwoner/templates/pages/profile/edit.html b/src/open_inwoner/templates/pages/profile/edit.html index 3d9cbf23d1..5ee7900857 100644 --- a/src/open_inwoner/templates/pages/profile/edit.html +++ b/src/open_inwoner/templates/pages/profile/edit.html @@ -14,7 +14,7 @@

{% csrf_token %} {% with request.user as user %} - {% if user.is_digid_and_brp %} + {% if user.is_digid_user_with_brp %} {% input form.display_name %} {% input form.email %} {% input form.phonenumber %} diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html index caabc46dd2..71d791117d 100644 --- a/src/open_inwoner/templates/pages/profile/me.html +++ b/src/open_inwoner/templates/pages/profile/me.html @@ -10,140 +10,122 @@ {% with user=request.user %}
-

{% trans "Welkom" %}, {{ user.first_name }}

- {%trans "voor het laats ingelogd op" %}: {{ user.last_login|date:"d.m.Y" }} om {{ user.last_login|date:"H:i" }} uur +

{% trans "Welkom" %}, {{ user.first_name }}

+ {%trans "voor het laatst ingelogd op" %}: {{ user.last_login|date:"d-m-Y" }} om {{ user.last_login|date:"H:i" }} uur
-{# What to do with change password/export to pdf? #} - - -
-
-

{% trans "Persoonlijke gegevens" %} +{# Personal information #} +
+
+

{% trans "Persoonlijke gegevens" %}
- {% button href="profile:edit" text=_("Bewerken") icon="edit" transparent=True %} {% button href="password_change" text=_("Password") icon="key" transparent=True %} + {% button href="profile:edit" text=_("Bewerken") icon="edit" transparent=True %} + {% if user.is_digid_user_with_brp and view.config.my_data %} + {% button href="profile:data" text=_("My details") icon="info" transparent=True icon_outlined=True %} + {% elif not user.is_digid_user %} + {% button href="password_change" text=_("Password") icon="key" transparent=True %} + {% endif %}

-
{% trans "Voornaam" %}
-
{{ user.first_name }}
+
{% trans "Voornaam" %}
+
{{ user.infix}} {{ user.first_name }}
-
{% trans "Achternaam" %}
-
{{ user.last_name }}
+
{% trans "Achternaam" %}
+
{{ user.last_name }}
-
{% trans "Geboortedatum" %}
-
{{ user.birthday|date:"d.m.Y" }}
+
{% trans "Geboortedatum" %}
+
{{ user.birthday|date:"d.m.Y" }}
-
{% trans "Adres" %}
-
{{ user.street }} {{ user.housenumber }}
{{user.postcode}} {{ user.city }}
+
{% trans "Adres" %}
+
{{ user.street }} {{ user.housenumber }}
{{user.postcode}} {{ user.city }}
-
{% trans "E-mail adres" %}
-
{{ user.get_contact_email }}
+
{% trans "E-mail adres" %}
+
{{ user.get_contact_email }}
-
{% trans "Telefoonnummer" %}
-
{{ user.phonenumber }}
+
{% trans "Telefoonnummer" %}
+
{{ user.phonenumber }}
- -
-
-

{% trans "Notificatie voorkeuren" %} +{# Notifications #} +
+
+

{% trans "Voorkeuren voor meldingen" %}
{% button href="profile:notifications" text=_("Bewerken") icon="edit" transparent=True %}

-
{% trans "Communicatiekanaal" %}
-
(currently not supported)
+
{% trans "Communicatiekanaal" %}
+
E-mail
-
{% trans "Ontvang notificaties over" %}
-
- {% if user.cases_notifications %} -
{% trans "Zaken" %}
- {% endif %} - {% if user.messages_notifications %} -
{% trans "Berichten" %}
- {% endif %} - {% if user.plans_notifications %} -
{% trans "Samenwerken" %}
- {% endif %} +
{% trans "Ontvang notificaties over" %}
+
+
{{ user.get_active_notifications }}
- -
-

{% trans "Overzicht" %}

+{# Overview #} +
+

{% trans "Overzicht" %}

{% render_grid %} - - {% if view.config.selected_categories %} - {% render_column start=forloop.counter_0|multiply:4 span=4 %} -
-
- -

{% trans "Mijn onderwerpen" %}

- {% render_list %} - - {% list_item text="Lorem ipsum..." compact=True strong=False %} - {% list_item text="dolor sit amet..." compact=True strong=False %} - - {% endrender_list %} - - - {% trans "Aanpassen" %} - {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} - - - -
-
- {% endrender_column %} - {% endif %} - + {# Mentors #} {% if view.config.mentors %} {% render_column start=forloop.counter_0|multiply:4 span=4 %} -
+
{% if mentor_contacts %} - {% url 'profile:contact_list' as mentor_url %} - {% link href=mentor_url|add:"?type=begeleider" text=_('Mijn begeleider') %} + {% url "profile:contact_list" as mentor_url %} + {% else %} - {% trans "Begeleider(s)" %} + {% endif %} +

{% trans "Mijn begeleider" %}

+ {% render_list %} - {% list_item text=mentor_contacts|join:', ' compact=True strong=False %} + {% for name in mentor_contact_names %} + {% list_item text=name compact=True %} + {% empty %} + {% list_item text=_("U heeft nog geen begeleider.") compact=True strong=False %} + {% endfor %} {% endrender_list %} + {% if inbox_page_is_published %} {% trans "Stuur een bericht" %} {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + {% endif %}
{% endrender_column %} {% endif %} - + {# Contacts #} {% if view.config.my_contacts %} {% render_column start=forloop.counter_0|multiply:4 span=4 %} -
+

{% trans "Mijn contacten" %}

{% render_list %} - {% list_item text="Mr. Jones" compact=True strong=False %} - {% list_item text="Ms. Jones" compact=True strong=False %} + {% for name in contact_names %} + {% list_item text=name compact=True strong=False %} + {% empty %} + {% list_item text=_("U heeft nog geen contacten") compact=True strong=False %} + {% endfor %} {% endrender_list %} @@ -157,17 +139,16 @@

{% trans "Overzicht" %}

{% endrender_column %} {% endif %} - + {# Overview #} {% if view.config.actions %} {% render_column start=forloop.counter_0|multiply:4 span=4 %} -
+

{% trans "Acties" %}

{% render_list %} - {% list_item text="Lorem ipsum..." compact=True strong=False %} - {% list_item text="dolor sit amet..." compact=True strong=False %} + {% list_item text=action_text compact=True strong=False %} {% endrender_list %} @@ -181,10 +162,10 @@

{% trans "Overzicht" %}

{% endrender_column %} {% endif %} - + {# Benefits #} {% if view.config.ssd %} {% render_column start=forloop.counter_0|multiply:4 span=4 %} -
+

{% trans "Mijn uitkeringen" %}

@@ -204,18 +185,13 @@

{% trans "Overzicht" %}

{% endrender_column %} {% endif %} - + {# Questions #} {% if view.config.questions %} {% render_column start=forloop.counter_0|multiply:4 span=4 %} -
+

{% trans "Mijn vragen" %}

- {% render_list %} - - {% list_item text="Why is 2 + 2 = 4?" compact=True strong=False active=False %} - - {% endrender_list %} {% trans "Bekijken" %} @@ -226,27 +202,33 @@

{% trans "Overzicht" %}

{% endrender_column %} {% endif %} + {# Questionnaire #} + {% if questionnaire_exists and view.config.selfdiagnose %} + {% render_column start=forloop.counter_0|multiply:4 span=4 %} +
+
+ +

{% trans "Zelftest" %}

+ + + {% trans "Start zelfdiagnose" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + + +
+
+ {% endrender_column %} + {% endif %} {% endrender_grid %}
{% endwith %} -{# Should this be included? #} -{# comment #} - {% if questionnaire_exists and view.config.selfdiagnose %} -
-
{% link href="products:questionnaire_list" text=_('Zelftest') %}
-
-
{% link href='products:questionnaire_list' text=_('Start zelfdiagnose') icon="arrow_forward" icon_position="after" secondary=True %}
-
- {% endif %} -{# endcomment #} - {% render_form form=form method="POST" id="delete-form" extra_classes="confirm" spaceless=True data_confirm_title=_("Weet u zeker dat u uw account wilt verwijderen?") data_confirm_text=_("Hiermee worden alleen uw persoonlijke voorkeuren verwijderd. U krijgt dan bijvoorbeeld geen e-mail meer van ons over wijzigingen van uw lopende zaken. Uw persoonsgegevens en uw lopende zaken zelf worden hiermee niet verwijderd.") data_confirm_cancel=_("Nee") data_confirm_default=_("Ja") %} {% csrf_token %}
{% endrender_form %}