fields: add 'images' display mode for multiple items fields (#72176)

tests/form_pages/test_all.py

@@ -9688,6 +9688,22 @@ def test_form_item_with_card_image_data_source(pub, http_requests):
     resp = get_app(pub).get('/test/')
     assert '/api/card-file-by-token/%s' % token.id not in resp.text
 
+    FormDef.wipe()
+
+    formdef2 = create_formdef()
+    formdef2.fields = [
+        fields.ItemsField(
+            id='1', label='Choices', display_mode='images', data_source={'type': 'carddef:images'}
+        ),
+    ]
+    formdef2.store()
+    formdef2.data_class().wipe()
+
+    app = get_app(pub)
+    resp = app.get('/test/')
+    assert len(resp.pyquery('div.CheckboxesWithImagesWidget')) == 1
+    assert len(resp.pyquery('img.item-with-image--picture')) == 3
+
 
 def test_file_prefill_on_edit(pub, http_requests):
     user = create_user(pub)

wcs/fields.py

@@ -41,6 +41,7 @@ from .qommon import N_, _, evalutils, force_str, get_cfg, misc
 from .qommon.form import (
     AutocompleteStringWidget,
     CheckboxesWidget,
+    CheckboxesWithImagesWidget,
     CheckboxWidget,
     CommentWidget,
     CompositeWidget,
@@ -2738,7 +2739,7 @@ class ItemField(WidgetField, MapOptionsMixin, ItemFieldMixin, ItemWithImageField
 register_field_class(ItemField)
 
 
-class ItemsField(WidgetField, ItemFieldMixin):
+class ItemsField(WidgetField, ItemFieldMixin, ItemWithImageFieldMixin):
     key = 'items'
     description = _('Multiple choice list')
     allow_complex = True
@@ -2776,7 +2777,11 @@ class ItemsField(WidgetField, ItemFieldMixin):
         kwargs['min_choices'] = self.min_choices
         kwargs['max_choices'] = self.max_choices
         if self.data_source:
-            items = data_sources.get_items(self.data_source, include_disabled=self.display_disabled_items)
+            if self.display_mode == 'images':
+                items = data_sources.get_carddef_items(self.data_source)
+                self.widget_class = CheckboxesWithImagesWidget
+            else:
+                items = data_sources.get_items(self.data_source, include_disabled=self.display_disabled_items)
             kwargs['options'] = [x[:3] for x in items if not x[-1].get('disabled')]
             kwargs['options_with_attributes'] = items[:]
 
@@ -2798,6 +2803,7 @@ class ItemsField(WidgetField, ItemFieldMixin):
         options = [
             ('checkboxes', _('Checkboxes'), 'checkboxes'),
             ('autocomplete', _('Autocomplete'), 'autocomplete'),
+            ('images', _('Images'), 'images'),
         ]
         form.add(
             RadiobuttonsWidget,
@@ -2805,9 +2811,17 @@ class ItemsField(WidgetField, ItemFieldMixin):
             title=_('Display Mode'),
             options=options,
             value=self.display_mode,
+            attrs={'data-dynamic-display-parent': 'true'},
             extra_css_class='widget-inline-radio',
         )
         self.add_items_fields_admin_form(form)
+        self.fill_image_options_admin_form(
+            form,
+            attrs={
+                'data-dynamic-display-child-of': 'display_mode',
+                'data-dynamic-display-value': 'images',
+            },
+        )
         form.add(
             IntWidget,
             'min_choices',
@@ -2842,6 +2856,8 @@ class ItemsField(WidgetField, ItemFieldMixin):
             'in_filters',
             'anonymise',
             'display_disabled_items',
+            'image_desktop_size',
+            'image_mobile_size',
         ]
 
     def check_admin_form(self, form):

wcs/qommon/form.py

@@ -1786,6 +1786,13 @@ class CheckboxesWidget(Widget):
                     request.form[option['name']] = True
 
 
+class CheckboxesWithImagesWidget(CheckboxesWidget):
+    template_name = 'qommon/forms/widgets/checkboxes-with-images.html'
+
+    def add_media(self):
+        get_response().add_css_include('item-with-image.css')
+
+
 class ValidatedStringWidget(StringWidget):
     '''StringWidget which checks the value entered is correct according to a regex'''
 

wcs/qommon/static/css/item-with-image.scss

@@ -1,13 +1,15 @@
-.RadiobuttonsWithImagesWidget .content {
-	--image-size: var(--image-mobile-size);
-	display: flex;
-	flex-wrap: wrap;
-	margin-top: 5px;
-	@media (min-width: 761px) {
-		--image-size: var(--image-desktop-size);
-	}
-	&:focus-within {
-		outline: 1px dashed var(--primary-color, #bbb);
+.CheckboxesWithImagesWidget, .RadiobuttonsWithImagesWidget {
+	.content {
+		--image-size: var(--image-mobile-size);
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 5px;
+		@media (min-width: 761px) {
+			--image-size: var(--image-desktop-size);
+		}
+		&:focus-within {
+			outline: 1px dashed var(--primary-color, #bbb);
+		}
 	}
 }
 

wcs/qommon/templates/qommon/forms/widgets/checkboxes-with-images.html

@@ -0,0 +1,19 @@
+{% extends "qommon/forms/widgets/checkboxes.html" %}
+
+{% block widget-style-attributes %}
+  --image-desktop-size: {{ widget.field.image_desktop_size }}px;--image-mobile-size: {{ widget.field.image_mobile_size }}px;
+  {{ block.super }}
+{% endblock %}
+
+{% block widget-control %}
+  {% for option in widget.get_options %}
+    <label for="{{ widget.get_name_for_id }}_op_{{ forloop.counter0 }}" class="item-with-image">
+      <input id="{{ widget.get_name_for_id }}_op_{{ forloop.counter0 }}"
+             {% if option.selected %}checked="checked"{% endif %}
+             {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}" {% endfor %}
+             type="checkbox" name="{{ option.name }}" value="yes" class="item-with-image--input" />
+      {% if option.options.image_url %}<img src="{{ option.options.image_url }}" title="{{ option.label }}" alt="" class="item-with-image--picture" />{% endif %}
+      <span class="item-with-image--label">{{ option.label }}</span></label>
+  {% endfor %}
+{% endblock %}
+