🗑️ [#2062] Remove card templatetags

issue: https://taiga.maykinmedia.nl/project/open-inwoner/issue/2062

src/open_inwoner/components/templates/components/Card/CardContainer.html

@@ -4,31 +4,35 @@
         {% for category in categories %}
             {% url 'products:category_detail' slug=category.slug as category_url %}
             {% if category.icon %}
-                {% card src=category.icon.file.url alt=category.icon.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %}
+                {% include "components/Card/Card.html" with alt=category.icon.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %}
             {% else %}
-                {% card src=category.image.file.url alt=category.image.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %}
+                {% include "components/Card/Card.html" with src=category.image.file.url alt=category.image.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %}
             {% endif %}
         {% endfor %}
     {% endif %}
 
     {% if subcategories %}
         {% for subcategory in subcategories %}
-            {% category_card category=subcategory parent_category=parent_category compact=True image_object_fit=image_object_fit %}
+            {% include "components/Card/CategoryCard.html" with category=subcategory parent_category=parent_category compact=True image_object_fit=image_object_fit %}
         {% endfor %}
     {% endif %}
 
     {% if products %}
         {% for product in products %}
             {% get_product_url product as product_url %}
-            {% product_card title=product.name description=product.summary url=product_url image=product.icon compact=True image_object_fit=image_object_fit %}
+            {% include "components/Card/ProductCard.html" with title=product.name description=product.summary url=product_url image=product.icon compact=True image_object_fit=image_object_fit %}
         {% endfor %}
     {% endif %}
 
     {% if plans %}
         {% for plan in plans %}
-            {% description_card title=plan.title description=plan.goal|truncatechars:51 url=plan.get_absolute_url elypsis=True object=plan compact=True image_object_fit=image_object_fit %}
+            {% include "components/Card/DescriptionCard.html" with title=plan.title description=plan.goal|truncatechars:51 url=plan.get_absolute_url elypsis=True object=plan compact=True image_object_fit=image_object_fit %}
         {% endfor %}
     {% endif %}
 
-    {{ contents }}
+    {% if locations %}
+        {% for location in locations %}
+            {% include "components/Card/LocationCard.html" with location_name=location.name compact=True phonenumber=location.phonenumber email=location.email %}
+        {% endfor %}
+    {% endif %}
 </div>

src/open_inwoner/components/templates/components/Card/LocationCard.html

@@ -0,0 +1,16 @@
+{% load link_tags string_tags %}
+<div class="card card__body">
+    {% if location_name %}
+        {% link href=location.get_absolute_url primary=True text=location_name extra_classes="h3" %}
+    {% endif %}
+    <div class="card__body--flex p--no-margin">
+        <p class="p">{{ location.address_line_1 }}</p>
+        <p class="p">{{ location.address_line_2 }}</p>
+        {% if phonenumber %}
+            {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
+        {% endif %}
+        {% if email %}
+            {% link href='mailto:'|addstr:email secondary=True text=email %}
+        {% endif %}
+    </div>
+</div>

src/open_inwoner/components/templatetags/card_tags.py

@@ -2,38 +2,9 @@
 
 from open_inwoner.components.utils import ContentsNode, parse_component_with_args
 
-from ...pdc.models import Category
-
 register = template.Library()
 
 
-@register.inclusion_tag("components/Card/Card.html")
-def card(href, title, **kwargs):
-    """
-    Render in a card. Only using variables.
-
-    Usage:
-        {% card href="https://maykinmedia.nl" %}
-
-    Variables:
-        + href: url | where the card links to.
-        + title: string | this will be the card title.
-        - alt: string | the alt of the header image.
-        - compact: bool | Whether to use compact styling.
-        - direction: string | can be set to "horizontal" to show contents horizontally.
-        - inline: bool | Whether the card should be rendered inline.
-        - src: string | the src of the header image.
-        - compact: bool | Whether the card has uniform padding on all sides.
-        - stretch: bool | Whether to stretch the card vertically.
-        - tinted: bool | whether to use gray as background color.
-        - type: string (info) | Set to info for an info card.
-        - image: FilerImageField | an image that should be used.
-        - image_object_fit: string | Can be set to either "cover" (default) or "contain".
-        - grid: boolean | if the card should be a grid.
-    """
-    return {**kwargs, "href": href, "title": title}
-
-
 @register.tag
 def render_card(parser, token):
     """
@@ -55,113 +26,3 @@ def render_card(parser, token):
     nodelist = parser.parse(("endrender_card",))
     parser.delete_first_token()
     return ContentsNode(nodelist, "components/Card/RenderCard.html", **context_kwargs)
-
-
-@register.inclusion_tag("components/Card/CategoryCard.html")
-def category_card(category: Category, **kwargs):
-    """
-    Renders a card prepopulated based on `category`.
-
-    Usage:
-        {% category_card category %}
-
-    Available options:
-        - category: Category | the category to render card for.
-    """
-    return {**kwargs, "category": category}
-
-
-@register.inclusion_tag("components/Card/DescriptionCard.html")
-def description_card(title, description, url, **kwargs):
-    """
-    Renders a card prepopulated based on `product`.
-
-    Usage:
-        {% description_card title=product.title description=product.intro url=product.get_absolute_url %}
-        {% description_card title="title" description="description" url="https://maykinmedia.nl" %}
-
-    Available options:
-        + title: string | The title of the card that needs to be displayed.
-        + description: string | The description that needs to be displayed.
-        + url: string | The url that the card should point to.
-        - object: any | The object that needs to render aditional data.
-        - image: FilerImageField | an image that should be used.
-    """
-    kwargs.update(title=title, description=description, url=url)
-    return kwargs
-
-
-@register.inclusion_tag("components/Card/ProductCard.html")
-def product_card(description, url, **kwargs):
-    """
-    Renders a card with or without an image prepopulated based on `product`.
-
-    Usage:
-        {% product_card title=product.title description=product.intro url=product.get_absolute_url %}
-
-    Available options:
-        + description: string | The description that needs to be displayed.
-        + url: string | The url that the card should point to.
-        - title: string | The title of the card that may be displayed if there is no image.
-        - object: any | The object that needs to render aditional data.
-        - image: FilerImageField | an image that should be used.
-    """
-    kwargs.update(description=description, url=url)
-    return kwargs
-
-
-@register.inclusion_tag("components/Card/CardContainer.html")
-def card_container(categories=[], subcategories=[], products=[], plans=[], **kwargs):
-    """
-    A card container where the category card or product card will be rendered in.
-
-    Usage:
-        {% card_container categories=categories %}
-
-    Variables:
-        - categories: Category[] | categories to render.
-        - subcategories: Category[] | subcategories to render.
-        - products: Product[] | products to render.
-        - parent: Category | The parent of the given card_container
-        - image_object_fit: string | Can be set to either "cover" (default) or "contain".
-    """
-    if (
-        categories is None
-        and subcategories is None
-        and products is None
-        and plans is None
-    ):
-        assert False, "provide categories, subcategories, products or plans"
-
-    return {
-        **kwargs,
-        "categories": categories,
-        "subcategories": subcategories,
-        "products": products,
-        "plans": plans,
-    }
-
-
-@register.tag()
-def render_card_container(parser, token):
-    """
-    Nested content supported.
-
-    Usage:
-        {% render_card_container %}
-            {% card href='https://www.example.com' title='example.com' %}
-        {% endrender_card_container %}
-
-    Variables:
-        Supports all options from card, but optional.
-
-     Extra context:
-         - contents: string (HTML) | this is the context between the render_card and endrender_card tags
-    """
-    bits = token.split_contents()
-    context_kwargs = parse_component_with_args(parser, bits, "render_list")
-    nodelist = parser.parse(("endrender_card_container",))  # End tag
-    parser.delete_first_token()
-    return ContentsNode(
-        nodelist, "components/Card/CardContainer.html", **context_kwargs
-    )  # Template

src/open_inwoner/templates/cms/products/categories_plugin.html

@@ -8,5 +8,5 @@ <h2 class="h2">
     </h2>
     <p class="p">{{configurable_text.home_page.home_theme_intro|linebreaksbr}}</p>
 
-    {% card_container categories=categories columns=4 image_object_fit="cover" %}
+    {% include "components/Card/CardContainer.html" with categories=categories columns=4 image_object_fit="cover" %}
 {% endif %}

src/open_inwoner/templates/pages/category/detail.html

@@ -20,12 +20,12 @@ <h1 class="utrecht-heading-1">
             {{ category_rendered_description|safe }}
 
         {% if subcategories %}
-            {% card_container subcategories=subcategories parent_category=object %}
+            {% include "components/Card/CardContainer.html" with subcategories=subcategories parent_category=object %}
         {% endif %}
 
         {% if products %}
             <div class="categories__products">
-            {% card_container products=products small=True parent=object %}
+            {% include "components/Card/CardContainer.html" with products=products small=True parent=object %}
             </div>
         {% endif %}
 

src/open_inwoner/templates/pages/category/list.html

@@ -6,6 +6,6 @@
     <h1 class="h1">{{configurable_text.theme_page.theme_title}}</h1>
     <p class="p">{{configurable_text.theme_page.theme_intro|linebreaksbr}}</p>
 
-    {% card_container categories=object_list %}
+    {% include "components/Card/CardContainer.html" with categories=object_list %}
 </div>
 {% endblock content %}

src/open_inwoner/templates/pages/home.html

@@ -25,9 +25,9 @@ <h2 class="h2">
     <p class="p">{{configurable_text.home_page.home_theme_intro|linebreaksbr}}</p>
 
     {% if request.user.is_authenticated %}
-        {% card_container categories=categories columns=4 image_object_fit="cover" %}
+        {% include "components/Card/CardContainer.html" with categories=categories columns=4 image_object_fit="cover" %}
     {% else %}
-        {% card_container categories=categories image_object_fit="cover" %}
+        {% include "components/Card/CardContainer.html" with categories=categories image_object_fit="cover" %}
     {% endif %}
 
     {% if questionnaire_roots.exists %}

src/open_inwoner/templates/pages/plans/list.html

@@ -65,7 +65,7 @@ <h1 class="h1">
             </tbody>
         </table>
     {% else %}
-        {% card_container plans=plans.plan_list columns=2 %}
+        {% include "components/Card/CardContainer.html" with plans=plans.plan_list columns=2 %}
     {% endif %}
 
     {% pagination page_obj=page_obj paginator=paginator request=request %}

src/open_inwoner/templates/pages/product/detail.html

@@ -90,27 +90,7 @@ <h3 class="h3">{% trans "U komt niet in aanmerking" %}</h3>
                 {% map centroid.lat centroid.lng id="locations" title=_('Locaties') geojson_feature_collection=object.locations.get_geojson_feature_collection %}
             {% endwith %}
 
-            {% render_card_container columns=3 %}
-                {% for location in object.locations.all %}
-                    {% with location_name=location.name phonenumber=location.phonenumber email=location.email %}
-                        <div class="card card__body">
-                            {% if location_name %}
-                                {% link href=location.get_absolute_url primary=True text=location_name extra_classes="h3" %}
-                            {% endif %}
-                            <div class="card__body--flex p--no-margin">
-                                <p class="p">{{ location.address_line_1 }}</p>
-                                <p class="p">{{ location.address_line_2 }}</p>
-                                {% if phonenumber %}
-                                    {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
-                                {% endif %}
-                                {% if email %}
-                                    {% link href='mailto:'|addstr:email secondary=True text=email %}
-                                {% endif %}
-                            </div>
-                        </div>
-                    {% endwith %}
-                {% endfor %}
-            {% endrender_card_container %}
+            {% include "components/Card/CardContainer.html" with locations=object.locations.all columns=3 %}
         {% endif %}
 
         {% render_grid %}

src/open_inwoner/templates/pages/product/location_detail.html

@@ -23,9 +23,9 @@ <h1 class="h1">{{ object.name }}</h1>
             </div>
         </div>
     </div>
-        
+
     {% if products %}
-        {% card_container products=products small=True %}
+        {% include "components/Card/CardContainer.html" with products=products small=True %}
     {% else %}
         {% trans "There are no products available at this location." %}
     {% endif %}

src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html

@@ -51,7 +51,7 @@ <h1 class="h1" data-title="{{ form.instance.get_title }}" data-code="{{ form.ins
 
                 {% if form.instance.related_products.published.exists %}
                     <hr class="divider">
-                    {% card_container products=form.instance.related_products.published small=True %}
+                    {% include "components/Card/CardContainer.html" with products=form.instance.related_products.published small=True %}
                 {% endif %}
             {% endrender_form %}
             </fieldset>