Порівняння версій схем UI-форм регламенту реєстру

Функціональні сценарії

  • Side-by-side порівняння версій UI-форм бізнес-процесів регламенту реєстру

  • Side-by-side порівняння JSON-коду представлень версій UI-форм бізнес-процесів

  • Перегляд деталей змін на рівні властивостей окремих елементів Components UI-форм

Side-by-side перегляд змін JSON-коду розглядається в окремій задачі - Аналіз JSON-редакторів на відповідність

Ключові вимоги

  • Синхронність Side-by-Side перегляду версій UI-форм

  • Маркування кольорами відмінностей на рівні окремих елементів Components UI-форм

    • Додано

    • Змінено

    • Видалено

  • Перегляд змін властивостей при наведенні на елемент UI-форми

  • Перегляд агрегованого переліку відмінностей між UI-формами

Технологічний стек

Для реалізації рішення, використано тільки існуючі в проекті технології. Внутрішніх можливостей для візуального порівняння версій форм Form.io не має. Тому цей функціонал реалізовується самостійно

Технологія / Бібліотека Версія Ліцензія Документація Опис

ReactJS

17.0.2

MIT

https://reactjs.org/docs/getting-started.html

JavaScript бібліотека для побудови інтерфейсів користувача

TypeScript

4.1.6

Apache-2.0

https://www.typescriptlang.org/docs/

Строго типізована мова програмування на базі JavaScript

formio.js

4.13.12

MIT

https://github.com/formio/formio.js/wiki

Бібліотека для створення та відображення форм на базі JSON схем

Технологічна реалізація

Підсвічування відповідними кольорами змінених компонентів форми реалізовано шляхом додавання додаткового CSS класу кожному компоненту. Додатковий клас з відповідним кольором додається у властивість customClass кожного компоненту

Інтерфейс користувача

Екран порівняння форм без змін у формі

form diff clean

Екран порівняння форм зі змінами у формі

  • Змінено компонент Select

  • Додано компонент Number

  • Видалено компонент TextField

form diff edited

Екран порівняння форм зі списком змін

В таблиці відображено зміни які було зроблено в формі у декількох компонентів. Відображено старе та нове значення для кожної властивості що було змінено

form diff table