mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
fix(question): show both language fields for MCQ options
Options editor used a single toggle-based bilingual field (BilingualInput) that swapped English/Amharic in place via a tiny, easy-to-miss button. Authors were filling English only and never noticing Amharic was empty. - QuestionOptionsEditor: show separate always-visible English/Amharic TextInputs per option instead of the toggle field. - BilingualInput (shared): for other callers still using the toggle, add a tooltip and a red dot indicator when the hidden language is empty, so the gap is visible without switching. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { ActionIcon, Alert, Button, Checkbox, Group, Loader, Stack, Text } from '@mantine/core';
|
||||
import { ActionIcon, Alert, Button, Checkbox, Group, Loader, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { IconGripVertical, IconInfoCircle, IconPlus, IconTrash } from '@tabler/icons-react';
|
||||
import { BilingualInput, notify, useErrorHandler } from '@ema-platform/ui';
|
||||
import { notify, useErrorHandler } from '@ema-platform/ui';
|
||||
import type { BilingualValue } from '@ema-platform/ui';
|
||||
import {
|
||||
useGetQuestionWithOptionsQuery,
|
||||
@@ -48,8 +48,10 @@ export function QuestionOptionsEditor({ questionId }: { questionId: string }) {
|
||||
// pretending to know what they were.
|
||||
}, [question]);
|
||||
|
||||
const updateText = (index: number, text: BilingualValue) => {
|
||||
setDraft((prev) => prev.map((o, i) => (i === index ? { ...o, text } : o)));
|
||||
const updateField = (index: number, lang: keyof BilingualValue, value: string) => {
|
||||
setDraft((prev) =>
|
||||
prev.map((o, i) => (i === index ? { ...o, text: { ...o.text, [lang]: value } } : o)),
|
||||
);
|
||||
};
|
||||
|
||||
const toggleCorrect = (index: number) => {
|
||||
@@ -93,26 +95,33 @@ export function QuestionOptionsEditor({ questionId }: { questionId: string }) {
|
||||
{t('question.options.hint')}
|
||||
</Alert>
|
||||
{draft.map((option, index) => (
|
||||
<Group key={index} gap="xs" wrap="nowrap" align="flex-end">
|
||||
<IconGripVertical size={16} style={{ opacity: 0.4, marginBottom: 8 }} />
|
||||
<BilingualInput
|
||||
label={t('question.options.optionLabel', { number: index + 1 })}
|
||||
value={option.text}
|
||||
onChange={(v) => updateText(index, v)}
|
||||
size="sm"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Group key={index} gap="xs" wrap="nowrap" align="center">
|
||||
<IconGripVertical size={16} style={{ opacity: 0.4 }} />
|
||||
<Stack gap={6} style={{ flex: 1 }}>
|
||||
<TextInput
|
||||
label={t('question.options.optionEn', { number: index + 1 })}
|
||||
value={option.text.en}
|
||||
onChange={(e) => updateField(index, 'en', e.currentTarget.value)}
|
||||
size="sm"
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label={t('question.options.optionAm', { number: index + 1 })}
|
||||
value={option.text.am}
|
||||
onChange={(e) => updateField(index, 'am', e.currentTarget.value)}
|
||||
size="sm"
|
||||
required
|
||||
/>
|
||||
</Stack>
|
||||
<Checkbox
|
||||
label={t('question.options.correct')}
|
||||
checked={option.isCorrect}
|
||||
onChange={() => toggleCorrect(index)}
|
||||
mb={4}
|
||||
/>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="red"
|
||||
size="sm"
|
||||
mb={4}
|
||||
disabled={draft.length <= 2}
|
||||
onClick={() => removeOption(index)}
|
||||
>
|
||||
|
||||
@@ -742,6 +742,8 @@ export const am: Translations = {
|
||||
title: "የመልስ አማራጮች",
|
||||
hint: "ትክክለኛውን አማራጭ ምረጥ/ምረጪ። ማስቀመጥ መላውን የአማራጭ ስብስብ ይተካል።",
|
||||
optionLabel: "አማራጭ {{number}}",
|
||||
optionEn: "አማራጭ {{number}} (እንግሊዝኛ)",
|
||||
optionAm: "አማራጭ {{number}} (አማርኛ)",
|
||||
correct: "ትክክለኛ",
|
||||
addOption: "አማራጭ ጨምር",
|
||||
save: "አማራጮችን አስቀምጥ",
|
||||
|
||||
@@ -743,6 +743,8 @@ export const en = {
|
||||
title: 'Answer Options',
|
||||
hint: 'Mark every correct option. Saving replaces the entire option set.',
|
||||
optionLabel: 'Option {{number}}',
|
||||
optionEn: 'Option {{number}} (English)',
|
||||
optionAm: 'Option {{number}} (Amharic)',
|
||||
correct: 'Correct',
|
||||
addOption: 'Add option',
|
||||
save: 'Save options',
|
||||
|
||||
Reference in New Issue
Block a user