Skip to content

Commit d188934

Browse files
BurntimeXBurntimeX
committed
Add generic solution for 'mark as read' in list views
1 parent 0f09c96 commit d188934

5 files changed

Lines changed: 77 additions & 19 deletions

File tree

‎ts/WoltLabSuite/Core/Component/ListView/State.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@
77
* @since 6.2
88
*/
99

10+
import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
1011
import Filter from "./Filter";
1112
import Selection from "./Selection";
1213
import Sorting from "./Sorting";
14+
import { postObject } from "WoltLabSuite/Core/Api/PostObject";
15+
import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
1316

1417
export const enum StateChangeCause {
1518
Change,
@@ -71,6 +74,18 @@ export class State extends EventTarget {
7174
this.#handlePopState();
7275
});
7376

77+
wheneverFirstSeen(`#${viewId}_items .listView__item__markAsRead`, (button: HTMLButtonElement) => {
78+
button.addEventListener(
79+
"click",
80+
promiseMutex(async () => {
81+
await postObject(button.dataset.endpoint!);
82+
button
83+
.closest(".listView__item")
84+
?.dispatchEvent(new CustomEvent("interaction:invalidate", { bubbles: true }));
85+
}),
86+
);
87+
});
88+
7489
this.#updatePaginationUrl();
7590
this.#updateListViewFooter();
7691
}

‎wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/State.js‎

Lines changed: 9 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎wcfsetup/install/files/lib/system/listView/AbstractListView.class.php‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
namespace wcf\system\listView;
44

5+
use wcf\action\ApiAction;
56
use wcf\action\ListViewFilterAction;
67
use wcf\data\DatabaseObject;
78
use wcf\data\DatabaseObjectDecorator;
@@ -16,6 +17,7 @@
1617
use wcf\system\listView\filter\exception\InvalidFilterValue;
1718
use wcf\system\request\LinkHandler;
1819
use wcf\system\WCF;
20+
use wcf\util\StringUtil;
1921

2022
/**
2123
* Abstract implementation of a list view.
@@ -48,6 +50,7 @@ abstract class AbstractListView
4850
private bool $allowInteractions = true;
4951
private bool $allowBulkInteractions = true;
5052
private int $fixedNumberOfItems = 0;
53+
private string $markAsReadEndpoint = '';
5154

5255
/**
5356
* @var array<string, string>
@@ -673,6 +676,35 @@ public function getContainerCssClassName(): string
673676
return $this->containerCssClassName;
674677
}
675678

679+
public function setMarkAsReadEndpoints(string $endpoint): void
680+
{
681+
$this->markAsReadEndpoint = $endpoint;
682+
}
683+
684+
public function renderMarkAsReadButton(DatabaseObject $object): string
685+
{
686+
if (!$this->markAsReadEndpoint) {
687+
throw new \BadMethodCallException("No mark as read endpoint has been specified.");
688+
}
689+
690+
$endpoint = StringUtil::encodeHTML(
691+
LinkHandler::getInstance()->getControllerLink(ApiAction::class, ['id' => 'rpc']) .
692+
\sprintf($this->markAsReadEndpoint, $object->getObjectID())
693+
);
694+
$title = WCF::getLanguage()->get('wcf.global.button.markAsRead');
695+
696+
return <<<HTML
697+
<button
698+
type="button"
699+
class="listView__item__markAsRead jsTooltip"
700+
title="{$title}"
701+
data-endpoint="{$endpoint}"
702+
>
703+
<span class="listView__item__unread__indicator" aria-hidden="true"></span>
704+
</button>
705+
HTML;
706+
}
707+
676708
/**
677709
* @return TDatabaseObjectList
678710
*/

‎wcfsetup/install/files/style/ui/discussionList.scss‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -140,29 +140,12 @@
140140
grid-template-rows: min-content min-content 1fr;
141141
}
142142

143-
.discussionList__item__markAsRead {
144-
align-items: center;
143+
.discussionList__item .listView__item__markAsRead {
145144
grid-area: markAsRead;
146-
display: flex;
147-
padding: 0 5px;
148145
margin-right: 5px;
149146
z-index: 1;
150147
}
151148

152-
.discussionList__item__unread__indicator {
153-
background-color: var(--wcfButtonPrimaryBackground);
154-
border-radius: 50%;
155-
display: inline-block;
156-
height: 10px;
157-
width: 10px;
158-
}
159-
160-
@media (hover: hover) {
161-
.discussionList__item__markAsRead:hover .discussionList__item__unread__indicator {
162-
background-color: var(--wcfButtonPrimaryBackgroundActive);
163-
}
164-
}
165-
166149
.discussionList__item__title {
167150
grid-area: title;
168151

‎wcfsetup/install/files/style/ui/listView.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,23 @@
114114
display: flex;
115115
padding: 0 6px;
116116
}
117+
118+
.listView__item__markAsRead {
119+
align-items: center;
120+
display: flex;
121+
padding: 0 5px;
122+
}
123+
124+
.listView__item__unread__indicator {
125+
background-color: var(--wcfButtonPrimaryBackground);
126+
border-radius: 50%;
127+
display: inline-block;
128+
height: 10px;
129+
width: 10px;
130+
}
131+
132+
@media (hover: hover) {
133+
.listView__item__markAsRead:hover .listView__item__unread__indicator {
134+
background-color: var(--wcfButtonPrimaryBackgroundActive);
135+
}
136+
}

0 commit comments

Comments
 (0)