@journeyapps-labs/reactor-mod-data-browser 3.0.1 → 3.1.0

package/src/core/query/query-simple/SimpleQuery.tsx

@@ -1,19 +1,20 @@
-import { inject, TableColumn } from '@journeyapps-labs/reactor-mod';
+import { inject, ioc, 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 { Promise } from '@journeyapps/db';
 import * as _ from 'lodash';
-import * as React from 'react';
+import { Page } from '../Page';
+import { SchemaModelDefinition } from '../../SchemaModelDefinition';
 import { action, observable } from 'mobx';
-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';
+import { SerializedSimpleFilter } from '../filters';
+import { TypeEngine } from '../../../forms/TypeEngine';
+import { SerializedSimpleQuerySort, SimpleQuerySort, SortDirection } from './SimpleQueryTypes';
+import { applyFiltersAndSorts } from './SimpleQueryPlanner';
+import { buildSimpleQueryColumns } from './SimpleQueryColumns';
+import { SimpleQuerySortState } from './SimpleQuerySortState';
+import { SimpleQueryFilterState } from './SimpleQueryFilterState';
 
 export interface SimpleQueryOptions {
   definition?: SchemaModelDefinition;
@@ -23,8 +24,12 @@ export interface SimpleQueryOptions {
 export interface SimpleQueryEncoded extends AbstractQueryEncoded {
   limit: number;
   definition: string;
+  filters?: SerializedSimpleFilter[];
+  sorts?: SerializedSimpleQuerySort[];
 }
 
+export { SortDirection, SimpleQuerySort, type SerializedSimpleQuerySort };
+
 export class SimpleQuery extends AbstractSerializableQuery<SimpleQueryEncoded> {
   @inject(ConnectionStore)
   accessor connStore: ConnectionStore;
@@ -35,34 +40,70 @@ export class SimpleQuery extends AbstractSerializableQuery<SimpleQueryEncoded> {
   @observable
   accessor _pages: Page[];
 
-  simple_filters: Map<Variable, SimpleFilter>;
+  readonly sortState: SimpleQuerySortState;
+  readonly filterState: SimpleQueryFilterState;
+  private suspendStateLoad: boolean;
+  private readonly scheduleLoad: () => void;
 
   constructor(public options: SimpleQueryOptions = {}) {
     super('simple', options.definition?.connection);
     this._totalPages = 0;
     this._pages = [];
-    this.simple_filters = new Map();
+    this.sortState = new SimpleQuerySortState(options.definition);
+    this.filterState = new SimpleQueryFilterState({
+      definition: options.definition,
+      typeEngine: ioc.get(TypeEngine)
+    });
+    this.suspendStateLoad = false;
+    this.scheduleLoad = _.debounce(
+      () => {
+        if (this.suspendStateLoad) {
+          return;
+        }
+        this.load();
+      },
+      10,
+      { trailing: true, leading: false }
+    );
+    const onStateChange = () => {
+      if (this.suspendStateLoad) {
+        return;
+      }
+      this.scheduleLoad();
+    };
+    this.sortState.registerListener({
+      changed: () => {
+        onStateChange();
+      }
+    });
+    this.filterState.registerListener({
+      changed: () => {
+        onStateChange();
+      }
+    });
   }
 
   @action async load() {
     this._pages = [];
-    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);
+    const collection = await this.options.definition.getCollection();
+    const query = applyFiltersAndSorts(
+      collection.all(),
+      Array.from(this.filterState.simpleFilters.values()),
+      this.sortState.sorts
+    );
+    const 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 SimplePage({
+      const page = new SimplePage({
         offset: number * this.options.limit,
         limit: this.options.limit,
         definition: this.options.definition,
         index: number,
-        filters: Array.from(this.simple_filters.values())
+        filters: Array.from(this.filterState.simpleFilters.values()),
+        sorts: this.sortState.sorts
       });
       page.load();
       this._pages[number] = page;
@@ -78,76 +119,35 @@ export class SimpleQuery extends AbstractSerializableQuery<SimpleQueryEncoded> {
     return {
       ...super.serialize(),
       definition: this.options.definition.definition.name,
-      limit: this.options.limit
+      limit: this.options.limit,
+      filters: this.filterState.getSerializedFilters(),
+      sorts: this.sortState.getSerializedSorts()
     };
   }
 
   async deserialize(connectionStore: ConnectionStore, data: SimpleQueryEncoded): Promise<void> {
     await super.deserialize(connectionStore, data);
-    this.options.limit = data.limit;
-    this.options.definition = await this.connection.waitForSchemaModelDefinitionByName(data.definition);
+    this.suspendStateLoad = true;
+    try {
+      this.options.limit = data.limit;
+      const definition = await this.connection.waitForSchemaModelDefinitionByName(data.definition);
+      this.options.definition = definition;
+      this.sortState.setDefinition(definition);
+      this.filterState.setDefinition(definition);
+      this.filterState.hydrateFilters(data.filters || []);
+      this.sortState.hydrateSorts(data.sorts || []);
+    } finally {
+      this.suspendStateLoad = false;
+    }
   }
 
   getColumns(): TableColumn[] {
-    return [
-      {
-        key: 'id',
-        display: 'ID',
-        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: (
-            <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 <SmartBelongsToDisplayWidget variable_id={a} row={row} connection={this.connection} />;
-          }
-        } as TableColumn;
-      }),
-      ..._.map(this.options.definition.definition.attributes, (a) => {
-        return {
-          key: a.name,
-          display: (
-            <SmartColumnWidget
-              variable={a}
-              filter={this.simple_filters.get(a)}
-              filterChanged={(filter) => {
-                if (!filter) {
-                  this.simple_filters.delete(a);
-                  this.load();
-                } else {
-                  this.simple_filters.set(a, filter);
-                  this.load();
-                }
-              }}
-            />
-          ),
-          noWrap: true,
-          shrink: true,
-          accessor: (cell, row: PageRow) => {
-            return <SmartCellDisplayWidget name={a.name} row={row} />;
-          }
-        } as TableColumn;
-      })
-    ];
+    return buildSimpleQueryColumns({
+      definition: this.options.definition,
+      connection: this.connection,
+      sortState: this.sortState,
+      filterState: this.filterState
+    });
   }
 
   getSimpleName(): string {
@@ -155,9 +155,6 @@ export class SimpleQuery extends AbstractSerializableQuery<SimpleQueryEncoded> {
   }
 
   getDirtyObjects(): SchemaModelObject[] {
-    return _.flatMap(
-      this._pages.filter((p) => !!p),
-      (page) => page.getDirtyObjects()
-    );
+    return this._pages.flatMap((page) => page?.getDirtyObjects() || []);
   }
 }

package/src/core/query/query-simple/SimpleQueryColumns.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { TableColumn } from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { PageRow } from '../Page';
+import { CellDisplayWidget } from '../widgets/CellDisplayWidget';
+import { SmartColumnWidget } from '../widgets/SmartColumnWidget';
+import { SmartCellDisplayWidget } from '../widgets/SmartCellDisplayWidget';
+import { SmartBelongsToDisplayWidget } from '../widgets/SmartBelongsToDisplayWidget';
+import { ColumnDisplayWidget } from '../widgets/ColumnDisplayWidget';
+import { SchemaModelDefinition } from '../../SchemaModelDefinition';
+import { AbstractConnection } from '../../AbstractConnection';
+import { SimpleQuerySort, SortDirection } from './SimpleQueryTypes';
+import { SimpleQuerySortState } from './SimpleQuerySortState';
+import { SimpleQueryFilterState } from './SimpleQueryFilterState';
+import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields } from '../StandardModelFields';
+
+export interface BuildSimpleQueryColumnsOptions {
+  definition: SchemaModelDefinition;
+  connection: AbstractConnection;
+  sortState: SimpleQuerySortState;
+  filterState: SimpleQueryFilterState;
+}
+
+export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions): TableColumn[] => {
+  const getSortLabel = (field: string, label: string) => {
+    const direction = options.sortState.getSort(field)?.direction;
+    if (!direction) {
+      return label;
+    }
+    return `${label} ${direction === SortDirection.ASC ? '↑' : '↓'}`;
+  };
+
+  return [
+    {
+      key: StandardModelFields.ID,
+      display: (
+        <ColumnDisplayWidget
+          label={getSortLabel(StandardModelFields.ID, STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID])}
+          onClick={async () => {
+            const sort = options.sortState.getSort(StandardModelFields.ID);
+            if (!sort) {
+              options.sortState.addSort(SimpleQuerySort.create(StandardModelFields.ID));
+              return;
+            }
+            sort.toggle();
+          }}
+        />
+      ),
+      noWrap: true,
+      shrink: true
+    },
+    {
+      key: StandardModelFields.UPDATED_AT,
+      display: (
+        <ColumnDisplayWidget
+          label={getSortLabel(
+            StandardModelFields.UPDATED_AT,
+            STANDARD_MODEL_FIELD_LABELS[StandardModelFields.UPDATED_AT]
+          )}
+          onClick={async () => {
+            const sort = options.sortState.getSort(StandardModelFields.UPDATED_AT);
+            if (!sort) {
+              options.sortState.addSort(SimpleQuerySort.create(StandardModelFields.UPDATED_AT));
+              return;
+            }
+            sort.toggle();
+          }}
+        />
+      ),
+      noWrap: true,
+      shrink: true,
+      accessor: (cell, row: PageRow) => {
+        return <CellDisplayWidget name={StandardModelFields.UPDATED_AT} cell={row.model.updated_at} row={row} />;
+      }
+    },
+    ..._.map(options.definition.definition.belongsToIdVars, (a) => {
+      return {
+        key: a.name,
+        display: (
+          <SmartColumnWidget
+            variable={options.definition.definition.belongsToVars[a.relationship]}
+            type={options.definition.definition.belongsTo[a.relationship].foreignType}
+            filterChanged={(filter) => {}}
+          />
+        ),
+        noWrap: true,
+        shrink: true,
+        accessor: (cell, row: PageRow) => {
+          return <SmartBelongsToDisplayWidget variable_id={a} row={row} connection={options.connection} />;
+        }
+      } as TableColumn;
+    }),
+    ..._.map(options.definition.definition.attributes, (a) => {
+      return {
+        key: a.name,
+        display: (
+          <SmartColumnWidget
+            variable={a}
+            filter={options.filterState.getFilter(a.name)}
+            sortDirection={options.sortState.getSort(a.name)?.direction}
+            onToggleSort={async () => {
+              const sort = options.sortState.getSort(a.name);
+              if (!sort) {
+                options.sortState.addSort(SimpleQuerySort.create(a.name));
+                return;
+              }
+              sort.toggle();
+            }}
+            filterChanged={async (filter) => {
+              if (!filter) {
+                options.filterState.getFilter(a.name)?.delete();
+                return;
+              }
+              options.filterState.setFilter(a.name, filter);
+            }}
+          />
+        ),
+        noWrap: true,
+        shrink: true,
+        accessor: (cell, row: PageRow) => {
+          return <SmartCellDisplayWidget name={a.name} row={row} />;
+        }
+      } as TableColumn;
+    })
+  ];
+};

package/src/core/query/query-simple/SimpleQueryFilterState.ts

@@ -0,0 +1,160 @@
+import { Variable } from '@journeyapps/db';
+import * as _ from 'lodash';
+import { BaseObserver } from '@journeyapps-labs/common-utils';
+import { SchemaModelDefinition } from '../../SchemaModelDefinition';
+import { SerializedSimpleFilter, SimpleFilter } from '../filters';
+import { TypeEngine } from '../../../forms/TypeEngine';
+
+export interface SimpleQueryFilterStateListener {
+  changed: () => any;
+}
+
+export interface SimpleQueryFilterStateOptions {
+  definition?: SchemaModelDefinition;
+  typeEngine: TypeEngine;
+}
+
+export interface ActiveFilterEntry {
+  variable: Variable;
+  filter: SimpleFilter;
+}
+
+export class SimpleQueryFilterState extends BaseObserver<SimpleQueryFilterStateListener> {
+  readonly simpleFilters: Map<Variable, SimpleFilter>;
+  accessor definition: SchemaModelDefinition | undefined;
+  readonly typeEngine: TypeEngine;
+
+  constructor(options: SimpleQueryFilterStateOptions) {
+    super();
+    this.simpleFilters = new Map();
+    this.definition = options.definition;
+    this.typeEngine = options.typeEngine;
+  }
+
+  get filters(): SimpleFilter[] {
+    return Array.from(this.simpleFilters.values());
+  }
+
+  clear() {
+    this.filters.forEach((filter) => filter.delete());
+  }
+
+  setDefinition(definition: SchemaModelDefinition | undefined) {
+    const definitionChanged = this.definition?.definition?.name !== definition?.definition?.name;
+    this.definition = definition;
+    const hadFilters = this.simpleFilters.size > 0;
+    if (definitionChanged) {
+      this.clear();
+    }
+    if (definitionChanged && !hadFilters) {
+      this.iterateListeners((cb) => cb.changed?.());
+    }
+    return definitionChanged || hadFilters;
+  }
+
+  getFilterableFields(): { key: string; label: string }[] {
+    if (!this.definition?.definition) {
+      return [];
+    }
+    return this.definition.getFilterableFields(this.typeEngine);
+  }
+
+  getActiveFilters(): ActiveFilterEntry[] {
+    return Array.from(this.simpleFilters.entries()).map(([variable, filter]) => {
+      return {
+        variable,
+        filter
+      };
+    });
+  }
+
+  getFilter(field: string): SimpleFilter | undefined {
+    const variable = this.resolveAttribute(field);
+    return variable ? this.simpleFilters.get(variable) : undefined;
+  }
+
+  getSerializedFilters() {
+    return this.filters.map((filter) => filter.serialize());
+  }
+
+  hydrateFilters(filters: SerializedSimpleFilter[]) {
+    this.clear();
+    const definition = this.definition;
+    if (!definition?.definition) {
+      return;
+    }
+    (filters || []).forEach((filter) => {
+      if (!SimpleFilter.canDeserialize(filter)) {
+        return;
+      }
+      const variable = _.find(_.values(definition.definition.attributes), (attribute) => {
+        return attribute.name === filter.variable;
+      });
+      if (!variable) {
+        return;
+      }
+      this.addFilter(variable, SimpleFilter.deserialize(variable, filter));
+    });
+  }
+
+  setFilter(field: string, filter: SimpleFilter) {
+    const variable = this.resolveAttribute(field);
+    if (!variable) {
+      return false;
+    }
+    return this.addFilter(variable, filter);
+  }
+
+  async setupFilterForField(field: string, position?: MouseEvent): Promise<boolean> {
+    const variable = this.resolveAttribute(field);
+    if (!variable) {
+      return false;
+    }
+    const handler = this.typeEngine.getHandler(variable.type);
+    if (!handler?.setupFilter) {
+      return false;
+    }
+    const existing = this.simpleFilters.get(variable);
+    const nextFilter = await handler.setupFilter({
+      variable,
+      filter: existing,
+      position
+    });
+    if (!nextFilter) {
+      return false;
+    }
+    return this.addFilter(variable, nextFilter);
+  }
+
+  private addFilter(variable: Variable, filter: SimpleFilter): boolean {
+    const existing = this.simpleFilters.get(variable);
+    if (existing && existing !== filter) {
+      existing.delete();
+    }
+    if (existing === filter) {
+      this.iterateListeners((cb) => cb.changed?.());
+      return true;
+    }
+    let unsubscribe = filter.registerListener({
+      removeRequested: () => {
+        unsubscribe();
+        if (this.simpleFilters.get(variable) === filter) {
+          this.simpleFilters.delete(variable);
+          this.iterateListeners((cb) => cb.changed?.());
+        }
+      }
+    });
+    this.simpleFilters.set(variable, filter);
+    this.iterateListeners((cb) => cb.changed?.());
+    return true;
+  }
+
+  private resolveAttribute(field: string): Variable | undefined {
+    if (!this.definition?.definition) {
+      return undefined;
+    }
+    return _.find(_.values(this.definition.definition.attributes), (attribute) => {
+      return attribute.name === field;
+    });
+  }
+}

package/src/core/query/query-simple/SimpleQueryPlanner.ts

@@ -0,0 +1,18 @@
+import { Query } from '@journeyapps/db';
+import { AbstractFilter } from '../filters';
+import { SimpleQuerySort, SortDirection } from './SimpleQueryTypes';
+
+export const applyFiltersAndSorts = (query: Query, filters: AbstractFilter[], sorts: SimpleQuerySort[] = []): Query => {
+  let next = query;
+  (filters || []).forEach((filter) => {
+    next = filter.augment(next);
+  });
+  if (sorts.length > 0) {
+    next = next.orderBy(
+      ...sorts.map((sort) => {
+        return sort.direction === SortDirection.DESC ? `-${sort.field}` : sort.field;
+      })
+    );
+  }
+  return next;
+};

package/src/core/query/query-simple/SimpleQuerySortState.ts

@@ -0,0 +1,133 @@
+import { observable } from 'mobx';
+import * as _ from 'lodash';
+import { BaseObserver } from '@journeyapps-labs/common-utils';
+import { SchemaModelDefinition } from '../../SchemaModelDefinition';
+import { SerializedSimpleQuerySort, SimpleQuerySort, SortDirection } from './SimpleQueryTypes';
+import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields } from '../StandardModelFields';
+
+export interface SimpleQuerySortStateListener {
+  changed: () => any;
+}
+
+export class SimpleQuerySortState extends BaseObserver<SimpleQuerySortStateListener> {
+  @observable
+  accessor sorts: SimpleQuerySort[];
+
+  accessor definition: SchemaModelDefinition | undefined;
+
+  constructor(definition?: SchemaModelDefinition) {
+    super();
+    this.sorts = [];
+    this.definition = definition;
+  }
+
+  setDefinition(definition: SchemaModelDefinition | undefined) {
+    const changed = this.definition?.definition?.name !== definition?.definition?.name;
+    this.definition = definition;
+    if (changed) {
+      this.iterateListeners((cb) => cb.changed?.());
+    }
+    return changed;
+  }
+
+  getSort(field: string): SimpleQuerySort | undefined {
+    return this.sorts.find((sort) => sort.field === field);
+  }
+
+  addSort(sort: SimpleQuerySort): boolean {
+    if (!sort?.field) {
+      return false;
+    }
+    const existing = this.getSort(sort.field);
+    if (existing) {
+      return false;
+    }
+    let unsubscribe = sort.registerListener({
+      changed: () => {
+        this.iterateListeners((cb) => cb.changed?.());
+      },
+      removeRequested: () => {
+        unsubscribe();
+        this.sorts = this.sorts.filter((entry) => entry !== sort);
+        this.iterateListeners((cb) => cb.changed?.());
+      }
+    });
+    this.sorts = [...this.sorts, sort];
+    this.iterateListeners((cb) => cb.changed?.());
+    return true;
+  }
+
+  moveSortBefore(sourceField: string, targetField: string): boolean {
+    if (!sourceField || !targetField || sourceField === targetField) {
+      return false;
+    }
+    const sourceIndex = this.sorts.findIndex((sort) => sort.field === sourceField);
+    const targetIndex = this.sorts.findIndex((sort) => sort.field === targetField);
+    if (sourceIndex < 0 || targetIndex < 0) {
+      return false;
+    }
+    const next = [...this.sorts];
+    const [source] = next.splice(sourceIndex, 1);
+    const nextTargetIndex = next.findIndex((sort) => sort.field === targetField);
+    const insertIndex = sourceIndex < targetIndex ? nextTargetIndex + 1 : nextTargetIndex;
+    next.splice(insertIndex, 0, source);
+    this.sorts = next;
+    this.iterateListeners((cb) => cb.changed?.());
+    return true;
+  }
+
+  setSorts(sorts: SimpleQuerySort[]) {
+    const next = this.normalizeSorts(sorts);
+    [...this.sorts].forEach((sort) => sort.remove());
+    this.sorts = [];
+    next.forEach((sort) => this.addSort(sort));
+    return true;
+  }
+
+  hydrateSorts(serializedSorts: SerializedSimpleQuerySort[] = []) {
+    const next = (serializedSorts || []).map((sort) => SimpleQuerySort.deserialize(sort));
+    return this.setSorts(next);
+  }
+
+  getSerializedSorts(): SerializedSimpleQuerySort[] {
+    return this.sorts.map((sort) => sort.serialize());
+  }
+
+  getSortableFields(): { key: string; label: string }[] {
+    const definition = this.definition;
+    if (!definition?.definition) {
+      return [];
+    }
+    const dynamic = _.map(definition.definition.attributes, (attribute) => {
+      return {
+        key: attribute.name,
+        label: attribute.label || attribute.name
+      };
+    });
+    return [
+      { key: StandardModelFields.ID, label: STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID] },
+      {
+        key: StandardModelFields.UPDATED_AT,
+        label: STANDARD_MODEL_FIELD_LABELS[StandardModelFields.UPDATED_AT]
+      },
+      ...dynamic
+    ];
+  }
+
+  private normalizeSorts(sorts: SimpleQuerySort[]): SimpleQuerySort[] {
+    const seen = new Set<string>();
+    return (sorts || []).filter((sort) => {
+      if (!sort?.field) {
+        return false;
+      }
+      if (!(sort.direction === SortDirection.ASC || sort.direction === SortDirection.DESC)) {
+        return false;
+      }
+      if (seen.has(sort.field)) {
+        return false;
+      }
+      seen.add(sort.field);
+      return true;
+    });
+  }
+}