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

package/src/forms/TypeEngine.tsx

@@ -0,0 +1,451 @@
+import {
+  Attachment,
+  AttachmentType,
+  BooleanType,
+  DatetimeType,
+  DateType,
+  Day,
+  Location,
+  LocationType,
+  MultipleChoiceIntegerType,
+  MultipleChoiceType,
+  NumberType,
+  PhotoType,
+  SignatureType,
+  SingleChoiceIntegerType,
+  SingleChoiceType,
+  TextType,
+  Type
+} from '@journeyapps/db';
+import {
+  AbstractMedia,
+  BooleanInput,
+  CheckboxWidget,
+  DateInput,
+  DateTimePickerType,
+  FileInput,
+  FormInput,
+  ImageInput,
+  ImageMedia,
+  inject,
+  MediaEngine,
+  MetadataWidget,
+  NumberInput,
+  PanelButtonWidget,
+  SelectInput,
+  SmartDateDisplayWidget,
+  styled,
+  TableButtonWidget,
+  TextAreaInput,
+  TextInput,
+  TextInputType,
+  MultiSelectInput,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
+import {} from '@journeyapps-labs/reactor-mod-editor';
+import { LocationInput } from './inputs/LocationInput';
+import * as React from 'react';
+import { JSX } from 'react';
+import { SchemaModelObject } from '../core/SchemaModelObject';
+import * as _ from 'lodash';
+import { ModelJsonPanelModel } from '../panels/model-json/ModelJsonPanelFactory';
+
+const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
+
+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>;
+}
+
+export class TypeEngine {
+  handlers: Set<TypeHandler>;
+
+  @inject(MediaEngine)
+  accessor mediaEngine: MediaEngine;
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  private _mediaCache: Map<string, AbstractMedia>;
+
+  constructor() {
+    this.handlers = new Set();
+    this._mediaCache = new Map();
+    this.register({
+      matches: (type) => type instanceof DatetimeType || type instanceof DateType,
+      encode: async (value: Date) => new Day(value),
+      decode: async (value: Day | Date) => {
+        if (value instanceof Day) {
+          return value.toDate();
+        }
+        return 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} />;
+      }
+    });
+
+    this.register({
+      matches: (type) => type instanceof SignatureType || type instanceof PhotoType,
+      encode: async (value: ImageMedia) => {
+        return Attachment.create({
+          data: await value.toArrayBuffer()
+        });
+      },
+      decode: async (value: Attachment) => {
+        if (this._mediaCache.has(value.id)) {
+          return this._mediaCache.get(value.id);
+        }
+        let media = this.mediaEngine.getMediaTypeForPath('.jpg').generateMedia({
+          content: await value.toArrayBuffer(),
+          name: value.id,
+          uid: value.id
+        });
+
+        this._mediaCache.set(value.id, media);
+        return media;
+      },
+      generateField: ({ label, name }) => {
+        return new ImageInput({
+          name,
+          label
+        });
+      },
+      generateDisplay: ({ value, type }) => {
+        if (value.uploaded()) {
+          return (
+            <S.Preview
+              onClick={() => {
+                this.getHandler(type)
+                  .decode(value)
+                  .then((media: ImageMedia) => {
+                    if (media instanceof ImageMedia) {
+                      media.open();
+                    } else {
+                      window.open(value.url(), '_blank');
+                    }
+                  });
+              }}
+              src={value.urls['thumbnail']}
+            />
+          );
+        }
+        return <S.Empty>Not uploaded</S.Empty>;
+      }
+    });
+
+    this.register({
+      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);
+      },
+      generateField: ({ label, name }) => {
+        return new FileInput({
+          name,
+          label
+        });
+      },
+      generateDisplay: ({ value }) => {
+        return (
+          <TableButtonWidget
+            icon="download"
+            action={() => {
+              window.open(value.url(), '_blank');
+            }}
+          />
+        );
+      }
+    });
+    this.register({
+      matches: (type) => type instanceof BooleanType,
+      encode: async (value: boolean) => value,
+      decode: async (value: boolean) => value,
+      generateField: ({ label, name }) => {
+        return new BooleanInput({
+          name,
+          label
+        });
+      },
+      generateDisplay: ({ value, type, name, model }) => {
+        return (
+          <CheckboxWidget
+            checked={value}
+            onChange={(checked) => {
+              model.set(name, checked);
+            }}
+          />
+        );
+      }
+    });
+
+    this.register({
+      matches: (type) => type instanceof NumberType,
+      encode: async (value: number) => value,
+      decode: async (value: number) => value,
+      generateField: ({ label, name }) => {
+        return new NumberInput({
+          name,
+          label
+        });
+      },
+      generateDisplay: ({ value, type, name, model }) => {
+        return `${value}`;
+      }
+    });
+
+    this.register<TextType, string, string>({
+      matches: (type) => type instanceof TextType,
+      encode: async (value: string) => value,
+      decode: async (value: string) => value,
+      generateField: ({ label, name, type }) => {
+        if (type.subType == 'paragraph') {
+          return new TextAreaInput({
+            name,
+            label
+          });
+        }
+
+        if (type.subType == 'password') {
+          return new TextInput({
+            name,
+            label,
+            inputType: TextInputType.PASSWORD
+          });
+        }
+
+        return new TextInput({
+          name,
+          label
+        });
+      },
+      generateDisplay: ({ value, type, name, model }) => {
+        if (value.trim() === '') {
+          return <S.Empty>empty</S.Empty>;
+        }
+
+        if (type.subType == 'password') {
+          return '****';
+        }
+
+        if (type.subType == 'paragraph') {
+          // could be JSON
+          if ((value.startsWith('[') && value.endsWith(']')) || (value.startsWith('{') && value.endsWith('}'))) {
+            try {
+              let parsed = JSON.parse(value);
+
+              return (
+                <TableButtonWidget
+                  icon="code"
+                  label="JSON"
+                  action={() => {
+                    this.workspaceStore.addModel(
+                      new ModelJsonPanelModel({
+                        definition: model.definition,
+                        model: model,
+                        field: name
+                      })
+                    );
+                  }}
+                />
+              );
+            } catch (ex) {}
+          }
+        }
+
+        if (type.subType == 'url') {
+          return (
+            <S.Container>
+              {value}
+              <TableButtonWidget
+                icon="arrow-right"
+                action={() => {
+                  window.open(value, '_blank');
+                }}
+              />
+            </S.Container>
+          );
+        }
+
+        return <S.Max>{value}</S.Max>;
+      }
+    });
+    this.register({
+      matches: (type) => type instanceof LocationType,
+      encode: async (value: Location) => value,
+      decode: async (value: Location) => value,
+      generateField: ({ label, name }) => {
+        return new LocationInput({
+          name,
+          label
+        });
+      },
+      generateDisplay: ({ value }) => {
+        return (
+          <>
+            <MetadataWidget label={'Lat'} value={`${value.latitude}`} />
+            <MetadataWidget label={'Long'} value={`${value.longitude}`} />
+          </>
+        );
+      }
+    });
+
+    this.register({
+      matches: (type) => type instanceof SingleChoiceIntegerType,
+      encode: async (value: string) => parseInt(value),
+      decode: async (value: number) => `${value}`,
+      generateField: ({ label, name, type }) => {
+        return new SelectInput({
+          name,
+          label,
+          options: _.mapValues(type.options, (o) => `${o.value}`)
+        });
+      },
+      generateDisplay: ({ value, type, name, model, label }) => {
+        return `${value}`;
+      }
+    });
+
+    this.register({
+      matches: (type) => type instanceof SingleChoiceType,
+      encode: async (value: string) => value,
+      decode: async (value: string) => value,
+      generateField: ({ label, name, type }) => {
+        return new SelectInput({
+          name,
+          label,
+          options: _.mapValues(type.options, (o) => `${o.value}`)
+        });
+      },
+      generateDisplay: ({ value }) => {
+        return value;
+      }
+    });
+
+    this.register({
+      matches: (type) => type instanceof MultipleChoiceType,
+      encode: async (value: string[]) => value,
+      decode: async (value: string[]) => value,
+      generateField: ({ label, name, type }) => {
+        return new MultiSelectInput({
+          name,
+          label,
+          options: _.mapValues(type.options, (o) => `${o.value}`)
+        });
+      },
+      generateDisplay: ({ value }) => {
+        return this.displayArray(value);
+      }
+    });
+
+    this.register({
+      matches: (type) => type instanceof MultipleChoiceIntegerType,
+      encode: async (value: string[]) => value.map((v) => parseInt(v)),
+      decode: async (value: number[]) => value.map((v) => `${v}`),
+      generateField: ({ label, name, type }) => {
+        return new MultiSelectInput({
+          name,
+          label,
+          options: _.mapValues(type.options, (o) => `${o.value}`)
+        });
+      },
+      generateDisplay: ({ value }) => {
+        return this.displayArray(value);
+      }
+    });
+  }
+
+  displayArray(value: any[]) {
+    if (value.length === 0) {
+      return <S.Empty>empty array</S.Empty>;
+    }
+    let items = _.slice(value, 0, MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY);
+    return (
+      <S.Pills>
+        {items.map((c) => {
+          return <S.pill key={c}>{c}</S.pill>;
+        })}
+        {items.length !== value.length ? '...' : null}
+      </S.Pills>
+    );
+  }
+
+  getHandler(type: Type) {
+    for (let handler of this.handlers) {
+      if (handler.matches(type)) {
+        return handler;
+      }
+    }
+    return null;
+  }
+
+  register<T extends Type = Type, ENCODED = any, DECODED = any>(handler: TypeHandler<T, ENCODED, DECODED>) {
+    this.handlers.add(handler);
+  }
+}
+
+namespace S {
+  export const Preview = styled.img`
+    max-height: 40px;
+    max-width: 40px;
+    cursor: pointer;
+  `;
+
+  export const Empty = styled.div`
+    opacity: 0.2;
+  `;
+
+  export const Max = styled.div`
+    max-width: 500px;
+    white-space: pre;
+    display: inline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    align-items: center;
+    justify-content: space-between;
+    flex-grow: 1;
+  `;
+
+  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;
+  `;
+}

package/src/forms/inputs/DirtyWrapperInput.tsx

@@ -29,6 +29,12 @@ export class DirtyWrapperInput extends FormInput {
     }
   }
 
+  clear() {
+    if (this.object) {
+      this.object.set(this.input.name, null);
+    }
+  }
+
   @computed get dirty() {
     return this.object?.patch.has(this.input.name);
   }
@@ -54,6 +60,14 @@ export const Wrapper: React.FC<React.PropsWithChildren<WrapperProps>> = observer
           }}
         />
       ) : null}
+      {props.input.value != null ? (
+        <S.ClearButton
+          icon="close"
+          onClick={() => {
+            props.input.clear();
+          }}
+        />
+      ) : null}
     </S.Container>
   );
 });
@@ -72,4 +86,10 @@ namespace S {
     padding: 5px;
     cursor: pointer;
   `;
+  export const ClearButton = styled(FontAwesomeIcon)`
+    color: ${(p) => p.theme.text.secondary};
+    font-size: 12px;
+    padding: 5px;
+    cursor: pointer;
+  `;
 }

package/src/forms/inputs/LocationInput.tsx

@@ -21,12 +21,12 @@ export class LocationInput extends FormInput<FormInputGenerics & { VALUE: Locati
     this.latitude = new NumberInput({
       name: 'latitude',
       label: 'Latitude',
-      value: options.value?.latitude
+      value: options.value?.latitude || null
     });
     this.longitude = new NumberInput({
       name: 'longitude',
       label: 'Longitude',
-      value: options.value?.longitude
+      value: options.value?.longitude || null
     });
 
     this.update();
@@ -42,19 +42,26 @@ export class LocationInput extends FormInput<FormInputGenerics & { VALUE: Locati
 
   setValue(value: Location) {
     super.setValue(value);
-    if (this.latitude.value !== value?.latitude) {
-      this.latitude.setValue(value?.latitude);
+
+    let lat = value?.latitude || null;
+    let lon = value?.longitude || null;
+
+    if (this.latitude.value !== lat) {
+      this.latitude.setValue(lat);
     }
-    if (this.longitude.value !== value?.longitude) {
-      this.longitude.setValue(value?.longitude);
+    if (this.longitude.value !== lon) {
+      this.longitude.setValue(lon);
     }
   }
 
   update() {
     let lat = this.latitude.value;
     let long = this.longitude.value;
-    if (lat == null || long === null) {
+    if (lat == null && long === null) {
       this.setValue(null);
+      this.setError(null);
+    } else if (lat == null || long === null) {
+      this.setError('Invalid location');
     } else {
       this.setValue(
         new Location({

package/src/index.ts

@@ -10,18 +10,24 @@ 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 './panels/_shared/SharedModelPanelFactory';
+
 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 * from './actions/schema-model/EditSchemaModelAction';
 
 export default DataBrowserModule;

package/src/panels/_shared/SharedModelPanelFactory.tsx

@@ -0,0 +1,54 @@
+import { inject, ReactorPanelFactory, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+import { observable } from 'mobx';
+import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+
+export interface SharedModelPanelModelOptions {
+  definition: SchemaModelDefinition;
+  model: SchemaModelObject;
+}
+
+export class SharedModelPanelModel extends ReactorPanelModel {
+  @inject(ConnectionStore)
+  accessor connStore: ConnectionStore;
+
+  @observable
+  accessor definition: SchemaModelDefinition;
+
+  @observable
+  accessor model: SchemaModelObject;
+
+  constructor(type: string, options?: SharedModelPanelModelOptions) {
+    super(type);
+    this.setExpand(false, true);
+    this.definition = options?.definition;
+    this.model = options?.model;
+  }
+
+  encodeEntities() {
+    return {
+      definition: this.definition,
+      model: this.model?.model ? this.model : null
+    };
+  }
+
+  async decodeEntities(data: ReturnType<this['encodeEntities']>) {
+    this.definition = data.definition;
+    this.model = data.model || (await data.definition.generateNewModelObject());
+  }
+}
+
+export abstract class SharedModelPanelFactory<T extends SharedModelPanelModel> extends ReactorPanelFactory<T> {
+  getSimpleName(model: T) {
+    let _model = model.model;
+    let _definition = model.definition;
+    if (!_definition) {
+      return super.getSimpleName(model);
+    }
+    if (_model) {
+      return `${_definition.definition.label}: ${_model.data?.display || '(new object)'}`;
+    }
+    return `${_definition.definition.label}`;
+  }
+}

package/src/panels/model/ModelPanelFactory.tsx

@@ -1,48 +1,19 @@
 import * as React from 'react';
-import { inject, ReactorPanelFactory, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
 import { ModelPanelWidget } from './ModelPanelWidget';
-import { ConnectionStore } from '../../stores/ConnectionStore';
-import { 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?.model ? this.model : null
-    };
-  }
-
-  async decodeEntities(data: ReturnType<this['encodeEntities']>) {
-    this.definition = data.definition;
-    this.model = data.model || (await data.definition.generateNewModelObject());
+import {
+  SharedModelPanelFactory,
+  SharedModelPanelModel,
+  SharedModelPanelModelOptions
+} from '../_shared/SharedModelPanelFactory';
+
+export class ModelPanelModel extends SharedModelPanelModel {
+  constructor(options?: SharedModelPanelModelOptions) {
+    super(ModelPanelFactory.TYPE, options);
   }
 }
 
-export class ModelPanelFactory extends ReactorPanelFactory<ModelPanelModel> {
+export class ModelPanelFactory extends SharedModelPanelFactory<ModelPanelModel> {
   static TYPE = 'databrowser/model';
 
   constructor() {
@@ -58,18 +29,6 @@ export class ModelPanelFactory extends ReactorPanelFactory<ModelPanelModel> {
     });
   }
 
-  getSimpleName(model: ModelPanelModel) {
-    let _model = model.model;
-    let _definition = model.definition;
-    if (!_definition) {
-      return super.getSimpleName(model);
-    }
-    if (_model) {
-      return `${_definition.definition.label}: ${_model.data?.display || '(new object)'}`;
-    }
-    return `${_definition.definition.label}`;
-  }
-
   _generateModel(): ModelPanelModel {
     return new ModelPanelModel(null);
   }