Improve outsider view of event (#558)

* Add page reload after sorting

* Move day_card to component, disable sorting on mobile view, some other improvements

* Update test naming to avoid confusion

app/components/__init__.py

@@ -5,6 +5,7 @@
 from .dropzone import dropzone
 from .tables import table, search_box
 from .images import recipe_gallery_image
+from .day_cards import day_card
 
 # __all__ = ["icon"]
 
@@ -33,3 +34,6 @@ def register_all_components(application):
 
     # images
     application.add_template_global(recipe_gallery_image)
+
+    # cards
+    application.add_template_global(day_card)

app/components/day_cards.py

@@ -0,0 +1,74 @@
+from flask_template_components import BaseComponent
+
+
+class DayCard(BaseComponent):
+    # WIP: There is problem with FlaskTemplateComponents, DEFAULT_CLASSES are overridden instead of appended
+    # DEFAULT_CLASSES = [
+    #     "col-12",
+    #     "col-md",
+    #     "p-2",
+    #     "mb-2",
+    #     "mb-md-3",
+    #     "ms-2",
+    #     "me-2",
+    #     "rounded",
+    #     "text-center",
+    #     "text-nobreak",
+    # ]
+
+    def __init__(self, day, **kwargs):
+        super().__init__(**kwargs)
+        self.day = day
+        self.event = day.event
+
+
+class ActiveDayCard(DayCard):
+    DEFAULT_CLASSES = [
+        "clickable",
+        "col-12",
+        "col-md",
+        "p-2",
+        "mb-2",
+        "mb-md-3",
+        "ms-2",
+        "me-2",
+        "rounded",
+        "text-center",
+        "text-nobreak",
+    ]
+
+    def __init__(self, day, **kwargs):
+        super().__init__(day, **kwargs)
+
+        self.color = "secondary"
+
+
+class InactiveDayCard(DayCard):
+    DEFAULT_CLASSES = [
+        "opacity-50",
+        "d-none",
+        "d-md-inline-block",
+        "cursor-default",
+        "col-12",
+        "col-md",
+        "p-2",
+        "mb-2",
+        "mb-md-3",
+        "ms-2",
+        "me-2",
+        "rounded",
+        "text-center",
+        "text-nobreak",
+    ]
+
+    def __init__(self, day, **kwargs):
+        super().__init__(day, **kwargs)
+
+        self.color = "light-grey"
+
+
+def day_card(day, **kwargs):
+    if day.is_active:
+        return ActiveDayCard(day, **kwargs).render()
+    else:
+        return InactiveDayCard(day, **kwargs).render()

app/models/mixins/day_mixin.py

@@ -23,6 +23,10 @@ def all_tasks(self) -> list:
 
         return tasks
 
+    @property
+    def has_tasks(self) -> bool:
+        return len(self.all_tasks) > 0
+
     @property
     def tasks_from_this_day(self) -> list:
         tasks = self.tasks

app/static/js/controllers/sortable_controller.js

@@ -29,6 +29,8 @@ export default class extends Sortable {
     data.append("daily_plan_id", listId)
 
     return await patch(moveUrl, { body: data, responseKind: this.responseKindValue })
+      // reload page
+      .then(response => window.location.reload())
   }
 
 }

app/templates/events/edit.html.j2

@@ -17,7 +17,7 @@
     {% for week in event.timetable.all_relevant_days_split_by_weeks %}
         <div class="row">
         {% for day in week %}
-            {% include("daily_plans/_day_card.html.j2") %}
+            {{ day_card(day) }}
         {% endfor %}
         </div>
     {% endfor %}

app/templates/events/show.html.j2

@@ -15,7 +15,7 @@
     {% for week in event.timetable.all_relevant_days_split_by_weeks %}
         <div class="row">
         {% for day in week %}
-            {% include("daily_plans/_day_card.html.j2") %}
+            {{ day_card(day) }}
         {% endfor %}
         </div>
     {% endfor %}

app/templates/template_components/day_cards/active_day_card.html.j2

@@ -0,0 +1,79 @@
+{% if day.weekday in ["neděle"]  %}
+  {% set color = "secondary-highlighted" %}
+{% endif %}
+
+# set daily_plan = day
+
+<div data-action="click->clicker#activateLink"
+  class="col-12 col-md p-2 mb-2 mb-md-3 ms-2 me-2 bg-color-{{ color }} rounded text-center text-nobreak {{ css_classes }} lh-2 text-truncate user-select-none">
+
+  <div><h2>{{ link_to(day, class="fs-5") }}</h2></div>
+
+    ## desktop
+    <ul class="ps-0 ms-0 d-none d-md-block"
+      {% if event.can_current_user_edit %}
+      data-controller="sortable"
+      data-sortable-group-value="daily-plan-recipes"
+      data-sortable-list-id="{{day.id}}"
+      {% endif %}
+      >
+
+      {% for daily_recipe in day.daily_recipes %}
+        <li class="text-truncate"
+            data-sortable-update-url="{{ url_for("DailyPlanRecipeView:sort", daily_recipe_id=daily_recipe.id)}}"
+            data-sortable-move-url={{ url_for("DailyPlanRecipeView:change_daily_plan", daily_recipe_id=daily_recipe.id)}}
+            >
+
+          {% if not daily_recipe.recipe.is_shopping %}
+            {{ link_to(daily_recipe.recipe, portion_count=daily_recipe.portion_count, style="user-select: none") }}
+          {% else %}
+            <span class="color-grey"> nákup </span>
+          {% endif %}
+        </li>
+      {% else %}
+        # if event.can_current_user_edit
+          <span class="text-wrap"><em>zatím tu nejsou žádné recepty. nějaký přidej, nebo je přesuň z jiného dne</em></span>
+        # endif
+      {% endfor %}
+    </ul>
+
+    ## mobile
+    <ul class="ps-0 ms-0 d-md-none">
+
+      {% for daily_recipe in day.daily_recipes %}
+        <li class="text-truncate">
+
+          {% if not daily_recipe.recipe.is_shopping %}
+            {{ link_to(daily_recipe.recipe, portion_count=daily_recipe.portion_count, style="user-select: none") }}
+          {% else %}
+            <span class="color-grey"> nákup </span>
+          {% endif %}
+        </li>
+      {% else %}
+        # if event.can_current_user_edit
+          <span class="text-wrap"><em>zatím tu nejsou žádné recepty. nějaký přidej, nebo je přesuň z jiného dne</em></span>
+        # endif
+      {% endfor %}
+
+    </ul>
+
+    # if event.can_current_user_edit
+    <button type="button" class="btn bg-color-primary-action text-white" data-bs-toggle="modal" data-bs-target="#add-recipe-to-{{day.id}}-modal" data-controller="custom-events">
+      víc jídla! {{ icon("add") }}
+    </button>
+    # endif
+
+  {% if day.has_tasks %}
+    <hr>
+    <h3 class="fs-5">úkoly</h3>
+  {% endif %}
+
+  {% for task in day.all_tasks %}
+    {{ task }} <br>
+  {% endfor %}
+
+</div>
+
+{% with modal_id="add-recipe-to-"~day.id~"-modal" %}
+  {% include "daily_plans/_add_recipe_modal.html.j2" %}
+{% endwith %}

app/templates/template_components/day_cards/inactive_day_card.html.j2

@@ -0,0 +1,14 @@
+<div class="bg-color-{{ color }} {{ css_classes }}">
+
+  <div><h2>{{ link_to(day, class="fs-5") }}</h2></div>
+
+  {% if day.has_tasks %}
+    <hr>
+    <h3 class="fs-5">úkoly</h3>
+  {% endif %}
+
+  {% for task in day.all_tasks %}
+    {{ task }} <br>
+  {% endfor %}
+
+</div>

tests/end_to_end/events/test_event_management.py

@@ -25,7 +25,7 @@ def recipes(db, app):
 
 
 @pytest.mark.integration
-def test_event_management(live_server, page, recipes):
+def test_event_creation(live_server, page, recipes):
     playwright_login(page)
 
     page.goto("dashboard")