✨ [#1789] Display status indicator in case listview

src/open_inwoner/cms/cases/views/mixins.py

@@ -19,7 +19,11 @@
     fetch_single_case_type,
     fetch_single_status_type,
 )
-from open_inwoner.openzaak.models import OpenZaakConfig, StatusTranslation
+from open_inwoner.openzaak.models import (
+    OpenZaakConfig,
+    StatusTranslation,
+    ZaakTypeStatusTypeConfig,
+)
 from open_inwoner.openzaak.utils import format_zaak_identificatie, is_zaak_visible
 from open_inwoner.utils.mixins import PaginationMixin
 from open_inwoner.utils.views import LogMixin
@@ -110,6 +114,11 @@ def get_cases(self) -> List[Zaak]:
         case_types = {}
         case_types_set = {case.zaaktype for case in cases}
 
+        mapping = {
+            zaaktype_statustype.statustype_url: zaaktype_statustype
+            for zaaktype_statustype in ZaakTypeStatusTypeConfig.objects.all()
+        }
+
         # fetch unique case types
         for case_type_url in case_types_set:
             # todo parallel
@@ -130,6 +139,8 @@ def get_cases(self) -> List[Zaak]:
                 case.status = fetch_single_status(case.status)
                 status_types[case.status.statustype].append(case)
 
+            case.statustype_config = mapping.get(case.status.statustype)
+
         for status_type_url, _cases in status_types.items():
             # todo parallel
             status_type = fetch_single_status_type(status_type_url)
@@ -154,6 +165,7 @@ def process_cases(self, cases: List[Zaak]) -> List[dict]:
                 "current_status": status_translate.from_glom(
                     case, "status.statustype.omschrijving", default=""
                 ),
+                "statustype_config": getattr(case, "statustype_config"),
             }
             updated_cases.append(case_dict)
         return updated_cases

src/open_inwoner/components/templates/components/StatusIndicator/StatusIndicator.html

@@ -0,0 +1,6 @@
+{% load icon_tags %}
+{% if status_indicator == "action_required" %}
+    <div class="card__header warning">
+        {% icon icon="warning" icon_position="after" extra_classes="icon--warning" %} {{status_indicator_text}}
+    </div>
+{% endif %}

src/open_inwoner/scss/_settings.scss

@@ -27,7 +27,8 @@ $color-border: $color-gray !default;
 $color-danger: $color-red !default;
 $color-info: $color-blue !default;
 $color-success: $color-green !default;
-$color-warning: $color-orange !default;
+$color-warning: #fdce79 !default;
+$color-warning-dark: #593a00 !default;
 
 $grid-columns-mobile: 4 !default;
 $grid-columns-tablet: 9 !default;

src/open_inwoner/scss/components/Cases/Cases.scss

@@ -26,3 +26,14 @@
 #cases-contact-form-content > h2 {
   margin-top: var(--spacing-large);
 }
+
+.card__header.warning {
+  display: flex;
+  background-color: $color-warning;
+  color: $color-warning-dark;
+  padding: 0.4em;
+}
+
+.icon--warning {
+  color: $color-warning-dark;
+}

src/open_inwoner/templates/pages/cases/list_inner.html

@@ -8,7 +8,8 @@ <h2 class="h2" id="cases">{{ page_title }} ({{ paginator.count }})</h2>
 {% render_grid %}
     {% for case in cases %}
         {% render_column start=forloop.counter_0|multiply:4 span=4 %}
-        <div class="card card--compact card--stretch">
+    <div class="card card--compact card--stretch">
+            {% include "components/StatusIndicator/StatusIndicator.html" with status_indicator=case.statustype_config.status_indicator status_indicator_text=case.statustype_config.status_indicator_text %}
             <div class="card__body">
                 <a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link">
                     <p class="h4">