Skip to content

Commit

Permalink
#370 sort each column in the matrix with the default sorting (newest)
Browse files Browse the repository at this point in the history
  • Loading branch information
xeronimus committed Sep 30, 2023
1 parent 5177743 commit 44a8e7f
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 29 deletions.
28 changes: 3 additions & 25 deletions client/app/components/Backlog/BacklogActive.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,15 @@ import {useDrop} from 'react-dnd';
import {trashStories, setSortOrder} from '../../state/actions/commandActions';
import {getActiveStories, getSelectedStoryId} from '../../state/stories/storiesSelectors';
import {L10nContext} from '../../services/l10n';
import {defaultSorting, manualSorting} from './backlogSortings';
import {manualSorting} from './backlogSortings';
import StoryEditForm from './StoryEditForm';
import Story from './Story';
import BacklogToolbar from './BacklogToolbar';
import {DRAG_ITEM_TYPES} from '../Room/Board';
import BacklogFileDropWrapper from './BacklogFileDropWrapper';

import {StyledStories, StyledBacklogInfoText, StyledBacklogActive} from './_styled';

const sortAndFilterStories = (activeStories, comparator, query) => {
const lcQuery = query.toLowerCase();
let shallowCopy = query
? [...activeStories.filter((s) => s.title.toLowerCase().includes(lcQuery))]
: [...activeStories];
return shallowCopy.sort(comparator);
};

/**
* @param {object[]} activeStories
* @return {{setSorting, setFilterQuery, sorting, sortedStories, filterQuery}}
*/
const useSortingAndFiltering = (activeStories) => {
const [filterQuery, setFilterQuery] = useState('');
const [sorting, setSorting] = useState(defaultSorting);
const [sortedStories, setSortedStories] = useState(activeStories);
useEffect(() => {
setSortedStories(sortAndFilterStories(activeStories, sorting.comp, filterQuery));
}, [activeStories, sorting, filterQuery]);

return {filterQuery, setFilterQuery, sorting, setSorting, sortedStories, setSortedStories};
};
import useStorySortingAndFiltering from '../common/useStorySortingAndFiltering';

/**
*
Expand Down Expand Up @@ -119,7 +97,7 @@ const BacklogActive = ({activeStories, selectedStoryId, trashStories, setSortOrd
);

const {filterQuery, setFilterQuery, sorting, setSorting, sortedStories, setSortedStories} =
useSortingAndFiltering(activeStories);
useStorySortingAndFiltering(activeStories);

const {dndFindStory, dndMoveStory, dndDragEnd, containerDropRef} = useStoryDnD(
sortedStories,
Expand Down
24 changes: 20 additions & 4 deletions client/app/components/EstimationMatrix/EstimationMatrix.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {StyledEMColumnsContainer, StyledEstimationMatrix, StyledNoStoriesHint} f
import {StyledStoryTitle} from '../_styled';
import {getStoriesWithPendingSetValueCommand} from '../../state/commandTracking/commandTrackingSelectors';
import EstimationMatrixColumnUnestimated from './EstimationMatrixColumnUnestimated';
import useStorySortingAndFiltering from '../common/useStorySortingAndFiltering';
import {defaultSorting} from '../Backlog/backlogSortings';

/**
* Displays a table with all estimated stories (all stories with consensus), ordered by estimation value
Expand All @@ -35,8 +37,12 @@ const EstimationMatrix = ({
const {t} = useContext(L10nContext);
const [groupedStories, setGroupedStories] = useState({}); // grouped by consensus value

const {sortedStories: sortedUnestimatedStories} = useStorySortingAndFiltering(unestimatedStories);

useEffect(() => {
setGroupedStories(deriveGroupedStories(estimatedStories, pendingSetValueStories));
setGroupedStories(
deriveGroupedStories(estimatedStories, pendingSetValueStories, defaultSorting)
);
}, [estimatedStories, pendingSetValueStories]);

return (
Expand All @@ -53,7 +59,7 @@ const EstimationMatrix = ({
<EstimationMatrixColumnUnestimated
key={'header:-unestimated'}
columnWidth={columnWidth}
stories={unestimatedStories}
stories={sortedUnestimatedStories}
/>

{cardConfig.map((cc) => (
Expand Down Expand Up @@ -111,10 +117,12 @@ const getColWidth = (cardConfigCount) => {
*
* @param estimatedStories
* @param pendingSetValueStories
* @param sorting
* @return {object} Object that maps estimation value (consensus) to array of stories
*/
function deriveGroupedStories(estimatedStories, pendingSetValueStories) {
return estimatedStories.reduce((total, current) => {
function deriveGroupedStories(estimatedStories, pendingSetValueStories, sorting) {
// group by consensus
const groupedStoriesUnsorted = estimatedStories.reduce((total, current) => {
const isPending = pendingSetValueStories.find((ss) => ss.storyId === current.id);
const consensus = isPending ? isPending.value : current.consensus;
if (!total[consensus]) {
Expand All @@ -123,4 +131,12 @@ function deriveGroupedStories(estimatedStories, pendingSetValueStories) {
total[consensus].push(current);
return total;
}, {});

// now sort each story-array
const groupedStoriesSorted = {};
Object.entries(groupedStoriesUnsorted).forEach(([consensus, stories]) => {
groupedStoriesSorted[consensus] = stories.sort(sorting.comp);
});

return groupedStoriesSorted;
}
34 changes: 34 additions & 0 deletions client/app/components/common/useStorySortingAndFiltering.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {useState, useEffect} from 'react';
import {defaultSorting} from '../Backlog/backlogSortings';

/**
*
* @param {object[]} stories
* @param comparator
* @param {string} query A optional query string
* @return {*[]}
*/
const sortAndFilterStories = (stories, comparator, query = '') => {
const lcQuery = query.toLowerCase();
let shallowCopy = query
? [...stories.filter((s) => s.title.toLowerCase().includes(lcQuery))]
: [...stories];
return shallowCopy.sort(comparator);
};

/**
* @param {object[]} stories
* @return {{setSorting, setFilterQuery, sorting, sortedStories, filterQuery}}
*/
const useStorySortingAndFiltering = (stories) => {
const [filterQuery, setFilterQuery] = useState('');
const [sorting, setSorting] = useState(defaultSorting);
const [sortedStories, setSortedStories] = useState(stories);
useEffect(() => {
setSortedStories(sortAndFilterStories(stories, sorting.comp, filterQuery));
}, [stories, sorting, filterQuery]);

return {filterQuery, setFilterQuery, sorting, setSorting, sortedStories, setSortedStories};
};

export default useStorySortingAndFiltering;

0 comments on commit 44a8e7f

Please sign in to comment.