feat(frontend): Improve version comparison
This commit is contained in:
@@ -3,72 +3,405 @@ import type {
|
||||
ApplicationFormSnapshotDto,
|
||||
FormElementDto,
|
||||
FormElementSnapshotDto,
|
||||
FormOptionDto
|
||||
FormOptionDto,
|
||||
FormElementType
|
||||
} from '~~/.api-client'
|
||||
import type { FormDiff, ElementModification, OptionChange, OptionModification } from '~~/types/formDiff'
|
||||
import type { FormValueDiff, ValueChange, SectionChanges, TableDiff, TableRowDiff } from '~~/types/formDiff'
|
||||
|
||||
export function compareApplicationForms(
|
||||
// Element types that use true/false selection model
|
||||
const SELECTION_TYPES: FormElementType[] = ['SELECT', 'RADIOBUTTON', 'CHECKBOX', 'SWITCH']
|
||||
|
||||
// Element types that store text in the first option's value
|
||||
const TEXT_INPUT_TYPES: FormElementType[] = ['TEXTFIELD', 'TEXTAREA', 'RICH_TEXT', 'DATE']
|
||||
|
||||
/**
|
||||
* Compare two application forms and return a value-based diff for improved UX.
|
||||
* This focuses on what values changed rather than technical option-level changes.
|
||||
*/
|
||||
export function compareApplicationFormValues(
|
||||
current: ApplicationFormDto,
|
||||
versionSnapshot: ApplicationFormSnapshotDto
|
||||
): FormDiff {
|
||||
const diff: FormDiff = {
|
||||
elementsAdded: [],
|
||||
elementsRemoved: [],
|
||||
elementsModified: []
|
||||
): FormValueDiff {
|
||||
const diff: FormValueDiff = {
|
||||
newAnswers: [],
|
||||
changedAnswers: [],
|
||||
clearedAnswers: []
|
||||
}
|
||||
|
||||
const currentElements = flattenFormElements(current)
|
||||
const versionElements = flattenSnapshotElements(versionSnapshot)
|
||||
|
||||
const currentElementsMap = new Map(
|
||||
currentElements.map((el, idx) => [
|
||||
createElementKey(el.element, idx),
|
||||
{ element: el.element, index: idx, sectionTitle: el.sectionTitle }
|
||||
])
|
||||
// Create maps by reference for matching elements
|
||||
const currentByRef = new Map(
|
||||
currentElements.filter((el) => el.element.reference).map((el) => [el.element.reference!, el])
|
||||
)
|
||||
const versionElementsMap = new Map(
|
||||
versionElements.map((el, idx) => [
|
||||
createSnapshotElementKey(el.element, idx),
|
||||
{ element: el.element, index: idx, sectionTitle: el.sectionTitle }
|
||||
])
|
||||
const versionByRef = new Map(
|
||||
versionElements.filter((el) => el.element.reference).map((el) => [el.element.reference!, el])
|
||||
)
|
||||
|
||||
for (const [key, currentData] of currentElementsMap) {
|
||||
if (!versionElementsMap.has(key)) {
|
||||
diff.elementsAdded.push({
|
||||
sectionTitle: currentData.sectionTitle,
|
||||
title: currentData.element.title,
|
||||
type: currentData.element.type,
|
||||
position: currentData.index
|
||||
})
|
||||
// Compare elements that exist in current form
|
||||
for (const [ref, currentData] of currentByRef) {
|
||||
const elementType = currentData.element.type
|
||||
const versionData = versionByRef.get(ref)
|
||||
|
||||
// Extract the actual user-selected/entered value based on element type
|
||||
const currentValue = extractUserValue(currentData.element.options, elementType)
|
||||
const versionValue = versionData ? extractUserValue(versionData.element.options, versionData.element.type) : null
|
||||
|
||||
// Get human-readable labels
|
||||
const currentLabel = formatUserValueLabel(currentValue, currentData.element.options, elementType)
|
||||
const versionLabel = versionData
|
||||
? formatUserValueLabel(versionValue, versionData.element.options, versionData.element.type)
|
||||
: null
|
||||
|
||||
// Skip if labels are the same (actual displayed values haven't changed)
|
||||
if (currentLabel === versionLabel) {
|
||||
continue
|
||||
}
|
||||
|
||||
// For tables, compute structured diff
|
||||
let tableDiff: TableDiff | undefined
|
||||
if (elementType === 'TABLE') {
|
||||
tableDiff = computeTableDiff(versionData?.element.options || [], currentData.element.options)
|
||||
}
|
||||
|
||||
const change: ValueChange = {
|
||||
sectionTitle: currentData.sectionTitle,
|
||||
elementTitle: currentData.element.title || '',
|
||||
elementType: elementType,
|
||||
previousValue: versionValue,
|
||||
currentValue: currentValue,
|
||||
previousLabel: versionLabel,
|
||||
currentLabel: currentLabel,
|
||||
tableDiff
|
||||
}
|
||||
|
||||
if (isEmptyLabel(versionLabel) && !isEmptyLabel(currentLabel)) {
|
||||
// New answer (first time answered)
|
||||
diff.newAnswers.push(change)
|
||||
} else if (!isEmptyLabel(versionLabel) && isEmptyLabel(currentLabel)) {
|
||||
// Cleared answer
|
||||
diff.clearedAnswers.push(change)
|
||||
} else {
|
||||
const versionData = versionElementsMap.get(key)!
|
||||
const modifications = compareElements(
|
||||
currentData.element,
|
||||
versionData.element,
|
||||
currentData.sectionTitle,
|
||||
currentData.index
|
||||
)
|
||||
if (modifications) {
|
||||
diff.elementsModified.push(modifications)
|
||||
}
|
||||
// Changed answer
|
||||
diff.changedAnswers.push(change)
|
||||
}
|
||||
}
|
||||
|
||||
for (const [key, versionData] of versionElementsMap) {
|
||||
if (!currentElementsMap.has(key)) {
|
||||
diff.elementsRemoved.push({
|
||||
sectionTitle: versionData.sectionTitle,
|
||||
title: versionData.element.title,
|
||||
type: versionData.element.type,
|
||||
position: versionData.index
|
||||
})
|
||||
// Check for elements that existed in version but not in current (cleared)
|
||||
for (const [ref, versionData] of versionByRef) {
|
||||
if (!currentByRef.has(ref)) {
|
||||
const elementType = versionData.element.type
|
||||
const versionValue = extractUserValue(versionData.element.options, elementType)
|
||||
const versionLabel = formatUserValueLabel(versionValue, versionData.element.options, elementType)
|
||||
|
||||
if (!isEmptyLabel(versionLabel)) {
|
||||
let tableDiff: TableDiff | undefined
|
||||
if (elementType === 'TABLE') {
|
||||
tableDiff = computeTableDiff(versionData.element.options, [])
|
||||
}
|
||||
|
||||
diff.clearedAnswers.push({
|
||||
sectionTitle: versionData.sectionTitle,
|
||||
elementTitle: versionData.element.title || '',
|
||||
elementType: elementType,
|
||||
previousValue: versionValue,
|
||||
currentValue: null,
|
||||
previousLabel: versionLabel,
|
||||
currentLabel: null,
|
||||
tableDiff
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return diff
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute a structured diff between two table states.
|
||||
*/
|
||||
function computeTableDiff(previousOptions: FormOptionDto[], currentOptions: FormOptionDto[]): TableDiff {
|
||||
const previousRows = parseTableToRows(previousOptions)
|
||||
const currentRows = parseTableToRows(currentOptions)
|
||||
|
||||
// Get all column labels from both tables
|
||||
const columnSet = new Set<string>()
|
||||
previousOptions.forEach((opt) => columnSet.add(opt.label))
|
||||
currentOptions.forEach((opt) => columnSet.add(opt.label))
|
||||
const columns = Array.from(columnSet)
|
||||
|
||||
const maxRows = Math.max(previousRows.length, currentRows.length)
|
||||
const rows: TableRowDiff[] = []
|
||||
|
||||
let addedCount = 0
|
||||
let removedCount = 0
|
||||
let modifiedCount = 0
|
||||
|
||||
for (let i = 0; i < maxRows; i++) {
|
||||
const prevRow = previousRows[i]
|
||||
const currRow = currentRows[i]
|
||||
|
||||
if (!prevRow && currRow) {
|
||||
// Row was added
|
||||
rows.push({
|
||||
rowIndex: i,
|
||||
changeType: 'added',
|
||||
previousValues: {},
|
||||
currentValues: currRow
|
||||
})
|
||||
addedCount++
|
||||
} else if (prevRow && !currRow) {
|
||||
// Row was removed
|
||||
rows.push({
|
||||
rowIndex: i,
|
||||
changeType: 'removed',
|
||||
previousValues: prevRow,
|
||||
currentValues: {}
|
||||
})
|
||||
removedCount++
|
||||
} else if (prevRow && currRow) {
|
||||
// Check if row was modified
|
||||
const isModified = columns.some((col) => {
|
||||
const prevVal = prevRow[col] || ''
|
||||
const currVal = currRow[col] || ''
|
||||
return prevVal !== currVal
|
||||
})
|
||||
|
||||
rows.push({
|
||||
rowIndex: i,
|
||||
changeType: isModified ? 'modified' : 'unchanged',
|
||||
previousValues: prevRow,
|
||||
currentValues: currRow
|
||||
})
|
||||
|
||||
if (isModified) {
|
||||
modifiedCount++
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
rows,
|
||||
addedCount,
|
||||
removedCount,
|
||||
modifiedCount
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Group changes by section for accordion display
|
||||
*/
|
||||
export function groupChangesBySection(diff: FormValueDiff): SectionChanges[] {
|
||||
const allChanges = [...diff.newAnswers, ...diff.changedAnswers, ...diff.clearedAnswers]
|
||||
|
||||
const sectionMap = new Map<string, ValueChange[]>()
|
||||
|
||||
for (const change of allChanges) {
|
||||
const existing = sectionMap.get(change.sectionTitle) || []
|
||||
existing.push(change)
|
||||
sectionMap.set(change.sectionTitle, existing)
|
||||
}
|
||||
|
||||
return Array.from(sectionMap.entries()).map(([sectionTitle, changes]) => ({
|
||||
sectionTitle,
|
||||
changes
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the actual user-selected or user-entered value from form options.
|
||||
* Different element types store values differently.
|
||||
*/
|
||||
function extractUserValue(options: FormOptionDto[], elementType: FormElementType): string | string[] | null {
|
||||
if (!options || options.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
// For selection-based elements (SELECT, RADIOBUTTON, CHECKBOX, SWITCH)
|
||||
// The selected option(s) have value === "true"
|
||||
if (SELECTION_TYPES.includes(elementType)) {
|
||||
const selectedOptions = options.filter((opt) => opt.value === 'true')
|
||||
|
||||
if (selectedOptions.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Return the labels of selected options (what the user actually sees)
|
||||
const selectedLabels = selectedOptions.map((opt) => opt.label).filter((label): label is string => !!label)
|
||||
if (selectedLabels.length === 0) {
|
||||
return null
|
||||
}
|
||||
return selectedLabels.length === 1 ? (selectedLabels[0] ?? null) : selectedLabels
|
||||
}
|
||||
|
||||
// For text input elements (TEXTFIELD, TEXTAREA, RICH_TEXT, DATE)
|
||||
// The value is stored in the first option's value field
|
||||
if (TEXT_INPUT_TYPES.includes(elementType)) {
|
||||
const value = options[0]?.value
|
||||
if (!value || value.trim() === '') {
|
||||
return null
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
// For TABLE elements - return serialized table data for comparison
|
||||
if (elementType === 'TABLE') {
|
||||
return serializeTableData(options)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* Serialize table data into a comparable string format.
|
||||
* This captures all rows and all columns for accurate comparison.
|
||||
*/
|
||||
function serializeTableData(options: FormOptionDto[]): string | null {
|
||||
if (!options || options.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const tableRows = parseTableToRows(options)
|
||||
|
||||
if (tableRows.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Serialize as JSON for accurate comparison
|
||||
return JSON.stringify(tableRows)
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse table options into row-based data structure.
|
||||
* Returns array of rows, where each row is an object with column labels as keys.
|
||||
*/
|
||||
function parseTableToRows(options: FormOptionDto[]): Record<string, string>[] {
|
||||
if (!options || options.length === 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
// Parse all columns
|
||||
const columnData: { label: string; values: (string | boolean | string[])[] }[] = options.map((option) => {
|
||||
let values: (string | boolean | string[])[] = []
|
||||
try {
|
||||
const parsed = JSON.parse(option.value || '[]')
|
||||
values = Array.isArray(parsed) ? parsed : []
|
||||
} catch {
|
||||
values = []
|
||||
}
|
||||
return { label: option.label, values }
|
||||
})
|
||||
|
||||
// Find max row count
|
||||
const rowCount = Math.max(...columnData.map((col) => col.values.length), 0)
|
||||
|
||||
if (rowCount === 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
// Build rows
|
||||
const rows: Record<string, string>[] = []
|
||||
for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
|
||||
const row: Record<string, string> = {}
|
||||
|
||||
columnData.forEach((col) => {
|
||||
const cellValue = col.values[rowIndex]
|
||||
const formattedValue = formatTableCellValue(cellValue)
|
||||
row[col.label] = formattedValue
|
||||
})
|
||||
|
||||
rows.push(row)
|
||||
}
|
||||
|
||||
return rows
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a single table cell value to a readable string.
|
||||
*/
|
||||
function formatTableCellValue(value: string | boolean | string[] | undefined | null): string {
|
||||
if (value === undefined || value === null) {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (typeof value === 'boolean') {
|
||||
return value ? 'Ja' : 'Nein'
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
const filtered = value.filter((v) => v && String(v).trim() !== '')
|
||||
return filtered.length > 0 ? filtered.join(', ') : ''
|
||||
}
|
||||
|
||||
if (typeof value === 'string') {
|
||||
return value.trim()
|
||||
}
|
||||
|
||||
return String(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a user value to a human-readable label.
|
||||
* For selection types, the value IS already the label.
|
||||
* For text types, we return the text as-is.
|
||||
* For tables, we format as a summary.
|
||||
*/
|
||||
function formatUserValueLabel(
|
||||
value: string | string[] | null,
|
||||
options: FormOptionDto[],
|
||||
elementType: FormElementType
|
||||
): string | null {
|
||||
if (value === null || value === undefined) {
|
||||
return null
|
||||
}
|
||||
|
||||
// For tables, create a summary (row count)
|
||||
if (elementType === 'TABLE') {
|
||||
return formatTableSummary(options)
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
if (value.length === 0) {
|
||||
return null
|
||||
}
|
||||
return value.join(', ')
|
||||
}
|
||||
|
||||
if (typeof value === 'string' && value.trim() === '') {
|
||||
return null
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
/**
|
||||
* Format table data into a brief summary label.
|
||||
*/
|
||||
function formatTableSummary(options: FormOptionDto[]): string | null {
|
||||
const rows = parseTableToRows(options)
|
||||
|
||||
if (rows.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const rowLabel = rows.length === 1 ? 'Zeile' : 'Zeilen'
|
||||
return `${rows.length} ${rowLabel}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a label is considered "empty" (no answer given)
|
||||
*/
|
||||
function isEmptyLabel(label: string | null | undefined): boolean {
|
||||
if (label === null || label === undefined) return true
|
||||
if (label.trim() === '') return true
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* Flatten form elements from ApplicationFormDto into a flat list.
|
||||
*/
|
||||
function flattenFormElements(form: ApplicationFormDto): Array<{ element: FormElementDto; sectionTitle: string }> {
|
||||
const elements: Array<{ element: FormElementDto; sectionTitle: string }> = []
|
||||
for (const section of form.formElementSections) {
|
||||
@@ -81,6 +414,9 @@ function flattenFormElements(form: ApplicationFormDto): Array<{ element: FormEle
|
||||
return elements
|
||||
}
|
||||
|
||||
/**
|
||||
* Flatten form elements from snapshot into a flat list.
|
||||
*/
|
||||
function flattenSnapshotElements(
|
||||
snapshot: ApplicationFormSnapshotDto
|
||||
): Array<{ element: FormElementSnapshotDto; sectionTitle: string }> {
|
||||
@@ -94,74 +430,3 @@ function flattenSnapshotElements(
|
||||
}
|
||||
return elements
|
||||
}
|
||||
|
||||
function createElementKey(element: FormElementDto, index: number): string {
|
||||
return `${index}-${element.type}-${element.title || 'untitled'}`
|
||||
}
|
||||
|
||||
function createSnapshotElementKey(element: FormElementSnapshotDto, index: number): string {
|
||||
return `${index}-${element.type}-${element.title || 'untitled'}`
|
||||
}
|
||||
|
||||
function compareElements(
|
||||
current: FormElementDto,
|
||||
version: FormElementSnapshotDto,
|
||||
sectionTitle: string,
|
||||
position: number
|
||||
): ElementModification | null {
|
||||
const optionsDiff = compareOptions(current.options, version.options)
|
||||
|
||||
if (optionsDiff.added.length > 0 || optionsDiff.removed.length > 0 || optionsDiff.modified.length > 0) {
|
||||
return {
|
||||
sectionTitle,
|
||||
position,
|
||||
optionsAdded: optionsDiff.added,
|
||||
optionsRemoved: optionsDiff.removed,
|
||||
optionsModified: optionsDiff.modified
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function compareOptions(
|
||||
currentOptions: FormOptionDto[],
|
||||
versionOptions: FormOptionDto[]
|
||||
): { added: OptionChange[]; removed: OptionChange[]; modified: OptionModification[] } {
|
||||
const result = {
|
||||
added: [] as OptionChange[],
|
||||
removed: [] as OptionChange[],
|
||||
modified: [] as OptionModification[]
|
||||
}
|
||||
|
||||
const currentMap = new Map(currentOptions.map((opt) => [opt.value, opt]))
|
||||
const versionMap = new Map(versionOptions.map((opt) => [opt.value, opt]))
|
||||
|
||||
for (const [value, currentOpt] of currentMap) {
|
||||
if (!versionMap.has(value)) {
|
||||
result.added.push({
|
||||
value: currentOpt.value,
|
||||
label: currentOpt.label
|
||||
})
|
||||
} else {
|
||||
const versionOpt = versionMap.get(value)!
|
||||
if (currentOpt.label !== versionOpt.label) {
|
||||
result.modified.push({
|
||||
value,
|
||||
labelChanged: { from: versionOpt.label, to: currentOpt.label }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const [value, versionOpt] of versionMap) {
|
||||
if (!currentMap.has(value)) {
|
||||
result.removed.push({
|
||||
value: versionOpt.value,
|
||||
label: versionOpt.label
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user