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

package/src/entities/ConnectionEntityDefinition.tsx

@@ -1,5 +1,6 @@
 import {
   DescendantEntityProviderComponent,
+  EntityCardsPresenterComponent,
   EntityDefinition,
   EntityDescriberComponent,
   EntityPanelComponent,
@@ -11,11 +12,15 @@ import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { AbstractConnection } from '../core/AbstractConnection';
 import { AddConnectionAction } from '../actions/connections/AddConnectionAction';
+import { SavedQueryEntity, SavedQueryStore } from '../stores/SavedQueryStore';
 
 export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnection> {
   @inject(ConnectionStore)
   accessor connectionStore: ConnectionStore;
 
+  @inject(SavedQueryStore)
+  accessor savedQueryStore: SavedQueryStore;
+
   constructor() {
     super({
       type: DataBrowserEntities.CONNECTION,
@@ -29,7 +34,10 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
       new EntityDescriberComponent<AbstractConnection>({
         label: 'Simple',
         describe: (entity: AbstractConnection) => {
-          return entity.name;
+          return {
+            ...entity.name,
+            iconColor: entity.color
+          };
         }
       })
     );
@@ -43,7 +51,14 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
       })
     );
 
-    this.registerComponent(new InlineTreePresenterComponent<AbstractConnection>());
+    this.registerComponent(
+      new InlineTreePresenterComponent<AbstractConnection>({
+        loadChildrenAsNodesAreOpened: true,
+        cacheTreeEntities: false
+      })
+    );
+
+    this.registerComponent(new EntityCardsPresenterComponent<AbstractConnection>());
 
     this.registerComponent(
       new DescendantEntityProviderComponent<AbstractConnection>({
@@ -52,8 +67,7 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
           return {
             category: {
               label: 'Models',
-              icon: 'cube',
-              openDefault: true
+              icon: 'cube'
             },
             descendants: parent.schema_models.items
           };
@@ -61,6 +75,21 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
       })
     );
 
+    this.registerComponent(
+      new DescendantEntityProviderComponent<AbstractConnection, SavedQueryEntity>({
+        descendantType: DataBrowserEntities.SAVED_QUERY,
+        generateOptions: (parent) => {
+          return {
+            category: {
+              label: 'Saved queries',
+              icon: 'bookmark'
+            },
+            descendants: this.savedQueryStore.getSavedEntitiesForConnection(parent.id)
+          };
+        }
+      })
+    );
+
     this.registerComponent(
       new EntityPanelComponent<AbstractConnection>({
         label: 'Connections',

package/src/entities/SavedQueryEntityDefinition.ts

@@ -0,0 +1,72 @@
+import {
+  EntityActionHandlerComponent,
+  EntityCardsPresenterComponent,
+  EntityDefinition,
+  EntityDescriberComponent,
+  inject,
+  InlineEntityEncoderComponent,
+  InlineTreePresenterComponent
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../entities';
+import { SavedQueryEntity, SavedQueryStore } from '../stores/SavedQueryStore';
+import { OpenSavedQueryAction } from '../actions/saved-queries/OpenSavedQueryAction';
+import { RemoveSavedQueryAction } from '../actions/saved-queries/RemoveSavedQueryAction';
+
+interface SavedQueryEntityEncoded {
+  id: string;
+}
+
+export class SavedQueryEntityDefinition extends EntityDefinition<SavedQueryEntity> {
+  @inject(SavedQueryStore)
+  accessor savedQueryStore: SavedQueryStore;
+
+  constructor() {
+    super({
+      type: DataBrowserEntities.SAVED_QUERY,
+      category: 'DataBrowser',
+      label: 'Saved query',
+      icon: 'bookmark',
+      iconColor: 'gold'
+    });
+
+    this.registerComponent(
+      new EntityDescriberComponent<SavedQueryEntity>({
+        label: 'Simple',
+        describe: (entity) => {
+          return {
+            simpleName: entity.saved.name,
+            complexName: entity.saved.query.definition,
+            tags: ['saved']
+          };
+        }
+      })
+    );
+
+    this.registerComponent(new InlineTreePresenterComponent<SavedQueryEntity>());
+    this.registerComponent(new EntityCardsPresenterComponent<SavedQueryEntity>());
+
+    this.registerComponent(
+      new InlineEntityEncoderComponent<SavedQueryEntity, SavedQueryEntityEncoded>({
+        version: 1,
+        encode: (entity) => {
+          return {
+            id: entity.id
+          };
+        },
+        decode: async (entity) => {
+          return this.savedQueryStore.getSavedEntityByID(entity.id);
+        }
+      })
+    );
+
+    this.registerComponent(new EntityActionHandlerComponent(OpenSavedQueryAction.ID));
+  }
+
+  matchEntity(t: any): boolean {
+    return t instanceof SavedQueryEntity;
+  }
+
+  getEntityUID(t: SavedQueryEntity) {
+    return t.id;
+  }
+}

package/src/entities/SchemaModelDefinitionEntityDefinition.ts

@@ -13,7 +13,6 @@ import { ConnectionStore } from '../stores/ConnectionStore';
 import { AbstractConnection } from '../core/AbstractConnection';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
 import { QuerySchemaModelAction } from '../actions/schema-definitions/QuerySchemaModelAction';
-import { V4Index } from '@journeyapps-labs/client-backend-v4';
 import { IndexModel } from '../core/IndexModel';
 
 export interface SchemaModelDefinitionEntityDefinitionEncoded {
@@ -78,7 +77,11 @@ export class SchemaModelDefinitionEntityDefinition extends EntityDefinition<Sche
       })
     );
 
-    this.registerComponent(new InlineTreePresenterComponent());
+    this.registerComponent(
+      new InlineTreePresenterComponent({
+        loadChildrenAsNodesAreOpened: true
+      })
+    );
 
     this.registerComponent(
       new SimpleParentEntitySearchEngine<AbstractConnection, SchemaModelDefinition>({

package/src/entities.ts

@@ -4,5 +4,6 @@ export enum DataBrowserEntities {
   SCHEMA_MODEL_DEFINITION = 'databrowser/schema_model_definition',
   SCHEMA_MODEL_INDEX = 'databrowser/schema_model_index',
   SCHEMA_MODEL_OBJECT = 'databrowser/schema_model_object',
-  QUERY = 'databrowser/query'
+  QUERY = 'databrowser/query',
+  SAVED_QUERY = 'databrowser/saved_query'
 }

package/src/forms/APIConnectionForm.tsx

@@ -1,11 +1,13 @@
-import { FormModel, TextInput, TextInputType } from '@journeyapps-labs/reactor-mod';
+import { FormModel, SelectInput, TextInput, TextInputType } from '@journeyapps-labs/reactor-mod';
 import { ManualConnection } from '../core/types/ManualConnection';
 import { ManualConnectionFactory } from '../core/types/ManualConnectionFactory';
+import { DEFAULT_CONNECTION_COLOR, getConnectionColorSetOptions } from '../core/connection-colors';
 
 export interface APIConnectionFormValue {
   name: string;
   base_url: string;
   api_token: string;
+  color: string;
 }
 
 export class APIConnectionForm extends FormModel<APIConnectionFormValue> {
@@ -36,13 +38,24 @@ export class APIConnectionForm extends FormModel<APIConnectionFormValue> {
         value: value?.api_token
       })
     );
+
+    this.addInput(
+      new SelectInput({
+        name: 'color',
+        label: 'Color',
+        value: value?.color || DEFAULT_CONNECTION_COLOR,
+        options: getConnectionColorSetOptions()
+      })
+    );
   }
 
   generateConnection(factory: ManualConnectionFactory) {
-    return new ManualConnection(factory, {
+    const connection = new ManualConnection(factory, {
       baseUrl: this.value().base_url,
       token: this.value().api_token,
       name: this.value().name
     });
+    connection.color = this.value().color;
+    return connection;
   }
 }

package/src/forms/TypeEngine.tsx

@@ -1,70 +1,20 @@
-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>;
-}
+import { Type } from '@journeyapps/db';
+import { AbstractMedia, inject, MediaEngine, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import { displayArray } from './types/shared/ui';
+import { TypeHandler } from './types/shared/type-handler';
+import { dateHandler } from './types/date-handler';
+import { imageHandler } from './types/image-handler';
+import { attachmentHandler } from './types/attachment-handler';
+import { booleanHandler } from './types/boolean-handler';
+import { numberHandler } from './types/number-handler';
+import { textHandler } from './types/text-handler';
+import { locationHandler } from './types/location-handler';
+import { singleChoiceIntegerHandler } from './types/single-choice-integer-handler';
+import { singleChoiceHandler } from './types/single-choice-handler';
+import { multipleChoiceHandler } from './types/multiple-choice-handler';
+import { multipleChoiceIntegerHandler } from './types/multiple-choice-integer-handler';
+
+export type { TypeHandler };
 
 export class TypeEngine {
   handlers: Set<TypeHandler>;
@@ -80,318 +30,24 @@ export class TypeEngine {
   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>
-    );
+    const context = {
+      mediaEngine: this.mediaEngine,
+      workspaceStore: this.workspaceStore,
+      mediaCache: this._mediaCache,
+      displayArray
+    };
+
+    this.register(dateHandler);
+    this.register(imageHandler(context));
+    this.register(attachmentHandler);
+    this.register(booleanHandler);
+    this.register(numberHandler);
+    this.register(textHandler(context));
+    this.register(locationHandler);
+    this.register(singleChoiceIntegerHandler);
+    this.register(singleChoiceHandler);
+    this.register(multipleChoiceHandler(context));
+    this.register(multipleChoiceIntegerHandler(context));
   }
 
   getHandler(type: Type) {
@@ -407,45 +63,3 @@ export class TypeEngine {
     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;
-  `;
-}