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

InputChoiceSorting: Rework logic to work horizontally. #333

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+1,016 −263
Open

InputChoiceSorting: Rework logic to work horizontally. #333

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea71e7e
InputChoiceSorting: Rework logic to work horizontally.
Frost000 Oct 21, 2023
f4251d1
Input sorting: Add Conditional classes to avoid code duplication
Frost000 Oct 28, 2023
b6f2091
Input Sorting: Fix typo
Frost000 Nov 4, 2023
90a1d6e
InputSorting: Add tests and fix display logic
Frost000 Nov 12, 2023
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
61 changes: 55 additions & 6 deletions packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,11 +203,19 @@ export class InputCheckbox<CustomSurvey, CustomHousehold, CustomHome, CustomPers
const columnedChoiceInputs: JSX.Element[] = [];
for (let i = 0, count = widgetsByColumn.length; i < count; i++) {
const columnWidgets = widgetsByColumn[i];
columnedChoiceInputs.push(
<div className="survey-question__input-checkbox-group-column" key={i}>
{columnWidgets}
</div>
);
if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here, in this if, the undefined alignment is considered as vertical

columnedChoiceInputs.push(
<div className="survey-question__input-checkbox-group-column" key={i}>
{columnWidgets}
</div>
);
} else {
columnedChoiceInputs.push(
<div className="survey-question__input-checkbox-group-row" key={i}>
{columnWidgets}
</div>
);
}
}

return columnedChoiceInputs;
Expand Down Expand Up @@ -263,6 +271,47 @@ export class InputCheckbox<CustomSurvey, CustomHousehold, CustomHome, CustomPers

// separate by columns if needed:
const columnedChoiceInputs = this.getColumnedChoices(choiceInputs);
if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') {
const strCustomLabel = this.props.widgetConfig.customLabel
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This statement is identical to the one after the if below (I think). If so, take it out of the if, above it, so you don't have to copy-paste it.

? surveyHelper.translateString(
this.props.widgetConfig.customLabel,
this.props.i18n,
this.props.interview,
this.props.path
)
: null;

return (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Run yarn format on the code, this looks misaligned

<div
className={`survey-question__input-checkbox-group-container${
this.props.widgetConfig.sameLine === false ? ' no-wrap' : ''
}`}
>
{columnedChoiceInputs}
{this.props.customId && (
<div className="label-input-custom-container">
{strCustomLabel && (
<label htmlFor={this.props.customId}>
<span>{strCustomLabel}</span>
</label>
)}
<input
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whole block is very similar to the one of the else, below this if. What is the difference? If it is only the class, you can do your if only in this one place, to avoid too much code duplication. If there are many differences, it is worth doing a separate block, with a comment explaining the difference. Otherwise, the code is harder to read as it is harder to understand the diff between the 2 blocks.

type="text"
tabIndex={-1}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

peut-être que ce code va faire en sorte que l'élément de sera pas sélectionnable avec le clavier. Est-ce le cas?
Si oui il faudrait retirer tabIndex={-1}

autoComplete="none"
id={this.props.customId}
name={this.props.customId}
className={'apptr__form-input input-custom apptr__input-string'}
value={this.state.customValue === null ? '' : this.state.customValue}
onBlur={this.onCustomInputBlur}
onChange={(e) => this.setState({ customValue: e.target.value })}
ref={this.customInputRef}
/>
</div>
)}
</div>
);
}

const strCustomLabel = this.props.widgetConfig.customLabel
? surveyHelper.translateString(
Expand All @@ -275,7 +324,7 @@ export class InputCheckbox<CustomSurvey, CustomHousehold, CustomHome, CustomPers

return (
<div
className={`survey-question__input-checkbox-group-container${
className={`survey-question__input-checkbox-group-container-column${
this.props.widgetConfig.sameLine === false ? ' no-wrap' : ''
}`}
>
Expand Down
166 changes: 25 additions & 141 deletions packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,125 +6,64 @@
*/

/**
* Sort the array to be displayed to the target number of columns in vertical fashion.
* Sort the array in a specified count of groups.
* @param arr - Array to be sorted.
* @param columns - Target number of columns.
* @param count - Target number of group.
* @returns A 2 dimension array containing the data as columns to be displayed.
*
* @example
* // Prints [[0,1,2],[3,4,5]]
* console.log(verticalByColumns([0,1,2,3,4,5], 2));
* console.log(splitSort([0,1,2,3,4,5], 2));
*/
const verticalByColumns = function <Value>(arr: Value[], columns: number): Value[][] {
const splitSort = function <Value>(arr: Value[], count: number): Value[][] {
const len = arr.length;
const out: any[] = [];
let index = 0;
let columnIndex = 0;
let countPerColumn = Math.ceil(len / columns);
let countPerColumn = Math.ceil(len / count);
while (index + countPerColumn < len) {
out.push(arr.slice(index, (index += countPerColumn)));
columnIndex++;
countPerColumn = Math.ceil((len - index) / (columns - columnIndex));
countPerColumn = Math.ceil((len - index) / (count - columnIndex));
}
out.push(arr.slice(index));

return out;
};

/**
* Sort the array to be displayed to the target number of rows in vertical fashion.
* Sort the array in groups of specified length.
* @param arr - Array to be sorted
* @param rows - Target number of rows.
* @param length - Target number of item in group.
* @returns A 2 dimension array containing the data as columns to be displayed.
*
* @example
* // Prints [[0,1],[2,3],[4,5]]
* console.log(verticalByRows([0,1,2,3,4,5], 2));
* console.log(subsequentSort([0,1,2,3,4,5], 2));
*/
const verticalByRows = function <Value>(arr: Value[], rows: number): Value[][] {
const subsequentSort = function <Value>(arr: Value[], length: number): Value[][] {
const len = arr.length;
const out: any[] = [];
let index = 0;
while (index + rows < len) {
out.push(arr.slice(index, (index += rows)));
while (index + length < len) {
out.push(arr.slice(index, (index += length)));
}
out.push(arr.slice(index));

return out;
};

/**
* Sort the array to be displayed to the target number of columns in horizontal fashion
* Sort the array in groups of custom lengths.
* @param arr - Array to be sorted.
* @param columns - Target number of columns.
* @returns A 2 dimension array containing the data as columns to be displayed.
*
* @example
* // Prints [[0,2,4],[1,3,5]]
* console.log(horizontalByColumns([0,1,2,3,4,5], 2));
*/
const horizontalByColumns = function <Value>(arr: Value[], columns: number): Value[][] {
const len = arr.length;
const out: any[] = [];
let index = 0;
let columnIndex = 0;
let newColumn: any[] = [];
while (index < len) {
newColumn.push(arr[index]);
index += columns;
if (index >= len && columnIndex < columns) {
columnIndex++;
index = columnIndex;
out.push(newColumn);
newColumn = [];
}
}

return out;
};

/**
* Sort the array to be displayed to the target number of rows in horizontal fashion.
* @param arr - Array to be sorted.
* @param rows - Target number of rows.
* @returns A 2 dimension array containing the data as columns to be displayed.
*
* @example
* // Prints [[0,3],[1,4],[2,5]]
* console.log(horizontalByRows([0,1,2,3,4,5], 2));
*/
const horizontalByRows = function <Value>(arr: Value[], rows: number): Value[][] {
const len = arr.length;
const out: any[] = [];
let index = 0;
let columnIndex = 0;
const columns = Math.ceil(arr.length / rows);
let newColumn: any[] = [];
while (index < len) {
newColumn.push(arr[index]);
index += columns;
if (index >= len && columnIndex < columns) {
columnIndex++;
index = columnIndex;
out.push(newColumn);
newColumn = [];
}
}

return out;
};

/**
* Sort the array to be displayed in columns by the custom array information.
* @param arr - Array to be sorted.
* @param custom - Array containing the dedired length of each column.
* @param custom - Array containing the dedired length of each group.
* @returns A 2 dimension array containing the data as columns to be displayed.
*
* @example
* // Prints [[0,1,2],[3,4],[5]]
* console.log(customVertical([0,1,2,3,4,5], [3,2,1]));
* console.log(cusotmSort([0,1,2,3,4,5], [3,2,1]));
*/
const customVertical = function <Value>(arr: Value[], custom: number[]): Value[][] {
const customSort = function <Value>(arr: Value[], custom: number[]): Value[][] {
const len = arr.length;
const out: any[] = [];
let index = 0;
Expand All @@ -138,47 +77,6 @@ const customVertical = function <Value>(arr: Value[], custom: number[]): Value[]
return out;
};

/**
* Sort the array to be displayed in rows by the custom array information.
* @param arr - Array to be sorted.
* @param custom - Array containing the desired legnths of each row.
* @returns A 2 dimension array containing the data as columns to be displayed.
*
* @example
* // Prints [[0,3,5],[1,4],[2]]
* console.log(customHorizontal([0,1,2,3,4,5], [3,2,1]));
*/
const customHorizontal = function <Value>(arr: Value[], custom: number[]): Value[][] {
const len = arr.length;
const out: any[] = [];
let index = 0;
let columnIndex = 0;
let rowIndex = 0;
let newColumn: any[] = [];
while (index < len && columnIndex < custom[0]) {
if (columnIndex >= custom[rowIndex]) {
columnIndex++;
rowIndex = 0;
index = columnIndex;
out.push(newColumn);
newColumn = [];
continue;
}
newColumn.push(arr[index]);
index += custom[rowIndex];
rowIndex++;
if (index >= len || rowIndex >= custom[columnIndex]) {
columnIndex++;
rowIndex = 0;
index = columnIndex;
out.push(newColumn);
newColumn = [];
}
}

return out;
};

/**
* Sorts the array based on the specified parameters.
*
Expand All @@ -187,7 +85,7 @@ const customHorizontal = function <Value>(arr: Value[], custom: number[]): Value
*
* @param arr - Array to be sorted.
* @param alignement - In wich way should the array be sorted? Top to bottom or left to right.
* @param colums - Target amount of columns, if columns and rows are specified, columns is used.
* @param columns - Target amount of columns, if columns and rows are specified, columns is used.
* @param rows - target amount of rows, if columns and rows are specified, columns is used.
* @param customAlignmentLengths - Specify the lengths of each row or column individually, if alignement is horizontal, the first specified row must be the longuest.
* @returns A 2 dimension array containing the input array sorted into columns for display or the original array in case of invalid parameters.
Expand All @@ -200,41 +98,27 @@ const sortByParameters = function <Value>(
customAlignmentLengths?: number[]
): Value[][] {
if (customAlignmentLengths && customAlignmentLengths.length > 0) {
switch (alignment) {
case 'vertical':
return customVertical(arr, customAlignmentLengths);
case 'horizontal':
return customHorizontal(arr, customAlignmentLengths);
default:
return customVertical(arr, customAlignmentLengths);
}
return customSort(arr, customAlignmentLengths);
} else if (columns && columns > 0) {
switch (alignment) {
case 'vertical':
return verticalByColumns(arr, columns);
return splitSort(arr, columns);
case 'horizontal':
return horizontalByColumns(arr, columns);
return subsequentSort(arr, columns);
default:
return verticalByColumns(arr, columns);
return splitSort(arr, columns);
}
} else if (rows && rows > 0) {
switch (alignment) {
case 'vertical':
return verticalByRows(arr, rows);
return subsequentSort(arr, rows);
case 'horizontal':
return horizontalByRows(arr, rows);
return splitSort(arr, rows);
default:
return verticalByRows(arr, rows);
return subsequentSort(arr, rows);
}
} else {
switch (alignment) {
case 'vertical':
return verticalByColumns(arr, 2);
case 'horizontal':
return horizontalByRows(arr, 2);
default:
return verticalByColumns(arr, 2);
}
return splitSort(arr, 2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iiuc, what this PR changes also is that the alignment is now the responsibility of the widget/css instead of this group sorting, as before?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes

}
};

Expand Down
32 changes: 26 additions & 6 deletions packages/evolution-frontend/src/components/inputs/InputRadio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,11 +225,19 @@ export class InputRadio<CustomSurvey, CustomHousehold, CustomHome, CustomPerson>
const columnedChoiceInputs: JSX.Element[] = [];
for (let i = 0, count = widgetsByColumn.length; i < count; i++) {
const columnWidgets = widgetsByColumn[i];
columnedChoiceInputs.push(
<div className="survey-question__input-radio-group-column" key={i}>
{columnWidgets}
</div>
);
if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') {
columnedChoiceInputs.push(
<div className="survey-question__input-radio-group-column" key={i}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here too, instead of the if-then-else, you can use

className=`survey-question__input-radio-group-{this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical' ? 'column' : 'row' }`

to avoid code duplication.

{columnWidgets}
</div>
);
} else {
columnedChoiceInputs.push(
<div className="survey-question__input-radio-group-row" key={i}>
{columnWidgets}
</div>
);
}
}
return columnedChoiceInputs;
};
Expand Down Expand Up @@ -298,9 +306,21 @@ export class InputRadio<CustomSurvey, CustomHousehold, CustomHome, CustomPerson>
));
// separate by columns if needed:
const columnedChoiceInputs = this.getColumnedChoices(choiceInputs);
if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') {
return (
<div
className={`survey-question__input-radio-group-container${
this.props.widgetConfig.sameLine === false ? ' no-wrap' : ''
}`}
>
{columnedChoiceInputs}
</div>
);
}

return (
<div
className={`survey-question__input-radio-group-container${
className={`survey-question__input-radio-group-container-column${
this.props.widgetConfig.sameLine === false ? ' no-wrap' : ''
}`}
>
Expand Down
Loading