frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework notifications list

Browse Source
This commit is contained in:
smanylov
2026-04-24 14:30:03 +07:00
parent a69636d7e3
commit 7c82f940fc
3 changed files with 78 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "no-copy-frontend",
"version": "0.98.0",
"version": "0.99.0",
"private": true,
"scripts": {
"dev": "next dev -p 2999",
src/app/styles/pages-styles.scss
+4
View File
@@ -906,6 +906,10 @@
width: 40px;
height: 40px;
position: relative;
border-radius: 6px;
overflow: hidden;
background: #f5f5f5;
box-shadow: 1px 1px 2px #00000030;
img {
object-fit: contain;
src/app/ui/notifications/notifications-list.tsx
+73 -39
View File
@@ -47,44 +47,62 @@ export function NotificationsList() {
header: ({ table }) => {
const currentPageRows = table.getCoreRowModel().rows;
const unreadRowsOnPage = currentPageRows.filter(row => row.original.status !== 'READIED');
const allUnreadSelectedOnPage = unreadRowsOnPage.every(row => rowSelection[row.original.id]);
const allNotificationSelectedOnPage = currentPageRows.every(row => rowSelection[row.original.id]);
const unreadIdsSet = new Set(unreadRowsOnPage.map(row => row.original.id));
const selectedUnreadIds = Object.keys(rowSelection)
.map(Number)
.filter(id => unreadIdsSet.has(id));
return (
<div className="select-all-header">
{selectedUnreadIds.length > 0 && (
<button
className="btn btn-primary"
onClick={() => {
const selectedIds = Object.keys(rowSelection).map(Number);
notificationActionHandler(selectedUnreadIds, 'mark-as-read');
}}
>
{t('mark-as-read')} ({selectedUnreadIds.length})
</button>
)}
{Object.keys(rowSelection).length > 0 && (
<>
<button
className="btn btn-primary"
onClick={() => {
const selectedIds = Object.keys(rowSelection).map(Number);
notificationActionHandler(selectedIds, 'remove');
}}
>
{t('remove')} ({Object.keys(rowSelection).length})
</button>
</>
)}
<button
className="btn btn-primary"
onClick={() => {
if (allUnreadSelectedOnPage) {
if (allNotificationSelectedOnPage) {
const newSelection = { ...rowSelection };
unreadRowsOnPage.forEach(row => {
currentPageRows.forEach(row => {
delete newSelection[row.original.id];
});
setRowSelection(newSelection);
} else {
const newSelection = { ...rowSelection };
unreadRowsOnPage.forEach(row => {
currentPageRows.forEach(row => {
newSelection[row.original.id] = true;
});
setRowSelection(newSelection);
}
}}
>
{allUnreadSelectedOnPage ? t('deselect') : t('select-all')}
{allNotificationSelectedOnPage ? t('deselect') : t('select-all')}
</button>
{Object.keys(rowSelection).length > 0 && (
<button
className="btn btn-primary"
onClick={() => {
const selectedIds = Object.keys(rowSelection).map(Number);
notificationActionHandler(selectedIds, 'mark-as-read');
}}
>
{t('mark-as-read')} ({Object.keys(rowSelection).length})
</button>
)}
</div>
);
},
@@ -94,20 +112,23 @@ export function NotificationsList() {
return (
<div className="notification-check">
{!isReadied ? (
<button
onClick={() => {
setRowSelection((prev) => ({
...prev,
[row.original.id]: !prev[row.original.id],
}));
}}
>
{isSelected && <IconCheck />}
</button>
) : (
<div className="empty-block"></div>
)}
<button
onClick={() => {
setRowSelection((prev) => {
const newSelection = { ...prev };
if (newSelection[row.original.id]) {
delete newSelection[row.original.id];
} else {
newSelection[row.original.id] = true;
}
return newSelection;
});
}}
>
{isSelected && <IconCheck />}
</button>
</div>
);
},
@@ -182,11 +203,9 @@ export function NotificationsList() {
}
if (response?.success) {
setRowSelection({});
await queryClient.invalidateQueries({ queryKey: ['activeNotifications'] });
await queryClient.invalidateQueries({ queryKey: ['allNotifications'] });
// Clear selection after successful action
setRowSelection({});
}
} catch (error) {
const errorMessage = action === 'mark-as-read' ? 'Failed to mark as read' : 'Failed to remove';
@@ -313,13 +332,19 @@ export function NotificationsList() {
<div className="pagination-controls">
<button
className="arrow"
onClick={() => table.firstPage()}
onClick={() => {
setRowSelection({});
table.firstPage();
}}
disabled={!table.getCanPreviousPage()}
>
<IconDoubleArrowLeft />
</button>
<button
onClick={() => table.previousPage()}
onClick={() => {
setRowSelection({});
table.previousPage()
}}
className="arrow"
disabled={!table.getCanPreviousPage()}
>
@@ -330,7 +355,10 @@ export function NotificationsList() {
{getPageNumbers().map((pageNum, index) => (
<button
key={index}
onClick={() => typeof pageNum === 'number' && table.setPageIndex(pageNum)}
onClick={() => {
setRowSelection({});
typeof pageNum === 'number' && table.setPageIndex(pageNum);
}}
className={pagination.pageIndex === pageNum ? 'current' : 'other'}
disabled={pageNum === '...'}
>
@@ -340,7 +368,10 @@ export function NotificationsList() {
</div>
<button
onClick={() => table.nextPage()}
onClick={() => {
setRowSelection({});
table.nextPage();
}}
className="arrow"
disabled={!table.getCanNextPage()}
>
@@ -348,7 +379,10 @@ export function NotificationsList() {
</button>
<button
className="arrow"
onClick={() => table.lastPage()}
onClick={() => {
setRowSelection({});
table.lastPage();
}}
disabled={!table.getCanNextPage()}
>
<IconDoubleArrowRight />