From 9f54b6e8fde827556cf858818090a1dfc829624c Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 22 Feb 2023 09:44:12 +0100
Subject: [PATCH] schedule event filter

---
 app/Http/Controllers/EpisodeController.php    |  5 +++
 .../2023_02_22_083016_event_short.php         | 32 +++++++++++++++++++
 resources/js/components/episodes/Filter.js    |  9 ++++--
 resources/js/components/pages/Schedule.js     | 20 +++++++++---
 resources/js/i18n/de.js                       |  1 +
 resources/js/i18n/en.js                       |  1 +
 6 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 database/migrations/2023_02_22_083016_event_short.php

diff --git a/app/Http/Controllers/EpisodeController.php b/app/Http/Controllers/EpisodeController.php
index d1e7e85..6de7d67 100644
--- a/app/Http/Controllers/EpisodeController.php
+++ b/app/Http/Controllers/EpisodeController.php
@@ -13,6 +13,8 @@ class EpisodeController extends Controller
 		$validatedData = $request->validate([
 			'after' => 'nullable|date',
 			'before' => 'nullable|date',
+			'event' => 'nullable|array',
+			'event.*' => 'numeric',
 		]);
 		$after = isset($validatedData['after']) ? $validatedData['after'] : Carbon::now()->sub(2, 'hours');
 		$before = isset($validatedData['before']) ? $validatedData['before'] : Carbon::now()->add(1, 'days');
@@ -25,6 +27,9 @@ class EpisodeController extends Controller
 			->where('events.visible', '=', true)
 			->orderBy('episodes.start')
 			->limit(1000);
+		if (!empty($validatedData['event'])) {
+			$episodes = $episodes->whereIn('episodes.event_id', $validatedData['event']);
+		}
 		if ($request->user() && $request->user()->isPrivileged()) {
 			$episodes = $episodes->with(['crew', 'crew.user']);
 		} else {
diff --git a/database/migrations/2023_02_22_083016_event_short.php b/database/migrations/2023_02_22_083016_event_short.php
new file mode 100644
index 0000000..071bca5
--- /dev/null
+++ b/database/migrations/2023_02_22_083016_event_short.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+	/**
+	 * Run the migrations.
+	 *
+	 * @return void
+	 */
+	public function up()
+	{
+		Schema::table('events', function(Blueprint $table) {
+			$table->string('short')->default('');
+		});
+	}
+
+	/**
+	 * Reverse the migrations.
+	 *
+	 * @return void
+	 */
+	public function down()
+	{
+		Schema::table('events', function(Blueprint $table) {
+			$table->dropColumn('short');
+		});
+	}
+};
diff --git a/resources/js/components/episodes/Filter.js b/resources/js/components/episodes/Filter.js
index b411f82..06dcf13 100644
--- a/resources/js/components/episodes/Filter.js
+++ b/resources/js/components/episodes/Filter.js
@@ -16,7 +16,9 @@ const Filter = ({ filter, setFilter }) => {
 				before: moment().startOf('day').add(8, 'days').toISOString(),
 			},
 		}).then(response => {
-			const newEvents = response.data || [];
+			const newEvents = (response.data || []).sort(
+				(a, b) => (a.short || a.title).localeCompare(b.short || b.title)
+			);
 			setEvents(newEvents);
 		}).catch(e => {
 			if (!axios.isCancel(e)) {
@@ -50,15 +52,16 @@ const Filter = ({ filter, setFilter }) => {
 
 	if (!events || !events.length) return null;
 
-	return <div className="episode-filter">
+	return <div className="episode-filter button-bar text-end">
 		{events.map(event =>
 			<Button
 				active={isEventSelected(event)}
 				key={event.id}
 				onClick={() => toggleEvent(event)}
+				title={event.short ? event.title : null}
 				variant="outline-secondary"
 			>
-				{event.title}
+				{event.short || event.title}
 			</Button>
 		)}
 	</div>;
diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index 06d471f..0e01701 100644
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import moment from 'moment';
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Alert, Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
@@ -11,7 +11,7 @@ import Filter from '../episodes/Filter';
 import List from '../episodes/List';
 
 const Schedule = () => {
-	const [ahead, setAhead] = React.useState(6);
+	const [ahead, setAhead] = React.useState(14);
 	const [behind, setBehind] = React.useState(0);
 	const [episodes, setEpisodes] = React.useState([]);
 	const [filter, setFilter] = React.useState({});
@@ -67,10 +67,20 @@ const Schedule = () => {
 			<meta name="description" content={t('schedule.description')} />
 		</Helmet>
 		<CanonicalLinks base="/schedule" />
-		<h1>{t('schedule.heading')}</h1>
+		<div className="d-flex align-items-start justify-content-between">
+			<h1>{t('schedule.heading')}</h1>
+			<div className="mt-5">
+				<Filter filter={filter} setFilter={updateFilter} />
+			</div>
+		</div>
 		<ErrorBoundary>
-			<Filter filter={filter} setFilter={updateFilter} />
-			<List episodes={episodes} />
+			{episodes.length ?
+				<List episodes={episodes} />
+			:
+				<Alert variant="info">
+					{t('episodes.empty')}
+				</Alert>
+			}
 		</ErrorBoundary>
 	</Container>;
 };
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index aff46ec..32cc370 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -264,6 +264,7 @@ export default {
 		},
 		episodes: {
 			commentary: 'Kommentar',
+			empty: 'Keine anstehenden Termine.',
 			setup: 'Setup',
 			tracking: 'Tracking',
 		},
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index cb63f60..200e988 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -264,6 +264,7 @@ export default {
 		},
 		episodes: {
 			commentary: 'Commentary',
+			empty: 'No dates coming up.',
 			setup: 'Setup',
 			tracking: 'Tracking',
 		},
-- 
2.39.2