@journeyapps-labs/reactor-mod-data-browser 2.2.0 → 2.4.0

package/src/core/query/{SimpleQuery.tsx → query-simple/SimpleQuery.tsx}

@@ -1,18 +1,19 @@
-import { AbstractQuery, AbstractQueryEncoded } from './AbstractQuery';
-import { ActionSource, inject, TableColumn } from '@journeyapps-labs/reactor-mod';
-import { ConnectionStore } from '../../stores/ConnectionStore';
-import * as db from '@journeyapps/db';
-import { Promise, Type, Variable } from '@journeyapps/db';
-import { Page, PageRow } from './Page';
-import { SchemaModelDefinition } from '../SchemaModelDefinition';
+import { inject, TableColumn } from '@journeyapps-labs/reactor-mod';
+import { ConnectionStore } from '../../../stores/ConnectionStore';
+import { Promise, Variable } from '@journeyapps/db';
+import { Page, PageRow } from '../Page';
+import { SchemaModelDefinition } from '../../SchemaModelDefinition';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { action, observable } from 'mobx';
-import { CellDisplayWidget } from './widgets/CellDisplayWidget';
-import { BelongsToDisplayWidget } from './widgets/BelongsToDisplayWidget';
-import { EditSchemaModelAction } from '../../actions/schema-model/EditSchemaModelAction';
-import { SmartColumnWidget } from './widgets/SmartColumnWidget';
-import { AbstractFilter, SimpleFilter } from './filters';
+import { CellDisplayWidget } from '../widgets/CellDisplayWidget';
+import { SmartColumnWidget } from '../widgets/SmartColumnWidget';
+import { SimpleFilter } from '../filters';
+import { SmartCellDisplayWidget } from '../widgets/SmartCellDisplayWidget';
+import { SchemaModelObject } from '../../SchemaModelObject';
+import { SimplePage } from './SimplePage';
+import { AbstractQueryEncoded, AbstractSerializableQuery } from '../AbstractSerializableQuery';
+import { SmartBelongsToDisplayWidget } from '../widgets/SmartBelongsToDisplayWidget';
 
 export interface SimpleQueryOptions {
   definition?: SchemaModelDefinition;
@@ -24,7 +25,7 @@ export interface SimpleQueryEncoded extends AbstractQueryEncoded {
   definition: string;
 }
 
-export class SimpleQuery extends AbstractQuery<SimpleQueryEncoded> {
+export class SimpleQuery extends AbstractSerializableQuery<SimpleQueryEncoded> {
   @inject(ConnectionStore)
   accessor connStore: ConnectionStore;
 
@@ -43,30 +44,22 @@ export class SimpleQuery extends AbstractQuery<SimpleQueryEncoded> {
     this.simple_filters = new Map();
   }
 
-  async getCollection() {
-    let connection = await this.connection.getConnection();
-    return connection[this.options.definition.definition.name] as db.Collection;
-  }
-
   @action async load() {
     this._pages = [];
-    let collection = await this.getCollection();
-
+    let collection = await this.options.definition.getCollection();
     let query = collection.all();
     this.simple_filters.forEach((f) => {
       query = f.augment(query);
     });
-
     let results = await (collection.adapter as any).doApiQuery(query);
     this._totalPages = Math.ceil(results.total / this.options.limit);
   }
 
   getPage(number: number): Page {
     if (!this._pages[number]) {
-      let page = new Page({
+      let page = new SimplePage({
         offset: number * this.options.limit,
         limit: this.options.limit,
-        collection: () => this.getCollection(),
         definition: this.options.definition,
         index: number,
         filters: Array.from(this.simple_filters.values())
@@ -103,31 +96,33 @@ export class SimpleQuery extends AbstractQuery<SimpleQueryEncoded> {
         noWrap: true,
         shrink: true
       },
+      {
+        key: 'updated_at',
+        display: 'Updated at',
+        noWrap: true,
+        shrink: true,
+        accessor: (cell, row: PageRow) => {
+          return <CellDisplayWidget name="updated_at" cell={row.model.updated_at} row={row} />;
+        }
+      },
       ..._.map(this.options.definition.definition.belongsToIdVars, (a) => {
         return {
           key: a.name,
-          display: a.name,
+          display: (
+            <SmartColumnWidget
+              variable={this.options.definition.definition.belongsToVars[a.relationship]}
+              type={this.options.definition.definition.belongsTo[a.relationship].foreignType}
+              filterChanged={(filter) => {}}
+            />
+          ),
           noWrap: true,
           shrink: true,
           accessor: (cell, row: PageRow) => {
-            return (
-              <BelongsToDisplayWidget
-                open={(object) => {
-                  EditSchemaModelAction.get().fireAction({
-                    source: ActionSource.BUTTON,
-                    targetEntity: object
-                  });
-                }}
-                relationship={row.model.definition.definition.belongsTo[a.relationship]}
-                connection={this.connection}
-                id={row.model.model[a.name]}
-              />
-            );
+            return <SmartBelongsToDisplayWidget variable_id={a} row={row} connection={this.connection} />;
           }
         } as TableColumn;
       }),
       ..._.map(this.options.definition.definition.attributes, (a) => {
-        // @ts-ignore FIXME, remove when `display` supports JSX.Element as a type
         return {
           key: a.name,
           display: (
@@ -148,7 +143,7 @@ export class SimpleQuery extends AbstractQuery<SimpleQueryEncoded> {
           noWrap: true,
           shrink: true,
           accessor: (cell, row: PageRow) => {
-            return <CellDisplayWidget variable={a} cell={cell} row={row} />;
+            return <SmartCellDisplayWidget name={a.name} row={row} />;
           }
         } as TableColumn;
       })
@@ -158,4 +153,11 @@ export class SimpleQuery extends AbstractQuery<SimpleQueryEncoded> {
   getSimpleName(): string {
     return `Query: ${this.options.definition.definition.label}`;
   }
+
+  getDirtyObjects(): SchemaModelObject[] {
+    return _.flatMap(
+      this._pages.filter((p) => !!p),
+      (page) => page.getDirtyObjects()
+    );
+  }
 }

package/src/core/query/widgets/BelongsToDisplayWidget.tsx

@@ -5,15 +5,17 @@ import { AbstractConnection } from '../../AbstractConnection';
 import { IconWidget, styled, TableButtonWidget } from '@journeyapps-labs/reactor-mod';
 import { copyTextToClipboard } from '@journeyapps-labs/lib-reactor-utils';
 import { Relationship } from '@journeyapps/parser-schema';
+import { observer } from 'mobx-react';
 
 export interface BelongsToDisplayWidgetProps {
   relationship: Relationship;
   id: string;
   connection: AbstractConnection;
   open: (object: SchemaModelObject) => any;
+  className?: any;
 }
 
-export const BelongsToDisplayWidget: React.FC<BelongsToDisplayWidgetProps> = (props) => {
+export const BelongsToDisplayWidget: React.FC<BelongsToDisplayWidgetProps> = observer((props) => {
   const [object, setObject] = useState<SchemaModelObject>(null);
   const [broken, setBroken] = useState(false);
 
@@ -55,8 +57,8 @@ export const BelongsToDisplayWidget: React.FC<BelongsToDisplayWidgetProps> = (pr
   }
 
   return (
-    <S.Container>
-      <BelongsToStringWidget model={object} />
+    <S.Container className={props.className}>
+      {object.data.display}
       <TableButtonWidget
         icon="arrow-right"
         action={() => {
@@ -65,22 +67,7 @@ export const BelongsToDisplayWidget: React.FC<BelongsToDisplayWidgetProps> = (pr
       />
     </S.Container>
   );
-};
-
-export const BelongsToStringWidget: React.FC<{ model: SchemaModelObject }> = ({ model }) => {
-  const [display, setDisplay] = useState<string>();
-  useEffect(() => {
-    model.displayValue().then((value) => {
-      setDisplay(value);
-    });
-  }, []);
-
-  if (!display) {
-    return <S.Spinner spin={true} icon="spinner" />;
-  }
-
-  return <span>{display}</span>;
-};
+});
 
 namespace S {
   export const Warning = styled(TableButtonWidget)`

package/src/core/query/widgets/CellDisplayWidget.tsx

@@ -1,122 +1,42 @@
-import {
-  CheckboxWidget,
-  ImageMedia,
-  MetadataWidget,
-  SmartDateDisplayWidget,
-  styled
-} from '@journeyapps-labs/reactor-mod';
-import { Attachment, Day, Location, Variable } from '@journeyapps/db';
+import { ioc, SmartDateDisplayWidget, styled } from '@journeyapps-labs/reactor-mod';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { PageRow } from '../Page';
+import { TypeEngine } from '../../../forms/TypeEngine';
 
 namespace S {
   export const Empty = styled.div`
     opacity: 0.2;
   `;
-
-  export const Preview = styled.img`
-    max-height: 40px;
-    max-width: 40px;
-    cursor: pointer;
-  `;
-
-  export const pill = styled.div`
-    padding: 2px 4px;
-    background: ${(p) => p.theme.table.pills};
-    border-radius: 3px;
-    font-size: 12px;
-  `;
-
-  export const Pills = styled.div`
-    display: flex;
-    column-gap: 2px;
-    row-gap: 2px;
-  `;
-
-  export const Max = styled.div`
-    max-width: 500px;
-    white-space: pre;
-    display: inline;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
 }
 
 export interface CellDisplayWidgetProps {
   row: PageRow;
   cell: any;
-  variable: Variable;
+  name: string;
 }
 
-const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
-
 export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
-  const { row, cell, variable } = props;
+  const { row, cell, name } = props;
   if (cell == null) {
     return <S.Empty>null</S.Empty>;
   }
-  if (_.isString(cell)) {
-    if (cell.trim() === '') {
-      return <S.Empty>empty</S.Empty>;
-    }
-    return <S.Max>{cell}</S.Max>;
-  }
-  if (_.isNumber(cell)) {
-    return cell;
-  }
-  if (_.isArray(cell)) {
-    if (cell.length === 0) {
-      return <S.Empty>empty array</S.Empty>;
-    }
-
-    let items = _.slice(cell, 0, MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY);
 
-    return (
-      <S.Pills>
-        {items.map((c) => {
-          return <S.pill key={c}>{c}</S.pill>;
-        })}
-        {items.length !== cell.length ? '...' : null}
-      </S.Pills>
-    );
-  }
-  if (cell instanceof Date) {
+  if (name === 'updated_at') {
     return <SmartDateDisplayWidget date={cell} />;
   }
-  if (cell instanceof Day) {
-    return <SmartDateDisplayWidget date={cell.toDate()} />;
-  }
-  if (_.isBoolean(cell)) {
-    return <CheckboxWidget checked={cell} onChange={() => {}} />;
-  }
-  if (cell instanceof Location) {
-    return (
-      <>
-        <MetadataWidget label={'Lat'} value={`${cell.latitude}`} />
-        <MetadataWidget label={'Long'} value={`${cell.longitude}`} />
-      </>
-    );
-  }
-  if (cell instanceof Attachment) {
-    if (cell.uploaded()) {
-      return (
-        <S.Preview
-          onClick={() => {
-            row.model.getMedia(variable.name).then((media) => {
-              if (media instanceof ImageMedia) {
-                media.open();
-              } else {
-                window.open(cell.url(), '_blank');
-              }
-            });
-          }}
-          src={cell.urls['thumbnail']}
-        />
-      );
-    }
-    return <S.Empty>Not uploaded</S.Empty>;
+
+  let display = ioc.get(TypeEngine).getHandler(row.definition.definition.attributes[name].type)?.generateDisplay({
+    model: row.model,
+    value: cell,
+    label: row.definition.definition.attributes[name].label,
+    name,
+    type: row.definition.definition.attributes[name].type
+  });
+  if (display) {
+    return display;
   }
-  console.log('unknown type', cell);
+
+  console.log('unknown type', cell, row.definition.definition.attributes[name].type);
   return null;
 };

package/src/core/query/widgets/ColumnDisplayWidget.tsx

@@ -3,17 +3,26 @@ import styled from '@emotion/styled';
 
 export interface ColumnDisplayWidgetProps {
   label: string;
+  className?: any;
 }
 
 export const ColumnDisplayWidget: React.FC<ColumnDisplayWidgetProps> = (props) => {
   let parts = (props.label || '').split(' ');
   if (parts.length >= 5) {
-    return <S.Width length={150}>{props.label}</S.Width>;
+    return (
+      <S.Width className={props.className} length={150}>
+        {props.label}
+      </S.Width>
+    );
   }
   if (parts.length >= 3) {
-    return <S.Width length={80}>{props.label}</S.Width>;
+    return (
+      <S.Width className={props.className} length={80}>
+        {props.label}
+      </S.Width>
+    );
   }
-  return <S.Span>{props.label}</S.Span>;
+  return <S.Span className={props.className}>{props.label}</S.Span>;
 };
 
 namespace S {

package/src/core/query/widgets/SmartBelongsToDisplayWidget.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { EditSchemaModelAction } from '../../../actions/schema-model/EditSchemaModelAction';
+import { BelongsToDisplayWidget } from './BelongsToDisplayWidget';
+import { PageRow } from '../Page';
+import { ActionSource, styled } from '@journeyapps-labs/reactor-mod';
+import { AbstractConnection } from '../../AbstractConnection';
+import { Variable } from '@journeyapps/db';
+import { observer } from 'mobx-react';
+
+export interface SmartBelongsToDisplayWidgetProps {
+  row: PageRow;
+  connection: AbstractConnection;
+  variable_id: Variable;
+}
+
+export const SmartBelongsToDisplayWidget: React.FC<SmartBelongsToDisplayWidgetProps> = observer((props) => {
+  const { row, connection, variable_id } = props;
+
+  let dirty = false;
+  let value = row.model.model[variable_id.name];
+  if (row.model.patch.has(variable_id.relationship)) {
+    value = row.model.patch.get(variable_id.relationship)?.id;
+    dirty = true;
+  }
+
+  return (
+    <S.Container
+      dirty={dirty}
+      open={(object) => {
+        EditSchemaModelAction.get().fireAction({
+          source: ActionSource.BUTTON,
+          targetEntity: object
+        });
+      }}
+      relationship={row.model.definition.definition.belongsTo[variable_id.relationship]}
+      connection={connection}
+      id={value}
+    />
+  );
+});
+namespace S {
+  export const Container = styled(BelongsToDisplayWidget)<{ dirty: boolean }>`
+    border-left: solid 4px ${(p) => (p.dirty ? p.theme.status.success : 'transparent')};
+    padding-left: 2px;
+  `;
+}

package/src/core/query/widgets/SmartCellDisplayWidget.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { PageRow } from '../Page';
+import { CellDisplayWidget } from './CellDisplayWidget';
+import { styled } from '@journeyapps-labs/reactor-mod';
+
+export interface SmartCellDisplayWidgetProps {
+  row: PageRow;
+  name: string;
+}
+
+export const SmartCellDisplayWidget: React.FC<SmartCellDisplayWidgetProps> = observer((props) => {
+  let value = props.row.model.model[props.name];
+  if (props.row.model.patch.has(props.name)) {
+    value = props.row.model.patch.get(props.name);
+  }
+
+  return (
+    <S.Container dirty={props.row.model.patch.has(props.name)}>
+      <CellDisplayWidget {...props} cell={value} />
+    </S.Container>
+  );
+});
+namespace S {
+  export const Container = styled.div<{ dirty: boolean }>`
+    border-left: solid 4px ${(p) => (p.dirty ? p.theme.status.success : 'transparent')};
+    padding-left: 2px;
+  `;
+}

package/src/core/query/widgets/SmartColumnWidget.tsx

@@ -1,20 +1,30 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { Variable } from '@journeyapps/db';
+import { ObjectType, Type, Variable } from '@journeyapps/db';
 import { ColumnDisplayWidget } from './ColumnDisplayWidget';
 import { SmartFilterWidget } from './SmartFilterWidget';
 import { SimpleFilter } from '../filters';
 
 export interface SmartColumnWidgetProps {
   variable: Variable;
+  type?: ObjectType;
   filter?: SimpleFilter;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
 export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
+  let display = <ColumnDisplayWidget label={props.variable.label || props.variable.name} />;
+  if (props.type) {
+    display = (
+      <S.TypeGroup>
+        {display}
+        <S.Type label={props.type.label} />
+      </S.TypeGroup>
+    );
+  }
   return (
     <S.Container>
-      <ColumnDisplayWidget label={props.variable.label} />
+      {display}
       <SmartFilterWidget filter={props.filter} variable={props.variable} filterChanged={props.filterChanged} />
     </S.Container>
   );
@@ -27,4 +37,10 @@ namespace S {
     align-items: center;
     column-gap: 5px;
   `;
+
+  export const Type = styled(ColumnDisplayWidget)`
+    opacity: 0.5;
+  `;
+
+  export const TypeGroup = styled.div``;
 }

package/src/entities/ConnectionEntityDefinition.tsx

@@ -50,6 +50,11 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
         descendantType: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
         generateOptions: (parent) => {
           return {
+            category: {
+              label: 'Models',
+              icon: 'cube',
+              openDefault: true
+            },
             descendants: parent.schema_models.items
           };
         }

package/src/entities/QueryEntityDefinition.ts

@@ -1,10 +1,10 @@
 import { EntityDefinition, inject, InlineEntityEncoderComponent } from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
-import { AbstractQuery, AbstractQueryEncoded } from '../core/query/AbstractQuery';
-import { SimpleQuery } from '../core/query/SimpleQuery';
+import { SimpleQuery } from '../core/query/query-simple/SimpleQuery';
+import { AbstractQueryEncoded, AbstractSerializableQuery } from '../core/query/AbstractSerializableQuery';
 
-export class QueryEntityDefinition extends EntityDefinition<AbstractQuery> {
+export class QueryEntityDefinition extends EntityDefinition<AbstractSerializableQuery> {
   @inject(ConnectionStore)
   accessor connectionStore: ConnectionStore;
 
@@ -18,7 +18,7 @@ export class QueryEntityDefinition extends EntityDefinition<AbstractQuery> {
     });
 
     this.registerComponent(
-      new InlineEntityEncoderComponent<AbstractQuery, AbstractQueryEncoded>({
+      new InlineEntityEncoderComponent<AbstractSerializableQuery, AbstractQueryEncoded>({
         version: 1,
         encode: (e) => {
           return e.serialize();
@@ -35,12 +35,12 @@ export class QueryEntityDefinition extends EntityDefinition<AbstractQuery> {
   }
 
   matchEntity(t: any): boolean {
-    if (t instanceof AbstractQuery) {
+    if (t instanceof AbstractSerializableQuery) {
       return true;
     }
   }
 
-  getEntityUID(t: AbstractQuery) {
+  getEntityUID(t: AbstractSerializableQuery) {
     return t.id;
   }
 }

package/src/entities/SchemaModelDefinitionEntityDefinition.ts

@@ -1,4 +1,5 @@
 import {
+  EntityActionHandlerComponent,
   EntityDefinition,
   EntityDescriberComponent,
   inject,
@@ -10,6 +11,7 @@ import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { AbstractConnection } from '../core/AbstractConnection';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { QuerySchemaModelAction } from '../actions/schema-definitions/QuerySchemaModelAction';
 
 export interface SchemaModelDefinitionEntityDefinitionEncoded {
   connection_id: string;
@@ -68,6 +70,8 @@ export class SchemaModelDefinitionEntityDefinition extends EntityDefinition<Sche
         }
       })
     );
+
+    this.registerComponent(new EntityActionHandlerComponent(QuerySchemaModelAction.ID));
   }
 
   matchEntity(t: any): boolean {

package/src/entities/SchemaModelObjectEntityDefinition.ts

@@ -3,11 +3,13 @@ import {
   EntityDescriberComponent,
   inject,
   InlineEntityEncoderComponent,
-  InlineTreePresenterComponent
+  InlineTreePresenterComponent,
+  SimpleParentEntitySearchEngine
 } from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { SchemaModelObject } from '../core/SchemaModelObject';
+import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
 
 export interface SchemaModelObjectEntityDefinitionEncoded {
   connection_id: string;
@@ -33,13 +35,42 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
         label: 'Simple',
         describe: (entity: SchemaModelObject) => {
           return {
-            simpleName: entity.model.id,
+            simpleName: entity.data.display,
             complexName: entity.definition.definition.label
           };
         }
       })
     );
 
+    // this.registerComponent(
+    //   new SimpleParentEntitySearchEngine<SchemaModelDefinition,SchemaModelObject>({
+    //     label: 'ID',
+    //     filterResultsWithMatcher: false,
+    //     type: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
+    //     getEntities: async (event) => {
+    //       let object = await event.parameters.parent.resolve(event.value);
+    //       if(object){
+    //         return [object]
+    //       }
+    //       return []
+    //     }
+    //   })
+    // );
+
+    this.registerComponent(
+      new SimpleParentEntitySearchEngine<SchemaModelDefinition, SchemaModelObject>({
+        label: 'Label',
+        type: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
+        filterResultsWithMatcher: false,
+        getEntities: async (event) => {
+          if (!event.value) {
+            return [];
+          }
+          return await event.parameters.parent.search(event.value);
+        }
+      })
+    );
+
     this.registerComponent(
       new InlineEntityEncoderComponent<SchemaModelObject, SchemaModelObjectEntityDefinitionEncoded>({
         version: 1,
@@ -53,12 +84,7 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
         decode: async (entity) => {
           let connection = await this.connectionStore.waitForReadyForConnection(entity.connection_id);
           let definition = await connection.waitForSchemaModelDefinitionByName(entity.type);
-          let db = await definition.getCollection();
-          let model = await db.first(entity.id);
-          return new SchemaModelObject({
-            model,
-            definition
-          });
+          return await definition.resolve(entity.id);
         }
       })
     );