Глава 4: Плагины задач и комментариев

Возвращаясь к предыдущей главе

Помните задание из прошлой главы? Нам нужно было настроить поля Статус и Вложение в таблице задач и отобразить их в списке задач. Без лишних слов раскрываем ответ!

  1. Настройка поля «Статус»:
    • Выберите тип поля Выпадающий список (одиночный выбор), укажите варианты: Не начато, В работе, На проверке, Выполнено, Отменено, В архиве. Цвета настройте на свой вкус — добавьте задачам красок!

Настройка поля статуса

  1. Настройка поля «Вложение»:
    • Создайте поле Вложение, задайте ему имя, например «Вложение», и подтвердите — готово.

  1. Показ полей «Создатель» и «Статус» в списке задач:
    • В табличном блоке отметьте поля «Создатель», «Статус» и «Вложение», чтобы список задач стал информативнее.

Поля в списке задач

  1. Отображение полей в формах «Добавить» и «Редактировать»:
    • В модальной форме не забудьте отметить поля «Статус» и «Вложение», чтобы они были доступны при добавлении и редактировании задачи.

Поля в форме

Получилось здорово, правда? Повторите эти действия несколько раз — и Вы постепенно освоите ключевые приёмы работы с NocoBase. Каждое действие закладывает прочный фундамент для последующего управления задачами. Идём дальше!


4.1 Содержимое задач и комментарии: интерактивное управление задачами

К этому моменту Ваша система может хранить базовую информацию о задачах. Однако, как Вы понимаете, управление задачами — это не только пара строк описания. Иногда нужно более насыщенное содержимое и возможность общения участников в реальном времени.

4.1.1 Markdown(Vditor): обогащаем содержимое задач

Возможно, Вы уже заметили в NocoBase редакторы Богатый текст и Markdown, но их возможностей может оказаться недостаточно. Возможности редактора богатого текста ограничены, а Markdown-редактор хорош, но не поддерживает предпросмотр в реальном времени.

Существует ли редактор, который и предпросмотр в реальном времени поддерживает, и обладает богатой функциональностью? Да! Markdown(Vditor) — самый мощный текстовый редактор в NocoBase: поддерживает предпросмотр в реальном времени, загрузку изображений и даже запись звука. Он встроен в систему и полностью бесплатен!

О плагинах: Plugin — одна из ключевых возможностей NocoBase, позволяющая добавлять собственный функционал или интегрировать сторонние сервисы под нужды проекта. С их помощью можно реализовать удобные или неожиданные интеграции, что упрощает Вашу работу и разработку.

Сейчас мы шаг за шагом включим этот мощный редактор. Помните Менеджер плагинов? Точно — он там и находится.

Markdown(Vditor): используется для хранения Markdown и рендерится редактором Vditor. Поддерживает стандартный синтаксис Markdown — списки, код, цитаты и т. п., — а также загрузку изображений, запись аудио и т. д. Обеспечивает мгновенный рендеринг в стиле WYSIWYG.

  1. Включение плагина Markdown(Vditor):
    • Откройте Менеджер плагинов в правом верхнем углу, введите в поиске «markdown» и включите Markdown(Vditor). Не пугайтесь короткой перезагрузки страницы — через несколько секунд всё вернётся в норму.

Включение плагина Markdown

  1. Создание поля Markdown:

    • Вернитесь в таблицу задач, нажмите «Создать поле» — в списке появился наш «Markdown Pro Plus»!

  • Дайте ему имя, например «Детали задачи (task_detail)», и отметьте все доступные функции.
  1. Возможно, Вы заметили опцию «Таблица данных файлов». Если её не выбрать — пострадает ли работа с файлами? Не волнуйтесь: файлы будут сохраняться в хранилище по умолчанию, можете спокойно использовать поле.

  1. Тестирование поля Markdown:
    • Вернитесь на страницу управления задачами и напишите свой первый текст в Markdown! Попробуйте вставить изображение или загрузить файл — впечатляюще, не правда ли?

Таблица задач становится всё богаче! Каждый шаг расширяет возможности системы. Теперь посмотрим, как настроить расположение полей, чтобы UI выглядел аккуратнее.

4.1.2 Настройка расположения полей

С увеличением количества полей макет страницы может выглядеть беспорядочно — но гибкость NocoBase позволяет легко его перестраивать.

Перемещение поля:

  • Наведите курсор на иконку-крест в правом верхнем углу поля, зажмите её и перетащите поле в нужное место. Отпустите — готово! Попробуйте: страница сразу станет аккуратнее.

Перемещение поля

После таких настроек макет лучше соответствует Вашим потребностям. Теперь добавим к задачам функцию комментариев, чтобы участники могли удобнее взаимодействовать.

4.2 Комментарии

Только описаний задач недостаточно — нужно, чтобы команда могла оставлять комментарии, обсуждать вопросы и фиксировать обратную связь. Приступим к реализации.

4.2.1 Способ 1: использовать плагин комментариев

4.2.1.1 Установка плагина комментариев

Плагин комментариев (коммерческий): предоставляет шаблон таблицы комментариев и блок, позволяющий добавлять комментарии к данным любой таблицы.

Внимание: при добавлении комментариев нужно использовать связь по полю отношения с целевой таблицей, чтобы избежать конфликтов данных.

В Менеджере плагинов загрузите и включите Плагин комментариев. После активации в источнике данных появится новый пункт «Таблица комментариев». Нажмите «Добавить» > «Загрузить плагин» > перетащите архив > подтвердите. Найдите «Comments» — плагин уже доступен! Включите его, перейдите в источник данных — пункт «Таблица комментариев» появился, установка выполнена!

Установка плагина комментариев

4.2.1.2 Создание таблицы комментариев

Перейдите в источник данных и создайте таблицу комментариев — Таблица комментариев (Comments).

4.2.1.3 Связь между таблицей комментариев и таблицей задач

Мы создали Таблицу комментариев (Comments). Возможно, Вы подумаете: можно ли сразу нарисовать на странице блок комментариев? Не торопитесь, давайте подумаем: у каждой задачи свой раздел комментариев, и связь между комментариями и задачами должна быть многие-к-одному. Как же связать их?

Здесь нам нужно «поле отношения»!

NocoBase позволяет с помощью полей отношений выстраивать связи между таблицами на уровне данных, словно мосты, соединяющие связанные данные.

Почему именно многие-к-одному?

Почему мы выбираем связь многие-к-одному, а не один-ко-многим или другую? Вспомните: у одной задачи много комментариев, поэтому несколько комментариев могут указывать на одну задачу. В этом случае в таблице комментариев нужно создать поле многие-к-одному, ссылающееся на задачу в таблице задач.

Сообразительный читатель уже подумал: Если связь комментариев и задач — многие-к-одному, нельзя ли в таблице задач завести поле один-ко-многим, указывающее на таблицу комментариев? Совершенно верно, поздравляем! Один-ко-многим и многие-к-одному — взаимно обратные связи. В таблице задач можно создать поле один-ко-многим, ссылающееся на комментарии. Молодец!

4.2.1.4 Настройка поля отношения многие-к-одному

Теперь создадим в таблице комментариев поле отношения многие-к-одному, связанное с таблицей задач. Назовём его Принадлежит задаче (belong_task). При настройке важно учесть несколько ключевых параметров:

  1. Исходная таблица: откуда строим отношение? Здесь это Таблица комментариев.
  2. Целевая таблица: с какой таблицей выстраиваем связь? Здесь — Таблица задач.

Внешний ключ и идентификатор поля целевой таблицы — пример: Дальше — самое важное: внешний ключ и идентификатор поля целевой таблицы. Звучит сложно? Не пугайтесь, разберём на детальном примере.

Представьте сценарий: у Вас на руках множество ведомостей с результатами вступительных экзаменов, и нужно сопоставить каждую ведомость соответствующему студенту. Как это сделать? На ведомости такие данные:

  • Имя: Чжан Сань
  • Класс: 15-й класс старшей школы (выпускной)
  • Номер экзаменационного билета: 202300000001
  • Номер удостоверения личности: 111111111111 Допустим, Вы хотите найти Чжан Саня по имени и классу. Но в школе много однофамильцев — только в этом классе 20 студентов с именем Чжан Сань! По имени и классу однозначно понять, какой именно Чжан Сань нам нужен, не получится. Нужен более уникальный идентификатор. Например, номер экзаменационного билета уникален для каждого студента: по нему можно точно найти владельца ведомости. Например, Вы отправили запрос с номером 202300000001 — школа отвечает: «Эта ведомость принадлежит Чжан Саню, тому самому, который сидит в 3-м ряду нашего 15-го выпускного класса в очках!» По той же логике в сценарии с комментариями: возьмём в таблице задач уникальное поле (например, id) и сохраним его в комментарии — так мы определим, к какой задаче относится каждый комментарий. В этом и состоит ключевая идея связи многие-к-одному — внешний ключ. Всё просто, верно?

В таблице комментариев сохраним этот уникальный id задачи в поле, которое назовём task_id. Теперь по task_id комментарий и задача связаны.

4.2.1.5 Стратегии обработки внешнего ключа при удалении

Настроив связь многие-к-одному в NocoBase, нужно подумать, как обрабатывать комментарии при удалении задачи. Возможны варианты:

  • CASCADE: при удалении задачи будут удалены все связанные комментарии.
  • SET NULL (по умолчанию): задача удаляется, но комментарии остаются, а внешний ключ обнуляется.
  • RESTRICT и NO ACTION: пока у задачи есть связанные комментарии, система не позволит её удалить — это защищает комментарии от потери.

4.2.1.7 Создание обратной связи в таблице задач

Наконец, поставим галочку «Создавать обратное поле в целевой таблице» — это позволит просматривать все связанные комментарии прямо из задачи, что упростит работу с данными.

В NocoBase место хранения поля отношения определяет способ получения данных. Чтобы видеть комментарии в таблице задач, нам нужно поле один-ко-многим, связывающее задачу с таблицей комментариев.

При следующем открытии таблицы задач Вы увидите автоматически созданное поле комментариев с пометкой «один-ко-многим» — теперь можно удобно просматривать и управлять комментариями!

4.3 Сборка страницы

4.3.1 Подключение таблицы комментариев

Долгожданный момент: возвращаемся в окно редактирования задачи, создаём блок таблицы комментариев и отмечаем нужные функции — готово!

demov3N-16.gif

4.3.2 Настройка страницы

Немного облагородим макет: наведите курсор на правый верхний угол кнопки «Редактировать» и выберите более широкое модальное окно. Затем перетащите блок комментариев в правую часть окна — отлично!

demov3N-17.gif

Кто-то из читателей уже мог подумать: «Я тоже хочу комментарии!» Не волнуйтесь, для Вас есть и второй, бесплатный вариант.

4.2.2 Способ 2: собственная таблица комментариев

Если плагин комментариев Вы не покупали, можно реализовать аналогичную функциональность через обычную таблицу.

  1. Создание таблицы комментариев:

    • Создайте Таблицу комментариев (comments2), добавьте поле Содержимое комментария (content) (тип Markdown) и поле Принадлежит задаче (belong_task) (тип многие-к-одному).
  2. Создание блока списка комментариев на странице:

    • В модальном окне редактирования задачи добавьте блок «Список» (это уже третий тип блока в наших уроках; список умеет показывать детали полей записи), выберите комментарии и протестируйте: Создание блока списка комментариев

Итог

Вы научились обогащать содержимое задач с помощью Markdown(Vditor) и добавили к задачам функцию комментариев! У системы управления задачами уже есть полноценный набор базовой функциональности — кажется, до настоящего профессионального инструмента остался один шаг!

Не забывайте экспериментировать — возможностей у NocoBase огромное множество. Если возникнут трудности — не паникуйте, я буду рядом и проведу Вас через каждый шаг.

В следующей главе (Глава 5: Вкладки и блоки — насыщенные представления, яркая картина) мы глубже погрузимся в возможности блоков NocoBase и поднимем систему на новый уровень. Не сбавляйте темп!


Продолжайте экспериментировать! Если возникнут вопросы — не забывайте о официальной документации NocoBase и сообществе NocoBase.