Merge branch 'calendar-filter' into 'main'

(calendar) add filtering to the event list

See merge request PronounsPage/PronounsPage!390

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;
+            }
+        }
+    }
+}

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>

components/CalendarMonthEvents.vue

@@ -1,6 +1,7 @@
 <template>
-    <ul class="list-unstyled mb-0">
-        <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>
@@ -13,6 +14,7 @@
         props: {
             year: { required: true },
             month: { required: true },
+            filter: { default: '' },
         },
         computed: {
             events() {
@@ -20,12 +22,22 @@
                 for (let day of iterateMonth(this.year.year, this.month)) {
                     for (let event of this.year.eventsByDate[day.toString()] || []) {
                         if (event.isFirstDay(day)) {
+                            event.translatedName = this.translateName(event);
                             events.push(event);
                         }
                     }
                 }
                 return events;
             }
+        },
+        methods: {
+            translateName(event) {
+                const [name, param] = event.name.split('$');
+                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());
+            }
         }
     }
 </script>

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>