Split columns section from radio table settings screen

Issue #116
TomaszGasior · Apr 20, 2022 · 45c646a · 45c646a
1 parent 09b46dd
commit 45c646a
Show file tree

Hide file tree

Showing 12 changed files with 220 additions and 103 deletions.
diff --git a/assets/css/radio-table-columns.css b/assets/css/radio-table-columns.css
@@ -0,0 +1,75 @@
+/* columns UI */
+
+.JS .radio-table-columns {
+    margin: 1.2em auto;
+}
+.JS .radio-table-columns .form-item {
+    background: #F3F3F3;
+    box-shadow: inset 2px 2px 2px #DEDEDE;
+    border: 1px solid #C2C2C2;
+    padding: 0.5em 1em;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+}
+.JS .radio-table-columns .form-item label {
+    margin: 0;
+}
+.JS .radio-table-columns .form-item > :last-child {
+    text-align: right;
+    flex: 1;
+}
+.JS .radio-table-columns .form-item.hidden-column {
+    background: #FBFBFB;
+    box-shadow: inset 2px 2px 2px #efefef;
+    border-color: #dfdfdf;
+}
+.JS .radio-table-columns .form-item.hidden-column label {
+    text-decoration: line-through;
+    opacity: 0.5;
+}
+.JS .radio-table-columns .form-item button {
+    display: inline;
+    width: auto;
+    height: 2em;
+    min-width: 85px;
+    margin: 0 0 0 0.6em;
+    white-space: nowrap;
+}
+.JS .radio-table-columns .form-item button:first-of-type {
+    margin-left: 0;
+}
+
+@media (max-width: 800px)
+{
+    .JS .radio-table-columns .form-item {
+        flex-direction: row;
+    }
+    .JS .radio-table-columns .form-item label {
+        margin-bottom: 0;
+    }
+}
+
+@media (max-width: 700px)
+{
+    .JS .radio-table-columns .form-item {
+        flex-direction: column;
+    }
+    .JS .radio-table-columns .form-item label {
+        margin-bottom: 0.7em;
+    }
+    .JS .radio-table-columns .form-item > :last-child {
+        text-align: center;
+        white-space: nowrap;
+    }
+}
+@media (max-width: 440px)
+{
+    .JS .radio-table-columns .form-item button {
+        min-width: auto;
+        height: auto;
+        font-size: 0.8em;
+        padding-top: 0.6em;
+        padding-bottom: 0.6em;
+    }
+}
diff --git a/assets/css/radio-table-settings.css b/assets/css/radio-table-settings.css
@@ -2,80 +2,3 @@
 
 @import './part/radio-table-status.css';
 @import './part/ckeditor.css';
-
-
-/* columns UI */
-
-.JS .radio-table-columns {
-    margin: 1.2em auto;
-}
-.JS .radio-table-columns .form-item {
-    background: #F3F3F3;
-    box-shadow: inset 2px 2px 2px #DEDEDE;
-    border: 1px solid #C2C2C2;
-    padding: 0.5em 1em;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-}
-.JS .radio-table-columns .form-item label {
-    margin: 0;
-}
-.JS .radio-table-columns .form-item > :last-child {
-    text-align: right;
-    flex: 1;
-}
-.JS .radio-table-columns .form-item.hidden-column {
-    background: #FBFBFB;
-    box-shadow: inset 2px 2px 2px #efefef;
-    border-color: #dfdfdf;
-}
-.JS .radio-table-columns .form-item.hidden-column label {
-    text-decoration: line-through;
-    opacity: 0.5;
-}
-.JS .radio-table-columns .form-item button {
-    display: inline;
-    width: auto;
-    height: 2em;
-    min-width: 85px;
-    margin: 0 0 0 0.6em;
-    white-space: nowrap;
-}
-.JS .radio-table-columns .form-item button:first-of-type {
-    margin-left: 0;
-}
-
-@media (max-width: 800px)
-{
-    .JS .radio-table-columns .form-item {
-        flex-direction: row;
-    }
-    .JS .radio-table-columns .form-item label {
-        margin-bottom: 0;
-    }
-}
-
-@media (max-width: 700px)
-{
-    .JS .radio-table-columns .form-item {
-        flex-direction: column;
-    }
-    .JS .radio-table-columns .form-item label {
-        margin-bottom: 0.7em;
-    }
-    .JS .radio-table-columns .form-item > :last-child {
-        text-align: center;
-        white-space: nowrap;
-    }
-}
-@media (max-width: 440px)
-{
-    .JS .radio-table-columns .form-item button {
-        min-width: auto;
-        height: auto;
-        font-size: 0.8em;
-        padding-top: 0.6em;
-        padding-bottom: 0.6em;
-    }
-}
diff --git a/assets/js/radio-table-columns.js b/assets/js/radio-table-columns.js
@@ -0,0 +1,7 @@
+import '../css/radio-table-columns.css';
+
+import { RadioTableColumnsUI } from './src/RadioTableColumnsUI.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    new RadioTableColumnsUI(document.querySelector('.radio-table-columns'));
+});
diff --git a/assets/js/radio-table-settings.js b/assets/js/radio-table-settings.js
@@ -1,6 +1,5 @@
 import '../css/radio-table-settings.css';
 
-import { RadioTableColumnsUI } from './src/RadioTableColumnsUI.js';
 import Huebee from 'huebee';
 
 function setupColorInputs()
@@ -49,8 +48,6 @@ function setupCustomWidthInput()
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    new RadioTableColumnsUI(document.querySelector('.radio-table-columns'));
-
     setupColorInputs();
     setupCustomWidthInput();
 });
diff --git a/src/Controller/RadioTableController.php b/src/Controller/RadioTableController.php
@@ -4,6 +4,7 @@
 
 use App\Entity\RadioTable;
 use App\Export\RadioTableExporterProvider;
+use App\Form\RadioTableColumnsType;
 use App\Form\RadioTableCreateType;
 use App\Form\RadioTableRemoveType;
 use App\Form\RadioTableSettingsType;
@@ -81,6 +82,29 @@ public function settings(RadioTable $radioTable, Request $request,
         ]);
     }
 
+    /**
+     * @Route({"pl": "/wykaz/{id}/ustawienia/kolumny", "en": "/list/{id}/settings/columns"}, name="radio_table.columns")
+     * @IsGranted("IS_AUTHENTICATED_REMEMBERED")
+     * @IsGranted("RADIO_TABLE_MODIFY", subject="radioTable", statusCode=404)
+     */
+    public function columns(RadioTable $radioTable, Request $request,
+                            EntityManagerInterface $entityManager): Response
+    {
+        $form = $this->createForm(RadioTableColumnsType::class, $radioTable);
+        $form->handleRequest($request);
+
+        if ($form->isSubmitted() && $form->isValid()) {
+            $entityManager->flush();
+
+            $this->addFlash('notice', 'common.notification.saved_changes');
+        }
+
+        return $this->render('radio_table/columns.html.twig', [
+            'form' => $form->createView(),
+            'radio_table' => $radioTable,
+        ]);
+    }
+
     /**
      * @Route(
      *     {"pl": "/wykaz/{id}/eksport/{_format}", "en": "/list/{id}/export/{_format}"},

diff --git a/src/Form/RadioTableColumnsType.php b/src/Form/RadioTableColumnsType.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Form;
+
+use App\Entity\RadioTable;
+use App\Form\Type\RadioTableColumnsType as RadioTableColumnsUIType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class RadioTableColumnsType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('columns', RadioTableColumnsUIType::class, [
+                'label_format' => 'column.%name%',
+                'translation_domain' => 'radio_table',
+            ])
+        ;
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'data_class' => RadioTable::class,
+        ]);
+    }
+}
diff --git a/src/Form/RadioTableSettingsType.php b/src/Form/RadioTableSettingsType.php
@@ -5,7 +5,6 @@
 use App\Entity\Embeddable\RadioTable\Appearance;
 use App\Entity\RadioTable;
 use App\Form\Type\IntegerUnitType;
-use App\Form\Type\RadioTableColumnsType;
 use FOS\CKEditorBundle\Form\Type\CKEditorType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
@@ -51,10 +50,6 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 },
                 'choice_translation_domain' => 'radio_table',
             ])
-            ->add('columns', RadioTableColumnsType::class, [
-                'label_format' => 'column.%name%',
-                'translation_domain' => 'radio_table',
-            ])
             ->add('appearanceBackgroundColor', TextType::class, [
                 'property_path' => 'appearance.backgroundColor',
 

diff --git a/templates/radio_table/columns.html.twig b/templates/radio_table/columns.html.twig
@@ -0,0 +1,63 @@
+{% extends 'layout.html.twig' %}
+
+{% block page_title %}{{ 'radio_table.columns.title'|trans }}{% endblock %}
+
+{% block head_closing %}
+    {{ encore_entry_link_tags('radio-table-columns') }}
+    {{ encore_entry_script_tags('radio-table-columns') }}
+{% endblock %}
+
+{% block context_menu %}
+    <ul>
+        <li>
+            <a href="{{ path('radio_table.show', {id: radio_table.id}) }}">
+                {{ 'radio_table.show.title'|trans }}
+            </a>
+        </li>
+        <li>
+            <a href="{{ path('radio_table.settings', {id: radio_table.id}) }}">
+                {{ 'radio_table.settings.title'|trans }}
+            </a>
+        </li>
+    </ul>
+{% endblock %}
+
+{% block page_content %}
+    <header>
+        <h1 class="separated-title">
+            <span>{{ 'radio_table.columns.title'|trans }}</span>
+            <span class="additional">{{ radio_table.name }}</span>
+        </h1>
+    </header>
+
+    {{ form_start(form) }}
+
+    <div class="tabbed-ui">
+        <div>
+            <h2>{{ 'radio_table.settings.heading.columns'|trans }}</h2>
+
+            <noscript>
+                <p class="information">
+                    {{ 'radio_table.settings.information.columns'|trans }}
+                </p>
+            </noscript>
+
+            <div class="radio-table-columns">
+                {{ form_row(form.columns) }}
+
+                <template class="radio-table-columns-buttons-template">
+                    <button type="button" class="toggle"
+                            data-show-label="{{ 'radio_table.columns.columns_ui.action.toggle_show'|trans }}"
+                            data-hide-label="{{ 'radio_table.columns.columns_ui.action.toggle_hide'|trans }}">
+                    </button>
+                    <button type="button" class="move-up">{{ 'radio_table.columns.columns_ui.action.move_up'|trans }}</button>
+                    <button type="button" class="move-down">{{ 'radio_table.columns.columns_ui.action.move_down'|trans }}</button>
+                </template>
+            </div>
+        </div>
+    </div>
+
+    <button>{{ 'common.action.save'|trans }}</button>
+
+    {{ form_end(form) }}
+{% endblock %}
diff --git a/templates/radio_table/settings.html.twig b/templates/radio_table/settings.html.twig
@@ -69,24 +69,9 @@
         <div>
             <h2>{{ 'radio_table.settings.heading.columns'|trans }}</h2>
 
-            <noscript>
-                <p class="information">
-                    {{ 'radio_table.settings.information.columns'|trans }}
-                </p>
-            </noscript>
-
-            <div class="radio-table-columns">
-                {{ form_row(form.columns) }}
-
-                <template class="radio-table-columns-buttons-template">
-                    <button type="button" class="toggle"
-                            data-show-label="{{ 'radio_table.settings.columns_ui.action.toggle_show'|trans }}"
-                            data-hide-label="{{ 'radio_table.settings.columns_ui.action.toggle_hide'|trans }}">
-                    </button>
-                    <button type="button" class="move-up">{{ 'radio_table.settings.columns_ui.action.move_up'|trans }}</button>
-                    <button type="button" class="move-down">{{ 'radio_table.settings.columns_ui.action.move_down'|trans }}</button>
-                </template>
-            </div>
+            <a class="button" href="{{ path('radio_table.columns', {id: radio_table.id}) }}">
+                {{ 'radio_table.settings.action.set_custom_columns'|trans }}
+            </a>
         </div>
 
         <div>

diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
@@ -65,6 +65,9 @@ radio_table:
             columns: 'Columns'
             appearance: 'Appearance'
 
+        action:
+            set_custom_columns: 'Change columns layout'
+
         form:
             name: 'List name'
             name.help: 'Place information about location here to make finding your list easier.'
@@ -93,6 +96,12 @@ radio_table:
         information:
             columns: 'Order of list columns can be changed through numbers. Change number to move column up or down. Use negative number to hide column. Please enable JavaScript in your browser for easy to use graphical interface.'
 
+    columns:
+        title: 'List columns'
+
+        heading:
+            columns: 'Columns'
+
         columns_ui:
             action:
                 toggle_show: 'Show'