From 12c5b0254ae50330a2405c7015b0ff7719fdc020 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 6 Dec 2023 20:18:52 +0100
Subject: [PATCH 1/3] (calendar) add filtering to the event list

---
 assets/style.scss                  | 11 +++++++++++
 components/CalendarEventsList.vue  | 24 ++++++++++++++++++++++++
 components/CalendarMonthEvents.vue | 14 ++++++++++++--
 routes/calendar.vue                | 22 ++--------------------
 4 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 components/CalendarEventsList.vue

diff --git a/assets/style.scss b/assets/style.scss
index a00de472d..a651575dd 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -294,3 +294,14 @@ body:not(.reduced-colours) {
 .headers-nowrap th {
     white-space: nowrap;
 }
+
+@for $i from 3 to 5 {
+    @include media-breakpoint-up('lg', $grid-breakpoints) {
+        .columns-#{$i} {
+            column-count: $i;
+            > * {
+                break-inside: avoid-column;
+            }
+        }
+    }
+}
diff --git a/components/CalendarEventsList.vue b/components/CalendarEventsList.vue
new file mode 100644
index 000000000..195ddf581
--- /dev/null
+++ b/components/CalendarEventsList.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <input type="text" v-model="filter" :placeholder="$t('crud.filterLong')" class="form-control form-control-sm"/>
+        <div class="columns-3">
+            <div v-for="i in 12" class="py-3">
+                <h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
+                <CalendarMonthEvents :year="year" :month="i" class="small my-3" :filter="filter"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        year: { required: true },
+    },
+    data() {
+        return {
+            filter: '',
+        }
+    },
+};
+</script>
diff --git a/components/CalendarMonthEvents.vue b/components/CalendarMonthEvents.vue
index d25e9cb39..73436c5cb 100644
--- a/components/CalendarMonthEvents.vue
+++ b/components/CalendarMonthEvents.vue
@@ -1,7 +1,8 @@
 <template>
     <ul class="list-unstyled mb-0">
+        <li v-if="events.length === 0" class="text-center">—</li>
         <li v-for="event in events" class="mb-2">
-            <CalendarEvent :event="event" :year="year.year" range :key="event.name"/>
+            <CalendarEvent v-if="visible(event)" :event="event" :year="year.year" range :key="event.name"/>
         </li>
     </ul>
 </template>
@@ -13,19 +14,28 @@
         props: {
             year: { required: true },
             month: { required: true },
+            filter: { default: '' },
         },
         computed: {
             events() {
                 let events = [];
                 for (let day of iterateMonth(this.year.year, this.month)) {
                     for (let event of this.year.eventsByDate[day.toString()] || []) {
-                        if (event.isFirstDay(day)) {
+                        if (event.isFirstDay(day) && this.visible(event)) {
                             events.push(event);
                         }
                     }
                 }
                 return events;
             }
+        },
+        methods: {
+            visible(event) {
+                if (!this.filter) { return true; }
+                const [name, param] = event.name.split('$');
+                const translatedName = this.$te(`calendar.events.${name}`, true) ? this.$t(`calendar.events.${name}`, {param}) : name;
+                return translatedName.toLowerCase().includes(this.filter.toLowerCase());
+            }
         }
     }
 </script>
diff --git a/routes/calendar.vue b/routes/calendar.vue
index 3b94c1c1d..f076c39d1 100644
--- a/routes/calendar.vue
+++ b/routes/calendar.vue
@@ -46,11 +46,8 @@
             </section>
         </template>
         <template v-else>
-            <section v-if="labels" class="columns-3">
-                <div v-for="i in 12" class="py-3">
-                    <h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
-                    <CalendarMonthEvents :year="year" :month="i" class="small my-3"/>
-                </div>
+            <section v-if="labels">
+                <CalendarEventsList :year="year"/>
             </section>
             <section v-else class="row">
                 <div v-for="i in 12" class="col-12 col-sm-6 col-lg-4 py-3">
@@ -106,18 +103,3 @@
         },
     };
 </script>
-
-<style lang="scss" scoped>
-@import "assets/variables";
-
-@for $i from 3 to 5 {
-    @include media-breakpoint-up('lg', $grid-breakpoints) {
-        .columns-#{$i} {
-            column-count: $i;
-            > * {
-                break-inside: avoid-column;
-            }
-        }
-    }
-}
-</style>

From a75772b46d2c3289fbe9422bc408759833b29392 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sat, 9 Dec 2023 21:35:24 +0100
Subject: [PATCH 2/3] (calendar) add filtering to the event list - fix
 miscommit

---
 components/CalendarMonthEvents.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/CalendarMonthEvents.vue b/components/CalendarMonthEvents.vue
index 73436c5cb..f75e905af 100644
--- a/components/CalendarMonthEvents.vue
+++ b/components/CalendarMonthEvents.vue
@@ -2,7 +2,7 @@
     <ul class="list-unstyled mb-0">
         <li v-if="events.length === 0" class="text-center">—</li>
         <li v-for="event in events" class="mb-2">
-            <CalendarEvent v-if="visible(event)" :event="event" :year="year.year" range :key="event.name"/>
+            <CalendarEvent :event="event" :year="year.year" range :key="event.name"/>
         </li>
     </ul>
 </template>

From c71b6efcfbe215567758c3cd9bdfb561c6610744 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sat, 9 Dec 2023 21:49:17 +0100
Subject: [PATCH 3/3] (calendar) add filtering to the event list - optimisation

---
 components/CalendarMonthEvents.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/CalendarMonthEvents.vue b/components/CalendarMonthEvents.vue
index f75e905af..ad50dce53 100644
--- a/components/CalendarMonthEvents.vue
+++ b/components/CalendarMonthEvents.vue
@@ -1,7 +1,7 @@
 <template>
-    <ul class="list-unstyled mb-0">
-        <li v-if="events.length === 0" class="text-center">—</li>
-        <li v-for="event in events" class="mb-2">
+    <ul class="list-unstyled mb-0 events-list">
+        <li v-show="events.filter(e => visible(e)).length === 0" class="text-center">—</li>
+        <li v-for="event in events" class="mb-2" v-show="visible(event)">
             <CalendarEvent :event="event" :year="year.year" range :key="event.name"/>
         </li>
     </ul>
@@ -21,7 +21,8 @@
                 let events = [];
                 for (let day of iterateMonth(this.year.year, this.month)) {
                     for (let event of this.year.eventsByDate[day.toString()] || []) {
-                        if (event.isFirstDay(day) && this.visible(event)) {
+                        if (event.isFirstDay(day)) {
+                            event.translatedName = this.translateName(event);
                             events.push(event);
                         }
                     }
@@ -30,11 +31,12 @@
             }
         },
         methods: {
-            visible(event) {
-                if (!this.filter) { return true; }
+            translateName(event) {
                 const [name, param] = event.name.split('$');
-                const translatedName = this.$te(`calendar.events.${name}`, true) ? this.$t(`calendar.events.${name}`, {param}) : name;
-                return translatedName.toLowerCase().includes(this.filter.toLowerCase());
+                return this.$te(`calendar.events.${name}`, true) ? this.$t(`calendar.events.${name}`, {param}) : name;
+            },
+            visible(event) {
+                return !this.filter || event.translatedName.toLowerCase().includes(this.filter.toLowerCase());
             }
         }
     }