Add collection components

packages/core/src/data_sources/model/DataVariableListenerManager.ts

@@ -6,6 +6,8 @@
 import { DynamicValue } from '../types';
 import { DataCondition, ConditionalVariableType } from './conditional_variables/DataCondition';
 import ComponentDataVariable from './ComponentDataVariable';
+import { CollectionVariableType } from './collection_component/constants';
+import CollectionVariable from './collection_component/CollectionVariable';
 
 export interface DynamicVariableListenerManagerOptions {
   em: EditorModel;
@@ -41,6 +43,13 @@
     const type = dynamicVariable.get('type');
     let dataListeners: DataVariableListener[] = [];
     switch (type) {
+      case CollectionVariableType:
+        const collectionVariable = dynamicVariable as CollectionVariable;
+        if (collectionVariable.hasDynamicValue()) {
+          dataListeners = this.listenToDataVariable(collectionVariable.dataVariable!, em);
+        }
+
+        break;
       case DataVariableType:
         dataListeners = this.listenToDataVariable(dynamicVariable as DataVariable | ComponentDataVariable, em);
         break;

packages/core/src/data_sources/model/collection_component/CollectionComponent.ts

@@ -0,0 +1,201 @@
+import DataVariable, { DataVariableType } from './../DataVariable';
+import { isArray } from 'underscore';
+import Component, { keySymbol, keySymbolOvrd, keySymbols } from '../../../dom_components/model/Component';
+import { ComponentDefinition, ComponentOptions, ComponentProperties } from '../../../dom_components/model/types';
+import { toLowerCase } from '../../../utils/mixins';
+import DataSource from '../DataSource';
+import { ObjectAny } from '../../../common';
+import EditorModel from '../../../editor/model/Editor';
+import { keyCollectionsStateMap } from '../../../dom_components/model/Component';
+import { CollectionComponentDefinition, CollectionDefinition, CollectionState, CollectionsStateMap } from './types';
+import { keyCollectionDefinition, keyInnerCollectionState, CollectionComponentType } from './constants';
+import DynamicVariableListenerManager from '../DataVariableListenerManager';
+import Components from '../../../dom_components/model/Components';
+
+export default class CollectionComponent extends Component {
+  constructor(props: CollectionComponentDefinition, opt: ComponentOptions) {
+    const em = opt.em;
+    // @ts-ignore
+    const cmp: CollectionComponent = super(
+      // @ts-ignore
+      {
+        ...props,
+        components: undefined,
+        droppable: false,
+      },
+      opt,
+    );
+
+    const collectionDefinition = props[keyCollectionDefinition];
+    if (!collectionDefinition) {
+      em.logError('missing collection definition');
+
+      return cmp;
+    }
+
+    const parentCollectionStateMap = (props[keyCollectionsStateMap] || {}) as CollectionsStateMap;
+
+    const components: Component[] = getCollectionItems(em, collectionDefinition, parentCollectionStateMap, opt);
+
+    if (this.hasDynamicDataSource()) {
+      this.watchDataSource(em, collectionDefinition, parentCollectionStateMap, opt);
+    }
+    cmp.components(components);
+
+    return cmp;
+  }
+
+  static isComponent(el: HTMLElement) {
+    return toLowerCase(el.tagName) === CollectionComponentType;
+  }
+
+  hasDynamicDataSource() {
+    const dataSource = this.get(keyCollectionDefinition).config.dataSource;
+    return typeof dataSource === 'object' && dataSource.type === DataVariableType;
+  }
+
+  toJSON(opts?: ObjectAny) {
+    const json = super.toJSON(opts) as CollectionComponentDefinition;
+
+    const firstChild = this.getBlockDefinition();
+    json[keyCollectionDefinition].block = firstChild;
+
+    delete json.components;
+    delete json.droppable;
+    return json;
+  }
+
+  private getBlockDefinition() {
+    const firstChild = this.components().at(0)?.toJSON() || {};
+    delete firstChild.draggable;
+
+    return firstChild;
+  }
+
+  private watchDataSource(
+    em: EditorModel,
+    collectionDefinition: CollectionDefinition,
+    parentCollectionStateMap: CollectionsStateMap,
+    opt: ComponentOptions,
+  ) {
+    const path = this.get(keyCollectionDefinition).config.dataSource?.path;
+    const dataVariable = new DataVariable(
+      {
+        type: DataVariableType,
+        path,
+      },
+      { em },
+    );
+    new DynamicVariableListenerManager({
+      em: em,
+      dataVariable,
+      updateValueFromDataVariable: () => {
+        const collectionItems = getCollectionItems(em, collectionDefinition, parentCollectionStateMap, opt);
+        this.components(collectionItems);
+      },
+    });
+  }
+}
+
+function getCollectionItems(
+  em: EditorModel,
+  collectionDefinition: CollectionDefinition,
+  parentCollectionStateMap: CollectionsStateMap,
+  opt: ComponentOptions,
+) {
+  const { collection_name, block, config } = collectionDefinition;
+  if (!block) {
+    em.logError('The "block" property is required in the collection definition.');
+    return [];
+  }
+
+  if (!config?.dataSource) {
+    em.logError('The "config.dataSource" property is required in the collection definition.');
+    return [];
+  }
+
+  const components: Component[] = [];
+
+  let items: any[] = getDataSourceItems(config.dataSource, em);
+  const start_index = Math.max(0, config.start_index || 0);
+  const end_index = Math.min(items.length - 1, config.end_index !== undefined ? config.end_index : Number.MAX_VALUE);
+
+  const total_items = end_index - start_index + 1;
+  let blockSymbolMain: Component;
+  for (let index = start_index; index <= end_index; index++) {
+    const item = items[index];
+    const collectionState: CollectionState = {
+      collection_name,
+      current_index: index,
+      current_item: item,
+      start_index: start_index,
+      end_index: end_index,
+      total_items: total_items,
+      remaining_items: total_items - (index + 1),
+    };
+
+    const collectionsStateMap: CollectionsStateMap = {
+      ...parentCollectionStateMap,
+      ...(collection_name && { [collection_name]: collectionState }),
+      [keyInnerCollectionState]: collectionState,
+    };
+
+    if (index === start_index) {
+      // @ts-ignore
+      const type = em.Components.getType(block?.type || 'default');
+      const model = type.model;
+
+      blockSymbolMain = new model(
+        {
+          ...block,
+          [keyCollectionsStateMap]: collectionsStateMap,
+          isCollectionItem: true,
+          draggable: false,
+        },
+        opt,
+      );
+      blockSymbolMain!.setSymbolOverride([keyCollectionsStateMap]);
+    }
+    blockSymbolMain!.set(keyCollectionsStateMap, collectionsStateMap);
+    const instance = blockSymbolMain!.clone({ symbol: true });
+
+    components.push(instance);
+  }
+
+  return components;
+}
+
+function getDataSourceItems(dataSource: any, em: EditorModel) {
+  let items: any[] = [];
+  switch (true) {
+    case isArray(dataSource):
+      items = dataSource;
+      break;
+    case typeof dataSource === 'object' && dataSource instanceof DataSource:
+      const id = dataSource.get('id')!;
+      items = listDataSourceVariables(id, em);
+      break;
+    case typeof dataSource === 'object' && dataSource.type === DataVariableType:
+      const isDataSourceId = dataSource.path.split('.').length === 1;
+      if (isDataSourceId) {
+        const id = dataSource.path;
+        items = listDataSourceVariables(id, em);
+      } else {
+        // Path points to a record in the data source
+        items = em.DataSources.getValue(dataSource.path, []);
+      }
+      break;
+    default:
+  }
+  return items;
+}
+
+function listDataSourceVariables(dataSource_id: string, em: EditorModel) {
+  const records = em.DataSources.getValue(dataSource_id, []);
+  const keys = Object.keys(records);
+
+  return keys.map((key) => ({
+    type: DataVariableType,
+    path: dataSource_id + '.' + key,
+  }));
+}

packages/core/src/data_sources/model/collection_component/CollectionComponentView.ts

@@ -0,0 +1,4 @@
+import ComponentView from '../../../dom_components/view/ComponentView';
+import CollectionComponent from './CollectionComponent';
+
+export default class CollectionComponentView extends ComponentView<CollectionComponent> {}

packages/core/src/data_sources/model/collection_component/CollectionVariable.ts

@@ -0,0 +1,113 @@
+import { CollectionVariableDefinition } from '../../../../test/specs/dom_components/model/ComponentTypes';
+import { Model } from '../../../common';
+import EditorModel from '../../../editor/model/Editor';
+import DataVariable, { DataVariableType } from '../DataVariable';
+import { keyInnerCollectionState } from './constants';
+import { CollectionState, CollectionsStateMap } from './types';
+
+export default class CollectionVariable extends Model<CollectionVariableDefinition> {
+  em: EditorModel;
+  collectionsStateMap: CollectionsStateMap;
+  dataVariable?: DataVariable;
+
+  constructor(
+    attrs: CollectionVariableDefinition,
+    options: {
+      em: EditorModel;
+      collectionsStateMap: CollectionsStateMap;
+    },
+  ) {
+    super(attrs, options);
+    this.em = options.em;
+    this.collectionsStateMap = options.collectionsStateMap;
+
+    this.updateDataVariable();
+  }
+
+  hasDynamicValue() {
+    return !!this.dataVariable;
+  }
+
+  getDataValue() {
+    const { resolvedValue } = this.updateDataVariable();
+
+    if (resolvedValue?.type === DataVariableType) {
+      return this.dataVariable!.getDataValue();
+    }
+    return resolvedValue;
+  }
+
+  private updateDataVariable() {
+    const resolvedValue = resolveCollectionVariable(
+      this.attributes as CollectionVariableDefinition,
+      this.collectionsStateMap,
+      this.em,
+    );
+
+    let dataVariable;
+    if (resolvedValue?.type === DataVariableType) {
+      dataVariable = new DataVariable(resolvedValue, { em: this.em });
+      this.dataVariable = dataVariable;
+    }
+
+    return { resolvedValue, dataVariable };
+  }
+
+  destroy() {
+    return this.dataVariable?.destroy?.() || super.destroy();
+  }
+}
+
+function resolveCollectionVariable(
+  collectionVariableDefinition: CollectionVariableDefinition,
+  collectionsStateMap: CollectionsStateMap,
+  em: EditorModel,
+) {
+  const { collection_name = keyInnerCollectionState, variable_type, path } = collectionVariableDefinition;
+  const collectionItem = collectionsStateMap[collection_name];
+
+  if (!collectionItem) {
+    em.logError(`Collection not found: ${collection_name}`);
+    return '';
+  }
+
+  if (!variable_type) {
+    em.logError(`Missing collection variable type for collection: ${collection_name}`);
+    return '';
+  }
+
+  if (variable_type === 'current_item') {
+    return resolveCurrentItem(collectionItem, path, collection_name, em);
+  }
+
+  return collectionItem[variable_type];
+}
+
+function resolveCurrentItem(
+  collectionItem: CollectionState,
+  path: string | undefined,
+  collection_name: string,
+  em: EditorModel,
+) {
+  const currentItem = collectionItem.current_item;
+
+  if (!currentItem) {
+    em.logError(`Current item is missing for collection: ${collection_name}`);
+    return '';
+  }
+
+  if (currentItem.type === DataVariableType) {
+    const resolvedPath = currentItem.path ? `${currentItem.path}.${path}` : path;
+    return {
+      ...currentItem,
+      path: resolvedPath,
+    };
+  }
+
+  if (path && !currentItem[path]) {
+    em.logError(`Path not found in current item: ${path} for collection: ${collection_name}`);
+    return '';
+  }
+
+  return path ? currentItem[path] : currentItem;
+}

packages/core/src/data_sources/model/collection_component/constants.ts

@@ -0,0 +1,4 @@
+export const CollectionComponentType = 'collection-component';
+export const keyCollectionDefinition = 'collectionDefinition';
+export const keyInnerCollectionState = 'innerCollectionState';
+export const CollectionVariableType = 'parent-collection-variable';

packages/core/src/data_sources/model/collection_component/types.ts

@@ -0,0 +1,47 @@
+import { CollectionComponentType, keyCollectionDefinition } from './constants';
+
+import { ComponentDefinition } from '../../../dom_components/model/types';
+import { CollectionVariableDefinition } from '../../../../test/specs/dom_components/model/ComponentTypes';
+import { DataVariableDefinition } from '../DataVariable';
+
+type CollectionDataSource = any[] | DataVariableDefinition | CollectionVariableDefinition;
+type CollectionConfig = {
+  start_index?: number;
+  end_index?: number;
+  dataSource: CollectionDataSource;
+};
+
+export enum CollectionStateVariableType {
+  current_index = 'current_index',
+  start_index = 'start_index',
+  current_item = 'current_item',
+  end_index = 'end_index',
+  collection_name = 'collection_name',
+  total_items = 'total_items',
+  remaining_items = 'remaining_items',
+}
+
+export type CollectionState = {
+  [CollectionStateVariableType.current_index]: number;
+  [CollectionStateVariableType.start_index]: number;
+  [CollectionStateVariableType.current_item]: any;
+  [CollectionStateVariableType.end_index]: number;
+  [CollectionStateVariableType.collection_name]?: string;
+  [CollectionStateVariableType.total_items]: number;
+  [CollectionStateVariableType.remaining_items]: number;
+};
+
+export type CollectionsStateMap = {
+  [key: string]: CollectionState;
+};
+
+export type CollectionComponentDefinition = {
+  [keyCollectionDefinition]: CollectionDefinition;
+} & ComponentDefinition;
+
+export type CollectionDefinition = {
+  type: typeof CollectionComponentType;
+  collection_name?: string;
+  config: CollectionConfig;
+  block: ComponentDefinition;
+};