From 53efd7ca8d90a6de231b5a49aded5e743b81e166 Mon Sep 17 00:00:00 2001 From: Sumukha Hegde Date: Tue, 20 Apr 2021 18:48:52 +0530 Subject: [PATCH 1/3] [FIX] Add channel sorting functionalities in Teams --- .../info/Delete/ChannelDeletionTable.js | 49 +++++++++++++++++-- 1 file changed, 45 insertions(+), 4 deletions(-) diff --git a/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js b/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js index fd86c412eb87..5fa027fd5c71 100644 --- a/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js +++ b/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js @@ -1,5 +1,5 @@ import { Box, CheckBox } from '@rocket.chat/fuselage'; -import React from 'react'; +import React, { useState, useCallback } from 'react'; import GenericTable from '../../../../../components/GenericTable'; import { useTranslation } from '../../../../../contexts/TranslationContext'; @@ -13,10 +13,39 @@ const ChannelDeletionTable = ({ selectedRooms, onToggleAllRooms, }) => { + const [sort, setSort] = useState(['name', 'asc']); const t = useTranslation(); const selectedRoomsLength = Object.values(selectedRooms).filter(Boolean).length; + const onHeaderClick = useCallback( + (id) => { + const [sortBy, sortDirection] = sort; + if (sortBy === id) { + setSort([id, sortDirection === 'asc' ? 'desc' : 'asc']); + return; + } + setSort([id, 'asc']); + }, + [sort], + ); + + const getSortedChannels = () => { + let sortedRooms = rooms; + if (sort[0] === 'name') { + sortedRooms = rooms.sort((a, b) => { + if (a.name < b.name) return -1; + return a.name > b.name ? 1 : 0; + }); + } else if (sort[0] === 'usersCount') { + sortedRooms = rooms.sort((a, b) => a.usersCount - b.usersCount); + } + if (sort[1] === 'asc') { + return sortedRooms.reverse(); + } + return sortedRooms; + }; + const checked = rooms.length === selectedRoomsLength; const indeterminate = rooms.length > selectedRoomsLength && selectedRoomsLength > 0; @@ -25,7 +54,13 @@ const ChannelDeletionTable = ({ - + {t('Channel_name')} - + {t('Members')} } - results={rooms} + results={getSortedChannels()} params={params} setParams={onChangeParams} fixed={false} From cc31cc8b097b125ce841a6b9601ab2294e997504 Mon Sep 17 00:00:00 2001 From: Sumukha Hegde Date: Sun, 25 Apr 2021 12:46:02 +0530 Subject: [PATCH 2/3] FIX sorting direction --- .../teams/contextualBar/info/Delete/ChannelDeletionTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js b/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js index 63fdaad9451d..83a5cfba3b9a 100644 --- a/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js +++ b/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js @@ -40,7 +40,7 @@ const ChannelDeletionTable = ({ } else if (sort[0] === 'usersCount') { sortedRooms = rooms.sort((a, b) => a.usersCount - b.usersCount); } - if (sort[1] === 'asc') { + if (sort[1] === 'desc') { return sortedRooms.reverse(); } return sortedRooms; From 1c1d0ce12ec2c45d5f1cbcbfd625782f214a1b07 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 8 Nov 2022 10:33:23 -0300 Subject: [PATCH 3/3] review changes --- .../info/Delete/ChannelDeletionTable.js | 45 +++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/apps/meteor/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js b/apps/meteor/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js index f396de25c99e..c6dfe58619a5 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js +++ b/apps/meteor/client/views/teams/contextualBar/info/Delete/ChannelDeletionTable.js @@ -1,15 +1,46 @@ import { Box, CheckBox } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import React from 'react'; +import React, { useState, useCallback } from 'react'; import GenericTable from '../../../../../components/GenericTable'; import ChannelRow from './ChannelRow'; const ChannelDeletionTable = ({ rooms, params, onChangeParams, onChangeRoomSelection, selectedRooms, onToggleAllRooms }) => { + const [sort, setSort] = useState(['name', 'asc']); + const t = useTranslation(); const selectedRoomsLength = Object.values(selectedRooms).filter(Boolean).length; + const onHeaderClick = useCallback( + (id) => { + const [sortBy, sortDirection] = sort; + if (sortBy === id) { + setSort([id, sortDirection === 'asc' ? 'desc' : 'asc']); + return; + } + setSort([id, 'asc']); + }, + [sort], + ); + + const getSortedChannels = () => { + if (rooms) { + const sortedRooms = [...rooms]; + const [sortBy, sortOrder] = sort; + if (sortBy === 'name') { + sortedRooms.sort((a, b) => (a.name && b.name ? a.name.localeCompare(b.name) : 0)); + } + if (sortBy === 'usersCount') { + sortedRooms.sort((a, b) => a.usersCount - b.usersCount); + } + if (sortOrder === 'desc') { + return sortedRooms?.reverse(); + } + return sortedRooms; + } + }; + const checked = rooms.length === selectedRoomsLength; const indeterminate = rooms.length > selectedRoomsLength && selectedRoomsLength > 0; @@ -18,18 +49,24 @@ const ChannelDeletionTable = ({ rooms, params, onChangeParams, onChangeRoomSelec - + {t('Channel_name')} - + {t('Members')} } - results={rooms} + results={getSortedChannels()} params={params} setParams={onChangeParams} fixed={false}