@journeyapps-labs/reactor-mod-data-browser 3.3.0 → 3.4.0

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

@@ -21,6 +21,7 @@ import { EmptyValueWidget } from '../../../widgets/EmptyValueWidget';
 export interface PeekRelationshipButtonProps {
   object: SchemaModelObject;
   open: (object: SchemaModelObject) => any;
+  filterBelongsTo?: (object: SchemaModelObject) => any;
 }
 
 export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (props) => {
@@ -89,8 +90,15 @@ export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (pr
         title: 'ID',
         icon: 'copy',
         right: <S.FieldValue>{props.object.id}</S.FieldValue>,
-        disabled: true,
-        group: 'Object'
+        group: 'Object',
+        action: async () => {
+          copyTextToClipboard(props.object.id);
+          notifications.showNotification({
+            title: 'Copied',
+            description: 'Relationship ID copied to clipboard',
+            type: NotificationType.SUCCESS
+          });
+        }
       },
       {
         key: 'meta-updated',
@@ -114,20 +122,19 @@ export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (pr
           props.open(props.object);
         }
       },
-      {
-        key: 'copy',
-        title: 'Copy ID',
-        icon: 'copy',
-        group: 'Actions',
-        action: async () => {
-          copyTextToClipboard(props.object.id);
-          notifications.showNotification({
-            title: 'Copied',
-            description: 'Relationship ID copied to clipboard',
-            type: NotificationType.SUCCESS
-          });
-        }
-      }
+      ...(props.filterBelongsTo
+        ? [
+            {
+              key: 'filter-belongs-to',
+              title: 'Filter belongs to',
+              icon: 'filter',
+              group: 'Actions',
+              action: async () => {
+                await props.filterBelongsTo?.(props.object);
+              }
+            } as ComboBoxItem
+          ]
+        : [])
     ];
     const directive = await ioc.get(ComboBoxStore2).show(
       new SimpleComboBoxDirective({

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

@@ -4,6 +4,7 @@ import { BelongsToDisplayWidget } from './BelongsToDisplayWidget';
 import { PageRow } from '../Page';
 import { ActionSource, styled } from '@journeyapps-labs/reactor-mod';
 import { AbstractConnection } from '../../AbstractConnection';
+import { SchemaModelObject } from '../../SchemaModelObject';
 import { Variable } from '@journeyapps/db';
 import { observer } from 'mobx-react';
 
@@ -11,6 +12,7 @@ export interface SmartBelongsToDisplayWidgetProps {
   row: PageRow;
   connection: AbstractConnection;
   variable_id: Variable;
+  filterBelongsTo?: (object: SchemaModelObject) => any;
 }
 
 export const SmartBelongsToDisplayWidget: React.FC<SmartBelongsToDisplayWidgetProps> = observer((props) => {
@@ -35,6 +37,7 @@ export const SmartBelongsToDisplayWidget: React.FC<SmartBelongsToDisplayWidgetPr
       relationship={row.model.definition.definition.belongsTo[variable_id.relationship]}
       connection={connection}
       id={value}
+      filterBelongsTo={props.filterBelongsTo}
     />
   );
 });

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

@@ -1,17 +1,22 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { ObjectType, Variable } from '@journeyapps/db';
+import { Variable } from '@journeyapps/db';
 import { ColumnDisplayWidget } from './ColumnDisplayWidget';
-import { SmartFilterWidget } from './SmartFilterWidget';
+import { SmartFilterWidget, SmartTypeEngineFilterWidget } from './SmartFilterWidget';
 import { SimpleFilter } from '../filters';
 import { SortDirection } from '../query-simple/SimpleQuery';
 
 export interface SmartColumnWidgetProps {
   variable: Variable;
-  type?: ObjectType;
+  typeLabel?: string;
   filter?: SimpleFilter;
   sortDirection?: SortDirection;
   onToggleSort?: () => Promise<any> | any;
+  setupFilter?: (event: {
+    variable: Variable;
+    filter?: SimpleFilter;
+    position?: MouseEvent;
+  }) => Promise<SimpleFilter | null>;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
@@ -20,20 +25,24 @@ export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
   const displayLabel = props.sortDirection
     ? `${baseLabel} ${props.sortDirection === SortDirection.ASC ? '↓' : '↑'}`
     : baseLabel;
-  let display = <ColumnDisplayWidget label={displayLabel} onClick={props.onToggleSort} />;
-  if (props.type) {
-    display = (
-      <S.TypeGroup>
-        {display}
-        <S.Type label={props.type.label} />
-      </S.TypeGroup>
-    );
-  }
   return (
     <S.Container>
       <S.TopRow>
-        {display}
-        <SmartFilterWidget filter={props.filter} variable={props.variable} filterChanged={props.filterChanged} />
+        <ColumnDisplayWidget label={displayLabel} secondaryLabel={props.typeLabel} onClick={props.onToggleSort} />
+        {props.setupFilter ? (
+          <SmartFilterWidget
+            filter={props.filter}
+            variable={props.variable}
+            setupFilter={props.setupFilter}
+            filterChanged={props.filterChanged}
+          />
+        ) : (
+          <SmartTypeEngineFilterWidget
+            filter={props.filter}
+            variable={props.variable}
+            filterChanged={props.filterChanged}
+          />
+        )}
       </S.TopRow>
     </S.Container>
   );
@@ -54,12 +63,6 @@ namespace S {
     column-gap: 5px;
   `;
 
-  export const Type = styled(ColumnDisplayWidget)`
-    opacity: 0.5;
-  `;
-
-  export const TypeGroup = styled.div``;
-
   export const FilterMetaRow = styled.div`
     display: flex;
     align-items: center;

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

@@ -15,6 +15,11 @@ import { SimpleFilter, StatementMatch } from '../filters';
 export interface SmartFilterWidgetProps {
   variable: Variable;
   filter?: SimpleFilter;
+  setupFilter: (event: {
+    variable: Variable;
+    filter?: SimpleFilter;
+    position?: MouseEvent;
+  }) => Promise<SimpleFilter | null>;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
@@ -63,10 +68,6 @@ export const SmartFilterMetadataWidget: React.FC<SmartFilterMetadataWidgetProps>
 
 export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
   const isActive = (props.filter?.statements?.length || 0) > 0;
-  const handler = ioc.get(TypeEngine).getHandler(props.variable.type);
-  if (!handler?.setupFilter) {
-    return null;
-  }
   return (
     <S.FilterButton
       active={isActive}
@@ -75,7 +76,7 @@ export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
         tooltipPos: TooltipPosition.BOTTOM
       })}
       onClick={async (event) => {
-        const filter = await handler.setupFilter?.({
+        const filter = await props.setupFilter({
           variable: props.variable,
           filter: props.filter,
           position: event.nativeEvent
@@ -91,6 +92,14 @@ export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
   );
 };
 
+export const SmartTypeEngineFilterWidget: React.FC<Omit<SmartFilterWidgetProps, 'setupFilter'>> = (props) => {
+  const setupFilter = ioc.get(TypeEngine).getHandler(props.variable.type)?.setupFilter;
+  if (!setupFilter) {
+    return null;
+  }
+  return <SmartFilterWidget {...props} setupFilter={setupFilter} />;
+};
+
 namespace S {
   export const MetaList = styled.div`
     display: flex;

package/src/entities/SchemaModelObjectEntityDefinition.ts

@@ -1,4 +1,5 @@
 import {
+  Action,
   EntityDefinition,
   EntityDescriberComponent,
   inject,
@@ -10,6 +11,8 @@ import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { SchemaModelObject } from '../core/SchemaModelObject';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { validate as validateUUID } from 'uuid';
+import { ViewHasManyAction } from '../actions/schema-model/ViewHasManyAction';
 
 export interface SchemaModelObjectEntityDefinitionEncoded {
   connection_id: string;
@@ -42,21 +45,6 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
       })
     );
 
-    // 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',
@@ -66,6 +54,13 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
           if (!event.value) {
             return [];
           }
+          if (validateUUID(event.value)) {
+            const object = await event.parameters.parent.resolve(event.value);
+            if (object) {
+              return [object];
+            }
+            return [];
+          }
           return await event.parameters.parent.search(event.value);
         }
       })
@@ -101,4 +96,11 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
   getEntityUID(t: SchemaModelObject) {
     return t.model.id;
   }
+
+  isActionAllowedForEntity(action: Action, entity: SchemaModelObject) {
+    if (action.id === ViewHasManyAction.ID) {
+      return Object.keys(entity.definition.definition.hasMany || {}).length > 0;
+    }
+    return super.isActionAllowedForEntity(action, entity);
+  }
 }

package/src/forms/types/attachment-handler.tsx

@@ -5,6 +5,7 @@ import { TypeHandler } from './shared/type-handler';
 
 export const attachmentHandler: TypeHandler = {
   matches: (type) => type instanceof AttachmentType,
+  getTypeLabel: () => 'Attachment',
   encode: async (value: File) => {
     return Attachment.create({
       data: await value.arrayBuffer(),

package/src/forms/types/belongs-to-filter.tsx

@@ -0,0 +1,84 @@
+import { Variable } from '@journeyapps/db';
+import { ArrayInput, DialogStore2, EntityInput, FormModel, ioc } from '@journeyapps-labs/reactor-mod';
+import { Relationship } from '@journeyapps/parser-schema';
+import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { Condition, SimpleFilter, Statement, StatementMatch } from '../../core/query/filters';
+import { DataBrowserEntities } from '../../entities';
+import { ClearableFilterFormDialogDirective } from './filters/ClearableFilterFormDialogDirective';
+
+interface BelongsToFilterFormValue {
+  values: (SchemaModelObject | null)[];
+}
+
+class BelongsToFilterForm extends FormModel<BelongsToFilterFormValue> {
+  constructor(private foreignDefinition: SchemaModelDefinition) {
+    super();
+
+    this.addInput(
+      new ArrayInput({
+        name: 'values',
+        label: 'Matches any of',
+        value: [null],
+        generate: () => {
+          return new EntityInput({
+            name: 'value',
+            label: foreignDefinition.definition.label || foreignDefinition.definition.name,
+            entityType: DataBrowserEntities.SCHEMA_MODEL_OBJECT,
+            parent: foreignDefinition,
+            value: null
+          });
+        }
+      })
+    );
+  }
+
+  async hydrateFromFilter(filter?: SimpleFilter) {
+    const values = await Promise.all(
+      (filter?.statements || [])
+        .map((statement) => `${statement.arg || ''}`)
+        .filter((id) => !!id)
+        .map((id) => this.foreignDefinition.resolve(id))
+    );
+    this.setValues({
+      values: values.filter((value) => !!value).length > 0 ? values.filter((value) => !!value) : [null]
+    });
+  }
+
+  toFilter(variable: Variable): SimpleFilter | null {
+    const values = (this.value()?.values || []).filter((value) => !!value?.id);
+    if (values.length === 0) {
+      return null;
+    }
+    return new SimpleFilter(
+      variable,
+      values.map((value) => new Statement(Condition.EQUALS, value.id)),
+      StatementMatch.ANY
+    );
+  }
+}
+
+export const setupBelongsToFilter = async (options: {
+  definition: SchemaModelDefinition;
+  relationship: Relationship;
+  variable: Variable;
+  filter?: SimpleFilter;
+}) => {
+  const foreignDefinition = options.definition.connection.getSchemaModelDefinitionByName(
+    options.relationship.foreignType.name
+  );
+  const form = new BelongsToFilterForm(foreignDefinition);
+  await form.hydrateFromFilter(options.filter);
+  const result = await ioc.get(DialogStore2).showDialog(
+    new ClearableFilterFormDialogDirective({
+      title: `Filter ${options.relationship.name}`,
+      form,
+      filter: options.filter,
+      handler: async () => {}
+    })
+  );
+  if (!result) {
+    return null;
+  }
+  return form.toFilter(options.variable);
+};

package/src/forms/types/boolean-handler.tsx

@@ -1,10 +1,39 @@
-import { BooleanType } from '@journeyapps/db';
-import { BooleanInput, CheckboxWidget } from '@journeyapps-labs/reactor-mod';
+import { BooleanType, Variable } from '@journeyapps/db';
+import { BooleanInput, CheckboxWidget, DialogStore2, FormModel, ioc } from '@journeyapps-labs/reactor-mod';
 import * as React from 'react';
 import { TypeHandler } from './shared/type-handler';
+import { ClearableFilterFormDialogDirective } from './filters/ClearableFilterFormDialogDirective';
+import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
+
+interface BooleanFilterFormValue {
+  value: boolean;
+}
+
+class BooleanFilterForm extends FormModel<BooleanFilterFormValue> {
+  constructor(value?: boolean) {
+    super();
+
+    this.addInput(
+      new BooleanInput({
+        name: 'value',
+        label: 'Value',
+        value: value === true
+      })
+    );
+  }
+
+  static fromFilter(filter?: SimpleFilter): boolean {
+    return filter?.statements?.[0]?.arg === true;
+  }
+
+  toFilter(variable: Variable): SimpleFilter {
+    return new SimpleFilter(variable, [new Statement(Condition.EQUALS, this.value().value === true)]);
+  }
+}
 
 export const booleanHandler: TypeHandler = {
   matches: (type) => type instanceof BooleanType,
+  getTypeLabel: () => 'Boolean',
   encode: async (value: boolean) => value,
   decode: async (value: boolean) => value,
   encodeToScalar: async (value: boolean) => value,
@@ -24,5 +53,20 @@ export const booleanHandler: TypeHandler = {
         }}
       />
     );
+  },
+  setupFilter: async ({ variable, filter }) => {
+    const form = new BooleanFilterForm(BooleanFilterForm.fromFilter(filter));
+    const result = await ioc.get(DialogStore2).showDialog(
+      new ClearableFilterFormDialogDirective({
+        title: `Filter ${variable.label || variable.name}`,
+        form,
+        filter,
+        handler: async () => {}
+      })
+    );
+    if (!result) {
+      return null;
+    }
+    return form.toFilter(variable);
   }
 };

package/src/forms/types/date-handler.tsx

@@ -86,6 +86,7 @@ const toDateValue = (value: unknown): Date | undefined => {
 
 export const dateHandler: TypeHandler = {
   matches: (type) => type instanceof DatetimeType || type instanceof DateType,
+  getTypeLabel: (type) => (type instanceof DatetimeType ? 'Datetime' : 'Date'),
   encode: async (value: Date) => new Day(value),
   decode: async (value: Day | Date) => toDateValue(value),
   encodeToScalar: async (value: Date) => value?.toISOString() || null,

package/src/forms/types/image-handler.tsx

@@ -30,6 +30,7 @@ export const imageHandler = (context: TypeHandlerContext): TypeHandler => {
 
   return {
     matches: (type) => type instanceof SignatureType || type instanceof PhotoType,
+    getTypeLabel: (type) => (type instanceof SignatureType ? 'Signature' : 'Photo'),
     encode: async (value: ImageMedia) => {
       return Attachment.create({
         data: await value.toArrayBuffer()

package/src/forms/types/location-handler.tsx

@@ -6,6 +6,7 @@ import { TypeHandler } from './shared/type-handler';
 
 export const locationHandler: TypeHandler = {
   matches: (type) => type instanceof LocationType,
+  getTypeLabel: () => 'Location',
   encode: async (value: Location) => value,
   decode: async (value: Location) => value,
   encodeToScalar: async (value: Location) => {

package/src/forms/types/multiple-choice-handler.tsx

@@ -6,6 +6,7 @@ import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
 export const multipleChoiceHandler = (context: TypeHandlerContext): TypeHandler => {
   return {
     matches: (type) => type instanceof MultipleChoiceType,
+    getTypeLabel: () => 'Multiple choice',
     encode: async (value: string[]) => value,
     decode: async (value: string[]) => value,
     encodeToScalar: async (value: string[]) => JSON.stringify(value || []),

package/src/forms/types/multiple-choice-integer-handler.tsx

@@ -6,6 +6,7 @@ import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
 export const multipleChoiceIntegerHandler = (context: TypeHandlerContext): TypeHandler => {
   return {
     matches: (type) => type instanceof MultipleChoiceIntegerType,
+    getTypeLabel: () => 'Multiple choice integer',
     encode: async (value: string[]) => value.map((v) => parseInt(v)),
     decode: async (value: number[]) => value.map((v) => `${v}`),
     encodeToScalar: async (value: string[]) => JSON.stringify(value || []),

package/src/forms/types/number-handler.tsx

@@ -1,4 +1,4 @@
-import { NumberType, Variable } from '@journeyapps/db';
+import { IntegerType, NumberType, Variable } from '@journeyapps/db';
 import { DialogStore2, FormInput, NumberInput, ioc } from '@journeyapps-labs/reactor-mod';
 import { TypeHandler } from './shared/type-handler';
 import { Condition, SimpleFilter, Statement, StatementMatch } from '../../core/query/filters';
@@ -68,7 +68,8 @@ class NumberFilterForm extends ConditionalFilterForm<number> {
 }
 
 export const numberHandler: TypeHandler = {
-  matches: (type) => type instanceof NumberType,
+  matches: (type) => type instanceof NumberType || type instanceof IntegerType,
+  getTypeLabel: (type) => (type instanceof IntegerType ? 'Integer' : 'Number'),
   encode: async (value: number) => value,
   decode: async (value: number) => value,
   encodeToScalar: async (value: number) => value,

package/src/forms/types/shared/type-handler.ts

@@ -9,6 +9,7 @@ export type ScalarValue = string | number | boolean | null;
 
 export interface TypeHandler<T extends Type = Type, ENCODED = any, DECODED = any> {
   matches: (type: Type) => boolean;
+  getTypeLabel?: (type: T) => string;
   generateField: (event: { label: string; name: string; type: T }) => FormInput;
   generateDisplay: (event: {
     label: string;

package/src/forms/types/single-choice-handler.tsx

@@ -6,6 +6,7 @@ import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
 
 export const singleChoiceHandler: TypeHandler = {
   matches: (type) => type instanceof SingleChoiceType,
+  getTypeLabel: () => 'Single choice',
   encode: async (value: string) => value,
   decode: async (value: string) => value,
   encodeToScalar: async (value: string) => value,

package/src/forms/types/single-choice-integer-handler.tsx

@@ -6,6 +6,7 @@ import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
 
 export const singleChoiceIntegerHandler: TypeHandler = {
   matches: (type) => type instanceof SingleChoiceIntegerType,
+  getTypeLabel: () => 'Single choice integer',
   encode: async (value: string) => parseInt(value),
   decode: async (value: number) => `${value}`,
   encodeToScalar: async (value: string) => value,

package/src/forms/types/text-handler.tsx

@@ -150,6 +150,7 @@ class TextFilterForm extends ConditionalFilterForm<string> {
 export const textHandler = (context: TypeHandlerContext): TypeHandler<TextType, string, string> => {
   return {
     matches: (type) => type instanceof TextType,
+    getTypeLabel: () => 'Text',
     encode: async (value: string) => value,
     decode: async (value: string) => value,
     encodeToScalar: async (value: string) => value,

package/src/panels/query/table-controls/FilterControlsWidget.tsx

@@ -31,6 +31,7 @@ export const FilterControlsWidget: React.FC<FilterControlsWidgetProps> = (props)
           return {
             key: field.key,
             title: field.label,
+            group: field.group,
             action: async () => {
               await props.simpleQuery.filterState.setupFilterForField(field.key, event.nativeEvent as any);
               props.goToPage?.(0);