davidarny / magnit Goto Github PK

• Написать соотвествующий Dockerfile в включающий node.js + postgresql

Для всех questions общий index

Имеется ввиду то, что если создать вопрос в секции, а потом в группе, будет два вопроса с индексом 1

У всех вопросов должен быть общий index

Это можно сделать путём создания общего состояния в TemplateEditor и передачи этого состояние в QuestionItemPuzzle, который будет на mount (useEffect без dependencies) инкрементировать счётчик, а на unmount (возвращаемая функция в useEffect) декрементировать

Моки сервисов можно опустить в этом случае
https://stackoverflow.com/questions/57099863/spyon-typeorm-repository-to-change-the-return-value-for-unit-testing-nestjs

Дублирование кода в компонентах Conditions и Validations 🔪 💣

https://github.com/DavidArutiunian/magnit/blob/7fbd179ea3115580b0326a3ec6ec5f4e22d2b1c1/packages/template-editor/src/services/item/creator.tsx#L51

Current type (${type}) factory does not exist!

Но только там, где функция использует данные из props

Краткий алгоритм действий:

• Добавить в компонент PuzzleToolbar обработчик onDeletePuzzle

• В обработчике вызвать traverse (обходчик дерева), и проверить что текущий объект содержит в свойстве puzzles (если свойство puzzle есть) пазл с id равный focusedPuzzleId, где focusedPuzzleId это head(focusedPuzzleChain)

• Если объект найден, удалить из массива (puzzles.splice(foundPuzzleIndex, 1))

P.S.
Нужно не допускать удаление корня дерева!

P.P.S
Пример дерева можно посмотреть в консоли через window.template

Шаблон конфига https://github.com/juev/heroku-nginx-conf
Блидпак https://github.com/heroku/heroku-buildpack-nginx

• Сложные стили основанные на вложенных селекторах

• Пагинация

packages/template-editor/src/items/question-puzzle/QuestionFactory.tsx

Рекомендации к исправлению:

Ctrl+Alt+Shift+P

либо

Ctrl+Shift+A -> Prettier -> выбрать Reformat with Prettier

https://github.com/DavidArutiunian/magnit/blob/4358c85a27c12f3149ff8b56138be435bc859924/packages/template-editor/src/TemplateEditor.tsx#L112-L119

https://github.com/DavidArutiunian/magnit/blob/4358c85a27c12f3149ff8b56138be435bc859924/packages/template-editor/src/TemplateEditor.tsx#L144-L151

https://github.com/DavidArutiunian/magnit/blob/4358c85a27c12f3149ff8b56138be435bc859924/packages/template-editor/src/TemplateEditor.tsx#L190-L197

https://github.com/DavidArutiunian/magnit/blob/4358c85a27c12f3149ff8b56138be435bc859924/packages/template-editor/src/TemplateEditor.tsx#L120-L127

https://github.com/DavidArutiunian/magnit/blob/4358c85a27c12f3149ff8b56138be435bc859924/packages/template-editor/src/TemplateEditor.tsx#L152-L159

https://github.com/DavidArutiunian/magnit/blob/4358c85a27c12f3149ff8b56138be435bc859924/packages/template-editor/src/TemplateEditor.tsx#L198-L205

Должна высчитываться динамически...

https://github.com/DavidArutiunian/magnit/blob/4358c85a27c12f3149ff8b56138be435bc859924/packages/template-editor/src/TemplateEditor.tsx#L48

TODO:

• Conditions для вопросов

• Добавление conditions

• Выбор condition type

• Сохранение в template

После этой #20

Сам тулбар 👇

По клику на + возможность выбора сущности 👇

• Убрать isActive

• В fill пихнуть currentColor

Как в Google Forms 👇

• Кнопка и логика показа/скрытия

• Логика добавления RADIO_ANSWER

• В раздел можно добавить вопрос

• Группа может указывать только на один вопрос

• У группы нет title

• Группа всегда содержит conditions

• Scope видимости conditions

• если в group - текущий group

• если в section - текущий section

Сейчас создаётся пустой раздел 👇

PR #32 сломал поведение сайдбара

По клику на вопрос он не перемещается к вопросу

Рекомендации:

Либо получать нужные для выделение обработчики через контекст (можно исползовать хук useContext, это удобнее чем Consumer/Provider), либо забить и переименовать на <ЕщёОдинКакойТо>Wrapper

P.S.

ИМХО лучше сохранить семантику clickable и взять по контексту

Вопрос должен автоматически добавляться внутрь последней секции

В #10 убирается прежнее поведение blur

Было:

if (isOverToolbar) {
    event.preventDefault();
    event.stopPropagation();
} else {
    setFocusedPuzzleChain([]);
}

Стало:

event.preventDefault();
event.stopPropagation();

Где теперь вызывать setFocusedPuzzleChain([]);? 🤔

Тесты модуля Template используют JSON файл в моках сервисов

Тут показано 👇

Сейчас добавление происходит по кнопке + в зависимости от контекста

Вопросы должны помещаться внутрь группы

• Использует цвета из темы, но не используют саму тему

• scheme не типизирован

• Должен называться просто Button

• @magnit/components

• @magnit/icons

• @magnit/services

• @magnit/task-editor

• @magnit/template-editor

• RADIO_ANSWER

• CHECKBOX_ANSWER

• DROPDOWN_ANSWER

• REFERENCE_ANSWER ❓ (пока решили не делать, сложно)

• UPLOAD_FILES ❓ (пока решили не делать, сложно)

• DATE_ANSWER

• TEXT_ANSWER

• NUMERIC_ANSWER

• Не должен принимать title (контент в children)

• Не должен принимать icon (контент в children)

• Дублирующийся css в variants

Такое поведение нужно для того, чтобы сфокусированная область не расфокусировалась по клику вне области

После обновления шаблона может оказаться так, что с некоторыми пазлами связь потеряна. Их нужно определять, помечать и удалять.

P.S.

То же самое нужно проделать для ассетов

Шаги:

1. Создать вопрос с типом Несколько из списка
2. Создать группу, ссылающуюся на этот вопрос
3. Изменить название вопроса
4. Перевести фокус на группу

Ожидание:
В группе изменится название вопроса

Реальность:
Название вопроса остаётся предыдущим

• packages/template-editor/src/items/text-answer-puzzle/TextAnswerFactory.tsx

• packages/template-editor/src/items/radio-answer-puzzle/RadioAnswerFactory.tsx

• packages/template-editor/src/items/numeric-answer-puzzle/NumericAnswerFactory.tsx

• packages/template-editor/src/items/date-answer-puzzle/DateAnswerFactory.tsx

• packages/template-editor/src/items/checkbox-answer-puzzle/CheckboxAnswerFactory.tsx

• packages/template-editor/src/components/fields/InputField.tsx

• packages/template-editor/src/components/content/ContentSection.tsx

• packages/template-editor/src/components/content/ContentGroup.tsx

В самое начало нужно добавить /** @jsx jsx */
Либо для копмонентов не использующих css можно не импортить jsx вовсе и просто как обычно

import * as React from "react";

packages/template-editor/src/components/fields/InputField.tsx

Сейчас вставляется

{
    "sections": [{...}, {...}]
}

А нужно

[{...}, {...}]

Должен быть размером с toolbar

Лучше вычислять динамически 🍺