Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💄 [#1132] Select-element caret for contacts-page #503

Closed
wants to merge 50 commits into from
Closed

💄 [#1132] Select-element caret for contacts-page #503

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
fddb998
:art: [#1132] fixed alignment and add expand_more arrow icon for cont…
jiromaykin Feb 27, 2023
7c0cf13
:lipstick: [#1132] Changed select tag selector into input class selec…
jiromaykin Feb 28, 2023
93d6f00
:lipstick: [#1132] Refactored filter area for Select tag in Contacts
jiromaykin Mar 2, 2023
57ecd8e
:lipstick: [#1132] Reverted CSS to develop-branch version
jiromaykin Mar 2, 2023
6da9629
:lipstick: [#1132] Removing unnecessary classes
jiromaykin Mar 3, 2023
d789848
:lipstick: [#1132] Formatting template
jiromaykin Mar 3, 2023
2f2ce65
:lipstick: [#1132] Solve merge conflict
jiromaykin Mar 5, 2023
8d836a3
[#1186] Hiding Geboorteland from Mijn Gegevens (BRP)
alextreme Feb 28, 2023
1802645
[#1158] Added image field for begeleider user
vaszig Feb 24, 2023
0930f71
[#1158] Fixed field name
vaszig Feb 24, 2023
8804973
[#1158] Updated image field name and tests
vaszig Feb 28, 2023
bd74e19
[#1158] Fixed migrations after rebase
vaszig Feb 28, 2023
c1e0afe
[#1158] Fixed image name
vaszig Mar 1, 2023
473ad1e
[#1163] Added optional banner to the plan list view
vaszig Mar 1, 2023
37d838b
[#1163] Moved plansbanner variable in plans list view
vaszig Mar 1, 2023
e60f288
Added problematic notification JWT values to timeline log
Mar 2, 2023
ab9bb0b
Radically reduced cache time defaults
Mar 2, 2023
5da03a4
[#1203] Adding fixture for default auth groups
alextreme Mar 3, 2023
7fe2227
[#1191] Added user photo field to the profile settings
vaszig Feb 24, 2023
9a1fe22
[#1191] Updated image field
vaszig Feb 28, 2023
719db5f
[#1191] Fixed user edit image formfield and tests
vaszig Mar 1, 2023
8e1964e
[#1191] Fixed tests
vaszig Mar 2, 2023
b9dd77b
[#1149] Implemented e-Suite form's open submission API and added to c…
Feb 20, 2023
c0b2dae
[#1149] Updated zgw-consumers dependency to 0.25.0 (for tolerant pagi…
Feb 27, 2023
af5c920
[#1149] Applied fixes after changes in choices/enums in zgw-consumers…
Mar 1, 2023
d7e9d95
[#1149] Applied PR feedback fixes, defined fieldset for OpenZaakConfig
Mar 1, 2023
c9bf6bb
:art: [#1171] added clickable phonenumber field for footer
jiromaykin Feb 23, 2023
9d487c0
:art: [#1171] Reformat code with black
jiromaykin Feb 23, 2023
4383f75
:art: [#1171] added validator for phonenr. in footer + removed hardco…
jiromaykin Feb 24, 2023
c0b01c9
:art: [#1171] added migration for validator for phonenr. in footer
jiromaykin Feb 24, 2023
9b3d5cf
:art: [#1171] run black formatter on migration for phonenumber-validator
jiromaykin Feb 24, 2023
1819545
Added 'log_action' list_filter to TimelineLog admin
Mar 2, 2023
2600092
Added custom 'content type' list_filter that only shows used record a…
Mar 2, 2023
8da5c3b
Fixed migrations conflict in configurations
vaszig Mar 3, 2023
ea5f878
[#1156] Added email and phonenumber to map and location cards
vaszig Feb 23, 2023
45e795c
[#1156] Fixed flexbox
vaszig Feb 23, 2023
65851ec
[#1156] Escape html
vaszig Feb 24, 2023
f6fde08
[#1156] Updated map js imports
vaszig Feb 28, 2023
24cfd32
[#1156] Specify babel-loader version compatible with the node one
vaszig Mar 1, 2023
15651eb
[#1156] Reverted package and package-lock
vaszig Mar 2, 2023
ea86905
[#1156] Installed escape-html and pinned babel-loader version
vaszig Mar 2, 2023
e02a64a
[#1159] Added profile image when accepting an invitation
vaszig Feb 28, 2023
df20204
[#1159] Removed unused code,render avatar div when there is an image
vaszig Mar 1, 2023
4dc049b
[#1159] Removed duplicate html code
vaszig Mar 1, 2023
7474af7
:art: [#1132] fixed alignment and add expand_more arrow icon for cont…
jiromaykin Feb 27, 2023
df9f2e7
:lipstick: [#1132] Refactored filter area for Select tag in Contacts
jiromaykin Mar 2, 2023
04057f8
:lipstick: [#1132] Formatting template
jiromaykin Mar 3, 2023
d5102fc
:lipstick: [#1132] Solve merge conflict
jiromaykin Mar 5, 2023
2e08e53
Merge branch 'develop' into feature/1132-select-element-for-contacts-…
jiromaykin Mar 5, 2023
3e9c0f7
:art: [#1132] Reverted SCSS to correct develop branch
jiromaykin Mar 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/open_inwoner/components/templatetags/form_tags.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ def render_form(parser, token):
- extra_classes: string | Extra css classes for the form.
- form_action: string | where the form should go after submit.
- enctype: string | set the encrypt when sending forms.
- id: string | set an id on the form. Usefull for testing.
- id: string | set an id on the form. Useful for testing.
- data_confirm_title: string | If a confirm dialog is shown this will be the title.
- data_confirm_cancel: string | If a confirm dialog is shown this will be the text on the cancel button.
- data_confirm_default: string | If a confirm dialog is shown this will be the text on the confirm button.
Expand Down Expand Up @@ -107,7 +107,7 @@ def form(context, form_object, secondary=True, **kwargs):
- extra_classes: string | Extra css classes for the form.
- form_action: string | where the form should go after submit.
- enctype: string | set the encrypt when sending forms.
- id: string | set an id on the form. Usefull for testing.
- id: string | set an id on the form. Useful for testing.
- data_confirm_title: string | If a confirm dialog is shown this will be the title.
- data_confirm_cancel: string | If a confirm dialog is shown this will be the text on the cancel button.
- data_confirm_default: string | If a confirm dialog is shown this will be the text on the confirm button.
Expand Down
18 changes: 18 additions & 0 deletions src/open_inwoner/js/components/contacts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
class Contacts {
constructor(node) {
this.node = node
this.node.addEventListener('click', this.toggleOpen.bind(this))
}

toggleOpen(event) {
event.preventDefault()
this.node.parentElement.parentElement.classList.toggle(
'contacts__filters--open'
)
}
}

const filterButtons = document.querySelectorAll(
'.contacts__filter-button .button'
)
;[...filterButtons].forEach((filterButton) => new Contacts(filterButton))
1 change: 1 addition & 0 deletions src/open_inwoner/js/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import './autocomplete-search'
import './autocomplete'
import './autosumbit'
import './confirmation'
import './contacts'
import './datepicker'
import { Dropdown } from './dropdown'
import './emoji-button'
Expand Down
48 changes: 48 additions & 0 deletions src/open_inwoner/scss/components/Contacts/Contacts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,51 @@
}
}
}

/// filters

.contacts {
font-family: var(--font-family-body);

.contacts__filters {
&--open {
.contacts__filter-container {
display: grid;
max-width: 300px;
}
}
}

.contacts__filter-button {
border-bottom: 1px solid var(--color-gray-light);
padding: 8px;

@media (min-width: 768px) {
display: none;
}
}

.contacts__filter-container {
align-items: center;
border-bottom: 1px solid var(--color-white);
display: none;
gap: var(--spacing-medium);
grid-template-columns: 1fr;
margin-bottom: var(--spacing-medium);
padding: 8px;

.form__control > .label {
flex-direction: column;
}

@media (min-width: 768px) {
display: grid;
grid-template-columns: 3fr 1fr;
gap: var(--spacing-giant);
}

.input {
min-width: 300px;
}
}
}
240 changes: 128 additions & 112 deletions src/open_inwoner/templates/pages/profile/contacts/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,127 +3,143 @@


{% block content %}
<h1 class="h1" id="title">
{% trans "Mijn contacten" %}
{% button href="accounts:contact_create" text=_("Nieuw contact toevoegen") icon="person" primary=True %}
</h1>
<h1 class="h1" id="title">
{% trans "Mijn contacten" %}
{% button href="accounts:contact_create" text=_("Nieuw contact toevoegen") icon="person" primary=True %}
</h1>

<!--List of contact requests: receiver's view-->
{% if pending_approvals %}
{% with pending_approvals.count as approvals_count %}
<div class="approval{% if approvals_count == 1 %} approval--solo{% endif %}">
<div class="approval__header">
<h2 class="h2">{% trans "U bent toegevoegd als contactpersoon" %}</h2>
<p class="p">{% trans "By accepting you agree on sharing your personal data (first name, last name and phonenumber)." %}</p>
</div>
{% if approvals_count == 1 %}
{% with pending_approvals.get as pending_approval %}
<div class="approval__single">
<p class="p">
{% blocktrans with full_name=pending_approval.get_full_name %}{{ full_name }} wilt u toevoegen als contactpersoon.{% endblocktrans %}
</p>
{% url 'accounts:contact_approval' uuid=pending_approval.uuid as approval_url %}
{% render_form form=None method="POST" form_action=approval_url id="approval_form" spaceless=True show_notifications=True %}
{% csrf_token %}
{% button_row %}
{% button text=_("Weigeren") name="contact_reject" secondary=True bordered=True %}
{% button text=_("Accepteren") name="contact_approve" primary=True %}
{% endbutton_row %}
{% endrender_form %}
<!--List of contact requests: receiver's view-->
{% if pending_approvals %}
{% with pending_approvals.count as approvals_count %}
<div class="approval{% if approvals_count == 1 %} approval--solo{% endif %}">
<div class="approval__header">
<h2 class="h2">{% trans "U bent toegevoegd als contactpersoon" %}</h2>
<p class="p">{% trans "By accepting you agree on sharing your personal data (first name, last name and phonenumber)." %}</p>
</div>
{% if approvals_count == 1 %}
{% with pending_approvals.get as pending_approval %}
<div class="approval__single">
<p class="p">
{% blocktrans with full_name=pending_approval.get_full_name %}{{ full_name }} wilt u toevoegen als contactpersoon.{% endblocktrans %}
</p>
{% url 'accounts:contact_approval' uuid=pending_approval.uuid as approval_url %}
{% render_form form=None method="POST" form_action=approval_url id="approval_form" spaceless=True show_notifications=True %}
{% csrf_token %}
{% button_row %}
{% button text=_("Weigeren") name="contact_reject" secondary=True bordered=True %}
{% button text=_("Accepteren") name="contact_approve" primary=True %}
{% endbutton_row %}
{% endrender_form %}
</div>
{% endwith %}
{% else %}
<ul class="approval__list">
{% for approval in pending_approvals %}
<li class="approval__list-item">
<p class="p">{{ approval.get_full_name }}</p>
{% url 'accounts:contact_approval' uuid=approval.uuid as approval_url %}
{% render_form form=None method="POST" form_action=approval_url id="approval_form" spaceless=True show_notifications=True %}
{% csrf_token %}
{% button_row %}
{% button text=_("Weigeren") name="contact_reject" value="reject" icon="close" icon_position="before" extra_classes="button--danger-borderless" %}
{% button text=_("Accepteren") name="contact_approve" value="approve" icon="check" icon_position="before" %}
{% endbutton_row %}
{% endrender_form %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endwith %}
{% else %}
<ul class="approval__list">
{% for approval in pending_approvals %}
<li class="approval__list-item">
<p class="p">{{approval.get_full_name}}</p>
{% url 'accounts:contact_approval' uuid=approval.uuid as approval_url %}
{% render_form form=None method="POST" form_action=approval_url id="approval_form" spaceless=True show_notifications=True %}
{% csrf_token %}
{% button_row %}
{% button text=_("Weigeren") name="contact_reject" value="reject" icon="close" icon_position="before" extra_classes="button--danger-borderless" %}
{% button text=_("Accepteren") name="contact_approve" value="approve" icon="check" icon_position="before" %}
{% endbutton_row %}
{% endrender_form %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endwith %}
{% endif %}
{% endwith %}
{% endif %}

{% form id="contact-filter" form_object=form method="GET" columns=2 no_actions=True horizontal=True spaceless=True autosubmit=True form_action=form_action %}
<div class="contacts">
{% render_form id="contact-filter" form=form method="GET" no_actions=True horizontal=True spaceless=True autosubmit=True form_action=form_action class="form form--columns-2 form--spaceless form--autosubmit form--horizontal" %}
<div class="form__control contacts__filters">
<div class="contacts__filter-button">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to keep the names consistent. The parent is different from the child (contacts__filters and contacts__filter

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:-D I was using the naming convention from the 'Actions' files open_inwoner/js/components/actions/index.js - where it seems a collection of filters is called as the multiple 'filters', but I can change this, no prob.
I will then also have to change this in the Actions files, or else we will have different conventions.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem then, you can keep it as is.

{% button text=_("Filter") type="button" bordered=True %}
</div>
<div class="contacts__filter-container">
<p class="p">{% trans "Soort contactpersoon" %}</p>
{% input form.type no_label=True no_help=True icon="expand_more" class="label input" id="id_type" %}
</div>
</div>
{% endrender_form %}

<table class="table">
<thead class="table__heading">
<tr>
<td class="table__item">{% trans "Naam" %}</td>
<td class="table__item">{% trans "Soort contact" %}</td>
<td class="table__item">{% trans "E-mailadres" %}</td>
<td class="table__item">{% trans "Telefoonnummer" %}</td>
<td class="table__item" colspan="2">{% trans "Actief" %}&nbsp;</td>
<td class="table__item">&nbsp;</td>
</tr>
</thead>
<tbody>
{% if not pending_invitations and not contacts_for_approval and not pending_approval and not pending_approval_list and not object_list %}
<table class="table">
<thead class="table__heading">
<tr>
<td class="table__item" colspan="7" >{% trans "Er zijn geen contacten gevonden met deze filter, of u heeft nog geen contacten." %}</td>
<td class="table__item">{% trans "Naam" %}</td>
<td class="table__item">{% trans "Soort contact" %}</td>
<td class="table__item">{% trans "E-mailadres" %}</td>
<td class="table__item">{% trans "Telefoonnummer" %}</td>
<td class="table__item" colspan="2">{% trans "Actief" %}&nbsp;</td>
<td class="table__item">&nbsp;</td>
</tr>
{% else %}

<!--New contacts-users with pending invitations for registration-->
{% for invite in pending_invitations %}
</thead>
<tbody>
{% if not pending_invitations and not contacts_for_approval and not pending_approval and not pending_approval_list and not object_list %}
<tr>
<th class="table__header">{{invite.invitee_first_name}} {{invite.invitee_last_name}}</th>
<td class="table__item"></td>
<td class="table__item">{{invite.invitee_email}}</td>
<td class="table__item"></td>
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
<td class="table__item">{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}<td>
<td class="table__item" colspan="7">{% trans "Er zijn geen contacten gevonden met deze filter, of u heeft nog geen contacten." %}</td>
</tr>
{% endfor %}
{% else %}

<!--Existing contacts-users which require approval - sender's view-->
{% for contact in contacts_for_approval %}
<tr>
<th class="table__header"></th>
<td class="table__item"></td>
<td class="table__item">{{contact.email}}</td>
<td class="table__item"></td>
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
<td class="table__item">{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}<td>
</tr>
{% endfor %}
<!--New contacts-users with pending invitations for registration-->
{% for invite in pending_invitations %}
<tr>
<th class="table__header">{{ invite.invitee_first_name }} {{ invite.invitee_last_name }}</th>
<td class="table__item"></td>
<td class="table__item">{{ invite.invitee_email }}</td>
<td class="table__item"></td>
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
<td class="table__item">
{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}
<td>
</tr>
{% endfor %}

<!--Active contacts list-->
{% for contact in object_list %}
<tr>
<th class="table__header">{{ contact.get_full_name }}</th>
<td class="table__item">{% if contact.contact_type == "contact" %}Contactpersoon{% elif contact.contact_type == "begeleider" %}Begeleider{% elif contact.contact_type == "organization" %}Organisatie{% endif %}</td>
<td class="table__item">{{ contact.get_contact_email|default:"" }}</td>
<td class="table__item">{{ contact.phonenumber }}</td>
<td class="table__item">{% if contact.is_not_active %}{% icon "close" extra_classes="icon icon--danger" %}{% else %}{% icon "check" %}{% endif %}</td>
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" href=contact.get_contact_message_url icon_outlined=True transparent=True disabled=contact.is_not_active %}</td>
<td class="table__item">
{% dropdown icon="settings" disabled=contact.is_not_active %}
<div class="dropdown__item">
{% url 'accounts:contact_delete' uuid=contact.uuid as delete_url %}
{% render_form form=None form_action=delete_url method="POST" spaceless=True id="delete-contact-form" extra_classes="confirm" data_confirm_title=_("Are you sure you want to delete this contact?") data_confirm_cancel=_("Nee") data_confirm_default=_("Ja") %}
{% csrf_token %}
{% button icon="delete" text=_("Verwijderen") transparent=True %}
{% endrender_form %}
</div>
{% enddropdown %}
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<!--Existing contacts-users which require approval - sender's view-->
{% for contact in contacts_for_approval %}
<tr>
<th class="table__header"></th>
<td class="table__item"></td>
<td class="table__item">{{ contact.email }}</td>
<td class="table__item"></td>
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
<td class="table__item">
{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}
<td>
</tr>
{% endfor %}

<!--Active contacts list-->
{% for contact in object_list %}
<tr>
<th class="table__header">{{ contact.get_full_name }}</th>
<td class="table__item">{% if contact.contact_type == "contact" %}Contactpersoon{% elif contact.contact_type == "begeleider" %}Begeleider{% elif contact.contact_type == "organization" %}Organisatie{% endif %}</td>
<td class="table__item">{{ contact.get_contact_email|default:"" }}</td>
<td class="table__item">{{ contact.phonenumber }}</td>
<td class="table__item">{% if contact.is_not_active %}{% icon "close" extra_classes="icon icon--danger" %}{% else %}{% icon "check" %}{% endif %}</td>
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" href=contact.get_contact_message_url icon_outlined=True transparent=True disabled=contact.is_not_active %}</td>
<td class="table__item">
{% dropdown icon="settings" disabled=contact.is_not_active %}
<div class="dropdown__item">
{% url 'accounts:contact_delete' uuid=contact.uuid as delete_url %}
{% render_form form=None form_action=delete_url method="POST" spaceless=True id="delete-contact-form" extra_classes="confirm" data_confirm_title=_("Are you sure you want to delete this contact?") data_confirm_cancel=_("Nee") data_confirm_default=_("Ja") %}
{% csrf_token %}
{% button icon="delete" text=_("Verwijderen") transparent=True %}
{% endrender_form %}
</div>
{% enddropdown %}
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>

{% pagination page_obj=page_obj paginator=paginator request=request href="accounts:my_profile" text=_("Terug naar mijn profiel") %}
{% pagination page_obj=page_obj paginator=paginator request=request href="accounts:my_profile" text=_("Terug naar mijn profiel") %}
{% endblock content %}