Split export section from radio table settings screen

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

Hide file tree

Showing 9 changed files with 159 additions and 114 deletions.
diff --git a/assets/css/radio-table-export.css b/assets/css/radio-table-export.css
@@ -0,0 +1,23 @@
+/* export list */
+
+.radio-table-export-list {
+    list-style: none;
+    padding-left: 0;
+}
+.radio-table-export-list li {
+    margin-top: 0.8em;
+}
+.radio-table-export-list a {
+    margin-right: 0.7em;
+    width: 250px;
+    vertical-align: baseline;
+}
+
+@media (max-width: 800px)
+{
+    .radio-table-export-list a.button {
+        margin: 0.23em 0 0.7em 0;
+        width: 100%;
+        max-width: 100%;
+    }
+}
diff --git a/assets/css/radio-table-settings.css b/assets/css/radio-table-settings.css
@@ -79,28 +79,3 @@
         padding-bottom: 0.6em;
     }
 }
-
-
-/* export list */
-
-.radio-table-export-list {
-    list-style: none;
-    padding-left: 0;
-}
-.radio-table-export-list li {
-    margin-top: 0.8em;
-}
-.radio-table-export-list a {
-    margin-right: 0.7em;
-    width: 250px;
-    vertical-align: baseline;
-}
-
-@media (max-width: 800px)
-{
-    .radio-table-export-list a.button {
-        margin: 0.23em 0 0.7em 0;
-        width: 100%;
-        max-width: 100%;
-    }
-}
diff --git a/src/Controller/RadioTableController.php b/src/Controller/RadioTableController.php
@@ -115,9 +115,8 @@ public function download(RadioTable $radioTable, string $_format,
      */
     public function export(RadioTable $radioTable): Response
     {
-        return $this->redirectToRoute('radio_table.settings', [
-            'id' => $radioTable->getId(),
-            '_fragment' => 'export',
+        return $this->render('radio_table/export.html.twig', [
+            'radio_table' => $radioTable,
         ]);
     }
 

diff --git a/templates/radio_table/export.html.twig b/templates/radio_table/export.html.twig
@@ -0,0 +1,81 @@
+{% extends 'layout.html.twig' %}
+
+{% block page_title %}{{ 'radio_table.export.title'|trans }}{% endblock %}
+
+{% block head_closing %}
+    {{ encore_entry_link_tags('radio-table-export') }}
+    {{ encore_entry_script_tags('radio-table-export') }}
+{% 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.export.title'|trans }}</span>
+            <span class="additional">{{ radio_table.name }}</span>
+        </h1>
+    </header>
+
+    <div class="tabbed-ui">
+        <div>
+            <h2>{{ 'radio_table.export.heading.export'|trans }}</h2>
+
+            {% if radio_table.radioStationsCount > 0 %}
+                <p class="information">
+                    {{ 'radio_table.export.information.export'|trans }}
+                </p>
+
+                <ul class="radio-table-export-list">
+                    <li>
+                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'xlsx'}) }}" class="button">
+                            {{ 'radio_table.export.action.download_xlsx'|trans }}
+                        </a>
+                        {{ 'radio_table.export.text.about_xlsx'|trans }}
+                    </li>
+                    <li>
+                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'ods'}) }}" class="button">
+                            {{ 'radio_table.export.action.download_ods'|trans }}
+                        </a>
+                        {{ 'radio_table.export.text.about_ods'|trans }}
+                    </li>
+                    <li>
+                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'csv'}) }}" class="button">
+                            {{ 'radio_table.export.action.download_csv'|trans }}
+                        </a>
+                        {{ 'radio_table.export.text.about_csv'|trans }}
+                    </li>
+                    <li>
+                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'pdf'}) }}" class="button">
+                            {{ 'radio_table.export.action.download_pdf'|trans }}
+                        </a>
+                        {{ 'radio_table.export.text.about_pdf'|trans }}
+                    </li>
+                    <li>
+                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'html'}) }}" class="button">
+                            {{ 'radio_table.export.action.download_html'|trans }}
+                        </a>
+                        {{ 'radio_table.export.text.about_html'|trans }}
+                    </li>
+                </ul>
+            {% else %}
+                <p class="information">
+                    {{ 'radio_table.export.information.export_cannot_empty'|trans }}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/templates/radio_table/remove.html.twig b/templates/radio_table/remove.html.twig
@@ -16,7 +16,7 @@
         </li>
         <li>
             <a href="{{ path('radio_table.export', {id: radio_table.id}) }}">
-                {{ 'radio_table.remove.action.export'|trans }}
+                {{ 'radio_table.export.title'|trans }}
             </a>
         </li>
         <li>

diff --git a/templates/radio_table/settings.html.twig b/templates/radio_table/settings.html.twig
@@ -19,6 +19,11 @@
                 {{ 'radio_station.add.title'|trans }}
             </a>
         </li>
+        <li>
+            <a href="{{ path('radio_table.export', {id: radio_table.id}) }}">
+                {{ 'radio_table.export.title'|trans }}
+            </a>
+        </li>
         <li>
             <a href="{{ path('radio_station.bulk_remove', {id: radio_table.id}) }}">
                 {{ 'radio_station.bulk_remove.title'|trans }}
@@ -106,53 +111,6 @@
 
             {{ form_row(form.appearanceCollapsedComments) }}
         </div>
-
-        <div id="export">
-            <h2>{{ 'radio_table.settings.heading.export'|trans }}</h2>
-
-            {% if radio_table.radioStationsCount > 0 %}
-                <p class="information">
-                    {{ 'radio_table.settings.information.export'|trans }}
-                </p>
-
-                <ul class="radio-table-export-list">
-                    <li>
-                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'xlsx'}) }}" class="button">
-                            {{ 'radio_table.settings.export.action.download_xlsx'|trans }}
-                        </a>
-                        {{ 'radio_table.settings.export.text.about_xlsx'|trans }}
-                    </li>
-                    <li>
-                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'ods'}) }}" class="button">
-                            {{ 'radio_table.settings.export.action.download_ods'|trans }}
-                        </a>
-                        {{ 'radio_table.settings.export.text.about_ods'|trans }}
-                    </li>
-                    <li>
-                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'csv'}) }}" class="button">
-                            {{ 'radio_table.settings.export.action.download_csv'|trans }}
-                        </a>
-                        {{ 'radio_table.settings.export.text.about_csv'|trans }}
-                    </li>
-                    <li>
-                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'pdf'}) }}" class="button">
-                            {{ 'radio_table.settings.export.action.download_pdf'|trans }}
-                        </a>
-                        {{ 'radio_table.settings.export.text.about_pdf'|trans }}
-                    </li>
-                    <li>
-                        <a href="{{ path('radio_table.download', {id: radio_table.id, _format: 'html'}) }}" class="button">
-                            {{ 'radio_table.settings.export.action.download_html'|trans }}
-                        </a>
-                        {{ 'radio_table.settings.export.text.about_html'|trans }}
-                    </li>
-                </ul>
-            {% else %}
-                <p class="information">
-                    {{ 'radio_table.settings.information.export_cannot_empty'|trans }}
-                </p>
-            {% endif %}
-        </div>
     </div>
 
     <button>{{ 'common.action.save'|trans }}</button>

diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
@@ -64,7 +64,6 @@ radio_table:
             visibility: 'Visibility'
             columns: 'Columns'
             appearance: 'Appearance'
-            export: 'Export'
 
         form:
             name: 'List name'
@@ -93,8 +92,6 @@ 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.'
-            export: 'Choose preferred export format to download the whole list to your computer. List will be exported with current sorting and with enabled columns only. Extra RDS information is not included.'
-            export_cannot_empty: 'You cannot export empty list.'
 
         columns_ui:
             action:
@@ -103,25 +100,32 @@ radio_table:
                 move_up: 'Move up'
                 move_down: 'Move down'
 
-        export:
-            action:
-                download_pdf: 'Download PDF document'
-                download_csv: 'Download CSV sheet'
-                download_html: 'Download HTML page'
-                download_xlsx: 'Download XLSX sheet'
-                download_ods: 'Download ODS sheet'
-            text:
-                about_pdf: 'PDF — standard document for reading and printing'
-                about_csv: 'CSV — dataset for importing into spreadsheet'
-                about_html: 'HTML — web page file for internet browsers'
-                about_xlsx: 'XLSX — spreadsheet document for Microsoft Excel 2007'
-                about_ods: 'ODS — spreadsheet document for LibreOffice and Apache OpenOffice'
+    export:
+        title: 'Export list'
 
-    remove:
-        title: 'Delete list'
+        heading:
+            export: 'Export'
 
         action:
-            export: 'Export list'
+            download_pdf: 'Download PDF document'
+            download_csv: 'Download CSV sheet'
+            download_html: 'Download HTML page'
+            download_xlsx: 'Download XLSX sheet'
+            download_ods: 'Download ODS sheet'
+
+        text:
+            about_pdf: 'PDF — standard document for reading and printing'
+            about_csv: 'CSV — dataset for importing into spreadsheet'
+            about_html: 'HTML — web page file for internet browsers'
+            about_xlsx: 'XLSX — spreadsheet document for Microsoft Excel 2007'
+            about_ods: 'ODS — spreadsheet document for LibreOffice and Apache OpenOffice'
+
+        information:
+            export: 'Choose preferred export format to download the whole list to your computer. List will be exported with current sorting and with enabled columns only. Extra RDS information is not included.'
+            export_cannot_empty: 'You cannot export empty list.'
+
+    remove:
+        title: 'Delete list'
 
         heading:
             remove_radio_table: 'Delete list'

diff --git a/translations/messages.pl.yaml b/translations/messages.pl.yaml
@@ -64,7 +64,6 @@ radio_table:
             visibility: 'Widoczność'
             columns: 'Kolumny'
             appearance: 'Wygląd'
-            export: 'Eksport'
 
         form:
             name: 'Nazwa wykazu'
@@ -93,8 +92,6 @@ radio_table:
 
         information:
             columns: "Kolejność kolumn wykazu jest uzależniona od przypisanych do nich liczb. Aby przenieść kolumnę, zmień jej liczbę. Aby ukryć kolumnę, wpisz liczbę ujemną. Aby skorzystać z\u00A0wygodnego graficznego edytora kolumn, włącz JavaScript w\u00A0przeglądarce."
-            export: "Wybierz pożądany format eksportu, aby pobrać cały wykaz w\u00A0formie pliku na swój komputer. Wykaz\u00A0eksportowany jest z\u00A0aktualnie ustawionym sortowaniem i\u00A0aktualnie widocznymi kolumnami. Pomijane\u00A0są\u00A0szczegółowe informacje o\u00A0RDS."
-            export_cannot_empty: 'Ten wykaz jest pusty. Nie można go wyeksportować.'
 
         columns_ui:
             action:
@@ -103,25 +100,32 @@ radio_table:
                 move_up: 'Do góry'
                 move_down: 'W dół'
 
-        export:
-            action:
-                download_pdf: 'Pobierz dokument PDF'
-                download_csv: 'Pobierz arkusz CSV'
-                download_html: 'Pobierz stronę HTML'
-                download_xlsx: 'Pobierz arkusz XLSX'
-                download_ods: 'Pobierz arkusz ODS'
-            text:
-                about_pdf: "PDF — dokument elektroniczny do przeglądania i\u00A0druku"
-                about_csv: "CSV — zestaw danych do zaimportowania i\u00A0edycji w\u00A0arkuszu kalkulacyjnym"
-                about_html: "HTML — plik strony internetowej otwierany w\u00A0przeglądarce"
-                about_xlsx: "XLSX — arkusz kalkulacyjny programu Microsoft Excel\u00A02007"
-                about_ods: "ODS — arkusz kalkulacyjny pakietów LibreOffice oraz Apache\u00A0OpenOffice"
+    export:
+        title: 'Eksportuj wykaz'
 
-    remove:
-        title: 'Usuń wykaz'
+        heading:
+            export: 'Eksport'
 
         action:
-            export: 'Eksport wykazu'
+            download_pdf: 'Pobierz dokument PDF'
+            download_csv: 'Pobierz arkusz CSV'
+            download_html: 'Pobierz stronę HTML'
+            download_xlsx: 'Pobierz arkusz XLSX'
+            download_ods: 'Pobierz arkusz ODS'
+
+        text:
+            about_pdf: "PDF — dokument elektroniczny do przeglądania i\u00A0druku"
+            about_csv: "CSV — zestaw danych do zaimportowania i\u00A0edycji w\u00A0arkuszu kalkulacyjnym"
+            about_html: "HTML — plik strony internetowej otwierany w\u00A0przeglądarce"
+            about_xlsx: "XLSX — arkusz kalkulacyjny programu Microsoft Excel\u00A02007"
+            about_ods: "ODS — arkusz kalkulacyjny pakietów LibreOffice oraz Apache\u00A0OpenOffice"
+
+        information:
+            export: "Wybierz pożądany format eksportu, aby pobrać cały wykaz w\u00A0formie pliku na swój komputer. Wykaz\u00A0eksportowany jest z\u00A0aktualnie ustawionym sortowaniem i\u00A0aktualnie widocznymi kolumnami. Pomijane\u00A0są\u00A0szczegółowe informacje o\u00A0RDS."
+            export_cannot_empty: 'Ten wykaz jest pusty. Nie można go wyeksportować.'
+
+    remove:
+        title: 'Usuń wykaz'
 
         heading:
             remove_radio_table: 'Usuwanie wykazu'

diff --git a/webpack.config.js b/webpack.config.js
@@ -31,6 +31,7 @@ Encore
     .addStyleEntry('homepage', './assets/css/homepage.css')
     .addStyleEntry('user-login-register', './assets/css/user-login-register.css')
     .addStyleEntry('user-public-profile', './assets/css/user-public-profile.css')
+    .addStyleEntry('radio-table-export', './assets/css/radio-table-export.css')
     .addStyleEntry('radio-station-bulk-remove', './assets/css/radio-station-bulk-remove.css')
     .addStyleEntry('all-radio-tables', './assets/css/all-radio-tables.css')
     .addStyleEntry('static-page', './assets/css/static-page.css')
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ @@
             </li>
             <li>
                 <a href="{{ path('radio_table.export', {id: radio_table.id}) }}">
-                    {{ 'radio_table.remove.action.export'|trans }}
+                    {{ 'radio_table.export.title'|trans }}
                 </a>
             </li>
             <li>
@@ Expand Down @@