Merge pull request #1435 from maykinmedia/swr/hackathon-ui-tweaks

Final UI tweaks
maykinmedia · Oct 10, 2024 · f04cecf · f04cecf
2 parents 5cb9706 + ea0e446
commit f04cecf
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 45 deletions.
diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html
@@ -76,7 +76,8 @@
                         {{ 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 %}
+                            {% url 'berichten:list' as berichten_href %}
+                            {% link text='Mijn berichten' href=berichten_href icon="move_to_inbox" icon_position="before" icon_outlined=True %}
                         </li>
 
                         {% if has_general_faq_questions %}

diff --git a/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html b/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html
@@ -17,15 +17,19 @@
                 <ul class="primary-navigation__list subpage-list">
                     {{ rendered_cms_menu__home }}
 
+
+
+                      <li class="primary-navigation__list-item">
+                        {% url 'berichten:list' as berichten_href %}
+                        {% link text='Mijn berichten' href=berichten_href 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 %}
                         </li>
                     {% endif %}
 
-                      <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 %}

diff --git a/src/open_inwoner/js/components/berichten/index.js b/src/open_inwoner/js/components/berichten/index.js
@@ -1,20 +1,23 @@
-// Get the end date from the Django context
-const einddatum = new Date('{{ bericht.einddatum_handelingstermijn }}')
-const today = new Date()
+const berichtDataJsonElement = document.getElementById('bericht-data-json')
 
-// Calculate the remaining days
-const remainingTime = einddatum - today // in milliseconds
-const remainingDays = Math.ceil(remainingTime / (1000 * 60 * 60 * 24)) // convert to days
+if (berichtDataJsonElement) {
+  const berichtData = JSON.parse(berichtDataJsonElement.textContent)
+  const einddatum = new Date(berichtData.einddatumHandelingstermijn)
+  const today = new Date()
 
-// 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.'
-  }
+  // 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) {
+    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.'
+    }
+  } else console.error('Unable to find #remainingDays')
 }
diff --git a/src/open_inwoner/templates/pages/berichten/detail.html b/src/open_inwoner/templates/pages/berichten/detail.html
@@ -2,6 +2,13 @@
 {% load i18n grid_tags button_tags icon_tags %}
 
 {% block content %}
+    {# Serialize the data as JSON so the Javascript snippet to compute days remaining can pick it up #}
+    <script id="bericht-data-json" type="application/json">
+        {
+            "einddatumHandelingstermijn": "{{ bericht.einddatum_handelingstermijn.isoformat }}"
+        }
+    </script>
+
     {% if bericht %}
         {% render_grid %}
             {% render_column span=12 %}
@@ -37,40 +44,30 @@ <h1 class="utrecht-heading-1" id="title">{{ bericht.onderwerp }}</h1>
         {% render_grid %}
             {% render_column start=4 span=6 %}
 
-                {# Handeling #}
-                <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">
-                                <h2 class="utrecht-heading-3 userfeed__title">Actie</h2>
-                                <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">
-                                   {% icon "east" %}
-                                </span>
-                            </div>
-                        </a>
-                    </div>
-                </section>
-                {# End of handelingsperspectief alert #}
-
                 <section class="bericht">
                     <div>
                         <h3 class="utrecht-heading-2" id="title">{{ bericht.onderwerp }}</h3>
                         <p class="bericht__text">{{ bericht.bericht_tekst|linebreaks }}</p>
                     </div>
 
                     <div>
-                        <a href="/hackathon/berichten/" class="button button--primary bericht__actions" id="handelingsperspectief">
+                        <a href="{% url 'berichten:list' %}" 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 %}
+                    <br/>
+                    <div>
+                        <a href="{% url 'berichten:mark-bericht-unread' object_uuid=bericht.object_uuid %}" class="button">
+                            {% icon "arrow_backward" %}Markeer dit bericht als ongeopend
+                        </a>
+                    </div>
                 </section>
 
                 {% if bericht.bijlages %}