@journeyapps-labs/reactor-mod-data-browser 1.0.0

package/src/forms/SchemaModelForm.tsx

@@ -0,0 +1,97 @@
+import {
+  BooleanInput,
+  DateInput,
+  DateTimePickerType,
+  FormModel,
+  SelectInput,
+  TextInput
+} from '@journeyapps-labs/reactor-mod';
+import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { SchemaModelObject } from '../core/SchemaModelObject';
+import * as _ from 'lodash';
+import {
+  AttachmentType,
+  BooleanType,
+  DatetimeType,
+  DateType,
+  LocationType,
+  MultipleChoiceType,
+  PhotoType,
+  SignatureType,
+  SingleChoiceIntegerType,
+  SingleChoiceType,
+  TextType
+} from '@journeyapps/db';
+
+export interface SchemaModelFormOptions {
+  definition: SchemaModelDefinition;
+  object?: SchemaModelObject;
+}
+
+export class SchemaModelForm extends FormModel {
+  constructor(protected options: SchemaModelFormOptions) {
+    super();
+
+    _.map(options.definition.definition.attributes, (attribute) => {
+      if (attribute.type instanceof DatetimeType) {
+        return new DateInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name] || null,
+          type: DateTimePickerType.DATETIME
+        });
+      }
+      if (attribute.type instanceof DateType) {
+        return new DateInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name] || null,
+          type: DateTimePickerType.DATE
+        });
+      }
+      if (attribute.type instanceof AttachmentType) {
+      }
+      if (attribute.type instanceof SignatureType) {
+        console.log(options.object?.model[attribute.name]);
+      }
+      if (attribute.type instanceof PhotoType) {
+        console.log(options.object?.model[attribute.name]);
+      }
+      if (attribute.type instanceof BooleanType) {
+        return new BooleanInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name]
+        });
+      }
+      if (attribute.type instanceof LocationType) {
+      }
+      if (attribute.type instanceof SingleChoiceIntegerType) {
+      }
+      if (attribute.type instanceof SingleChoiceType) {
+        return new SelectInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name],
+          options: _.mapValues(attribute.type.options, (option) => {
+            return `${option.value}`;
+          })
+        });
+      }
+      if (attribute.type instanceof MultipleChoiceType) {
+      }
+      if (attribute.type instanceof TextType) {
+        return new TextInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name]
+        });
+      }
+      return null;
+    })
+      .filter((f) => !!f)
+      .forEach((a) => {
+        this.addInput(a);
+      });
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import { DataBrowserModule } from './DataBrowserModule';
+
+export * from './entities';
+
+export default DataBrowserModule;

package/src/panels/model/ModelPanelFactory.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { inject, ReactorPanelFactory, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
+import { ModelPanelWidget } from './ModelPanelWidget';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+import { computed, observable } from 'mobx';
+import { WorkspaceModelFactoryEvent } from '@projectstorm/react-workspaces-core';
+import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+
+export interface ModelPanelModelOptions {
+  definition: SchemaModelDefinition;
+  model?: SchemaModelObject;
+}
+
+export class ModelPanelModel extends ReactorPanelModel {
+  @inject(ConnectionStore)
+  accessor connStore: ConnectionStore;
+
+  @observable
+  accessor definition: SchemaModelDefinition;
+
+  @observable
+  accessor model: SchemaModelObject;
+
+  constructor(options?: ModelPanelModelOptions) {
+    super(ModelPanelFactory.TYPE);
+    this.setExpand(true, true);
+    this.definition = options?.definition;
+    this.model = options?.model;
+  }
+
+  encodeEntities() {
+    return {
+      definition: this.definition,
+      model: this.model
+    };
+  }
+
+  decodeEntities(data: ReturnType<this['encodeEntities']>) {
+    this.definition = data.definition;
+    this.model = data.model;
+  }
+}
+
+export class ModelPanelFactory extends ReactorPanelFactory<ModelPanelModel> {
+  static TYPE = 'databrowser/model';
+
+  constructor() {
+    super({
+      icon: 'cube',
+      color: 'mediumpurple',
+      name: 'Model',
+      allowManualCreation: false,
+      isMultiple: true,
+      fullscreen: false,
+      type: ModelPanelFactory.TYPE,
+      category: 'Databrowser'
+    });
+  }
+
+  getSimpleName(model: ModelPanelModel) {
+    if (!model.definition) {
+      return super.getSimpleName(model);
+    }
+    if (model.model) {
+      return `${model.definition.definition.label}: ${model.model.model.toString()}`;
+    }
+    return `${model.definition.definition.label}`;
+  }
+
+  _generateModel(): ModelPanelModel {
+    return new ModelPanelModel(null);
+  }
+
+  generatePanelContent(event: WorkspaceModelFactoryEvent<ModelPanelModel>): React.JSX.Element {
+    return <ModelPanelWidget key={event.model.id} model={event.model} />;
+  }
+}

package/src/panels/model/ModelPanelWidget.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import styled from '@emotion/styled';
+import { BorderLayoutWidget, LoadingPanelWidget } from '@journeyapps-labs/reactor-mod';
+
+import { SchemaModelForm } from '../../forms/SchemaModelForm';
+import { ModelPanelModel } from './ModelPanelFactory';
+
+export interface QueryPanelWidgetProps {
+  model: ModelPanelModel;
+}
+
+namespace S {
+  export const Container = styled.div`
+    padding: 20px;
+  `;
+}
+
+export const ModelPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props) => {
+  const [form, setForm] = useState<SchemaModelForm>(null);
+
+  useEffect(() => {
+    if (!props.model.definition) {
+      return;
+    }
+    setForm(
+      new SchemaModelForm({
+        object: props.model.model,
+        definition: props.model.definition
+      })
+    );
+  }, [props.model.model, props.model.definition]);
+
+  return (
+    <LoadingPanelWidget loading={!form}>
+      {() => {
+        return <S.Container>{form.render()}</S.Container>;
+      }}
+    </LoadingPanelWidget>
+  );
+});

package/src/panels/query/PageResultsWidget.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Page } from '../../core/query/Page';
+import {
+  ActionSource,
+  ioc,
+  LoadingPanelWidget,
+  ScrollableDivCss,
+  System,
+  TableWidget
+} from '@journeyapps-labs/reactor-mod';
+import { AbstractQuery } from '../../core/query/AbstractQuery';
+import { observer } from 'mobx-react';
+import styled from '@emotion/styled';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+
+export interface PageResultsWidgetProps {
+  page: Page;
+  query: AbstractQuery;
+}
+
+export const PageResultsWidget: React.FC<PageResultsWidgetProps> = observer((props) => {
+  const system = ioc.get(System);
+
+  return (
+    <LoadingPanelWidget
+      loading={props.page.loading}
+      children={() => {
+        return (
+          <S.Container>
+            <TableWidget
+              onContextMenu={(event, row) => {
+                system
+                  .getDefinition<SchemaModelObject>(DataBrowserEntities.SCHEMA_MODEL_OBJECT)
+                  .showContextMenuForEntity(row.model, event);
+              }}
+              rows={props.page.asRows()}
+              columns={props.query.getColumns()}
+            />
+          </S.Container>
+        );
+      }}
+    />
+  );
+});
+
+namespace S {
+  export const Container = styled.div`
+    overflow: auto;
+    ${ScrollableDivCss};
+  `;
+}

package/src/panels/query/QueryPanelFactory.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { inject, ReactorPanelFactory, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
+import { QueryPanelWidget } from './QueryPanelWidget';
+import { AbstractQuery } from '../../core/query/AbstractQuery';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+import { observable } from 'mobx';
+import { WorkspaceModelFactoryEvent } from '@projectstorm/react-workspaces-core';
+
+export class QueryPanelModel extends ReactorPanelModel {
+  @inject(ConnectionStore)
+  accessor connStore: ConnectionStore;
+
+  @observable
+  accessor query: AbstractQuery;
+
+  @observable
+  accessor current_page: number;
+
+  constructor(query: AbstractQuery) {
+    super(QueryPanelFactory.TYPE);
+    this.setExpand(true, true);
+    this.query = query;
+    this.current_page = 0;
+  }
+
+  toArray() {
+    return {
+      ...super.toArray(),
+      current_page: this.current_page
+    };
+  }
+
+  fromArray(data: ReturnType<this['toArray']>, engine) {
+    super.fromArray(data, engine);
+    this.current_page = data.current_page || 0;
+  }
+
+  encodeEntities() {
+    return {
+      query: this.query
+    };
+  }
+
+  decodeEntities(data: ReturnType<this['encodeEntities']>) {
+    this.query = data.query;
+  }
+}
+
+export class QueryPanelFactory extends ReactorPanelFactory<QueryPanelModel> {
+  static TYPE = 'query';
+
+  constructor() {
+    super({
+      icon: 'table',
+      color: 'rgb(0,192,255)',
+      name: 'Query',
+      allowManualCreation: false,
+      isMultiple: true,
+      fullscreen: false,
+      type: QueryPanelFactory.TYPE,
+      category: 'Databrowser'
+    });
+  }
+
+  getSimpleName(model: QueryPanelModel): string {
+    return model.query?.getSimpleName();
+  }
+
+  _generateModel(): QueryPanelModel {
+    return new QueryPanelModel(null);
+  }
+
+  generatePanelContent(event: WorkspaceModelFactoryEvent<QueryPanelModel>): React.JSX.Element {
+    return <QueryPanelWidget key={event.model.id} model={event.model} />;
+  }
+}

package/src/panels/query/QueryPanelWidget.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { QueryPanelModel } from './QueryPanelFactory';
+import { observer } from 'mobx-react';
+import styled from '@emotion/styled';
+import { BorderLayoutWidget, LoadingPanelWidget } from '@journeyapps-labs/reactor-mod';
+import { Page } from '../../core/query/Page';
+import { PageResultsWidget } from './PageResultsWidget';
+import { TableControlsWidget } from './TableControlsWidget';
+
+export interface QueryPanelWidgetProps {
+  model: QueryPanelModel;
+}
+
+namespace S {
+  export const Container = styled.div`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  `;
+}
+
+export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props) => {
+  const [page, setPage] = useState<Page>(null);
+  useEffect(() => {
+    if (!props.model.query) {
+      return;
+    }
+    props.model.query.load();
+  }, [props.model.query]);
+
+  useEffect(() => {
+    if (props.model.query) {
+      setPage(props.model.query.getPage(props.model.current_page));
+    }
+  }, [props.model.query]);
+
+  return (
+    <LoadingPanelWidget loading={!props.model.query || !page}>
+      {() => {
+        return (
+          <S.Container>
+            <BorderLayoutWidget
+              top={
+                <TableControlsWidget
+                  query={props.model.query}
+                  current_page={page}
+                  goToPage={(index) => {
+                    setPage(props.model.query.getPage(index));
+                    props.model.current_page = index;
+                  }}
+                />
+              }
+              bottom={
+                <TableControlsWidget
+                  query={props.model.query}
+                  current_page={page}
+                  goToPage={(index) => {
+                    setPage(props.model.query.getPage(index));
+                    props.model.current_page = index;
+                  }}
+                />
+              }
+            >
+              <PageResultsWidget query={props.model.query} page={page} />
+            </BorderLayoutWidget>
+          </S.Container>
+        );
+      }}
+    </LoadingPanelWidget>
+  );
+});

package/src/panels/query/TableControlsWidget.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { ComboBoxItem, PanelButtonWidget, PanelDropdownWidget, styled } from '@journeyapps-labs/reactor-mod';
+import { AbstractQuery } from '../../core/query/AbstractQuery';
+import { observer } from 'mobx-react';
+import * as _ from 'lodash';
+import { Page } from '../../core/query/Page';
+
+export interface TableControlsWidgetProps {
+  current_page: Page;
+  goToPage?: (index: number) => any;
+  className?: any;
+  query: AbstractQuery;
+}
+
+export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer((props) => {
+  return (
+    <S.Container className={props.className}>
+      <PanelButtonWidget
+        disabled={props.current_page?.index === 0}
+        label="Prev"
+        action={() => {
+          props.goToPage(props.current_page.index - 1);
+        }}
+      />
+      <S.PageSelector>
+        <PanelDropdownWidget
+          onChange={({ key }) => {
+            props.goToPage(parseInt(key));
+          }}
+          selected={`${props.current_page.index}`}
+          items={_.range(0, props.query.totalPages).map((r) => {
+            return {
+              title: `${r + 1}`,
+              key: `${r}`
+            } as ComboBoxItem;
+          })}
+        />
+        <S.TotalPages>/ {props.query.totalPages}</S.TotalPages>
+      </S.PageSelector>
+      <PanelButtonWidget
+        disabled={props.query.totalPages == props.current_page.index + 1}
+        label="Next"
+        action={() => {
+          props.goToPage(props.current_page.index + 1);
+        }}
+      />
+      <PanelButtonWidget
+        label="Page"
+        icon="refresh"
+        action={() => {
+          props.current_page.load();
+        }}
+      />
+      <PanelButtonWidget
+        label="Query"
+        icon="refresh"
+        action={() => {
+          props.query.load();
+        }}
+      />
+    </S.Container>
+  );
+});
+namespace S {
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    padding: 5px 5px;
+    align-items: center;
+  `;
+
+  export const PageSelector = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  `;
+
+  export const TotalPages = styled.div`
+    color: ${(p) => p.theme.text.primary};
+    padding-left: 5px;
+  `;
+}

package/src/stores/ConnectionStore.ts

@@ -0,0 +1,87 @@
+import { AbstractStore, LocalStorageSerializer } from '@journeyapps-labs/reactor-mod';
+import { AbstractConnection, AbstractConnectionSerialized } from '../core/AbstractConnection';
+import { action, computed, observable, when } from 'mobx';
+import { AbstractConnectionFactory } from '../core/AbstractConnectionFactory';
+
+export interface ConnectionStoreSerialized {
+  connections: AbstractConnectionSerialized[];
+}
+
+export class ConnectionStore extends AbstractStore<ConnectionStoreSerialized> {
+  @observable
+  protected accessor _connections: Set<AbstractConnection>;
+
+  protected _connectionFactories: Map<string, AbstractConnectionFactory>;
+
+  constructor() {
+    super({
+      name: 'CONNECTION_STORE',
+      serializer: new LocalStorageSerializer({
+        key: 'CONNECTION_STORE'
+      })
+    });
+    this._connections = new Set<AbstractConnection>();
+    this._connectionFactories = new Map<string, AbstractConnectionFactory>();
+  }
+
+  @computed get connections() {
+    return Array.from(this._connections.values());
+  }
+
+  get connectionFactories() {
+    return Array.from(this._connectionFactories.values());
+  }
+
+  protected serialize(): ConnectionStoreSerialized {
+    return {
+      connections: this.connections.map((m) => m.serialize())
+    };
+  }
+
+  getConnectionByID(id: string) {
+    return this.connections.find((c) => c.id === id);
+  }
+
+  async waitForReadyForConnection(id: string) {
+    await when(() => {
+      return !!this.getConnectionByID(id);
+    });
+    return this.getConnectionByID(id);
+  }
+
+  async deserializeConnection(data: AbstractConnectionSerialized) {
+    let conn = this._connectionFactories.get(data.factory).generateConnection();
+    conn.id = data.id;
+    await conn._deSerialize(data.payload);
+    return conn;
+  }
+
+  @action
+  protected async deserialize(data: ConnectionStoreSerialized) {
+    let connections = await Promise.all(
+      data.connections.map((connSer) => {
+        return this.deserializeConnection(connSer);
+      })
+    );
+    connections.forEach((c) => {
+      this.addConnection(c);
+    });
+  }
+
+  registerConnectionFactory(factory: AbstractConnectionFactory) {
+    this._connectionFactories.set(factory.options.key, factory);
+  }
+
+  addConnection(connection: AbstractConnection) {
+    let l1 = connection.registerListener({
+      removed: () => {
+        this._connections.delete(connection);
+        this.save();
+        l1();
+      }
+    });
+    this._connections.add(connection);
+    this.save();
+    connection.init();
+  }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "declarationDir": "dist/@types",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.json"
+  ]
+}