feat(admin): add search form in podcast episodes list

closes #26

app/Database/Migrations/2020-06-05-170000_add_episodes.php

@@ -158,6 +158,14 @@ class AddEpisodes extends Migration
         $this->forge->addForeignKey('created_by', 'users', 'id');
         $this->forge->addForeignKey('updated_by', 'users', 'id');
         $this->forge->createTable('episodes');
+
+        // Add Full-Text Search index on title and description_markdown
+        $prefix = $this->db->getPrefix();
+        $createQuery = <<<CODE_SAMPLE
+            ALTER TABLE {$prefix}episodes
+            ADD FULLTEXT(title, description_markdown);
+        CODE_SAMPLE;
+        $this->db->query($createQuery);
     }
 
     public function down(): void

app/Resources/icons/search.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <g>
+        <path fill="none" d="M0 0h24v24H0z"/>
+        <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617z"/>
+    </g>
+</svg>

app/Views/Components/Button.php

@@ -33,7 +33,7 @@ class Button extends Component
         $variantClass = [
             'default' => 'text-black bg-gray-300 hover:bg-gray-400',
             'primary' => 'text-accent-contrast bg-accent-base hover:bg-accent-hover',
-            'secondary' => 'border-2 border-accent-base text-accent-base bg-transparent hover:border-accent-hover hover:text-accent-hover',
+            'secondary' => 'border-2 border-accent-base text-accent-base bg-white hover:border-accent-hover hover:text-accent-hover',
             'success' => 'text-white bg-pine-500 hover:bg-pine-800',
             'danger' => 'text-white bg-red-600 hover:bg-red-700',
             'warning' => 'text-black bg-yellow-500 hover:bg-yellow-600',

modules/Admin/Controllers/EpisodeController.php

@@ -63,14 +63,25 @@ class EpisodeController extends BaseController
 
     public function list(): string
     {
+        /** @var ?string $query */
+        $query = $this->request->getGet('q');
+
+        if ($query !== null && $query !== '') {
+            $episodes = (new EpisodeModel())
+                ->where('podcast_id', $this->podcast->id)
+                ->where("MATCH (title, description_markdown) AGAINST ('{$query}')");
+        } else {
             $episodes = (new EpisodeModel())
                 ->where('podcast_id', $this->podcast->id)
                 ->orderBy('created_at', 'desc');
+        }
 
+        helper('form');
         $data = [
             'podcast' => $this->podcast,
             'episodes' => $episodes->paginate(10),
             'pager' => $episodes->pager,
+            'query' => $query,
         ];
 
         replace_breadcrumb_params([

modules/Admin/Language/en/Episode.php

@@ -38,6 +38,15 @@ return [
         'not_published' => 'Not published',
     ],
     'list' => [
+        'search' => [
+            'placeholder' => 'Search for an episode',
+            'clear' => 'Clear search',
+            'submit' => 'Search',
+        ],
+        'number_of_episodes' => '{numberOfEpisodes, plural,
+            one {# episode}
+            other {# episodes}
+        }',
         'episode' => 'Episode',
         'visibility' => 'Visibility',
         'comments' => 'Comments',

themes/cp_admin/episode/list.php

@@ -5,7 +5,7 @@
 <?= $this->endSection() ?>
 
 <?= $this->section('pageTitle') ?>
-<?= lang('Episode.all_podcast_episodes') ?> (<?= $pager->getDetails()['total'] ?>)
+<?= lang('Episode.all_podcast_episodes') ?>
 <?= $this->endSection() ?>
 
 <?= $this->section('headerRight') ?>
@@ -15,14 +15,29 @@
 
 <?= $this->section('content') ?>
 
-<p class="mb-4 text-sm italic text-skin-muted">
+<div class="flex flex-wrap items-center justify-between">
+    <p class="text-sm italic text-skin-muted">
+        <span class="font-semibold"><?= lang('Episode.list.number_of_episodes', [
+            'numberOfEpisodes' => $pager->getDetails()['total'],
+        ]) ?></span><br />
         <?= lang('Common.pageInfo', [
             'currentPage' => $pager->getDetails()['currentPage'],
             'pageCount' => $pager->getDetails()['pageCount'],
         ]) ?>
     </p>
+    <form class="relative flex">
+        <div class="relative">
+            <Forms.Input name="q" placeholder="<?= lang('Episode.list.search.placeholder') ?>" value="<?= $query ?>" class="<?= $query ? 'pr-8' : '' ?>" />
+            <?php if ($query): ?>
+                <a href="<?= route_to('episode-list', $podcast->id) ?>" class="absolute inset-y-0 right-0 inline-flex items-center justify-center px-2 opacity-75 focus:ring-accent hover:opacity-100 focus:opacity-100" title="<?= lang('Episode.list.search.clear') ?>" data-tooltip="bottom"><?= icon('close', 'text-lg') ?></a>
+            <?php endif; ?>
+        </div>
+        <Button type="submit" variant="secondary" class="px-3 ml-2 rounded-lg shadow-md" title="<?= lang('Episode.list.search.submit') ?>" data-tooltip="bottom" isSquared="true"><?= icon('search', 'text-xl') ?></Button>
+    </form>
+</div>
 
-<?= data_table(
+<?=
+data_table(
     [
         [
             'header' => lang('Episode.list.episode'),
@@ -134,7 +149,7 @@
         ],
     ],
     $episodes,
-        'mb-6',
+    'mb-6 mt-4',
     $podcast
 ) ?>