Skip to content

Migrate LabelListPage to grid view #6245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cyperghost merged 3 commits into from
Mar 18, 2025
Merged

Migrate LabelListPage to grid view #6245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8929d50
Migrate `LabelList` to grid view
Cyperghost Mar 17, 2025
fcfe1d3
Remove sorting notice
Cyperghost Mar 18, 2025
c8b0877
Add endpoint to deleting labels
Cyperghost Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion wcfsetup/install/files/acp/templates/labelGroupAdd.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<ul>
{if $action == 'edit'}
<li><button type="button" class="button jsChangeShowOrder">{icon name='up-down'} <span>{lang}wcf.global.changeShowOrder{/lang}</span></a></li>
<li><a href="{link controller='LabelList' id=$groupID}{/link}" class="button">{icon name='list'} <span>{lang}wcf.acp.label.list{/lang}</span></a></li>
<li><a href="{link controller='LabelList'}filters[groupID]={$groupID}{/link}" class="button">{icon name='list'} <span>{lang}wcf.acp.label.list{/lang}</span></a></li>
{/if}
<li><a href="{link controller='LabelGroupList'}{/link}" class="button">{icon name='list'} <span>{lang}wcf.acp.label.group.list{/lang}</span></a></li>

Expand Down
146 changes: 6 additions & 140 deletions wcfsetup/install/files/acp/templates/labelList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,155 +1,21 @@
{include file='header' pageTitle='wcf.acp.label.list'}

<script data-relocate="true">
{if $labelGroup && !$labelSearch && !$cssClassName && $items > 1}
require(['WoltLabSuite/Core/Ui/Sortable/List'], function (UiSortableList) {
new UiSortableList({
containerId: 'labelTableContainer',
className: 'wcf\\data\\label\\LabelAction',
isSimpleSorting: true,
offset: {@$startIndex},
});
});
{/if}
</script>

<header class="contentHeader">
<div class="contentHeaderTitle">
<h1 class="contentTitle">{lang}wcf.acp.label.list{/lang}{if $items} <span class="badge badgeInverse">{#$items}</span>{/if}</h1>
<h1 class="contentTitle">{lang}wcf.acp.label.list{/lang} <span class="badge badgeInverse">{#$gridView->countRows()}</span></h1>
</div>

<nav class="contentHeaderNavigation">
<ul>
<li><a href="{link controller='LabelAdd'}{/link}" class="button">{icon name='plus'} <span>{lang}wcf.acp.label.add{/lang}</span></a></li>

{event name='contentHeaderNavigation'}
</ul>
</nav>
</header>

{if $items || $labelSearch || $labelGroup || $cssClassName}
<woltlab-core-notice type="info">{lang}wcf.acp.label.sortAfterGroupFiltering{/lang}</woltlab-core-notice>

<form action="{link controller='LabelList'}{/link}" method="post">
<section class="section">
<h2 class="sectionTitle">{lang}wcf.acp.label.filter{/lang}</h2>

<div class="row rowColGap formGrid">
<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
<input type="text" id="label" name="label" value="{$labelSearch}" placeholder="{lang}wcf.acp.label.label{/lang}" class="long">
</dd>
</dl>

<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
<select id="groupID" name="groupID">
<option value="0">{lang}wcf.acp.label.group{/lang}</option>
{foreach from=$labelGroupList item=group}
<option value="{$group->groupID}"{if $group->groupID == $groupID} selected{/if}>{$group}{if $group->groupDescription} / {$group->groupDescription}{/if}</option>
{/foreach}
</select>
</dd>
</dl>

<dl class="col-xs-12 col-md-4">
<dt></dt>
<dd>
<input type="text" id="cssClassName" name="cssClassName" placeholder="{lang}wcf.acp.label.cssClassName{/lang}" value="{$cssClassName}" class="long">
</dd>
</dl>
</div>
</section>

<div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
{csrfToken}
</div>
</form>
{/if}

{hascontent}
<div class="paginationTop">
{content}
{assign var='linkParameters' value=''}
{if $labelSearch}
{append var='linkParameters' value='&label='}
{append var='linkParameters' value=$labelSearch|rawurlencode}
{/if}
{if $cssClassName}
{append var='linkParameters' value='&cssClassName='}
{append var='linkParameters' value=$cssClassName|rawurlencode}
{/if}

{pages print=true assign=pagesLinks controller="LabelList" object=$labelGroup link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder$linkParameters"}
{/content}
</div>
{/hascontent}

{if $objects|count}
<div id="labelTableContainer" class="section tabularBox{if $labelGroup && !$labelSearch && !$cssClassName && $items > 1} sortableListContainer{/if}">
<table class="table jsObjectActionContainer" data-object-action-class-name="wcf\data\label\LabelAction">
<thead>
<tr>
<th class="columnID columnLabelID{if $sortField == 'labelID'} active {@$sortOrder}{/if}" colspan="2"><a href="{link controller='LabelList' object=$labelGroup}pageNo={@$pageNo}&sortField=labelID&sortOrder={if $sortField == 'labelID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@$linkParameters}{/link}">{lang}wcf.global.objectID{/lang}</a></th>
<th class="columnTitle columnLabel{if $sortField == 'label'} active {@$sortOrder}{/if}"><a href="{link controller='LabelList' object=$labelGroup}pageNo={@$pageNo}&sortField=label&sortOrder={if $sortField == 'label' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@$linkParameters}{/link}">{lang}wcf.acp.label.label{/lang}</a></th>
<th class="columnText columnGroup{if $sortField == 'groupName'} active {@$sortOrder}{/if}"><a href="{link controller='LabelList' object=$labelGroup}pageNo={@$pageNo}&sortField=groupName&sortOrder={if $sortField == 'groupName' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@$linkParameters}{/link}">{lang}wcf.acp.label.group{/lang}</a></th>
{if $labelGroup && !$labelSearch && !$cssClassName && $items > 1}
<th class="columnDigits columnShowOrder{if $sortField == 'showOrder'} active {@$sortOrder}{/if}"><a href="{link controller='LabelList' object=$labelGroup}pageNo={@$pageNo}&sortField=showOrder&sortOrder={if $sortField == 'showOrder' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@$linkParameters}{/link}">{lang}wcf.global.showOrder{/lang}</a></th>
{/if}

{event name='columnHeads'}
</tr>
</thead>

<tbody class="jsReloadPageWhenEmpty{if $labelGroup && !$labelSearch && !$cssClassName && $items > 1} sortableList" data-object-id="{@$labelGroup->groupID}{/if}">
{foreach from=$objects item=label}
<tr class="jsLabelRow jsObjectActionObject{if $labelGroup && !$labelSearch && !$cssClassName && $items > 1} sortableNode{/if}" data-object-id="{@$label->getObjectID()}">
<td class="columnIcon">
<a href="{link controller='LabelEdit' object=$label}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip">{icon name='pencil'}</a>
{objectAction action="delete" objectTitle=$label->getTitle()}

{event name='rowButtons'}
</td>
<td class="columnID">{@$label->labelID}</td>
<td class="columnTitle columnLabel"><a href="{link controller='LabelEdit' object=$label}{/link}" title="{$label}" class="badge label{if $label->getClassNames()} {$label->getClassNames()}{/if}">{$label}</a></td>
<td class="columnText columnGroup">{$label->groupName|phrase}{if $label->groupDescription} / {$label->groupDescription}{/if}</td>
{if $labelGroup && !$labelSearch && !$cssClassName && $items > 1}
<td class="columnDigits columnShowOrder">{#$label->showOrder}</td>
{/if}

{event name='columns'}
</tr>
{/foreach}
</tbody>
</table>
</div>

{if $labelGroup && !$labelSearch && !$cssClassName && $items > 1}
<div class="formSubmit">
<button type="button" class="button buttonPrimary" data-type="submit">{lang}wcf.global.button.saveSorting{/lang}</button>
</div>
{/if}

<footer class="contentFooter">
{hascontent}
<div class="paginationBottom">
{content}{@$pagesLinks}{/content}
</div>
{/hascontent}

<nav class="contentFooterNavigation">
<ul>
<li><a href="{link controller='LabelAdd'}{/link}" class="button">{icon name='plus'} <span>{lang}wcf.acp.label.add{/lang}</span></a></li>

{event name='contentFooterNavigation'}
</ul>
</nav>
</footer>
{else}
<woltlab-core-notice type="info">{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
{/if}
<div class="section">
{unsafe:$gridView->render()}
</div>

{include file='footer'}
Loading