[M2-2643] Feature: Matrix: Single Selection per Row Item (#421)

* The singleSelectRows type was added into supportableResponseTypes

* ActivityItemDetailsDTO was extended with SingleSeletPerRow

* Create SingleSelectPerRow type for Redux store

* Refactor of Matrix elements to make it reusable

* Create the MatrixSingleSelect component

* Create mapper to answer

* Fix mobile version of matrix grid

---------

Co-authored-by: Viktor Riabkov <[email protected]>

src/abstract/lib/constants.ts

@@ -14,4 +14,5 @@ export const supportableResponseTypes = [
   'timeRange',
   'audioPlayer',
   'multiSelectRows',
+  'singleSelectRows',
 ];

src/entities/activity/lib/types/item.ts

@@ -2,8 +2,9 @@ import { ConditionalLogic } from '~/shared/api';
 
 export type DefaultAnswer = Array<string>;
 export type MatrixMultiSelectAnswer = Array<Array<string | null>>;
+export type SingleMultiSelectAnswer = Array<string | null>;
 
-export type Answer = DefaultAnswer | MatrixMultiSelectAnswer;
+export type Answer = DefaultAnswer | MatrixMultiSelectAnswer | SingleMultiSelectAnswer;
 
 export type ActivityItemType =
   | 'text'
@@ -313,3 +314,23 @@ export type MatrixSelectRow = {
   rowImage: string | null;
   tooltip: string | null;
 };
+
+export interface SingleSelectionRowsItem extends ActivityItemBase {
+  responseType: 'singleSelectRows';
+  config: SingleSelectionRowsItemConfig;
+  responseValues: SingleSelectionRowsItemResponseValues;
+  answer: SingleMultiSelectAnswer;
+}
+
+export type SingleSelectionRowsItemConfig = ButtonsConfig &
+  TimerConfig & {
+    addScores: boolean;
+    setAlerts: boolean;
+    addTooltip: boolean;
+  };
+
+export type SingleSelectionRowsItemResponseValues = {
+  rows: Array<MatrixSelectRow>;
+  options: Array<MatrixSelectOption>;
+  dataMatrix: DataMatrix;
+};

src/entities/activity/ui/items/ItemPicker.tsx

@@ -1,7 +1,8 @@
 import { AudioPlayerItem } from './AudioPlayerItem';
 import { CheckboxItem } from './CheckboxItem';
 import { DateItem } from './DateItem';
-import { MatrixCheckboxItem } from './MatrixCheckboxItem';
+import { MatrixCheckboxItem } from './Matrix/MatrixMultiSelectItem';
+import { MatrixRadioItem } from './Matrix/MatrixSingleSelectItem';
 import { RadioItem } from './RadioItem';
 import { SelectorItem } from './SelectorItem';
 import { SliderItem } from './SliderItem';
@@ -103,6 +104,16 @@ export const ItemPicker = ({ item, onValueChange, isDisabled, replaceText }: Ite
         />
       );
 
+    case 'singleSelectRows':
+      return (
+        <MatrixRadioItem
+          item={item}
+          values={item.answer}
+          onValueChange={onValueChange}
+          replaceText={replaceText}
+        />
+      );
+
     default:
       return <></>;
   }

src/entities/activity/ui/items/MatrixCheckboxItem/MatrixCell.tsx → src/entities/activity/ui/items/Matrix/MatrixCell.tsx

@@ -15,13 +15,15 @@ export const MatrixCell = ({ children, isRowLabel }: Props) => {
 
   return (
     <Box
+      display="flex"
       height={lessThanTarget ? '100px' : '112px'}
       padding={lessThanTarget ? '8px' : '14px'}
       justifyContent="center"
       alignItems="center"
       width={isRowLabel ? rowLabelWidth : '100%'}
       minWidth={lessThanTarget ? '70px' : '142px'}
       maxWidth="400px"
+      data-testid="matrix-cell"
     >
       {children}
     </Box>

src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxButton.tsx

@@ -0,0 +1,40 @@
+import Box from '@mui/material/Box';
+
+import { MatrixCell } from '../MatrixCell';
+
+import { CheckboxItem, SelectBaseBox } from '~/shared/ui';
+import { useCustomMediaQuery } from '~/shared/utils';
+
+type Props = {
+  id: string;
+  isChecked: boolean;
+  text: string;
+
+  onChange: () => void;
+};
+
+export const CheckboxButton = ({ id, isChecked, text, onChange }: Props) => {
+  const { lessThanSM } = useCustomMediaQuery();
+
+  return (
+    <Box flex={1} key={id} data-testid="matrix-checkbox-button-container">
+      <MatrixCell>
+        <SelectBaseBox
+          color={null}
+          onHandleChange={onChange}
+          checked={isChecked}
+          justifyContent="center"
+          padding={lessThanSM ? '12px 8px' : '16px'}
+        >
+          <CheckboxItem
+            id={id}
+            name={text}
+            value={text}
+            disabled={false}
+            defaultChecked={isChecked}
+          />
+        </SelectBaseBox>
+      </MatrixCell>
+    </Box>
+  );
+};

src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxGrid.tsx

@@ -0,0 +1,48 @@
+import Box from '@mui/material/Box';
+
+import { CheckboxButton } from './CheckboxButton';
+import { MatrixMultiSelectAnswer, MatrixSelectOption, MatrixSelectRow } from '../../../../lib';
+import { MatrixHeader } from '../MatrixHeader';
+import { MatrixRow } from '../MatrixRow';
+
+type Props = {
+  options: Array<MatrixSelectOption>;
+  rows: Array<MatrixSelectRow>;
+
+  onChange: (rowIndex: number, optionIndex: number, value: string) => void;
+  values: MatrixMultiSelectAnswer;
+};
+
+export const CheckboxGrid = ({ rows, options, onChange, values }: Props) => {
+  return (
+    <Box display="flex" flex={1} flexDirection="column" data-testid="matrix-checkbox-grid">
+      <MatrixHeader options={options} />
+
+      {rows.map((row, rowI) => {
+        const isEven = rowI % 2 === 0;
+
+        return (
+          <MatrixRow
+            key={row.id}
+            isEven={isEven}
+            item={{ id: row.id, imageUrl: row.rowImage, text: row.rowName, tooltip: row.tooltip }}
+          >
+            {options.map((option, optionI) => {
+              const isChecked = Boolean(values[rowI]?.[optionI]);
+
+              return (
+                <CheckboxButton
+                  key={option.id}
+                  id={option.id}
+                  text={option.text}
+                  isChecked={isChecked}
+                  onChange={() => onChange(rowI, optionI, option.text)}
+                />
+              );
+            })}
+          </MatrixRow>
+        );
+      })}
+    </Box>
+  );
+};

src/entities/activity/ui/items/MatrixCheckboxItem/index.tsx → src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/index.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { StackedItemsGrid } from './StackedItemsGrid';
-import { MatrixMultiSelectAnswer, MultiSelectionRowsItem } from '../../../lib';
+import { CheckboxGrid } from './CheckboxGrid';
+import { MatrixMultiSelectAnswer, MultiSelectionRowsItem } from '../../../../lib';
 
 type Props = {
   item: MultiSelectionRowsItem;
@@ -57,7 +57,7 @@ export const MatrixCheckboxItem = ({ item, values, onValueChange, replaceText }:
   };
 
   return (
-    <StackedItemsGrid
+    <CheckboxGrid
       options={memoizedOptions}
       rows={memoizedRows}
       onChange={handleValueChange}

src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioButton.tsx

@@ -0,0 +1,36 @@
+import Box from '@mui/material/Box';
+
+import { MatrixCell } from '../MatrixCell';
+
+import { RadioOption, SelectBaseBox } from '~/shared/ui';
+
+type Props = {
+  id: string;
+  isChecked: boolean;
+  text: string;
+
+  onChange: () => void;
+};
+
+export const RadioButton = ({ id, text, isChecked, onChange }: Props) => {
+  return (
+    <Box flex={1} key={id} data-testid="matrix-radio-button-container">
+      <MatrixCell>
+        <SelectBaseBox
+          color={null}
+          onHandleChange={onChange}
+          checked={isChecked}
+          justifyContent="center"
+        >
+          <RadioOption
+            id={id}
+            name={text}
+            value={text}
+            disabled={false}
+            defaultChecked={isChecked}
+          />
+        </SelectBaseBox>
+      </MatrixCell>
+    </Box>
+  );
+};

src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioGrid.tsx

@@ -0,0 +1,48 @@
+import Box from '@mui/material/Box';
+
+import { RadioButton } from './RadioButton';
+import { MatrixSelectOption, MatrixSelectRow, SingleMultiSelectAnswer } from '../../../../lib';
+import { MatrixHeader } from '../MatrixHeader';
+import { MatrixRow } from '../MatrixRow';
+
+type Props = {
+  options: Array<MatrixSelectOption>;
+  rows: Array<MatrixSelectRow>;
+
+  onChange: (rowIndex: number, value: string) => void;
+  values: SingleMultiSelectAnswer;
+};
+
+export const RadioGrid = ({ rows, options, onChange, values }: Props) => {
+  return (
+    <Box display="flex" flex={1} flexDirection="column" data-testid="matrix-radio-grid">
+      <MatrixHeader options={options} />
+
+      {rows.map((row, rowI) => {
+        const isEven = rowI % 2 === 0;
+
+        return (
+          <MatrixRow
+            key={row.id}
+            isEven={isEven}
+            item={{ id: row.id, imageUrl: row.rowImage, text: row.rowName, tooltip: row.tooltip }}
+          >
+            {options.map((option) => {
+              const isChecked = option.text === values[rowI];
+
+              return (
+                <RadioButton
+                  key={option.id}
+                  id={option.id}
+                  text={option.text}
+                  isChecked={isChecked}
+                  onChange={() => onChange(rowI, option.text)}
+                />
+              );
+            })}
+          </MatrixRow>
+        );
+      })}
+    </Box>
+  );
+};

src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/index.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+
+import { RadioGrid } from './RadioGrid';
+import { SingleMultiSelectAnswer, SingleSelectionRowsItem } from '../../../../lib';
+
+type Props = {
+  item: SingleSelectionRowsItem;
+  values: SingleMultiSelectAnswer;
+
+  onValueChange: (value: SingleMultiSelectAnswer) => void;
+  replaceText: (value: string) => string;
+};
+
+export const MatrixRadioItem = ({ item, values, onValueChange, replaceText }: Props) => {
+  const { options, rows } = item.responseValues;
+
+  const memoizedOptions = useMemo(() => {
+    return options.map((el) => ({
+      ...el,
+      tooltip: el.tooltip ? replaceText(el.tooltip) : null,
+    }));
+  }, [options, replaceText]);
+
+  const memoizedRows = useMemo(() => {
+    return rows.map((el) => ({
+      ...el,
+      tooltip: el.tooltip ? replaceText(el.tooltip) : null,
+    }));
+  }, [replaceText, rows]);
+
+  const memoizedValues = useMemo(() => {
+    const initialAnswer = memoizedRows.map(() => null);
+
+    return values.length ? values : initialAnswer;
+  }, [memoizedRows, values]);
+
+  const handleValueChange = (rowIndex: number, value: string) => {
+    const newValues = memoizedValues.map((row, i) => {
+      if (i === rowIndex) {
+        const hasAnswer = row !== null;
+        const isSameAnswer = row === value;
+
+        if (hasAnswer && isSameAnswer) {
+          return null;
+        } else {
+          return value;
+        }
+      }
+
+      return row;
+    });
+
+    onValueChange(newValues);
+  };
+
+  return (
+    <RadioGrid
+      options={memoizedOptions}
+      rows={memoizedRows}
+      onChange={handleValueChange}
+      values={memoizedValues}
+    />
+  );
+};