Show the question bank as a table with a stable, right-aligned actions column
All checks were successful
CI/CD / build-test-deploy (pull_request) Successful in 1m39s

The old list showed type, text, and points inline via flexbox, with no
correct-answer info at all, and unstyled buttons that shifted position
depending on question text length. A table with a shrink-to-fit
actions column (text/kind/answer/points first, buttons last) fixes
both: correct answers are now visible, and button position no longer
depends on text length.
This commit is contained in:
danamir
2026-08-09 19:03:40 +03:00
parent b7177c455e
commit 24cce8ea71
2 changed files with 91 additions and 31 deletions

View File

@@ -65,6 +65,25 @@ let private kindLabel (t: QuestionTypeView) =
| ShortAnswerT _ -> "Короткий ответ"
| NumericT _ -> "Числовой"
/// Read-only rendering of a question's correct answer(s) for the teacher's
/// question-bank table distinct from `formFromSummary` in Types.fs, which
/// unpacks the same data to prefill the edit form instead of displaying it.
let private correctAnswerText (t: QuestionTypeView) =
match t with
| SingleChoiceT d ->
d.Options
|> List.tryFind (fun o -> o.Id = d.CorrectOptionId)
|> Option.map (fun o -> o.Text)
|> Option.defaultValue "—"
| MultipleChoiceT d ->
d.Options
|> List.filter (fun o -> List.contains o.Id d.CorrectOptionIds)
|> List.map (fun o -> o.Text)
|> String.concat ", "
| TrueFalseT b -> if b then "Верно" else "Неверно"
| ShortAnswerT d -> String.concat ", " d.AcceptedAnswers
| NumericT d -> sprintf "%s ± %s" (Format.points d.CorrectValue) (Format.points d.Tolerance)
let private questionsListView (model: Model) dispatch =
Html.div [
prop.className "questions-list"
@@ -78,30 +97,45 @@ let private questionsListView (model: Model) dispatch =
elif model.Questions.IsEmpty then
Html.p "В этой теме пока нет вопросов"
else
Html.ul [
Html.table [
prop.className "questions-table"
prop.children [
for q in model.Questions ->
Html.li [
prop.key (string q.Id)
prop.children [
Html.span [ prop.className "question-kind"; prop.text (kindLabel q.Type) ]
Html.text (sprintf " %s " q.Text)
Html.span [
prop.className "tag-mono"
prop.text (sprintf "%s б." (Format.points q.Points))
]
Html.button [
prop.type'.button
prop.onClick (fun _ -> dispatch (StartEditQuestion q.Id))
prop.text "Изменить"
]
Html.button [
prop.type'.button
prop.onClick (fun _ -> dispatch (RequestDeleteQuestion q.Id))
prop.text "Удалить"
Html.thead [
Html.tr [
Html.th [ prop.text "Текст вопроса" ]
Html.th [ prop.text "Тип" ]
Html.th [ prop.text "Правильный ответ" ]
Html.th [ prop.text "Баллы" ]
Html.th []
]
]
Html.tbody [
for q in model.Questions ->
Html.tr [
prop.key (string q.Id)
prop.children [
Html.td [ prop.text q.Text ]
Html.td [ prop.className "question-kind"; prop.text (kindLabel q.Type) ]
Html.td [ prop.text (correctAnswerText q.Type) ]
Html.td [ prop.className "tag-mono"; prop.text (Format.points q.Points) ]
Html.td [
prop.className "question-actions-cell"
prop.children [
Html.button [
prop.type'.button
prop.onClick (fun _ -> dispatch (StartEditQuestion q.Id))
prop.text "Изменить"
]
Html.button [
prop.type'.button
prop.onClick (fun _ -> dispatch (RequestDeleteQuestion q.Id))
prop.text "Удалить"
]
]
]
]
]
]
]
]
]
]