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

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

@@ -0,0 +1,35 @@
+import { Attachment, AttachmentType } from '@journeyapps/db';
+import { FileInput, TableButtonWidget } from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
+import { TypeHandler } from './shared/type-handler';
+
+export const attachmentHandler: TypeHandler = {
+  matches: (type) => type instanceof AttachmentType,
+  encode: async (value: File) => {
+    return Attachment.create({
+      data: await value.arrayBuffer(),
+      filename: value.name
+    });
+  },
+  decode: async (value: Attachment) => {
+    return new File([await value.toArrayBuffer()], value.id);
+  },
+  encodeToScalar: async (value: File) => value?.name || '',
+  decodeFromScalar: async (value) => new File([], value == null ? '' : `${value}`),
+  generateField: ({ label, name }) => {
+    return new FileInput({
+      name,
+      label
+    });
+  },
+  generateDisplay: ({ value }) => {
+    return (
+      <TableButtonWidget
+        icon="download"
+        action={() => {
+          window.open(value.url(), '_blank');
+        }}
+      />
+    );
+  }
+};

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

@@ -0,0 +1,28 @@
+import { BooleanType } from '@journeyapps/db';
+import { BooleanInput, CheckboxWidget } from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
+import { TypeHandler } from './shared/type-handler';
+
+export const booleanHandler: TypeHandler = {
+  matches: (type) => type instanceof BooleanType,
+  encode: async (value: boolean) => value,
+  decode: async (value: boolean) => value,
+  encodeToScalar: async (value: boolean) => value,
+  decodeFromScalar: async (value) => value === true || value === 'true',
+  generateField: ({ label, name }) => {
+    return new BooleanInput({
+      name,
+      label
+    });
+  },
+  generateDisplay: ({ value, name, model }) => {
+    return (
+      <CheckboxWidget
+        checked={value}
+        onChange={(checked) => {
+          model.set(name, checked);
+        }}
+      />
+    );
+  }
+};

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

@@ -0,0 +1,125 @@
+import { DatetimeType, DateType, Day, Variable } from '@journeyapps/db';
+import {
+  DateInput,
+  DateTimePickerType,
+  DialogStore2,
+  FormInput,
+  SmartDateDisplayWidget,
+  ioc
+} from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
+import { TypeHandler } from './shared/type-handler';
+import { Condition, SimpleFilter, Statement, StatementMatch } from '../../core/query/filters';
+import {
+  ConditionalFilterForm,
+  ConditionalFilterFormOptions,
+  ConditionalFilterFormValue,
+  ConditionalStatementValue
+} from './filters/ConditionalFilterForm';
+import { ClearableFilterFormDialogDirective } from './filters/ClearableFilterFormDialogDirective';
+
+interface DateFilterFormValue extends ConditionalFilterFormValue<Date> {
+  statements: ConditionalStatementValue<Date>[];
+}
+
+interface DateFilterFormOptions extends ConditionalFilterFormOptions<Date> {
+  pickerType: DateTimePickerType;
+  statements?: ConditionalStatementValue<Date>[];
+}
+
+class DateFilterForm extends ConditionalFilterForm<Date> {
+  constructor(protected options2: DateFilterFormOptions) {
+    super(options2);
+  }
+
+  static fromFilter(filter: SimpleFilter | undefined, pickerType: DateTimePickerType): DateFilterFormOptions {
+    return {
+      pickerType,
+      match: filter?.match || StatementMatch.ALL,
+      statements: (filter?.statements || [])
+        .map((statement) => ({
+          condition: statement.condition || Condition.EQUALS,
+          value: toDateValue(statement.arg)
+        }))
+        .filter((statement) => !!statement.value)
+    };
+  }
+
+  toFilter(variable: Variable): SimpleFilter | null {
+    const formValue = this.value() as DateFilterFormValue;
+    const statements = (formValue.statements || [])
+      .map((statement) => ({
+        condition: statement?.condition || Condition.EQUALS,
+        arg: toDateValue(statement?.value)
+      }))
+      .filter((statement) => !!statement.arg)
+      .map((statement) => new Statement(statement.condition, new Day(statement.arg)));
+    if (statements.length === 0) {
+      return null;
+    }
+    return new SimpleFilter(variable, statements, formValue.match || StatementMatch.ALL);
+  }
+
+  protected generateValueInput(): FormInput {
+    return new DateInput({
+      name: 'value',
+      label: 'Value',
+      required: true,
+      type: this.options2.pickerType
+    });
+  }
+}
+
+const toDateValue = (value: unknown): Date | undefined => {
+  if (!value) {
+    return undefined;
+  }
+  if (value instanceof Day) {
+    return value.toDate();
+  }
+  if (value instanceof Date) {
+    return value;
+  }
+  const parsed = new Date(`${value}`);
+  return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+};
+
+export const dateHandler: TypeHandler = {
+  matches: (type) => type instanceof DatetimeType || type instanceof DateType,
+  encode: async (value: Date) => new Day(value),
+  decode: async (value: Day | Date) => toDateValue(value),
+  encodeToScalar: async (value: Date) => value?.toISOString() || null,
+  decodeFromScalar: async (value) => toDateValue(value),
+  generateField: ({ label, name, type }) => {
+    return new DateInput({
+      name,
+      label,
+      type: type instanceof DatetimeType ? DateTimePickerType.DATETIME : DateTimePickerType.DATE
+    });
+  },
+  generateDisplay: ({ value }) => {
+    if (value instanceof Day) {
+      return <SmartDateDisplayWidget date={value.toDate()} />;
+    }
+    return <SmartDateDisplayWidget date={value} />;
+  },
+  setupFilter: async ({ variable, filter }) => {
+    if (!(variable.type instanceof DatetimeType || variable.type instanceof DateType)) {
+      return null;
+    }
+    const pickerType = variable.type instanceof DatetimeType ? DateTimePickerType.DATETIME : DateTimePickerType.DATE;
+    const form = new DateFilterForm(DateFilterForm.fromFilter(filter, pickerType));
+    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/filters/ClearableFilterFormDialogDirective.ts

@@ -0,0 +1,32 @@
+import { Btn, FormDialogDirective, FormDialogDirectiveOptions, FormModel } from '@journeyapps-labs/reactor-mod';
+import { AbstractFilter } from '../../../core/query/filters';
+
+export interface ClearableFilterFormDialogDirectiveOptions<
+  T extends FormModel = FormModel
+> extends FormDialogDirectiveOptions<T> {
+  filter?: AbstractFilter;
+}
+
+export class ClearableFilterFormDialogDirective<T extends FormModel = FormModel> extends FormDialogDirective<T> {
+  constructor(private options3: ClearableFilterFormDialogDirectiveOptions<T>) {
+    super(options3);
+  }
+
+  getButtons(): Btn[] {
+    const baseButtons = super.getButtons();
+    if (!this.options3.filter) {
+      return baseButtons;
+    }
+    return [
+      {
+        label: 'Clear filter',
+        icon: 'trash',
+        action: () => {
+          this.options3.filter.delete();
+          this.dispose(true);
+        }
+      },
+      ...baseButtons
+    ];
+  }
+}

package/src/forms/types/filters/ConditionalFilterForm.tsx

@@ -0,0 +1,109 @@
+import { ArrayInput, FormInput, FormModel, GroupInput, SelectInput } from '@journeyapps-labs/reactor-mod';
+import { Condition, StatementMatch } from '../../../core/query/filters';
+
+export interface ConditionalStatementValue<T = any> {
+  condition: Condition;
+  value: T;
+}
+
+export interface ConditionalFilterFormValue<T = any> {
+  match: StatementMatch;
+  statements: ConditionalStatementValue<T>[];
+}
+
+export interface ConditionalFilterFormOptions<T = any> {
+  match?: StatementMatch;
+  statements?: ConditionalStatementValue<T>[];
+}
+
+export abstract class ConditionalFilterForm<T = any> extends FormModel<ConditionalFilterFormValue<T>> {
+  constructor(protected options2?: ConditionalFilterFormOptions<T>) {
+    super();
+    const matchInput = this.addInput(
+      new SelectInput({
+        name: 'match',
+        label: 'Match',
+        visible: false,
+        value: options2?.match || StatementMatch.ALL,
+        options: {
+          [StatementMatch.ALL]: 'Match all conditions (AND)',
+          [StatementMatch.ANY]: 'Match any condition (OR)'
+        }
+      })
+    );
+    const statementsInput = this.addInput(
+      new ArrayInput<ConditionalStatementValue<T>>({
+        name: 'statements',
+        label: 'Conditions',
+        value: this.getInitialStatements(),
+        generate: () => {
+          return new GroupInput<ConditionalStatementValue<T>>({
+            name: 'statement',
+            label: 'Condition',
+            layout: {
+              horizontal: true,
+              border: false
+            },
+            inputs: [
+              new SelectInput({
+                name: 'condition',
+                label: 'Operator',
+                value: this.getDefaultCondition(),
+                options: this.getConditionOptions()
+              }),
+              this.generateValueInput()
+            ]
+          });
+        }
+      })
+    );
+    const syncMatchVisibility = () => {
+      const count = statementsInput.value?.length || 0;
+      matchInput.update({
+        visible: count > 1
+      });
+    };
+    syncMatchVisibility();
+    statementsInput.registerListener({
+      valueChanged: () => {
+        syncMatchVisibility();
+      }
+    });
+  }
+
+  private getInitialStatements(): ConditionalStatementValue<T>[] {
+    if (this.options2?.statements && this.options2.statements.length > 0) {
+      return this.options2.statements.map((statement) => ({
+        condition: statement.condition || this.getDefaultCondition(),
+        value: statement.value
+      }));
+    }
+    return [
+      {
+        condition: this.getDefaultCondition(),
+        value: this.getDefaultValue()
+      }
+    ];
+  }
+
+  protected getDefaultCondition(): Condition {
+    return Condition.EQUALS;
+  }
+
+  protected getConditionOptions(): Record<string, string> {
+    return {
+      [Condition.GREATER_THAN]: '>',
+      [Condition.GREATER_THAN_OR_EQUAL]: '>=',
+      [Condition.EQUALS]: '=',
+      [Condition.LESS_THAN]: '<',
+      [Condition.LESS_THAN_OR_EQUAL]: '<=',
+      [Condition.NOT_EQUALS]: '!='
+    };
+  }
+
+  protected getDefaultValue(): T {
+    return null;
+  }
+
+  protected abstract generateValueInput(): FormInput;
+}

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

@@ -0,0 +1,90 @@
+import { Attachment, PhotoType, SignatureType } from '@journeyapps/db';
+import { ImageInput, ImageMedia, styled } from '@journeyapps-labs/reactor-mod';
+import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
+import { TypeUI } from './shared/ui';
+import * as React from 'react';
+
+export const imageHandler = (context: TypeHandlerContext): TypeHandler => {
+  const toRawBase64 = (value: string): string => {
+    const marker = 'base64,';
+    const index = value.indexOf(marker);
+    if (index === -1) {
+      return value;
+    }
+    return value.substring(index + marker.length);
+  };
+
+  const decode = async (value: Attachment) => {
+    if (context.mediaCache.has(value.id)) {
+      return context.mediaCache.get(value.id);
+    }
+    const media = context.mediaEngine.getMediaTypeForPath('.jpg').generateMedia({
+      content: await value.toArrayBuffer(),
+      name: value.id,
+      uid: value.id
+    });
+
+    context.mediaCache.set(value.id, media);
+    return media;
+  };
+
+  return {
+    matches: (type) => type instanceof SignatureType || type instanceof PhotoType,
+    encode: async (value: ImageMedia) => {
+      return Attachment.create({
+        data: await value.toArrayBuffer()
+      });
+    },
+    decode,
+    encodeToScalar: async (value: ImageMedia) => {
+      if (!value) {
+        return null;
+      }
+      const base64 = await value.toBase64();
+      return toRawBase64(base64);
+    },
+    decodeFromScalar: async (value) => {
+      if (typeof value !== 'string' || value.trim() === '') {
+        return null;
+      }
+      return context.mediaEngine.getMediaTypeForPath('.jpg').generateMedia({
+        content: toRawBase64(value),
+        name: 'imported-image',
+        uid: 'imported-image'
+      });
+    },
+    generateField: ({ label, name }) => {
+      return new ImageInput({
+        name,
+        label
+      });
+    },
+    generateDisplay: ({ value, type }) => {
+      if (value.uploaded()) {
+        return (
+          <S.Preview
+            onClick={() => {
+              decode(value).then((media: ImageMedia) => {
+                if (media instanceof ImageMedia) {
+                  media.open();
+                } else {
+                  window.open(value.url(), '_blank');
+                }
+              });
+            }}
+            src={value.urls['thumbnail']}
+          />
+        );
+      }
+      return <TypeUI.Empty>Not uploaded</TypeUI.Empty>;
+    }
+  };
+};
+
+namespace S {
+  export const Preview = styled.img`
+    max-height: 40px;
+    max-width: 40px;
+    cursor: pointer;
+  `;
+}

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

@@ -0,0 +1,53 @@
+import { Location, LocationType } from '@journeyapps/db';
+import { MetadataWidget, styled } from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
+import { LocationInput } from '../inputs/LocationInput';
+import { TypeHandler } from './shared/type-handler';
+
+export const locationHandler: TypeHandler = {
+  matches: (type) => type instanceof LocationType,
+  encode: async (value: Location) => value,
+  decode: async (value: Location) => value,
+  encodeToScalar: async (value: Location) => {
+    if (!value) {
+      return null;
+    }
+    return `${value.latitude},${value.longitude}`;
+  },
+  decodeFromScalar: async (value) => {
+    if (typeof value !== 'string') {
+      return null;
+    }
+    const [latitude, longitude] = value.split(',').map((v) => Number(v.trim()));
+    if (Number.isNaN(latitude) || Number.isNaN(longitude)) {
+      return null;
+    }
+    return new Location({
+      latitude,
+      longitude,
+      timestamp: new Date()
+    });
+  },
+  generateField: ({ label, name }) => {
+    return new LocationInput({
+      name,
+      label
+    });
+  },
+  generateDisplay: ({ value }) => {
+    return (
+      <S.Container>
+        <MetadataWidget label={'Lat'} value={`${value.latitude}`} />
+        <MetadataWidget label={'Long'} value={`${value.longitude}`} />
+      </S.Container>
+    );
+  }
+};
+
+namespace S {
+  export const Container = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 2px;
+  `;
+}

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

@@ -0,0 +1,37 @@
+import { MultipleChoiceType } from '@journeyapps/db';
+import { MultiSelectInput } from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
+
+export const multipleChoiceHandler = (context: TypeHandlerContext): TypeHandler => {
+  return {
+    matches: (type) => type instanceof MultipleChoiceType,
+    encode: async (value: string[]) => value,
+    decode: async (value: string[]) => value,
+    encodeToScalar: async (value: string[]) => JSON.stringify(value || []),
+    decodeFromScalar: async (value) => {
+      if (typeof value !== 'string') {
+        return [];
+      }
+      try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.map((v) => `${v}`) : [];
+      } catch (error) {
+        return value
+          .split(',')
+          .map((v) => v.trim())
+          .filter((v) => v !== '');
+      }
+    },
+    generateField: ({ label, name, type }) => {
+      return new MultiSelectInput({
+        name,
+        label,
+        options: _.mapValues(type.options, (o) => `${o.value}`)
+      });
+    },
+    generateDisplay: ({ value }) => {
+      return context.displayArray(value);
+    }
+  };
+};

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

@@ -0,0 +1,37 @@
+import { MultipleChoiceIntegerType } from '@journeyapps/db';
+import { MultiSelectInput } from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
+
+export const multipleChoiceIntegerHandler = (context: TypeHandlerContext): TypeHandler => {
+  return {
+    matches: (type) => type instanceof MultipleChoiceIntegerType,
+    encode: async (value: string[]) => value.map((v) => parseInt(v)),
+    decode: async (value: number[]) => value.map((v) => `${v}`),
+    encodeToScalar: async (value: string[]) => JSON.stringify(value || []),
+    decodeFromScalar: async (value) => {
+      if (typeof value !== 'string') {
+        return [];
+      }
+      try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.map((v) => `${v}`) : [];
+      } catch (error) {
+        return value
+          .split(',')
+          .map((v) => v.trim())
+          .filter((v) => v !== '');
+      }
+    },
+    generateField: ({ label, name, type }) => {
+      return new MultiSelectInput({
+        name,
+        label,
+        options: _.mapValues(type.options, (o) => `${o.value}`)
+      });
+    },
+    generateDisplay: ({ value }) => {
+      return context.displayArray(value);
+    }
+  };
+};

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

@@ -0,0 +1,100 @@
+import { 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';
+import {
+  ConditionalFilterForm,
+  ConditionalFilterFormOptions,
+  ConditionalFilterFormValue,
+  ConditionalStatementValue
+} from './filters/ConditionalFilterForm';
+import { ClearableFilterFormDialogDirective } from './filters/ClearableFilterFormDialogDirective';
+
+interface NumberFilterFormValue extends ConditionalFilterFormValue<number> {
+  statements: ConditionalStatementValue<number>[];
+}
+
+interface NumberFilterFormOptions extends ConditionalFilterFormOptions<number> {
+  statements?: ConditionalStatementValue<number>[];
+}
+
+const toNumericValue = (value: unknown): number | undefined => {
+  if (value == null) {
+    return undefined;
+  }
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? undefined : parsed;
+};
+
+class NumberFilterForm extends ConditionalFilterForm<number> {
+  constructor(options?: NumberFilterFormOptions) {
+    super(options);
+  }
+
+  static fromFilter(filter?: SimpleFilter): NumberFilterFormOptions {
+    return {
+      match: filter?.match || StatementMatch.ALL,
+      statements: (filter?.statements || [])
+        .map((statement) => ({
+          condition: statement.condition || Condition.EQUALS,
+          value: toNumericValue(statement.arg)
+        }))
+        .filter((statement) => statement.value != null)
+    };
+  }
+
+  toFilter(variable: Variable): SimpleFilter | null {
+    const formValue = this.value() as NumberFilterFormValue;
+    const statements = (formValue.statements || [])
+      .map((statement) => ({
+        condition: statement?.condition || Condition.EQUALS,
+        arg: toNumericValue(statement?.value)
+      }))
+      .filter((statement) => statement.arg != null)
+      .map((statement) => new Statement(statement.condition, statement.arg));
+    if (statements.length === 0) {
+      return null;
+    }
+    return new SimpleFilter(variable, statements, formValue.match || StatementMatch.ALL);
+  }
+
+  protected generateValueInput(): FormInput {
+    return new NumberInput({
+      name: 'value',
+      label: 'Value',
+      required: true
+    });
+  }
+}
+
+export const numberHandler: TypeHandler = {
+  matches: (type) => type instanceof NumberType,
+  encode: async (value: number) => value,
+  decode: async (value: number) => value,
+  encodeToScalar: async (value: number) => value,
+  decodeFromScalar: async (value) => toNumericValue(value) || 0,
+  generateField: ({ label, name }) => {
+    return new NumberInput({
+      name,
+      label
+    });
+  },
+  generateDisplay: ({ value }) => {
+    return `${value}`;
+  },
+  setupFilter: async ({ variable, filter }) => {
+    const form = new NumberFilterForm(NumberFilterForm.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/shared/type-handler.ts

@@ -0,0 +1,36 @@
+import { Type, Variable } from '@journeyapps/db';
+import { FormInput } from '@journeyapps-labs/reactor-mod';
+import { JSX } from 'react';
+import { SchemaModelObject } from '../../../core/SchemaModelObject';
+import { AbstractMedia, MediaEngine, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import { SimpleFilter } from '../../../core/query/filters';
+
+export type ScalarValue = string | number | boolean | null;
+
+export interface TypeHandler<T extends Type = Type, ENCODED = any, DECODED = any> {
+  matches: (type: Type) => boolean;
+  generateField: (event: { label: string; name: string; type: T }) => FormInput;
+  generateDisplay: (event: {
+    label: string;
+    name: string;
+    type: T;
+    value: ENCODED;
+    model: SchemaModelObject;
+  }) => JSX.Element | string;
+  decode: (value: ENCODED) => Promise<DECODED>;
+  encode: (value: DECODED) => Promise<ENCODED>;
+  encodeToScalar?: (value: DECODED) => Promise<ScalarValue>;
+  decodeFromScalar?: (value: ScalarValue) => Promise<DECODED>;
+  setupFilter?: (event: {
+    variable: Variable;
+    filter?: SimpleFilter;
+    position?: MouseEvent;
+  }) => Promise<SimpleFilter | null>;
+}
+
+export interface TypeHandlerContext {
+  mediaEngine: MediaEngine;
+  workspaceStore: WorkspaceStore;
+  mediaCache: Map<string, AbstractMedia>;
+  displayArray: (value: any[]) => JSX.Element | string;
+}