Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add ElementData component to manage UI element data binding and selection for the simulation dashboard.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-22 10:49:33 +05:30
parent 518ceec423
commit e35eaa5348
1 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/src/components/SimulationDashboard/components/element/ElementData.tsx
View File

@@ -65,6 +65,25 @@ const ElementData: React.FC<ElementDataProps> = ({
} }
}; };
const getFilteredOptions = (allOptions: Array<{ id: string; label: string }>, currentValues: string | string[] | undefined, currentIndex: number) => {
const valuesArray = Array.isArray(currentValues) ? currentValues : currentValues ? [currentValues] : [];
return allOptions.filter((option) => {
// Include logic:
// 1. If this option is the one currently selected for this index, keep it.
// 2. If this option is selected in another index, exclude it.
const isSelectedHere = valuesArray[currentIndex] === option.id;
const isSelectedElsewhere = valuesArray.includes(option.id) && !isSelectedHere;
return !isSelectedElsewhere;
});
};
const assetDropdownItems = getAssetDropdownItems();
const labelValueDropdownSections = getLableValueDropdownItems(element?.dataBinding?.dataSource as string | undefined);
const totalValueOptions = labelValueDropdownSections.flatMap((s) => s.items).length;
const totalAssetOptions = assetDropdownItems.length;
return ( return (
<div className="data-details"> <div className="data-details">
{element?.type === "label-value" && ( {element?.type === "label-value" && (
@@ -177,7 +196,7 @@ const ElementData: React.FC<ElementDataProps> = ({
<DataSourceSelector <DataSourceSelector
key={field.id} key={field.id}
label={field.label} label={field.label}
options={field.options} options={getFilteredOptions(field.options, element.dataBinding?.dataValue, index)}
selected={field.options.find((option) => option.id === element.dataBinding?.dataValue?.[index])?.label ?? ""} selected={field.options.find((option) => option.id === element.dataBinding?.dataValue?.[index])?.label ?? ""}
onSelect={(value) => { onSelect={(value) => {
const currentDataValue = Array.isArray(element.dataBinding?.dataValue) const currentDataValue = Array.isArray(element.dataBinding?.dataValue)
@@ -208,12 +227,14 @@ const ElementData: React.FC<ElementDataProps> = ({
/> />
))} ))}
<div className="add-field" onClick={addField}> {singleValueFields.length < totalValueOptions && (
<div className="icon"> <div className="add-field" onClick={addField}>
<AddIcon /> <div className="icon">
<AddIcon />
</div>
<div className="label">Add Field</div>
</div> </div>
<div className="label">Add Field</div> )}
</div>
</div> </div>
)} )}
@@ -238,7 +259,7 @@ const ElementData: React.FC<ElementDataProps> = ({
<DataSourceSelector <DataSourceSelector
key={field.id} key={field.id}
label={field.label} label={field.label}
options={field.options} options={getFilteredOptions(field.options, element.dataBinding?.dataSource, index)}
selected={getEventByModelUuid(selectedProduct.productUuid, (element.dataBinding?.dataSource as string[])?.[index] || "")?.modelName ?? ""} selected={getEventByModelUuid(selectedProduct.productUuid, (element.dataBinding?.dataSource as string[])?.[index] || "")?.modelName ?? ""}
onSelect={(value) => { onSelect={(value) => {
const current = Array.isArray(element.dataBinding?.dataSource) const current = Array.isArray(element.dataBinding?.dataSource)
@@ -269,12 +290,14 @@ const ElementData: React.FC<ElementDataProps> = ({
/> />
))} ))}
<div className="add-field" onClick={addField}> {multipleSourceFields.length < totalAssetOptions && (
<div className="icon"> <div className="add-field" onClick={addField}>
<AddIcon /> <div className="icon">
<AddIcon />
</div>
<div className="label">Add Field</div>
</div> </div>
<div className="label">Add Field</div> )}
</div>
</div> </div>
)} )}
</div> </div>