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}