Найти тему

Планировщик. Часть 5. Действия

Это продолжение истории о создании проекта планировщик, предыдущие части: часть 1, часть 2, часть 3, часть 4 или смотри все части в подборке

Начинаю с БД - а именно написание миграции для создания таблицы

Таблица action
Таблица action

По столбцам таблицы все очень похоже на таблицу категорий, только тут добавляется еще одно поле - id категории, которой принадлежит действие.

В сервисе добавляю все необходимые функции для работы с БД - поиск, создание, добавление и редактирование

Функции для работы с БД
Функции для работы с БД
Обертки для GraphQL
Обертки для GraphQL

На этом все, бекенд готов!

На фронте что-то аналогичное отображению списка категорий, внутрь категории показываем список действий

-4

На данном этапе я все переношу из того порядка действий который был удобен мне в Excel. Конечно тут можно было все вместе делать - и добавление категорий и добавление действий в категории. Но на данном этапе я не пока не буду сильно продумывать UX - для MVP пока так, а дальше видно будет.

Структура папок для шага 2
Структура папок для шага 2
Страничка шага 2
Страничка шага 2

Я использую компонент общий для всех страни PageLayout в который передаю заголовок и что будет отрабатывать при нажатии на кнопки вперед/назад.

Для отображения карточек использую также элемент Card из materail-ui

CategoryActions - компонент для отображения действий по отдельной категории

CategoryActions
CategoryActions

Получение списка действий по категории вынесен в отдельный hook

useActions
useActions

Компонент NewAction для добавления нового действия

NewAction
NewAction

Редактирования пока нет в интерфейсе.

Продолжение следует...