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.

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

Mijn Berichten demo (VNG Hackathon 2024) #1442

Draft
wants to merge 44 commits into
base: develop
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
5a732e5
[#2798] Updated attempt at MijnTaken / TasksPlugin for OIP
alextreme Oct 6, 2024
29126f7
[#2798] Flake8 cleanup
alextreme Oct 6, 2024
1df2ce8
Setup basic Mijn Berichten urls and views
swrichards Oct 7, 2024
8c38c70
Add a mock Bericht object and model
swrichards Oct 7, 2024
4b4b752
[#2799] First set-up for front-end services-berichten
jiromaykin Oct 7, 2024
4116f90
[#2798] Only showing block if there are tasks
alextreme Oct 7, 2024
7a1eefc
Merge pull request #1425 from maykinmedia/swr/mijn-services-hackathon…
swrichards Oct 8, 2024
243695e
[#2799] Rebase
jiromaykin Oct 7, 2024
6f2239a
[#2799] First version of some styling for berichtenlist and detail
jiromaykin Oct 8, 2024
6cab617
[#2799] iSorted
jiromaykin Oct 8, 2024
56c9a16
Merge pull request #1426 from maykinmedia/feature/2799-frontend-mijnb…
swrichards Oct 8, 2024
22f3abe
Add objects-api-client-django pinned to Hackathon branch
swrichards Oct 8, 2024
61abd02
Connect Berichten views to Objects API
swrichards Oct 8, 2024
7179da6
Merge pull request #1424 from maykinmedia/issue/2798-tasks-cms-plugin…
alextreme Oct 8, 2024
e7e91b5
[#2798] Only show open tasks
alextreme Oct 8, 2024
7b6c2a1
Add objects-api-client-django pinned to Hackathon branch
swrichards Oct 8, 2024
3af2ab8
Connect Berichten views to Objects API
swrichards Oct 8, 2024
663fe21
Merge pull request #1429 from maykinmedia/swr/hackathon-fetch-objects
swrichards Oct 8, 2024
6117076
Merge pull request #1430 from maykinmedia/issue/mijn-taken-filter-on-…
alextreme Oct 8, 2024
2c52058
Update bericht opened status upon accessing detail page
swrichards Oct 9, 2024
5b7c7da
Add a URL to mark a bericht as unread
swrichards Oct 9, 2024
a6bd263
[#2799] Improved template for detailbericht + added menu items
jiromaykin Oct 8, 2024
d0826c2
Merge branch 'mijn-services-hackathon-2024' into issue/2799-design-mi…
jiromaykin Oct 9, 2024
0f97264
Merge pull request #1433 from maykinmedia/swr/hackathon-update-berich…
alextreme Oct 9, 2024
df3bdce
[#2799] Improved list template
jiromaykin Oct 9, 2024
a426754
[#2799] Improved template for detailbericht + added menu items
jiromaykin Oct 8, 2024
9db01c0
[#2799] Adjusted breadcrumb
jiromaykin Oct 9, 2024
dbfc2e3
Merge pull request #1432 from maykinmedia/issue/2799-design-mijnberic…
swrichards Oct 9, 2024
4c6f3fb
[#2799] Cleaned-up code and margins
jiromaykin Oct 9, 2024
c717882
Update bericht opened status upon accessing detail page
swrichards Oct 9, 2024
e466df9
Add a URL to mark a bericht as unread
swrichards Oct 9, 2024
ade2fc3
[#2799] Improved template for detailbericht + added menu items
jiromaykin Oct 8, 2024
f4b3beb
Merge branch 'mijn-services-hackathon-2024' into issue/2799-final-hac…
jiromaykin Oct 10, 2024
5cb9706
Merge pull request #1434 from maykinmedia/issue/2799-final-hackathon-…
swrichards Oct 10, 2024
5989412
Fix serialization of bericht dates to Javascript code
swrichards Oct 10, 2024
a30eab2
Add mark unread button to Bericht detail
swrichards Oct 10, 2024
f3c5134
Update Mijn Berichten link with template tag
swrichards Oct 10, 2024
ea0e446
Remove handeling block from Bericht detail
swrichards Oct 10, 2024
f04cecf
Merge pull request #1435 from maykinmedia/swr/hackathon-ui-tweaks
alextreme Oct 10, 2024
91c82fb
Improved acess checks for Bericht views
swrichards Oct 10, 2024
707ecf5
Add bericht download functionality
swrichards Oct 11, 2024
9072cdd
Better UI logic for handling missing einddatum handelingstermijn
swrichards Oct 11, 2024
cedfcdb
Merge pull request #1436 from maykinmedia/swr/better-access-checks
alextreme Oct 11, 2024
d289785
Merge pull request #1437 from maykinmedia/swr/download-bericht-attach…
alextreme Oct 14, 2024
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
Prev Previous commit
Next Next commit
[#2799] Improved template for detailbericht + added menu items
  • Loading branch information
jiromaykin committed Oct 9, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit a6bd26393ea506ad4f95b7c5e3f5a64dd6bf1a74
Original file line number Diff line number Diff line change
@@ -75,6 +75,10 @@

{{ rendered_cms_menu__home }}

<li class="primary-navigation__list-item">
{% link text='Omnichannel berichten' href='/hackathon/berichten/' icon="move_to_inbox" icon_position="before" icon_outlined=True %}
</li>

{% if has_general_faq_questions %}
<li class="primary-navigation__list-item">
{% link text=_('FAQ') href='general_faq' icon="help_outline" icon_position="before" icon_outlined=True %}
Original file line number Diff line number Diff line change
@@ -23,7 +23,10 @@
</li>
{% endif %}

<li class="header__list-item">
<li class="primary-navigation__list-item">
{% link text='Omnichannel berichten' href='/hackathon/berichten/' icon="move_to_inbox" icon_position="before" icon_outlined=True %}
</li>
<li class="header__list-item">
{% trans "Logout" as logout %}
{% link text=logout href=request.user.get_logout_url icon="logout" icon_position="before" primary=True %}
</li>
20 changes: 20 additions & 0 deletions src/open_inwoner/js/components/berichten/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Get the end date from the Django context
const einddatum = new Date('{{ bericht.einddatum_handelingstermijn }}')
const today = new Date()

// Calculate the remaining days
const remainingTime = einddatum - today // in milliseconds
const remainingDays = Math.ceil(remainingTime / (1000 * 60 * 60 * 24)) // convert to days

// Display the result
const remainingDaysElement = document.getElementById('remainingDays')
if (remainingDaysElement) {
console.log('ELEMNT {{ bericht.publicatiedatum }} BESTAAT')
if (remainingDays > 0) {
remainingDaysElement.textContent = `Er zijn nog ${remainingDays} dagen tot de einddatum.`
} else if (remainingDays === 0) {
remainingDaysElement.textContent = 'Vandaag is de einddatum.'
} else {
remainingDaysElement.textContent = 'De einddatum is verstreken.'
}
}
1 change: 1 addition & 0 deletions src/open_inwoner/js/components/index.js
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import { CreateGumshoe } from './anchor-menu/anchor-menu'
import './autocomplete-search'
import './autocomplete'
import './autosumbit'
import './berichten'
import './cases'
import { DisableContactFormButton } from './form/DisableContactFormButton'
import { DisableSubmitButton } from './cases/document_upload'
51 changes: 34 additions & 17 deletions src/open_inwoner/scss/components/Berichten/BerichtDetail.scss
Original file line number Diff line number Diff line change
@@ -2,21 +2,38 @@
display: grid;
}

.denhaag-file {
align-items: normal;
background: none;
border-color: gray;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: flex;
font-family: inherit;
font-size: inherit;
line-height: inherit;
padding: 0;
text-align: inherit;
text-decoration: inherit;
width: 100%;
.bericht {
margin-bottom: var(--spacing-extra-large);

&__dashboard {
.table__item--notification-danger {
margin-left: var(--spacing-medium);
padding: var(--spacing-small) var(--spacing-medium);
}
}

&__heading {
margin: 0 0 var(--spacing-large) 0;
line-height: var(--font-line-height-heading-3);
font-family: var(--font-family-heading);
font-size: var(--font-size-heading-3);
font-weight: var(--font-weight-heading-3);
}

&__text {
margin: 0 0 var(--row-height) 0;
line-height: var(--font-line-height-body);
font-family: var(--font-family-body);
font-size: var(--font-size-body);
font-weight: normal;
color: var(--font-color-body);
}

&__actions {
font-weight: bold;
}

.button--transparent {
padding: var(--spacing-medium) 0 0 0;
}
}
46 changes: 44 additions & 2 deletions src/open_inwoner/scss/components/Berichten/BerichtenList.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,59 @@
.berichtenlist {
display: grid;

.link {
.table__item {
&--notification-danger {
padding: var(--spacing-small) var(--spacing-medium);
}

&--notification-success {
background-color: var(--color-success-lighter);
border-radius: var(--border-radius-large);
color: var(--color-success);
font-size: var(--font-size-body);
padding: var(--spacing-small) var(--spacing-medium);
text-align: center;
}
}
&.nohover:hover {
text-decoration: none !important;
}
}

&__table {
display: grid;

&-row:hover th,
&-row:hover td {
background-color: var(--color-gray-lightest);
}

&-item {
&--wide {
min-width: 250px;
min-width: 100px;

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

&--flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}

.table__heading .table__item {
color: var(--color-black);
font-weight: bold;
}
}

&--unread {
color: var(--color-secondary);
color: var(--color-body);
font-weight: bold;
}
}
185 changes: 108 additions & 77 deletions src/open_inwoner/templates/pages/berichten/detail.html
Original file line number Diff line number Diff line change
@@ -1,87 +1,118 @@
{% extends 'master.html' %}
{% load i18n button_tags utils icon_tags anchor_menu_tags %}
{% load i18n grid_tags button_tags icon_tags %}

{% block content %}
{% if bericht %}
{% render_grid %}
{% render_column span=12 %}
<h1 class="utrecht-heading-1" id="title">{{ bericht.onderwerp }}</h1>
<aside class="bericht__dashboard dashboard" aria-label="{% trans "Dashboard" %}">
<ul class="dashboard__list">
<li class="dashboard__list-item">
<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
<span class="dashboard__item-label">Ontvangstdatum:</span> {{ bericht.publicatiedatum }}</p>
</li>
<li class="dashboard__list-item">
<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
<span class="dashboard__item-label">Bericht type: </span> {{ bericht.bericht_type }}</p>
</li>
<li class="dashboard__list-item">
<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
<span class="dashboard__item-label">{% if bericht.einddatum_handelingstermijn %}<span aria-hidden="true" class="material-icons-outlined icon--alert">warning</span>{% endif %}
Deadline: </span> {{ bericht.einddatum_handelingstermijn }}
<span class="dashboard__item-label"><span id="remainingDays" class="utrecht-paragraph table__item--notification-danger"></span> <!-- Placeholder for remaining days --></span>
</p>
</li>
</ul>
</aside>
{% endrender_column %}
{% endrender_grid %}

<div class="berichtdetail column column--start-0 column--span-8">
<div class="denhaag-page-content__header">
<h1 class="utrecht-heading-1" id="title">
onderwerp: {{ bericht.onderwerp }}
</h1>
<p class="utrecht-paragraph"> Bericht ontvangen op publicatiedatum: {{ bericht.publicatiedatum }}</p>
</div>
<div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
<div class="denhaag-action__content">~</div>
<div class="denhaag-action__details">
<div class="denhaag-action__date denhaag-action__date--warning">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21" class="denhaag-action__warning-icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#alert-triangle-filled_svg__a)">
<path fill="#E15601" stroke="#E15601" d="M8.575 3.717 1.516 15.5A1.667 1.667 0 0 0 2.941 18h14.117a1.665 1.665 0 0 0 1.425-2.5L11.425 3.717a1.667 1.667 0 0 0-2.85 0"></path>
<path stroke="#fff" d="M10 14.667h.008M10 8v3.333"></path>
</g>
<defs>
<clipPath id="alert-triangle-filled_svg__a">
<path fill="#fff" d="M0 .5h20v20H0z"></path>
</clipPath>
</defs>
</svg>
<time datetime="2024-09-30T19:47:36.593Z">einddatumHandelingstermijn {{ bericht.einddatumHandelingstermijn }}</time>
<p id="remainingDays" class="utrecht-paragraph"></p> <!-- Placeholder for remaining days -->

<hr>

</div>
<div class="denhaag-action__actions"><a href="#handelen" class="utrecht-button-link utrecht-button-link--html-a utrecht-button-link--external" rel="external noopener noreferrer">handelingsperspectief: {{ bericht.handelingsperspectief }}</a></div>
</div>
</div>
<p class="utrecht-paragraph denhaag-page-content__message">berichtTekst: <br>
<span>{{ bericht.bericht_tekst|linebreaks }}</span></p>
<div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
<div class="denhaag-action__content">handelingsperspectief: {{ bericht.handelingsperspectief }}</div>
<div>
<h2>Bijlagen</h2>
{% for attachment in bericht.bijlages %}
<a href="{{ attachment }}" download="Example" class="denhaag-file" aria-labelledby="name" aria-describedby="description">
<div class="denhaag-file__left">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 25" class="denhaag-icon denhaag-file__icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 3.5H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 10.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M21 15.5l-5-5-11 11"></path>
</svg>
</div>
<div class="denhaag-file__right">
<div class="denhaag-file__label"><span id="name">Example </span><span id="description">({{ attachment }})</span></div>
<div class="denhaag-file__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="denhaag-icon denhaag-file__link__icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13v4a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-4M5 8l5 5 5-5M10 13V1"></path>
</svg>
<div class="utrecht-link" tabindex="-1">Download</div>
{% render_grid %}
{% render_column start=4 span=6 %}
<section class="bericht__userfeed plugin userfeed">
<div class="card-container card-container--columns-1 plugin-card">
<a href="#handelingsperspectief" class="card card--status card--status--info ">
<div class="userfeed__marker userfeed__marker--info"></div>
<div class="card__body card__body--tabled">
<h3 class="utrecht-heading-3 userfeed__title">Actie</h3>
<p class="userfeed-card__description">
{% if bericht.handelingsperspectief %}
<span class="status">{{ bericht.handelingsperspectief }}</span>
{% else %}
<span class="status">{% trans "Geen verdere acties nodig. U hoeft niets te doen." %}</span>
{% endif %}
</p>
<span class="button button--icon-before button--transparent">
<span aria-hidden="true" class="material-icons-outlined ">east</span>
</span>
</div>
</div>
</a>
{% endfor %}
</a>
</div>
</section>
{# End of handelingsperspectief alert #}

</div>
<section class="bericht">
<div>
<p class="bericht__text">{{ bericht.bericht_tekst|linebreaks }}</p>
</div>

</div>
</div>

<script>
// Get the end date from the Django context
const einddatum = new Date("{{ bericht.einddatum_handelingstermijn }}");
const today = new Date();
<div>
<a href="/hackathon/berichten/" class="button button--primary bericht__actions" id="handelingsperspectief">
{% icon "arrow_backward" %}Terug naar mijn berichten
</a>
</div>
{% if destination %}
<div>
<a href="{{ destination.url }}" id="destination_link" class="button button--transparent bericht__actions">
<span>{{ destination.label }}</span>{% icon "arrow_forward" %}
</a>
</div>
{% endif %}
</section>

{% if bericht.bijlages %}
<section class="bericht__bijlagen case-detail__documents">
<div class="heading-2__indicator">
<h2 class="utrecht-heading-2 " id="documents">Bijlagen</h2>
</div>
<div class="file-list">
<ul class="file-list__list">
{% for attachment in bericht.bijlages %}
<li class="file-list__list-item">
<aside class="file">
<div class="file__container ">
<div class="file__file">
<div class="file__symbol">
<span aria-hidden="true" class="material-icons-outlined ">image</span>
</div>
<div class="file__data">
<span class="file__name">
{{ attachment }}
(PDF)
</span>
<span class="file__date">{{ bericht.publicatiedatum }}</span>
</div>
<a href="https://www.maykinmedia.nl/media/filer_public/94/50/9450f9e9-70d1-4d00-99e4-08bc49fb3dc7/2194530_nl_2019.pdf" download="" class="link link--icon link--icon-position-before file__download link--primary file__download" aria-label="Download namefile" title="Download dit bestand">
<span aria-hidden="true" class="material-icons-outlined ">download</span>
</a>
</div>
</div>
</aside>
</li>
{% endfor %}
</ul>
</div>
</section>
{% else %}
<h2 class="utrecht-heading-2">{% trans 'Er zijn geen bijlagen bij dit bericht.' %}</h2>
{% endif %}

// Calculate the remaining days
const remainingTime = einddatum - today; // in milliseconds
const remainingDays = Math.ceil(remainingTime / (1000 * 60 * 60 * 24)); // convert to days
{% endrender_column %}
{% endrender_grid %}

// Display the result
const remainingDaysElement = document.getElementById("remainingDays");
if (remainingDays > 0) {
remainingDaysElement.textContent = `Er zijn nog ${remainingDays} dagen tot de einddatum.`;
} else if (remainingDays === 0) {
remainingDaysElement.textContent = "Vandaag is de einddatum.";
} else {
remainingDaysElement.textContent = "De einddatum is verstreken.";
}
</script>
{% endblock %}
{% else %}
<h2 class="utrecht-heading-2">{% trans 'Dit bericht is momenteel niet beschikbaar.' %}</h2>
{% endif %}
{% endblock content %}
Loading