wip: filter uses form object

assets/controllers/result_filter_controller.js

@@ -67,7 +67,7 @@ export default class extends Controller {
                 this.languages.push(language);
             }
         });
-        const preferred = JSON.parse(this.languageTarget.dataset.preferred);
+        const preferred = JSON.parse(this.languageTarget.dataset.preferred) ?? [];
         this.languageTarget.innerHTML = this.#serializeSelectOptions(this.languages);
         this.languageTarget.tomselect.items = preferred;
     }
@@ -76,7 +76,7 @@ export default class extends Controller {
         if (!this.providers.includes(option.provider)) {
             this.providers.push(option.provider);
         }
-        const preferred = JSON.parse(this.providerTarget.dataset.preferred);
+        const preferred = JSON.parse(this.providerTarget.dataset.preferred) ?? [];
         this.providerTarget.innerHTML = this.#serializeSelectOptions(this.providers);
         this.providerTarget.tomselect.items = preferred;
 

src/Twig/Components/Filter.php

@@ -9,16 +9,21 @@ use App\User\Database\ResolutionList;
 use App\User\Dto\PreferenceOptions;
 use App\User\Dto\PreferenceOptionsFactory;
 use App\User\Dto\UserPreferencesFactory;
+use App\User\Framework\Form\UserMediaPreferencesForm;
 use App\User\Framework\Repository\PreferencesRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\Form\FormInterface;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\ComponentWithFormTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
 #[AsLiveComponent]
 final class Filter extends AbstractController
 {
     use DefaultActionTrait;
+    use ComponentWithFormTrait;
 
     public array $preferences = [];
 
@@ -43,4 +48,9 @@ final class Filter extends AbstractController
     {
         return CodecList::asSelectOptions();
     }
+
+    protected function instantiateForm(): FormInterface
+    {
+        return $this->createForm(UserMediaPreferencesForm::class, UserPreferencesFactory::createFromUser($this->getUser()));
+    }
 }

src/User/Framework/Form/UserMediaPreferencesForm.php

@@ -37,8 +37,16 @@ class UserMediaPreferencesForm extends AbstractType
     private function addChoiceField(FormBuilderInterface $builder, string $fieldName, array $choices): void
     {
         $question = [
-            'attr' => ['class' => 'w-64 text-input mb-4'],
-            'label_attr' => ['class' => 'w-64 text-white block font-semibold mb-2'],
+            'attr' => [
+                'class' => 'min-w-24 text-input mb-4',
+                'data-result-filter-target' => $fieldName,
+                'data-controller' => 'symfony--ux-autocomplete--autocomplete',
+                'data-symfony--ux-autocomplete--autocomplete-tom-select-options-value' => '{"highlight":false}',
+            ],
+            'row_attr' => [
+                'class' => 'filter-label'
+            ],
+            'label_attr' => ['class' => 'text-white block font-semibold mb-2'],
             'choices' => $this->addDefaultChoice($choices),
             'required' => false,
             'multiple' => true,
@@ -50,6 +58,9 @@ class UserMediaPreferencesForm extends AbstractType
     {
         $resolver->setDefaults([
             'action' => $this->urlGenerator->generate('app_user_media_preferences_submit'),
+            'attr' => [
+                'class' => 'filter-items w-full p-4 bg-black/20 border-2 border-orange-500 text-md text-gray-500 dark:text-gray-50 rounded-lg',
+            ]
         ]);
     }
 

templates/components/Filter.html.twig

@@ -6,126 +6,42 @@
      data-result-filter-tv-episode-list-outlet=".episode-list"
      data-action="change->result-filter#filter action-button:downloadSeason@window->result-filter#downloadSeason"
 >
-    <div class="filter-items w-full p-4 flex flex-col md:flex-row gap-4 bg-black/20 border-2 border-orange-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
-        <label for="resolution" class="filter-label">
-            Resolution
-            <select id="resolution"
-                    multiple="multiple"
-                    data-result-filter-target="resolution"
-                    class="px-1 py-0.5 bg-stone-100 placeholder-text-gray-50 text-gray-50"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-            >
-                <option value="">n/a</option>
-                {% for name, value in this.resolutionOptions %}
-                <option value="{{ value }}"
-                        {{ value in this.userPreferences['resolution'] ? 'selected' }}
-                >{{ name }}</option>
-                {% endfor %}
-            </select>
-        </label>
+    {% set preferences_form = form %}
+    {{ form_start(preferences_form) }}
+        <div class="flex flex-row gap-2 justify-between">
+            {{ form_row(preferences_form.resolution) }}
+            {{ form_row(preferences_form.codec) }}
+            {{ form_row(preferences_form.language) }}
+            {{ form_row(preferences_form.provider) }}
+            {{ form_row(preferences_form.quality) }}
 
-        <label for="codec" class="filter-label">
-            Codec
-            <select id="codec"
-                    multiple="multiple"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-                    data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-gray-50">
-                <option value="">n/a</option>
-                {% for name, value in this.codecOptions %}
-                    <option value="{{ value }}"
-                            {{ value in this.userPreferences['codec'] ? 'selected' }}
-                    >{{ name }}</option>
-                {% endfor %}
-            </select>
-        </label>
+            {% if results.media.mediaType == "tvshows" %}
+                <div class="filter-label">
+                    <label for="season">
+                        Season
+                    </label>
+                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-0.5 bg-stone-100 text-gray-800"
+                            {{ stimulus_action('result_filter', 'setSeason', 'change') }}
+                            {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
+                    >
+                        {% for season in range(1, results.media.episodes|length) %}
+                            <option value="{{ season }}"
+                                    {% if results.season == season %}
+                                        selected="selected"
+                                    {% endif %}
+                            >{{ season }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            {% endif %}
+        </div>
 
-        <label for="language" class="filter-label">
-            Language
-            <select id="language"
-                    multiple="multiple"
-                    data-result-filter-target="language"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-                    class="px-1 py-0.5 bg-stone-100 text-gray-50"
-                    {% if this.userPreferences['language'] != null %}
-                        data-preferred="{{ this.userPreferences['language']|json_encode }}"
-                    {% endif %}
-            >
-            </select>
-        </label>
-
-        <label for="provider" class="filter-label">
-            Provider
-            <select id="provider"
-                    multiple="multiple"
-                    data-result-filter-target="provider"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-                    class="px-1 py-0.5 bg-stone-100 text-gray-50"
-                    {% if this.userPreferences['provider'] != null %}
-                        data-preferred="{{ this.userPreferences['provider']|json_encode }}"
-                    {% endif %}
-            >
-            </select>
-        </label>
-
-        <label for="quality" class="filter-label">
-            Quality
-            <select id="quality"
-                    multiple="multiple"
-                    data-result-filter-target="quality"
-                    class="px-1 py-0.5 bg-stone-100 text-gray-50"
-                    data-preferred="{{ this.userPreferences['quality']|json_encode }}"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-            >
-            </select>
-        </label>
-
-        {% if results.media.mediaType == "tvshows" %}
-            <label for="season" class="filter-label">
-                Season
-                <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800"
-                        {{ stimulus_action('result_filter', 'setSeason', 'change') }}
-                        {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
-                >
-                    {% for season in range(1, results.media.episodes|length) %}
-                        <option value="{{ season }}"
-                            {% if results.season == season %}
-                                selected="selected"
-                            {% endif %}
-                        >{{ season }}</option>
-                    {% endfor %}
-                </select>
-            </label>
-        {% endif %}
-        <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
+    <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
             class="loading-icon">
-            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
-        </span>
-    </div>
+        <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
+    </span>
+    {{ form_end(preferences_form) }}
+
 
     {% if results.media.mediaType == "tvshows" %}
         <div class="flex flex-row gap-2 justify-end px-8">

templates/user/preferences.html.twig

@@ -6,16 +6,26 @@
 <div class="p-4 flex flex-col md:flex-row gap-2">
     <twig:Card title="Media Preferences" class="w-full">
         <p class="text-gray-50 mb-4">Define a filter to be pre-applied to your download options.</p>
-        {{ form_start(preferences_form) }}
-            {{ form_row(preferences_form.language) }}
-            {{ form_row(preferences_form.quality) }}
-            {{ form_row(preferences_form.provider) }}
-            {{ form_row(preferences_form.resolution) }}
-            {{ form_row(preferences_form.codec) }}
-            <button class="submit-button">Save</button>
-        {{ form_end(preferences_form) }}
+        <div id="filter">
+            {{ form_start(preferences_form.instantiateForm) }}
+                <div class="flex flex-row gap-2">
+                    {{ form_row(preferences_form.resolution) }}
+                    {{ form_row(preferences_form.codec) }}
+                    {{ form_row(preferences_form.language) }}
+                    {{ form_row(preferences_form.provider) }}
+                    {{ form_row(preferences_form.quality) }}
+                </div>
+                <div class="flex flex-row justify-end">
+                    <div>
+                        <button class="submit-button">Save</button>
+                    </div>
+                </div>
+            {{ form_end(preferences_form) }}
+        </div>
     </twig:Card>
+</div>
 
+<div class="p-4 flex flex-col md:flex-row gap-2">
     <twig:Card title="Download Preferences" class="w-full">
         <p class="text-gray-50 mb-4">Change how your downloads are stored.</p>
         <form id="download_preferences" class="flex flex-col" name="download_preferences" method="post" action="{{ path('app_save_download_preferences') }}">