Skip to content

Commit c124b26

Browse files
alextremealextreme
authored
Merge pull request #520 from maykinmedia/feature/1132-add-select-caret-for-contacts-page
🎨 [#1132] Add select-caret and filters for contacts
2 parents 3669fc2 + bed232f commit c124b26

File tree

4 files changed

+146
-64
lines changed

4 files changed

+146
-64
lines changed

‎src/open_inwoner/js/components/contacts/index.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
class Contacts {
2+
constructor(node) {
3+
this.node = node
4+
this.node.addEventListener('click', this.toggleOpen.bind(this))
5+
}
6+
7+
toggleOpen(event) {
8+
event.preventDefault()
9+
this.node.parentElement.parentElement.classList.toggle(
10+
'contacts__filter--open'
11+
)
12+
}
13+
}
14+
15+
const filterButtons = document.querySelectorAll(
16+
'.contacts__filter-button .button'
17+
)
18+
;[...filterButtons].forEach((filterButton) => new Contacts(filterButton))

‎src/open_inwoner/js/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './autocomplete-search'
77
import './autocomplete'
88
import './autosumbit'
99
import './confirmation'
10+
import './contacts'
1011
import './datepicker'
1112
import { Dropdown } from './dropdown'
1213
import './emoji-button'

‎src/open_inwoner/scss/components/Contacts/Contacts.scss

+51
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,54 @@
6565
}
6666
}
6767
}
68+
69+
///
70+
/// Filters.
71+
///
72+
73+
.contacts {
74+
font-family: var(--font-family-body);
75+
76+
.contacts__filter {
77+
display: flex;
78+
flex-direction: column;
79+
&--open {
80+
.contacts__filter-container {
81+
display: grid;
82+
grid-auto-columns: 3fr 1fr;
83+
}
84+
}
85+
}
86+
87+
.contacts__filter-button {
88+
padding: 8px;
89+
90+
@media (min-width: 768px) {
91+
display: none;
92+
}
93+
}
94+
95+
.contacts__filter-container {
96+
align-items: center;
97+
border-bottom: 1px solid var(--color-white);
98+
display: none;
99+
gap: var(--spacing-medium);
100+
grid-template-columns: 1fr;
101+
margin-bottom: var(--spacing-medium);
102+
padding: 8px;
103+
104+
.form__control > .label {
105+
flex-direction: column;
106+
}
107+
108+
@media (min-width: 768px) {
109+
display: grid;
110+
grid-template-columns: 3fr 1fr;
111+
gap: var(--spacing-giant);
112+
113+
.input {
114+
min-width: 300px;
115+
}
116+
}
117+
}
118+
}

‎src/open_inwoner/templates/pages/profile/contacts/list.html

+76-64
Original file line numberDiff line numberDiff line change
@@ -60,77 +60,89 @@ <h2 class="h2">{% trans "U bent toegevoegd als contactpersoon" %}</h2>
6060
</div>
6161
{% endif %}
6262

63-
{% form id="contact-filter" form_object=form method="GET" columns=2 no_actions=True horizontal=True spaceless=True autosubmit=True form_action=form_action %}
63+
<div class="contacts">
64+
{% 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" %}
65+
<div class="form__control contacts__filter">
66+
<div class="contacts__filter-button">
67+
{% button text=_("Filter") type="button" bordered=True %}
68+
</div>
69+
<div class="contacts__filter-container">
70+
<p class="p">{% trans "Filter op:" %}</p>
71+
{% input form.type no_label=True no_help=True icon="expand_more" class="label input" id="id_type" %}
72+
</div>
73+
</div>
74+
{% endrender_form %}
6475

65-
<table class="table">
66-
<thead class="table__heading">
67-
<tr>
68-
<td class="table__item">{% trans "Naam" %}</td>
69-
<td class="table__item">{% trans "Soort contact" %}</td>
70-
<td class="table__item">{% trans "E-mailadres" %}</td>
71-
<td class="table__item">{% trans "Telefoonnummer" %}</td>
72-
<td class="table__item" colspan="2">{% trans "Actief" %}&nbsp;</td>
73-
<td class="table__item">&nbsp;</td>
74-
</tr>
75-
</thead>
76-
<tbody>
77-
{% if not pending_invitations and not contacts_for_approval and not pending_approval and not pending_approval_list and not object_list %}
76+
<table class="table">
77+
<thead class="table__heading">
7878
<tr>
79-
<td class="table__item" colspan="7" >{% trans "Er zijn geen contacten gevonden met deze filter, of u heeft nog geen contacten." %}</td>
79+
<td class="table__item">{% trans "Naam" %}</td>
80+
<td class="table__item">{% trans "Soort contact" %}</td>
81+
<td class="table__item">{% trans "E-mailadres" %}</td>
82+
<td class="table__item">{% trans "Telefoonnummer" %}</td>
83+
<td class="table__item" colspan="2">{% trans "Actief" %}&nbsp;</td>
84+
<td class="table__item">&nbsp;</td>
8085
</tr>
81-
{% else %}
82-
83-
<!--New contacts-users with pending invitations for registration-->
84-
{% for invite in pending_invitations %}
86+
</thead>
87+
<tbody>
88+
{% if not pending_invitations and not contacts_for_approval and not pending_approval and not pending_approval_list and not object_list %}
8589
<tr>
86-
<th class="table__header">{{invite.invitee_first_name}} {{invite.invitee_last_name}}</th>
87-
<td class="table__item"></td>
88-
<td class="table__item">{{invite.invitee_email}}</td>
89-
<td class="table__item"></td>
90-
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
91-
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
92-
<td class="table__item">{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}<td>
90+
<td class="table__item" colspan="7" >{% trans "Er zijn geen contacten gevonden met deze filter, of u heeft nog geen contacten." %}</td>
9391
</tr>
94-
{% endfor %}
92+
{% else %}
9593

96-
<!--Existing contacts-users which require approval - sender's view-->
97-
{% for contact in contacts_for_approval %}
98-
<tr>
99-
<th class="table__header"></th>
100-
<td class="table__item"></td>
101-
<td class="table__item">{{contact.email}}</td>
102-
<td class="table__item"></td>
103-
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
104-
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
105-
<td class="table__item">{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}<td>
106-
</tr>
107-
{% endfor %}
94+
<!--New contacts-users with pending invitations for registration-->
95+
{% for invite in pending_invitations %}
96+
<tr>
97+
<th class="table__header">{{invite.invitee_first_name}} {{invite.invitee_last_name}}</th>
98+
<td class="table__item"></td>
99+
<td class="table__item">{{invite.invitee_email}}</td>
100+
<td class="table__item"></td>
101+
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
102+
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
103+
<td class="table__item">{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}<td>
104+
</tr>
105+
{% endfor %}
108106

109-
<!--Active contacts list-->
110-
{% for contact in object_list %}
111-
<tr>
112-
<th class="table__header">{{ contact.get_full_name }}</th>
113-
<td class="table__item">{% if contact.contact_type == "contact" %}Contactpersoon{% elif contact.contact_type == "begeleider" %}Begeleider{% elif contact.contact_type == "organization" %}Organisatie{% endif %}</td>
114-
<td class="table__item">{{ contact.get_contact_email|default:"" }}</td>
115-
<td class="table__item">{{ contact.phonenumber }}</td>
116-
<td class="table__item">{% if contact.is_not_active %}{% icon "close" extra_classes="icon icon--danger" %}{% else %}{% icon "check" %}{% endif %}</td>
117-
<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>
118-
<td class="table__item">
119-
{% dropdown icon="settings" disabled=contact.is_not_active %}
120-
<div class="dropdown__item">
121-
{% url 'accounts:contact_delete' uuid=contact.uuid as delete_url %}
122-
{% 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") %}
123-
{% csrf_token %}
124-
{% button icon="delete" text=_("Verwijderen") transparent=True %}
125-
{% endrender_form %}
126-
</div>
127-
{% enddropdown %}
128-
</td>
129-
</tr>
130-
{% endfor %}
131-
{% endif %}
132-
</tbody>
133-
</table>
107+
<!--Existing contacts-users which require approval - sender's view-->
108+
{% for contact in contacts_for_approval %}
109+
<tr>
110+
<th class="table__header"></th>
111+
<td class="table__item"></td>
112+
<td class="table__item">{{contact.email}}</td>
113+
<td class="table__item"></td>
114+
<td class="table__item">{% icon "close" extra_classes="icon icon--danger" %}</td>
115+
<td class="table__item">{% button text=_('Stuur bericht') icon="message" icon_position="before" icon_outlined=True transparent=True disabled=True %}</td>
116+
<td class="table__item">{% button icon="settings" icon_position="before" text="" hide_text=True transparent=True disabled=True %}<td>
117+
</tr>
118+
{% endfor %}
119+
120+
<!--Active contacts list-->
121+
{% for contact in object_list %}
122+
<tr>
123+
<th class="table__header">{{ contact.get_full_name }}</th>
124+
<td class="table__item">{% if contact.contact_type == "contact" %}Contactpersoon{% elif contact.contact_type == "begeleider" %}Begeleider{% elif contact.contact_type == "organization" %}Organisatie{% endif %}</td>
125+
<td class="table__item">{{ contact.get_contact_email|default:"" }}</td>
126+
<td class="table__item">{{ contact.phonenumber }}</td>
127+
<td class="table__item">{% if contact.is_not_active %}{% icon "close" extra_classes="icon icon--danger" %}{% else %}{% icon "check" %}{% endif %}</td>
128+
<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>
129+
<td class="table__item">
130+
{% dropdown icon="settings" disabled=contact.is_not_active %}
131+
<div class="dropdown__item">
132+
{% url 'accounts:contact_delete' uuid=contact.uuid as delete_url %}
133+
{% 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") %}
134+
{% csrf_token %}
135+
{% button icon="delete" text=_("Verwijderen") transparent=True %}
136+
{% endrender_form %}
137+
</div>
138+
{% enddropdown %}
139+
</td>
140+
</tr>
141+
{% endfor %}
142+
{% endif %}
143+
</tbody>
144+
</table>
145+
</div>
134146

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

0 commit comments

Comments
 (0)