78 lines
3.2 KiB
JavaScript
78 lines
3.2 KiB
JavaScript
import Dropdown from './Dropdown.js';
|
|
import StepperComponent from './Stepper.js';
|
|
import InputComponent from './InputComponent.js';
|
|
import ToggleComponent from './ToggleComponent.js';
|
|
import Seeder from './Seeder.js';
|
|
|
|
class MultiComponent {
|
|
constructor(config, workflow) {
|
|
this.config = config;
|
|
this.workflow = workflow;
|
|
this.parentContainer = document.getElementById('side-workflow-controls');
|
|
if (!this.parentContainer) {
|
|
console.error("Parent container 'side-workflow-controls' not found.");
|
|
return;
|
|
}
|
|
this.container = null;
|
|
this.childComponents = [];
|
|
this.initializeComponent();
|
|
}
|
|
|
|
initializeComponent() {
|
|
|
|
const htmlString = `
|
|
<div id="${this.config.id}" class="multi-component-container">
|
|
<div class="multi-component-wrapper">
|
|
${this.config.label ? `<h4>${this.config.label}</h4>` : ''}
|
|
<!-- Child components will be inserted here -->
|
|
</div>
|
|
</div>
|
|
`;
|
|
this.parentContainer.insertAdjacentHTML('beforeend', htmlString);
|
|
const wrapper = this.parentContainer.querySelector(`#${this.config.id} .multi-component-wrapper`);
|
|
this.instantiateChildComponents(wrapper);
|
|
}
|
|
|
|
instantiateChildComponents(wrapper) {
|
|
const componentTypes = ['dropdowns', 'steppers', 'inputs', 'toggles', 'seeders'];
|
|
|
|
componentTypes.forEach(type => {
|
|
if (this.config[type] && Array.isArray(this.config[type])) {
|
|
this.config[type].forEach(componentConfig => {
|
|
const componentContainer = document.createElement('div');
|
|
componentContainer.id = componentConfig.id;
|
|
componentContainer.classList.add(`${type.slice(0, -1)}-container`);
|
|
wrapper.appendChild(componentContainer);
|
|
let componentInstance;
|
|
switch (type) {
|
|
case 'dropdowns':
|
|
componentInstance = new Dropdown(componentConfig, this.workflow);
|
|
break;
|
|
case 'steppers':
|
|
componentInstance = new StepperComponent(componentConfig, this.workflow);
|
|
break;
|
|
case 'inputs':
|
|
componentInstance = new InputComponent(componentConfig, this.workflow);
|
|
break;
|
|
case 'toggles':
|
|
componentInstance = new ToggleComponent(componentConfig, this.workflow);
|
|
break;
|
|
case 'seeders':
|
|
componentInstance = new Seeder(componentConfig, this.workflow);
|
|
break;
|
|
|
|
default:
|
|
console.error(`Unknown component type: ${type}`);
|
|
}
|
|
|
|
if (componentInstance) {
|
|
this.childComponents.push(componentInstance);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
export default MultiComponent;
|