# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1614455653 -3600
# Node ID 27511c8214811da33c1fd23b61349041ffca27ef
# Parent  3054387cac3bda5ee65e3f81718f16863655fcff
bulma (list/overview): use specialised view for `grocery` list

diff -r 3054387cac3b -r 27511c821481 sat_templates/templates/bulma/list/overview.html
--- a/sat_templates/templates/bulma/list/overview.html	Sat Feb 27 20:52:19 2021 +0100
+++ b/sat_templates/templates/bulma/list/overview.html	Sat Feb 27 20:54:13 2021 +0100
@@ -31,29 +31,13 @@
             </div>
         </div>
     </nav>
-    <div id="list" class="container has-background-white px-1 py-1">
-        {{ xmlui.generate_list(
-              list_items,
-              (
-                  ('title', _('Title')),
-                  ('labels', _('Labels')),
-                  ('id', _('Id')),
-                  ('author', _('Author')),
-              ),
-              {
-                  'id': '\n#{value}',
-                  'author': _('by {value}'),
-              },
-               item_class_fields=['status', 'priority', 'severity'],
-               field_class_map={
-                   'title': 'has-text-weight-bold',
-                   'labels': 'tag is-rounded x-is-hoverable',
-                   'id': 'has-text-grey-light is-size-7 has-whitespace-pre-wrap',
-                   'author': 'is-size-7'
-               },
-               on_click=on_list_item_click)
-        }}
-    </div>
+    {% if list_type == "todo" %}
+        {% include "list/view_todo.html" %}
+    {% elif list_type == "grocery" %}
+        {% include "list/view_grocery.html" %}
+    {% else %}
+        {% include "list/view_generic.html" %}
+    {% endif %}
 </section>
 {{ navigation.prev_next(_("previous page"), _("next page")) }}
 {% endblock body %}
diff -r 3054387cac3b -r 27511c821481 sat_templates/templates/bulma/list/view_generic.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/list/view_generic.html	Sat Feb 27 20:54:13 2021 +0100
@@ -0,0 +1,23 @@
+<div id="list" class="container has-background-white px-1 py-1">
+    {{ xmlui.generate_list(
+          list_items,
+          (
+              ('title', _('Title')),
+              ('labels', _('Labels')),
+              ('id', _('Id')),
+              ('author', _('Author')),
+          ),
+          {
+              'id': '\n#{value}',
+              'author': _('by {value}'),
+          },
+           item_class_fields=['status', 'priority', 'severity'],
+           field_class_map={
+               'title': 'has-text-weight-bold',
+               'labels': 'tag is-rounded x-is-hoverable',
+               'id': 'has-text-grey-light is-size-7 has-whitespace-pre-wrap',
+               'author': 'is-size-7'
+           },
+           on_click=on_list_item_click)
+    }}
+</div>
diff -r 3054387cac3b -r 27511c821481 sat_templates/templates/bulma/list/view_grocery.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/list/view_grocery.html	Sat Feb 27 20:54:13 2021 +0100
@@ -0,0 +1,38 @@
+{% import 'input/form.html' as form with context %}
+{% import 'input/field.html' as field with context %}
+
+<div id="list" class="container has-background-white px-1 py-1">
+    {% for item in list_items %}
+        {% set is_bought = item.widget_value.status == 'bought' %}
+        <div class="item box has-background-light has-text-weight-medium
+                      {{'list-item-closed' if is_bought}}"
+             data-item='{{item.values|tojson}}'>
+            <div class="level is-mobile">
+                <div class="level-left">
+                    <div class="level-item">
+                        <input type="checkbox" {{"checked" if is_bought}} class="click_to_next_state">
+                    </div>
+                    <div class="level-item">
+                        {{item.widget_value.name}}
+                    </div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        {{item.widget_value.quantity}}
+                    </div>
+                    <div class="level-item">
+                        <button class="delete click_to_delete"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+
+    {% call form.form(id="post_grocery") %}
+        {{ field.meta("type", "grocery") }}
+        {% call field.text("name", class="has-addons", control_class="is-expanded", placeholder=_("item to get"), required=true) %}
+            {{ field.int("quantity", control_class="has-width-7", placeholder=_("quantity"), init="", min=1, in_group=true) }}
+            {{ field.submit("", icon="plus") }}
+        {% endcall %}
+    {% endcall %}
+</div>
diff -r 3054387cac3b -r 27511c821481 sat_templates/templates/bulma/list/view_todo.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/list/view_todo.html	Sat Feb 27 20:54:13 2021 +0100
@@ -0,0 +1,3 @@
+<div id="list" class="container has-background-white px-1 py-1">
+    {% include "list/view_generic.html" %}
+</div>
diff -r 3054387cac3b -r 27511c821481 sat_templates/templates/bulma/static/list.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/static/list.css	Sat Feb 27 20:54:13 2021 +0100
@@ -0,0 +1,4 @@
+.list-item-closed {
+    text-decoration: line-through #dd0000 0.3em;
+    color: hsl(0, 0%, 48%);
+}
diff -r 3054387cac3b -r 27511c821481 sat_templates/templates/bulma/static/styles.css
--- a/sat_templates/templates/bulma/static/styles.css	Sat Feb 27 20:52:19 2021 +0100
+++ b/sat_templates/templates/bulma/static/styles.css	Sat Feb 27 20:54:13 2021 +0100
@@ -26,6 +26,10 @@
     white-space: pre-line;
 }
 
+.has-decoration-line-through {
+    text-decoration: line-through;
+}
+
 .is-avatar {
     height: 64px;
     width: 64px;
@@ -137,6 +141,10 @@
     justify-content: start;
 }
 
+.has-width-7 {
+    width: 7em;
+}
+
 /**************
  * selections *
  **************/