Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EES-5516 added ability to reverse table order #5351

Merged
merged 11 commits into from
Oct 31, 2024
Merged

EES-5516 added ability to reverse table order #5351

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a70bc41
EES-5516 added ability to reverse table order
Oct 22, 2024
4bee0ef
EES-5516 amend button naming to match AC
Oct 22, 2024
be20e84
EES-5516 Update reversed list array to be a copy aswell as the sae st…
Oct 29, 2024
6415fb4
Merge branch 'dev' into EES-5516-sort-time-periods
rianski Oct 30, 2024
20ed1f2
EES-5516 refactored reverse toggle to remove code from read only list…
Oct 31, 2024
5a0a46f
Merge branch 'EES-5516-sort-time-periods' of https://github.com/dfe-a…
Oct 31, 2024
839d1ef
EES-5516 replace getvalues with watch to check for form changes to re…
Oct 31, 2024
0b2e06f
EES-5516 update filter instantiation
Oct 31, 2024
cd12833
EES-5516 fix failing ci tests
Oct 31, 2024
9bc5ee2
EES-5516 fix formatting
Oct 31, 2024
7a703f3
EES-5516 remove mock tests and replace with form provider
Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...ucation-statistics-common/src/modules/table-tool/components/TableHeadersGroup.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
position: relative;

@include govuk-media-query($from: desktop) {
width: 364px;
width: 457px;

&.groupActive {
width: 460px;
Expand Down
27 changes: 24 additions & 3 deletions ...ucation-statistics-common/src/modules/table-tool/components/TableHeadersGroupControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import { useDesktopMedia } from '@common/hooks/useMedia';
import styles from '@common/modules/table-tool/components/TableHeadersGroupControls.module.scss';
import useTableHeadersContext from '@common/modules/table-tool/contexts/TableHeadersContext';
import classNames from 'classnames';
import React from 'react';
import React, { useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { Filter } from '../types/filters';

interface Props {
defaultNumberOfItems: number;
Expand Down Expand Up @@ -41,6 +43,7 @@ const TableHeadersGroupControls = ({
expandedLists,
setActiveGroup,
toggleExpandedList,
toggleReverseOrder,
toggleGroupDraggingEnabled,
toggleMoveControlsActive,
} = useTableHeadersContext();
Expand All @@ -49,6 +52,17 @@ const TableHeadersGroupControls = ({
const displayItems = isExpanded ? totalItems : defaultNumberOfItems;
const hasMoreItems = isExpanded || totalItems > displayItems;
const disableControls = activeGroup && activeGroup !== id;
const { getValues, setValue } = useFormContext();
const list: Filter[] = getValues(groupName);
const [isReverse, setIsReverse] = useState(false);

useEffect(() => {
rianski marked this conversation as resolved.
Show resolved Hide resolved
if (isReverse) {
setValue(groupName, list.toReversed());
toggleReverseOrder(id);
setIsReverse(false);
}
}, [groupName, id, isReverse, list, setValue, toggleReverseOrder]);

return (
<div className="govuk-!-padding-top-2">
Expand Down Expand Up @@ -149,7 +163,7 @@ const TableHeadersGroupControls = ({
) : (
<>
<Button
className="govuk-!-width-one-half"
className="govuk-!-width-one-third"
disabled={!!disableControls}
onClick={() => {
setActiveGroup(id);
Expand All @@ -160,14 +174,21 @@ const TableHeadersGroupControls = ({
<VisuallyHidden>{` items in ${legend}`}</VisuallyHidden>
</Button>
<Button
className="govuk-!-width-one-half"
className="govuk-!-width-one-third"
disabled={!!disableControls}
onClick={() => {
toggleMoveControlsActive(id);
}}
>
Move<VisuallyHidden> {legend}</VisuallyHidden>
</Button>
<Button
rianski marked this conversation as resolved.
Show resolved Hide resolved
className="govuk-!-width-one-third"
disabled={!!disableControls}
onClick={() => setIsReverse(true)}
>
Reverse order<VisuallyHidden> {legend}</VisuallyHidden>
</Button>
</>
)}
</ButtonGroup>
Expand Down
3 changes: 2 additions & 1 deletion ...ducation-statistics-common/src/modules/table-tool/components/TableHeadersReadOnlyList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import DragIcon from '@common/components/DragIcon';
import styles from '@common/modules/table-tool/components/TableHeadersReadOnlyList.module.scss';
import useTableHeadersContext from '@common/modules/table-tool/contexts/TableHeadersContext';
import { Filter } from '@common/modules/table-tool/types/filters';
import React from 'react';
import React, { useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';

interface Props {
Expand All @@ -24,6 +24,7 @@ const TableHeadersReadOnlyList = ({
const isExpanded = expandedLists.includes(id);

const { getValues } = useFormContext();

const list: Filter[] = getValues(name);

const displayItems = isExpanded ? list.length : defaultNumberOfItems;
Expand Down
16 changes: 16 additions & 0 deletions ...plore-education-statistics-common/src/modules/table-tool/contexts/TableHeadersContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ export interface TableHeadersContextState {
groupDraggingActive: boolean;
groupDraggingEnabled: boolean;
moveControlsActive: string[];
reverseOrder: string[];
setActiveGroup: (listName?: string) => void;
toggleExpandedList: (listName: string) => void;
toggleGroupDraggingActive: (active: boolean) => void;
toggleGroupDraggingEnabled: (enabled: boolean) => void;
toggleMoveControlsActive: (groupId: string) => void;
toggleReverseOrder: (reverse: string) => void;
}

const TableHeadersContext = createContext<TableHeadersContextState>({
Expand All @@ -27,11 +29,13 @@ const TableHeadersContext = createContext<TableHeadersContextState>({
groupDraggingActive: false,
groupDraggingEnabled: true,
moveControlsActive: [],
reverseOrder: [],
setActiveGroup: noop,
toggleExpandedList: noop,
toggleGroupDraggingActive: noop,
toggleGroupDraggingEnabled: noop,
toggleMoveControlsActive: noop,
toggleReverseOrder: noop,
});

export interface TableHeadersContextProviderProps {
Expand Down Expand Up @@ -62,6 +66,7 @@ export const TableHeadersContextProvider = ({
initialGroupDraggingEnabled ?? true,
);
const [moveControlsActive, setMoveControlsActive] = useState<string[]>([]);
const [reverseOrder, setReverseOrder] = useState<string[]>([]);

const state = useMemo<TableHeadersContextState>(() => {
const toggleExpandedList = (listName: string) =>
Expand All @@ -78,6 +83,14 @@ export const TableHeadersContextProvider = ({
: [...current, groupId],
);

const toggleReverseOrder = (groupId: string) => {
rianski marked this conversation as resolved.
Show resolved Hide resolved
setReverseOrder(current =>
current.includes(groupId)
? current.filter(currentName => currentName !== groupId)
: [...current, groupId],
);
};

return {
activeGroup,
expandedLists,
Expand All @@ -89,6 +102,8 @@ export const TableHeadersContextProvider = ({
toggleGroupDraggingActive,
toggleGroupDraggingEnabled,
toggleMoveControlsActive,
reverseOrder,
toggleReverseOrder,
};
}, [
activeGroup,
Expand All @@ -99,6 +114,7 @@ export const TableHeadersContextProvider = ({
setActiveGroup,
toggleGroupDraggingActive,
toggleGroupDraggingEnabled,
reverseOrder,
]);

return (
Expand Down
Loading