@journeyapps-labs/reactor-mod-data-browser 0.0.0-dev-20250825225306

package/src/forms/SchemaModelForm.tsx

@@ -0,0 +1,116 @@
+import {
+  BooleanInput,
+  DateInput,
+  DateTimePickerType,
+  FileInput,
+  FormModel,
+  ImageInput,
+  ImageMedia,
+  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';
+import { LocationInput } from './inputs/LocationInput';
+
+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 SignatureType || attribute.type instanceof PhotoType) {
+        let media = new ImageInput({
+          name: attribute.name,
+          label: attribute.label
+        });
+
+        if (options.object) {
+          options.object.getMedia(attribute.name).then((m) => {
+            media.setValue(m as ImageMedia);
+          });
+        }
+        return media;
+      }
+      if (attribute.type instanceof AttachmentType) {
+        return new FileInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name] || null
+        });
+      }
+      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) {
+        return new LocationInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name]
+        });
+      }
+      if (attribute.type instanceof SingleChoiceIntegerType || 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/forms/inputs/LocationInput.tsx

@@ -0,0 +1,104 @@
+import {
+  FormInput,
+  FormInputGenerics,
+  FormInputOptions,
+  FormInputRenderOptions,
+  InputContainerWidget,
+  NumberInput,
+  PanelButtonMode,
+  PanelButtonWidget
+} from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
+import { Location } from '@journeyapps/db';
+import styled from '@emotion/styled';
+
+export class LocationInput extends FormInput<FormInputGenerics & { VALUE: Location }> {
+  latitude: NumberInput;
+  longitude: NumberInput;
+
+  constructor(options: FormInputOptions<Location>) {
+    super(options);
+    this.latitude = new NumberInput({
+      name: 'latitude',
+      label: 'Latitude',
+      value: options.value?.latitude
+    });
+    this.longitude = new NumberInput({
+      name: 'longitude',
+      label: 'Longitude',
+      value: options.value?.longitude
+    });
+
+    this.update();
+
+    [this.latitude, this.longitude].forEach((l) => {
+      l.registerListener({
+        valueChanged: () => {
+          this.update();
+        }
+      });
+    });
+  }
+
+  setValue(value: Location) {
+    super.setValue(value);
+    if (this.latitude.value !== value?.latitude) {
+      this.latitude.setValue(value?.latitude);
+    }
+    if (this.longitude.value !== value?.longitude) {
+      this.longitude.setValue(value?.longitude);
+    }
+  }
+
+  update() {
+    let lat = this.latitude.value;
+    let long = this.longitude.value;
+    if (lat == null || long === null) {
+      this.setValue(null);
+    } else {
+      this.setValue(
+        new Location({
+          latitude: lat,
+          longitude: long,
+          horizontal_accuracy: (this.value as Location)?.horizontal_accuracy,
+          vertical_accuracy: (this.value as Location)?.vertical_accuracy,
+          altitude: (this.value as Location)?.altitude,
+          timestamp: new Date()
+        })
+      );
+    }
+  }
+
+  renderControl(options: FormInputRenderOptions): React.JSX.Element {
+    return (
+      <S.Container>
+        <InputContainerWidget error={this.latitude.error} label={this.latitude.label} inline={true}>
+          {this.latitude.renderControl({ inline: true })}
+        </InputContainerWidget>
+        <InputContainerWidget error={this.longitude.error} label={this.longitude.label} inline={true}>
+          {this.longitude.renderControl({ inline: true })}
+        </InputContainerWidget>
+        {this.value ? (
+          <PanelButtonWidget
+            mode={PanelButtonMode.LINK}
+            label="Open in maps"
+            icon="map"
+            action={() => {
+              window.open(`https://www.google.com/maps/?q=${this.latitude.value},${this.longitude.value}`, '_blank');
+            }}
+          />
+        ) : null}
+      </S.Container>
+    );
+  }
+}
+
+namespace S {
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    row-gap: 2px;
+    max-width: 250px;
+    align-items: flex-start;
+  `;
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+import { DataBrowserModule } from './DataBrowserModule';
+
+export * from './entities';
+export * from './core/SchemaModelDefinition';
+export * from './core/SchemaModelObject';
+export * from './core/AbstractConnection';
+export * from './core/AbstractConnectionFactory';
+export * from './core/query/SimpleQuery';
+export * from './core/query/AbstractQuery';
+export * from './core/query/Page';
+export * from './core/types/ManualConnectionFactory';
+export * from './core/types/ManualConnection';
+export * from './entities/QueryEntityDefinition';
+export * from './entities/ConnectionEntityDefinition';
+export * from './entities/ConnectionFactoryEntityDefinition';
+export * from './entities/SchemaModelDefinitionEntityDefinition';
+export * from './entities/SchemaModelObjectEntityDefinition';
+export * from './panels/query/QueryPanelFactory';
+export * from './panels/model/ModelPanelFactory';
+export * from './stores/ConnectionStore';
+export * from './actions/connections/AddConnectionAction';
+export * from './actions/connections/RemoveConnectionAction';
+export * from './actions/schema-definitions/CreateModelAction';
+export * from './actions/schema-definitions/QuerySchemaModelAction';
+export * from './actions/schema-model/EditSchemaModelAction';
+
+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(false, 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,76 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import styled from '@emotion/styled';
+import {
+  BorderLayoutWidget,
+  LoadingPanelWidget,
+  PANEL_CONTENT_PADDING,
+  PanelToolbarWidget,
+  ScrollableDivCss
+} 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`
+    overflow: auto;
+    padding: ${PANEL_CONTENT_PADDING}px;
+    ${ScrollableDivCss};
+  `;
+}
+
+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]);
+
+  let top = null;
+  if (props.model.model) {
+    top = (
+      <PanelToolbarWidget
+        btns={
+          [
+            // {
+            //   label: 'Delete object',
+            //   action: () => {}
+            // }
+          ]
+        }
+        meta={[
+          {
+            label: 'ID',
+            value: props.model?.id
+          }
+        ]}
+      />
+    );
+  }
+
+  return (
+    <LoadingPanelWidget loading={!form}>
+      {() => {
+        return (
+          <BorderLayoutWidget top={top}>
+            <S.Container>{form.render()}</S.Container>
+          </BorderLayoutWidget>
+        );
+      }}
+    </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,85 @@
+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"
+        tooltip="Reload page"
+        icon="refresh"
+        action={() => {
+          props.current_page.load();
+        }}
+      />
+      <PanelButtonWidget
+        label="Query"
+        tooltip="Reload Query"
+        icon="refresh"
+        action={async (event, loading) => {
+          await 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;
+  `;
+}