@journeyapps-labs/reactor-mod-data-browser 1.1.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "1.1.0",
+  "version": "2.0.1",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {

package/src/core/AbstractConnection.ts

@@ -7,6 +7,7 @@ import { v4 } from 'uuid';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
 import { Collection, LifecycleCollection } from '@journeyapps-labs/lib-reactor-data-layer';
 import { when } from 'mobx';
+import { EntityDescription } from '@journeyapps-labs/reactor-mod';
 
 export interface AbstractConnectionSerialized {
   factory: string;
@@ -91,8 +92,10 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     };
   }
 
-  get name() {
-    return this.id;
+  get name(): EntityDescription {
+    return {
+      simpleName: this.id
+    };
   }
 
   abstract _serialize(): any;

package/src/core/query/SimpleQuery.tsx

@@ -1,10 +1,10 @@
 import { AbstractQuery, AbstractQueryEncoded } from './AbstractQuery';
 import {
-  ActionSource,
   CheckboxWidget,
   inject,
+  MetadataWidget,
   SmartDateDisplayWidget,
-  System,
+  styled,
   TableColumn
 } from '@journeyapps-labs/reactor-mod';
 import { ConnectionStore } from '../../stores/ConnectionStore';
@@ -14,9 +14,7 @@ import { Page, PageRow } from './Page';
 import { SchemaModelDefinition } from '../SchemaModelDefinition';
 import * as _ from 'lodash';
 import * as React from 'react';
-import styled from '@emotion/styled';
 import { observable } from 'mobx';
-import { DataBrowserEntities } from '../../entities';
 
 export interface SimpleQueryOptions {
   definition?: SchemaModelDefinition;
@@ -119,12 +117,24 @@ namespace S {
   export const Empty = styled.div`
     opacity: 0.2;
   `;
-  export const Container = styled.div``;
 
   export const Preview = styled.img`
     max-height: 40px;
     max-width: 40px;
   `;
+
+  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;
+  `;
 }
 
 export interface CellDisplayWidgetProps {
@@ -132,6 +142,8 @@ export interface CellDisplayWidgetProps {
   cell: any;
 }
 
+const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
+
 export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
   const { row, cell } = props;
   if (cell == null) {
@@ -141,9 +153,23 @@ export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
     if (cell.trim() === '') {
       return <S.Empty>empty</S.Empty>;
     }
+    return cell;
   }
   if (_.isArray(cell)) {
-    return cell.join(', ');
+    if (cell.length === 0) {
+      return <S.Empty>empty array</S.Empty>;
+    }
+
+    let items = _.slice(cell, 0, MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY);
+
+    return (
+      <S.Pills>
+        {items.map((c) => {
+          return <S.pill key={c}>{c}</S.pill>;
+        })}
+        {items.length !== cell.length ? '...' : null}
+      </S.Pills>
+    );
   }
   if (cell instanceof Date) {
     return <SmartDateDisplayWidget date={cell} />;
@@ -152,6 +178,13 @@ export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
     return <CheckboxWidget checked={cell} onChange={() => {}} />;
   }
   if (cell instanceof Location) {
+    return (
+      <>
+        <MetadataWidget label={'Lat'} value={`${cell.latitude}`} />
+        <MetadataWidget label={'Long'} value={`${cell.longitude}`} />
+      </>
+    );
+
     return JSON.stringify(cell.toJSON());
   }
   if (cell instanceof Attachment) {

package/src/core/types/ManualConnection.ts

@@ -1,6 +1,7 @@
 import { ApiCredentialOptions, Database } from '@journeyapps/db';
 import { AbstractConnection } from '../AbstractConnection';
 import { ManualConnectionFactory } from './ManualConnectionFactory';
+import { EntityDescription } from '@journeyapps-labs/reactor-mod';
 
 export interface ManualConnectionDetails extends ApiCredentialOptions {
   name: string;
@@ -26,7 +27,9 @@ export class ManualConnection extends AbstractConnection {
     this.options = data;
   }
 
-  get name(): string {
-    return this.options.name;
+  get name(): EntityDescription {
+    return {
+      simpleName: this.options.name
+    };
   }
 }

package/src/entities/ConnectionEntityDefinition.tsx

@@ -1,6 +1,5 @@
 import {
   DescendantEntityProviderComponent,
-  EntityActionHandlerComponent,
   EntityDefinition,
   EntityDescriberComponent,
   EntityPanelComponent,
@@ -30,9 +29,7 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
       new EntityDescriberComponent<AbstractConnection>({
         label: 'Simple',
         describe: (entity: AbstractConnection) => {
-          return {
-            simpleName: entity.name
-          };
+          return entity.name;
         }
       })
     );
@@ -69,6 +66,7 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
       })
     );
   }
+
   matchEntity(t: any): boolean {
     if (t instanceof AbstractConnection) {
       return true;

package/webpack.config.js

@@ -0,0 +1,9 @@
+const { patchExportedLibrary } = require('@journeyapps-labs/lib-reactor-builder');
+module.exports = (webpack) => {
+  return patchExportedLibrary({
+    w: webpack,
+    module: '@journeyapps/db',
+    dir: __dirname,
+    alias: true
+  });
+};