Найти в Дзене

Планировщик. Часть 6. Разные планы

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

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

Так как это очередной список, то тут все оказалось довольно просто в реализации. С помощью миграции я добавила таблицу plans, потом в таблицу categories я добавила еще одну колонку - plan_id. Но колонка обязательная, поэтому я удалила все данные в моей БД чтобы не было никаких конфликтов. Конечно если бы это был действующий проект то тут был бы иной подход, я бы добавила колонку, заполнила ее какими-то значениями и потом уже сделала бы ее обязательной для заполнения.

Миграция для создания plan
Миграция для создания plan

Для добавления колонки в таблицу category я отредактировала существующую миграцию, а миграцию с добавлением таблицы plan я разместила выше (то есть поменяла в названии цифру на более меньшую).

миграция для добавления таблицы категорий
миграция для добавления таблицы категорий

Срока onUpdate: cascade говорит о том, что при удалении записи в таблице plan, в таблице category все соответствующие записи также будут удалены.

И на бекенде сделала для планов отдельный каталог со всем необходимым

plans на бекенде
plans на бекенде

Дальше все как обычно - в service - функции для работы с БД - поиск, создание, редактирование, удаление. В resolver - описание для GraphQL.

На фронте - тоже все по аналогии с категориями, ничего не отличается.

Структура папок
Структура папок
PlanList
PlanList

Тут все просто - используется общий компонент ResultWrapper для отображения индикатора загрузки пока идет запрос. С помощью компонентов material Grid и Card отображаем элементы.

Для добавления элемента компонент AddPlan

AddPlan
AddPlan

Вот так все это выглядит в UI

Список планов
Список планов