feat: redesign internal news backend UI and add news list modal

Classes/Controller/DateController.php

@@ -55,6 +55,20 @@ public function notifiesAction(): ResponseInterface
         ]);
     }
 
+    public function listAction(): JsonResponse
+    {
+        return new JsonResponse(
+            [
+                'result' => ViewFactoryHelper::renderView(
+                    'Default/List.html',
+                    [
+                        'records' => $this->newsRepository->findAllByCurrentUser() ?? [],
+                    ],
+                ),
+            ],
+        );
+    }
+
     public function newsAction(): ResponseInterface
     {
         $queryParams = $GLOBALS['TYPO3_REQUEST']->getQueryParams();

Classes/Widgets/Provider/ListInternalNewsButtonProvider.php

@@ -14,6 +14,7 @@
 namespace Xima\XimaTypo3InternalNews\Widgets\Provider;
 
 use TYPO3\CMS\Backend\Routing\UriBuilder;
+use TYPO3\CMS\Core\Information\Typo3Version;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Dashboard\Widgets\{ButtonProviderInterface, ElementAttributesInterface};
 
@@ -35,13 +36,20 @@ public function getTitle(): string
     public function getLink(): string
     {
         $uriBuilder = GeneralUtility::makeInstance(UriBuilder::class);
+
+        // TYPO3 v14 renamed the record list module to "records"; "web_list" only remains
+        // as an alias. UriBuilder generates the CSRF token for the passed route name, while
+        // RouteDispatcher validates it against the resolved identifier — passing the alias
+        // causes a token mismatch and bounces the user back to the start module (dashboard).
+        $listModuleIdentifier = (new Typo3Version())->getMajorVersion() >= 14 ? 'records' : 'web_list';
+
         $params = [
             'id' => 0,
             'table' => 'tx_ximatypo3internalnews_domain_model_news',
             'returnUrl' => (string) $uriBuilder->buildUriFromRoute('dashboard'),
         ];
 
-        return (string) $uriBuilder->buildUriFromRoute('web_list', $params);
+        return (string) $uriBuilder->buildUriFromRoute($listModuleIdentifier, $params);
     }
 
     public function getTarget(): string

Configuration/Backend/AjaxRoutes.php

@@ -20,4 +20,8 @@
         'path' => '/internal-news/detail',
         'target' => Xima\XimaTypo3InternalNews\Controller\DateController::class.'::newsAction',
     ],
+    'internal_news_list' => [
+        'path' => '/internal-news/list',
+        'target' => Xima\XimaTypo3InternalNews\Controller\DateController::class.'::listAction',
+    ],
 ];

Configuration/TCA/tx_ximatypo3internalnews_domain_model_news.php

@@ -86,7 +86,6 @@
                 'enableRichtext' => true,
                 'rows' => 8,
                 'cols' => 40,
-                'max' => 2000,
                 'eval' => 'trim',
             ],
         ],

Resources/Private/Language/de.locallang.xlf

@@ -29,7 +29,11 @@
 			</trans-unit>
 			<trans-unit id="toolbaritem.description">
 				<source />
-				<target><![CDATA[Hier finden Sie die neuesten internen Nachrichten. Alle Neuigkeiten finden Sie im internen News-Widget auf Ihrem <a href="%s">Dashboard</a>.]]></target>
+				<target>Hier finden Sie die neuesten internen Nachrichten. Über "Alle News anzeigen" sehen Sie die vollständige Liste.</target>
+			</trans-unit>
+			<trans-unit id="toolbaritem.showAll">
+				<source />
+				<target>Alle News anzeigen</target>
 			</trans-unit>
 			<trans-unit id="empty">
 				<source />

Resources/Private/Language/locallang.xlf

@@ -22,7 +22,10 @@
 				<source>Internal News</source>
 			</trans-unit>
 			<trans-unit id="toolbaritem.description">
-				<source><![CDATA[Here you can find the latest internal news. Find all news within the internal news widget on your <a href="%s">dashboard</a>.]]></source>
+				<source>Here you can find the latest internal news. Use "Show all news" to view the complete list.</source>
+			</trans-unit>
+			<trans-unit id="toolbaritem.showAll">
+				<source>Show all news</source>
 			</trans-unit>
 			<trans-unit id="empty">
 				<source>No internal news available</source>

Resources/Private/Partials/Detail.html

@@ -2,6 +2,7 @@
     xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
     xmlns:xin="http://typo3.org/ns/Xima/XimaTypo3InternalNews/ViewHelpers">
 
+<div class="internal-news-detail">
 <h2>{record.title}</h2>
 <f:if condition="{record.top}">
     <span class="badge badge-danger internal-news--top">
@@ -27,16 +28,16 @@ <h2>{record.title}</h2>
         <div class="internal-news--media">
             <f:if condition="{record.media.originalResource.originalFile.properties.mime_type} == 'image/gif'">
                 <f:then>
-                    <img src="{record.media.originalResource.publicUrl}" alt="{record.title}" width="760px"/>
+                    <img src="{record.media.originalResource.publicUrl}" alt="{record.title}"/>
                 </f:then>
                 <f:else if="{record.media.originalResource.originalFile.properties.mime_type} == 'video/mp4' || {record.media.originalResource.originalFile.properties.mime_type} == 'video/webm' || {record.media.originalResource.originalFile.properties.mime_type} == 'video/ogg'">
-                    <video controls width="760px">
+                    <video controls>
                         <source src="{record.media.originalResource.publicUrl}" type="{record.media.originalResource.originalFile.properties.mime_type}">
                         Your browser does not support the video tag.
                     </video>
                 </f:else>
                 <f:else>
-                    <f:image image="{record.media}" alt="{record.title}" width="760px"/>
+                    <f:image image="{record.media}" alt="{record.title}" width="720"/>
                 </f:else>
             </f:if>
         </div>
@@ -65,3 +66,4 @@ <h4>
         </f:for>
     </div>
 </f:if>
+</div>

Resources/Private/Partials/NewsList.html

@@ -0,0 +1,8 @@
+<html data-namespace-typo3-fluid="true"
+    xmlns:xin="http://typo3.org/ns/Xima/XimaTypo3InternalNews/ViewHelpers">
+
+<ul class="{wrapperClass}">
+    <f:for each="{records}" as="record">
+        <f:render partial="Item" arguments="{record: record, top: '{xin:isTopAndNew(news: record)}'}"/>
+    </f:for>
+</ul>

Resources/Private/Templates/Backend/ToolbarItems/NewsItemDropDown.html

@@ -1,6 +1,4 @@
-<html data-namespace-typo3-fluid="true"
-    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
-    xmlns:xin="http://typo3.org/ns/Xima/XimaTypo3InternalNews/ViewHelpers">
+<html data-namespace-typo3-fluid="true">
 
 <p class="h3 dropdown-headline">
     <span class="internal-news--icon-round">
@@ -9,24 +7,23 @@
     <f:translate key="toolbaritem.title" extensionName="XimaTypo3InternalNews"/>
 </p>
 <p class="dropdown-item-text">
-    <f:format.raw>
-        <f:translate key="toolbaritem.description" extensionName="XimaTypo3InternalNews"
-                    arguments="{0: '{be:moduleLink(route:\'dashboard\')}'}"/>
-    </f:format.raw>
+    <f:translate key="toolbaritem.description" extensionName="XimaTypo3InternalNews"/>
 </p>
-<ul class="dropdown-list internal-news--toolbar">
-    <f:if condition="{data}">
-        <f:then>
-            <f:for each="{data}" as="record">
-                <f:render partial="Item" arguments="{record: record, top: '{xin:isTopAndNew(news: record)}'}"/>
-            </f:for>
-        </f:then>
-        <f:else>
-            <div class="internal-news--empty">
-                <p>
-                    <f:translate key="empty" extensionName="XimaTypo3InternalNews"/>
-                </p>
-            </div>
-        </f:else>
-    </f:if>
-</ul>
+<f:if condition="{data}">
+    <f:then>
+        <f:render partial="NewsList" arguments="{records: data, wrapperClass: 'dropdown-list internal-news--toolbar'}"/>
+    </f:then>
+    <f:else>
+        <div class="internal-news--empty">
+            <p>
+                <f:translate key="empty" extensionName="XimaTypo3InternalNews"/>
+            </p>
+        </div>
+    </f:else>
+</f:if>
+<div class="internal-news--dropdown-footer">
+    <button type="button" class="btn btn-default btn-sm internal-news--show-all">
+        <core:icon identifier="actions-list-alternative" size="small" alternativeMarkupIdentifier="inline"/>
+        <f:translate key="toolbaritem.showAll" extensionName="XimaTypo3InternalNews"/>
+    </button>
+</div>

Resources/Private/Templates/Backend/Widgets/List.html

@@ -13,11 +13,7 @@
     style="--mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 0) 100% 90% / 100% 100% repeat-x;-webkit-mask: var(--mask);mask: var(--mask);">
     <f:if condition="{records}">
         <f:then>
-            <ul class="internal-news--wrapper">
-            <f:for each="{records}" as="record">
-                <f:render partial="Item" arguments="{record: record}"/>
-            </f:for>
-            </ul>
+            <f:render partial="NewsList" arguments="{records: records, wrapperClass: 'internal-news--wrapper'}"/>
         </f:then>
         <f:else>
             <div class="row widget-no-items-found">

Resources/Private/Templates/Default/List.html

@@ -0,0 +1,14 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+    data-namespace-typo3-fluid="true">
+
+<f:if condition="{records}">
+    <f:then>
+        <f:render partial="NewsList" arguments="{records: records, wrapperClass: 'internal-news--list'}"/>
+    </f:then>
+    <f:else>
+        <div class="internal-news--empty">
+            <p><f:translate key="empty" extensionName="XimaTypo3InternalNews"/></p>
+        </div>
+    </f:else>
+</f:if>
+</html>

Resources/Public/JavaScript/toolbar.js

@@ -19,6 +19,13 @@ class InternalNewsToolbar {
           });
         });
       });
+
+      document.querySelectorAll('.internal-news--show-all').forEach(element => {
+        element.addEventListener('click', e => {
+          e.preventDefault();
+          InternalNewsUtils.fetchNewsList();
+        });
+      });
     }
 }