Do not hide subevent list if filtered list is empty (#6460)

* Do not hide subevent list if filtered list is empty

* Event calendar: Allow to show a message if no events are found

* Apply suggestion from @luelista

Co-authored-by: luelista <weller@rami.io>

* Fix failures on org level

* add aria-hidden if no subevents

* Update src/pretix/base/settings.py

* Update src/pretix/base/settings.py

Co-authored-by: Richard Schreiber <schreiber@pretix.eu>

---------

Co-authored-by: luelista <weller@rami.io>
Co-authored-by: Richard Schreiber <schreiber@rami.io>
Co-authored-by: Richard Schreiber <schreiber@pretix.eu>

src/pretix/static/pretixpresale/scss/_calendar.scss

@@ -1,3 +1,35 @@
+.calendar-container:has(.calendar-empty), .event-list:has(.calendar-empty) {
+  position: relative;
+  overflow: hidden;
+
+  .table-responsive, .week-calendar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 0;
+  }
+
+  .calendar-empty {
+    position: relative;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.9);
+    text-align: center;
+    font-size: $font-size-large;
+    padding: 30px 0;
+
+    .fa {
+      margin-block: 12px;
+    }
+
+    *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+}
 .table-calendar, .week-calendar, .day-calendar {
   td, th {
     width: 14.29%;

src/pretix/static/pretixpresale/scss/main.scss

@@ -513,7 +513,7 @@ h2 .label {
 }
 
 .event-list.full-width-list {
-    h3, h4, p {
+    h3, h4, article p {
         margin-top: 0;
         margin-bottom: 0;
     }

src/pretix/static/pretixpresale/scss/widget.scss

@@ -748,6 +748,13 @@ $table-bg-accent: rgba(128, 128, 128, 0.05);
     display: block;
     width: 100%;
   }
+
+  .pretix-widget-event-list-empty,
+  .pretix-widget-event-week-empty,
+  .pretix-widget-event-calendar-empty {
+    padding: 10px 0;
+    text-align: center;
+  }
 }
 
 

src/pretix/static/pretixpresale/widget/src/api.ts

@@ -38,6 +38,7 @@ export interface ProductListResponse {
 	events?: EventEntry[]
 	has_more_events?: boolean
 	meta_filter_fields?: MetaFilterField[]
+	empty_text?: string
 	weeks?: DayEntry[][]
 	date?: string
 	days?: DayEntry[]

src/pretix/static/pretixpresale/widget/src/components/EventCalendar.vue

@@ -92,7 +92,9 @@ function nextmonth () {
 			| {{ STRINGS.next_month }} »
 
 	//- Calendar
+	.pretix-widget-event-calendar-empty(v-if="!!store.emptyText", v-html="store.emptyText")
 	table.pretix-widget-event-calendar-table(
+		v-else
 		:id="id",
 		tabindex="0",
 		:aria-labelledby="ariaLabelledby"

src/pretix/static/pretixpresale/widget/src/components/EventList.vue

@@ -62,6 +62,8 @@ console.log(store)
 		:event="event"
 	)
 
+	.pretix-widget-event-list-empty(v-if="!store.events.length && store.emptyText", v-html="store.emptyText")
+
 	p.pretix-widget-event-list-load-more(v-if="store.hasMoreEvents")
 		button(@click.prevent.stop="loadMore") {{ STRINGS.load_more }}
 </template>

src/pretix/static/pretixpresale/widget/src/components/EventWeekCalendar.vue

@@ -88,7 +88,8 @@ function nextweek () {
 			| {{ STRINGS.next_week }} »
 
 	//- Actual calendar
-	.pretix-widget-event-week-table(:id="id", tabindex="0", :aria-label="weekname")
+	.pretix-widget-event-week-empty(v-if="store.emptyText", v-html="store.emptyText")
+	.pretix-widget-event-week-table(v-else, :id="id", tabindex="0", :aria-label="weekname")
 		.pretix-widget-event-week-col(v-for="d in store.days", :key="d?.date || ''")
 			EventWeekCell(:day="d", :mobile="mobile")
 </template>

src/pretix/static/pretixpresale/widget/src/sharedStore.ts

@@ -95,6 +95,7 @@ export function createWidgetStore (config: {
 			offset: 0,
 			appendEvents: false,
 			metaFilterFields: [] as MetaFilterField[],
+			emptyText: null as string | null,
 
 			// UI state
 			mobile: false,
@@ -270,6 +271,7 @@ export function createWidgetStore (config: {
 						this.name = data.name ?? null
 						this.frontpageText = data.frontpage_text ?? null
 						this.metaFilterFields = data.meta_filter_fields ?? []
+						this.emptyText = data.empty_text ?? null
 					} else if (data.days !== undefined) {
 						this.days = data.days
 						this.date = null
@@ -279,6 +281,7 @@ export function createWidgetStore (config: {
 						this.name = data.name ?? null
 						this.frontpageText = data.frontpage_text ?? null
 						this.metaFilterFields = data.meta_filter_fields ?? []
+						this.emptyText = data.empty_text ?? null
 					} else if (data.events !== undefined) {
 						this.events = this.appendEvents && this.events
 							? this.events.concat(data.events)
@@ -290,6 +293,7 @@ export function createWidgetStore (config: {
 						this.frontpageText = data.frontpage_text ?? null
 						this.hasMoreEvents = data.has_more_events ?? false
 						this.metaFilterFields = data.meta_filter_fields ?? []
+						this.emptyText = data.empty_text ?? null
 					} else {
 						this.view = 'event'
 						this.targetUrl = data.target_url ?? this.targetUrl