Use new sorting/filtering UI for moderation list

Close #3250

diff --git a/com.woltlab.wcf/templates/moderationList.tpl b/com.woltlab.wcf/templates/moderationList.tpl
index 3ac04c656b870f00b8c309689f254c1c2c603eeb..f9f30ea21fff01fdc737dce485189350c0e08c97 100644 (file)
--- a/com.woltlab.wcf/templates/moderationList.tpl
+++ b/com.woltlab.wcf/templates/moderationList.tpl
@@ -3,47 +3,6 @@
 {capture assign='contentTitle'}{if $status == 2}{lang}wcf.moderation.doneItems{/lang}{else}{lang}wcf.moderation.outstandingItems{/lang}{/if} <span class="badge">{#$items}</span>{/capture}
 
 {capture assign='sidebarRight'}
-       <section class="box" data-static-box-identifier="com.woltlab.wcf.ModerationListFilters">
-               {* moderation type *}
-               <h2 class="boxTitle">{lang}wcf.moderation.filterByType{/lang}</h2>
-               
-               <nav class="boxContent">
-                       <ul class="boxMenu">
-                               <li{if $definitionID == 0} class="active"{/if}><a class="boxMenuLink" href="{link controller='ModerationList'}definitionID=0&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField={@$sortField}&sortOrder={@$sortOrder}{/link}">{lang}wcf.moderation.type.all{/lang}</a></li>
-                               {foreach from=$availableDefinitions key=__definitionID item=definitionName}
-                                       <li{if $definitionID == $__definitionID} class="active"{/if}><a class="boxMenuLink" href="{link controller='ModerationList'}definitionID={@$__definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField={@$sortField}&sortOrder={@$sortOrder}{/link}">{lang}wcf.moderation.type.{$definitionName}{/lang}</a></li>
-                               {/foreach}
-                               
-                               {event name='sidebarModerationType'}
-                       </ul>
-               </nav>
-               
-               {* assigned user *}
-               <h2 class="boxTitle">{lang}wcf.moderation.filterByUser{/lang}</h2>
-               
-               <nav class="boxContent">
-                       <ul class="boxMenu">
-                               <li{if $assignedUserID == -1} class="active"{/if}><a class="boxMenuLink" href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID=-1&status={@$status}&pageNo={@$pageNo}&sortField={@$sortField}&sortOrder={@$sortOrder}{/link}">{lang}wcf.moderation.filterByUser.allEntries{/lang}</a></li>
-                               <li{if $assignedUserID == 0} class="active"{/if}><a class="boxMenuLink" href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID=0&status={@$status}&pageNo={@$pageNo}&sortField={@$sortField}&sortOrder={@$sortOrder}{/link}">{lang}wcf.moderation.filterByUser.nobody{/lang}</a></li>
-                               <li{if $assignedUserID == $__wcf->getUser()->userID} class="active"{/if}><a class="boxMenuLink" href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$__wcf->getUser()->userID}&status={@$status}&pageNo={@$pageNo}&sortField={@$sortField}&sortOrder={@$sortOrder}{/link}">{lang}wcf.moderation.filterByUser.myself{/lang}</a></li>
-                               
-                               {event name='sidebarAssignedUser'}
-                       </ul>
-               </nav>
-               
-               {* status *}
-               <h2 class="boxTitle">{lang}wcf.moderation.status{/lang}</h2>
-               
-               <nav class="boxContent">
-                       <ul class="boxMenu">
-                               <li{if $status == -1} class="active"{/if}><a class="boxMenuLink" href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status=-1&pageNo={@$pageNo}&sortField={@$sortField}&sortOrder={@$sortOrder}{/link}">{lang}wcf.moderation.status.outstanding{/lang}</a></li>
-                               <li{if $status == 2} class="active"{/if}><a class="boxMenuLink" href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status=2&pageNo={@$pageNo}&sortField={@$sortField}&sortOrder={@$sortOrder}{/link}">{lang}wcf.moderation.status.done{/lang}</a></li>
-                               
-                               {event name='sidebarStatus'}
-                       </ul>
-               </nav>
-       </section>
-       
        {event name='sidebarBoxes'}
 {/capture}
 
@@ -64,11 +23,66 @@
                <ol class="tabularList">
                        <li class="tabularListRow tabularListRowHead">
                                <ol class="tabularListColumns">
-                                       <li class="columnSubject">{lang}wcf.moderation.title{/lang}</li>
-                                       <li class="columnStats{if $sortField == 'comments'} active {@$sortOrder}{/if}"><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField=comments&sortOrder={if $sortField == 'comments' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.comments{/lang}</a></li>
-                                       <li class="columnLastPost{if $sortField === 'lastChangeTime'} active {@$sortOrder}{/if}"><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField=lastChangeTime&sortOrder={if $sortField == 'lastChangeTime' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.moderation.lastChangeTime{/lang}</a></li>
-                                       
-                                       {event name='columnHeads'}
+                                       <li class="columnSort">
+                                               <ul class="inlineList">
+                                                       <li>
+                                                               <a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField={$sortField}&sortOrder={if $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">
+                                                                       <span class="icon icon16 fa-sort-amount-{$sortOrder|strtolower} jsTooltip" title="{lang}wcf.search.sortBy{/lang} ({lang}wcf.global.sortOrder.{if $sortOrder === 'ASC'}ascending{else}descending{/if}{/lang})"></span>
+                                                               </a>
+                                                       </li>
+                                                       <li>
+                                                               <div class="dropdown">
+                                                                       <span class="dropdownToggle">{lang}wcf.moderation.{$sortField}{/lang}</span>
+               
+                                                                       <ul class="dropdownMenu">
+                                                                               {foreach from=$validSortFields item=_sortField}
+                                                                                       <li{if $_sortField === $sortField} class="active"{/if}><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField={$_sortField}&sortOrder={if $sortField == $_sortField && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.moderation.{$_sortField}{/lang}</a></li>
+                                                                               {/foreach}
+                                                                       </ul>
+                                                               </div>
+                                                       </li>
+                                               </ul>
+                                       </li>
+                                       {hascontent}
+                                               <li class="columnFilter">
+                                                       <ul class="inlineList">
+                                                               {content}
+                                                                       {if $definitionID}
+                                                                               <li>
+                                                                                       <span class="icon icon16 fa-tag jsTooltip" title="{lang}wcf.moderation.filterByType{/lang}"></span>
+                                                                                       {lang}wcf.moderation.type.{$availableDefinitions[$definitionID]}{/lang}
+                                                                               </li>
+                                                                       {/if}
+                                                                       
+                                                                       {if !$assignedUserID || $assignedUserID == $__wcf->getUser()->userID}
+                                                                               <li>
+                                                                                       <span class="icon icon16 fa-user jsTooltip" title="{lang}wcf.moderation.filterByUser{/lang}"></span>
+                                                                                       {if !$assignedUserID}
+                                                                                               {lang}wcf.moderation.filterByUser.nobody{/lang}
+                                                                                       {else}
+                                                                                               {lang}wcf.moderation.filterByUser.myself{/lang}
+                                                                                       {/if}
+                                                                               </li>
+                                                                       {/if}
+                                                                       
+                                                                       {if $status == -1 || $status == 2}
+                                                                               <li>
+                                                                                       {if $status == -1}
+                                                                                               <span class="icon icon16 fa-circle-o jsTooltip" title="{lang}wcf.moderation.status{/lang}"></span>
+                                                                                               {lang}wcf.moderation.status.outstanding{/lang}
+                                                                                       {else}
+                                                                                               <span class="icon icon16 fa-check-circle-o jsTooltip" title="{lang}wcf.moderation.status{/lang}"></span>
+                                                                                               {lang}wcf.moderation.status.done{/lang}
+                                                                                       {/if}
+                                                                               </li>
+                                                                       {/if}
+                                                               {/content}
+                                                       </ul>
+                                               </li>
+                                       {/hascontent}
+                                       <li class="columnApplyFilter jsOnly">
+                                               <button class="small jsStaticDialog" data-dialog-id="moderationListSortFilter"><span class="icon icon16 fa-filter"></span> {lang}wcf.global.filter{/lang}</button>
+                                       </li>
                                </ol>
                        </li>
                        
@@ -145,9 +159,61 @@
                {/hascontent}
        </footer>
 {else}
-       <p class="info" role="status">{lang}wcf.global.noItems{/lang}</p>
+       <p class="info" role="status">{lang}wcf.moderation.noEntries{/lang}</p>
 {/if}
 
+<div id="moderationListSortFilter" class="jsStaticDialogContent" data-title="{lang}wcf.moderation.filter{/lang}">
+       <form method="post" action="{link controller='ModerationList'}{/link}">
+               <div class="section">
+                       <dl>
+                               <dt><label for="definitionID">{lang}wcf.moderation.filterByType{/lang}</label></dt>
+                               <dd>
+                                       <select name="definitionID" id="definitionID">
+                                               <option value="0">{lang}wcf.moderation.type.all{/lang}</option>
+                                               {foreach from=$availableDefinitions key=__definitionID item=definitionName}
+                                                       <option value="{$__definitionID}"{if $__definitionID == $definitionID} selected{/if}>{lang}wcf.moderation.type.{$definitionName}{/lang}</option>
+                                               {/foreach}
+
+                                               {event name='filterModerationType'}
+                                       </select>
+                               </dd>
+                       </dl>
+                       
+                       <dl>
+                               <dt><label for="assignedUserID">{lang}wcf.moderation.filterByUser{/lang}</label></dt>
+                               <dd>
+                                       <select name="assignedUserID" id="assignedUserID">
+                                               <option value="-1"{if $assignedUserID == -1} selected{/if}>{lang}wcf.moderation.filterByUser.allEntries{/lang}</option>
+                                               <option value="0"{if $assignedUserID == 0} selected{/if}>{lang}wcf.moderation.filterByUser.nobody{/lang}</option>
+                                               <option value="{@$__wcf->getUser()->userID}"{if $assignedUserID == $__wcf->getUser()->userID} selected{/if}>{lang}wcf.moderation.filterByUser.myself{/lang}</option>
+                                               
+                                               {event name='filterAssignedUser'}
+                                       </select>
+                               </dd>
+                       </dl>
+
+                       <dl>
+                               <dt><label for="status">{lang}wcf.moderation.status{/lang}</label></dt>
+                               <dd>
+                                       <select name="status" id="status">
+                                               <option value="-1"{if $status == -1} selected{/if}>{lang}wcf.moderation.status.outstanding{/lang}</option>
+                                               <option value="2"{if $status == 2} selected{/if}>{lang}wcf.moderation.status.done{/lang}</option>
+                                               
+                                               {event name='filterStatus'}
+                                       </select>
+                               </dd>
+                       </dl>
+               </div>
+
+               <div class="formSubmit">
+                       <input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
+                       <a href="{link controller='ModerationList'}{/link}" class="button">{lang}wcf.global.button.reset{/lang}</a>
+                       <input type="hidden" name="sortField" value="{$sortField}">
+                       <input type="hidden" name="sortOrder" value="{$sortOrder}">
+               </div>
+       </form>
+</div>
+
 <script data-relocate="true">
        $(function() {
                new WCF.Moderation.Queue.MarkAsRead();

diff --git a/wcfsetup/install/files/lib/page/ModerationListPage.class.php b/wcfsetup/install/files/lib/page/ModerationListPage.class.php
index 1bc3162856ae172ee06ba7212fb673e85fb82ae1..1bf0d8b26c2c92d39801165e28b82dd2b3fbd8d2 100644 (file)
--- a/wcfsetup/install/files/lib/page/ModerationListPage.class.php
+++ b/wcfsetup/install/files/lib/page/ModerationListPage.class.php
@@ -4,7 +4,9 @@ use wcf\data\moderation\queue\ModerationQueue;
 use wcf\data\moderation\queue\ViewableModerationQueueList;
 use wcf\system\exception\IllegalLinkException;
 use wcf\system\moderation\queue\ModerationQueueManager;
+use wcf\system\request\LinkHandler;
 use wcf\system\WCF;
+use wcf\util\HeaderUtil;
 
 /**
  * List of moderation queue entries.
@@ -69,7 +71,13 @@ class ModerationListPage extends SortablePage {
        /**
         * @inheritDoc
         */
-       public $validSortFields = ['assignedUsername', 'lastChangeTime', 'queueID', 'time', 'username', 'comments'];
+       public $validSortFields = ['username', 'time', 'comments', 'assignedUsername', 'lastChangeTime'];
+       
+       /**
+        * indicates if any filter is being used
+        * @var bool
+        */
+       public $hasActiveFilter = false;
        
        /**
         * @inheritDoc
@@ -87,6 +95,16 @@ class ModerationListPage extends SortablePage {
                                throw new IllegalLinkException();
                        }
                }
+               
+               if ($this->assignedUserID !== -1 || $this->status !== -1 || $this->definitionID !== 0) {
+                       $this->hasActiveFilter = true;
+               }
+               
+               if (!empty($_POST)) {
+                       $url = http_build_query($_POST, '', '&');
+                       HeaderUtil::redirect(LinkHandler::getInstance()->getControllerLink(static::class, [], $url));
+                       exit;
+               }
        }
        
        /**
@@ -128,7 +146,9 @@ class ModerationListPage extends SortablePage {
                        'assignedUserID' => $this->assignedUserID,
                        'availableDefinitions' => $this->availableDefinitions,
                        'definitionID' => $this->definitionID,
-                       'status' => $this->status
+                       'status' => $this->status,
+                       'validSortFields' => $this->validSortFields,
+                       'hasActiveFilter' => $this->hasActiveFilter,
                ]);
        }
 }

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 79651bfffd82dbb726b40a2f0f2fb7b9f38390f7..75b37346f48a5cefcbae96ae1ea862f185e381d1 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -4151,6 +4151,8 @@ Dateianhänge:
                <item name="wcf.moderation.assignedUser.change"><![CDATA[Zugewiesenen Benutzer ändern]]></item>
                <item name="wcf.moderation.assignedUser.error.notAffected"><![CDATA[Dieser Benutzer hat unzureichende Zugriffsrechte]]></item>
                <item name="wcf.moderation.assignedUser.nobody"><![CDATA[Niemand]]></item>
+               <item name="wcf.moderation.assignedUsername"><![CDATA[Zugewiesener Benutzer]]></item>
+               <item name="wcf.moderation.filter"><![CDATA[Einträge filtern]]></item>
                <item name="wcf.moderation.filterByType"><![CDATA[Typ]]></item>
                <item name="wcf.moderation.filterByUser"><![CDATA[Zugewiesener Benutzer]]></item>
                <item name="wcf.moderation.filterByUser.allEntries"><![CDATA[Alle Einträge]]></item>
@@ -4200,6 +4202,9 @@ Dateianhänge:
                <item name="wcf.moderation.jumpToContent"><![CDATA[Zum Inhalt gehen]]></item>
                <item name="wcf.moderation.markAllAsRead"><![CDATA[Alle Einträge als gelesen markieren]]></item>
                <item name="wcf.moderation.markAsRead.doubleClick"><![CDATA[Eintrag durch Doppelklick als gelesen markieren]]></item>
+               <item name="wcf.moderation.comments"><![CDATA[Kommentare]]></item>
+               <item name="wcf.moderation.username"><![CDATA[Autor]]></item>
+               <item name="wcf.moderation.noEntries"><![CDATA[Es wurden keine Einträge gefunden.{if $hasActiveFilter} <a href="#" class="jsStaticDialog" data-dialog-id="moderationListSortFilter" role="button">Die aktiven Filter anpassen.</a>{/if}]]></item>
        </category>
        <category name="wcf.moderation.activation">
                <item name="wcf.moderation.activation"><![CDATA[Freischaltung]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index a5af19c62ef10de457b294988cdbdda49c768998..7f4f738d7842a91d85ffef9600eb9dab290c5f22 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -4096,6 +4096,8 @@ Attachments:
                <item name="wcf.moderation.assignedUser.change"><![CDATA[Change Assigned User]]></item>
                <item name="wcf.moderation.assignedUser.error.notAffected"><![CDATA[This user does not have sufficient privileges.]]></item>
                <item name="wcf.moderation.assignedUser.nobody"><![CDATA[Nobody]]></item>
+               <item name="wcf.moderation.assignedUsername"><![CDATA[Assigned User]]></item>
+               <item name="wcf.moderation.filter"><![CDATA[Filter Items]]></item>
                <item name="wcf.moderation.filterByType"><![CDATA[Type]]></item>
                <item name="wcf.moderation.filterByUser"><![CDATA[Assigned User]]></item>
                <item name="wcf.moderation.filterByUser.allEntries"><![CDATA[All Items]]></item>
@@ -4145,6 +4147,9 @@ Attachments:
                <item name="wcf.moderation.jumpToContent"><![CDATA[Go to Related Content]]></item>
                <item name="wcf.moderation.markAllAsRead"><![CDATA[Mark All Items Read]]></item>
                <item name="wcf.moderation.markAsRead.doubleClick"><![CDATA[Double-Click to Mark This Item Read]]></item>
+               <item name="wcf.moderation.comments"><![CDATA[Comments]]></item>
+               <item name="wcf.moderation.username"><![CDATA[Author]]></item>
+               <item name="wcf.moderation.noEntries"><![CDATA[There are no items at the moment.{if $hasActiveFilter} <a href="#" class="jsStaticDialog" data-dialog-id="moderationListSortFilter" role="button">Change the applied filters.</a>{/if}]]></item>
        </category>
        <category name="wcf.moderation.activation">
                <item name="wcf.moderation.activation"><![CDATA[Approval]]></item>