Динамически корректировать макет на основе нулевых значений ⇐ Javascript

[Anonymous]

Я работаю над проектом JavaScript, в котором мне нужно динамически корректировать конфигурацию макета на основе нулевых значений определенных значений. Макет состоит из строк, элементы которых расположены слева или справа. Если значение равно нулю, соответствующий элемент следует удалить, а другие элементы должны сместиться вверх, чтобы заполнить пространство, сохраняя свое левое или правое положение.
Структура макета по умолчанию:

Код: Выделить всё

const defaultLayout = [ [ { label: 'Material Type:', key: item.materialType || 'N/A', position: 'left', multiline: false, }, { label: 'Project Location:', key: project.location.city || 'Unknown', position: 'right', multiline: false, }, ], [ { label: 'Condition:', key: item.condition || 'Unspecified', position: 'left', multiline: false, }, { label: 'Availability Dates:', key: 

От ${formatDate(item.available From)} До ${format Date(item.available To)}

Код: Выделить всё

, position: 'right', multiline: true, fixedY: 246, }, ], [ { label: 'Dimensions:', key: item.dimensions || 'Standard', position: 'left', wrap: true, multiline: true, }, ], [ { label: 'Product Description:', key: item.description || 'No description available.', position: 'left', wrap: true, multiline: true, maxLines: 2, }, ], [ { label: 'Reusable Quantity:', key: item.reusableQuantity !== undefined ? 

${item.reusableQuantity} единиц

Код: Выделить всё

: 'N/A', position: 'left', multiline: false, }, { label: 'Unit Price (Excl. Tax):', key: item.unitPrice ?

$${item.unitPrice.toFixed(2)}

Код: Выделить всё

 : 'Contact for price', position: 'right', multiline: false, }, ], [ { label: 'Minimum Order Quantity:', key: item.minOrderQty || '1', position: 'left', multiline: false, }, ], ];

другие ограничения, например, скажем, у нас есть состояние материала и размер, которые имеют значение null, поэтому описание в конечном итоге окажется в позиции материала, количество повторного использования будет в позиции состояния. и минимальное количество заказа будет в той же строке, что и цена.
Примечание: описание + местоположение проекта + доступность никогда не будет нулевым
что я хочу чтобы сделать, я разделил левое и правое на массивы, а затем зациклил эту работу до описания, тогда все испортится, ограничения: если я был в текущей строке, которая имела в таблице по умолчанию 2 значения, и что я переключусь на позицию, где они были одним значением, например описанием, я возьму всю строку, если Я нахожусь в одной строке и перейду к одной строке, например (описание перемещается в размер). Я беру всю строку 2
` AdjustLayout(layout) {
// Сглаживаем макет, чтобы с ним было легче работать
константа FlatLayout = макет.квартира()

Код: Выделить всё

// Filter out fields with null or undefined keys
const filteredLayout = flatLayout.filter(field => field.key != null)
// console.log(filteredLayout)
// Reassign positions
const leftFields = filteredLayout.filter(field => field.position === 'left')
const rightFields = filteredLayout.filter(field => field.position === 'right')

// Reconstruct the layout
const newLayout = []
let leftIndex = 0,
rightIndex = 0

while (leftIndex < leftFields.length || rightIndex < rightFields.length) {
const row = []
console.log('check default row length', layout[newLayout.length].length)
console.log('check default row value', layout[newLayout.length])

if (leftIndex < leftFields.length) {
row.push(leftFields[leftIndex])
leftIndex++
}
if (
rightIndex < rightFields.length &&
(newLayout.length === 0 ||
layout[newLayout.length].length !== layout[newLayout.length - 1].length)            //thisd is causing a problem ccause 0-1
) {
row.push(rightFields[rightIndex])
rightIndex++
}
if (row.length > 0) {
newLayout.push(row)
}
}

return newLayout

} `

Подробнее здесь: https://stackoverflow.com/questions/793 ... ull-values