Up DataSourceManager

src/dataSources/index.ts

@@ -1,7 +1,27 @@
 import { ItemManagerModule } from '../abstract/Module';
+import { ObjectAny } from '../common';
+import EditorModel from '../editor/model/Editor';
+import { get } from '../utils/mixins';
 import { DataSources } from './model/DataSources';
+import { DataSourcesEvents } from './types';
 
 export default class DataSourceManager extends ItemManagerModule<{}, DataSources> {
   storageKey = '';
   destroy(): void {}
+
+  constructor(em: EditorModel) {
+    super(em, 'DataSources', new DataSources([], em), DataSourcesEvents);
+  }
+
+  getValue(key: string | string[], defValue: any) {
+    const context = this.all.reduce((acc, ds) => {
+      acc[ds.id] = ds.records.reduce((accR, dr, i) => {
+        accR[dr.id || i] = dr.attributes;
+        return accR;
+      }, {} as ObjectAny);
+      return acc;
+    }, {} as ObjectAny);
+    console.log('getValue', { context });
+    return get(context, key, defValue);
+  }
 }

src/dataSources/model/DataRecords.ts

@@ -6,7 +6,7 @@ import { DataSource } from './DataSource';
 export class DataRecords extends Collection<DataRecord> {
   dataSource: DataSource;
 
-  constructor(models: DataRecord[] | Array<DataRecordProps>, options: { dataSource: DataSource }) {
+  constructor(models: DataRecord[] | DataRecordProps[], options: { dataSource: DataSource }) {
     super(models, options);
     this.dataSource = options.dataSource;
   }

src/dataSources/model/DataSources.ts

@@ -1,4 +1,13 @@
 import { Collection } from '../../common';
+import EditorModel from '../../editor/model/Editor';
+import { DataSourceProps } from '../types';
 import { DataSource } from './DataSource';
 
-export class DataSources extends Collection<DataSource> {}
+export class DataSources extends Collection<DataSource> {
+  em: EditorModel;
+
+  constructor(models: DataSource[] | DataSourceProps[], em: EditorModel) {
+    super(models, em);
+    this.em = em;
+  }
+}

src/dataSources/types.ts

@@ -20,3 +20,37 @@ export interface DataRecordProps extends ObjectAny {
    */
   id: string;
 }
+
+/**{START_EVENTS}*/
+export enum DataSourcesEvents {
+  /**
+   * @event `data:add` Added new data source.
+   * @example
+   * editor.on('data:add', (dataSource) => { ... });
+   */
+  add = 'data:add',
+  addBefore = 'data:add:before',
+
+  /**
+   * @event `data:remove` Data source removed.
+   * @example
+   * editor.on('data:remove', (dataSource) => { ... });
+   */
+  remove = 'data:remove',
+  removeBefore = 'data:remove:before',
+
+  /**
+   * @event `data:update` Data source updated.
+   * @example
+   * editor.on('data:update', (dataSource, changes) => { ... });
+   */
+  update = 'data:update',
+
+  /**
+   * @event `data` Catch-all event for all the events mentioned above.
+   * @example
+   * editor.on('data', ({ event, model, ... }) => { ... });
+   */
+  all = 'data',
+}
+/**{END_EVENTS}*/

src/dom_components/model/ComponentDataVariable.ts

@@ -9,7 +9,8 @@ export default class ComponentDataVariable extends Component {
       // @ts-ignore
       ...super.defaults,
       type,
-      source: '',
+      path: '',
+      value: '',
     };
   }
 

src/dom_components/view/ComponentDataVariableView.ts

@@ -10,9 +10,10 @@ export default class ComponentDataVariableView extends ComponentView<ComponentDa
   }
 
   postRender() {
-    const { key, default: def } = this.model.attributes;
+    const { model, el } = this;
+    const { key, default: def } = model.attributes;
     // this.el.innerHTML = getValue(key, def);
-    this.el.innerHTML = def;
+    el.innerHTML = def;
     console.log('this.el.innerHTML', { key, def });
     super.postRender();
   }