@journeyapps-labs/reactor-mod-data-browser 2.0.2 → 2.2.0

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

@@ -0,0 +1,122 @@
+import {
+  CheckboxWidget,
+  ImageMedia,
+  MetadataWidget,
+  SmartDateDisplayWidget,
+  styled
+} from '@journeyapps-labs/reactor-mod';
+import { Attachment, Day, Location, Variable } from '@journeyapps/db';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { PageRow } from '../Page';
+
+namespace S {
+  export const Empty = styled.div`
+    opacity: 0.2;
+  `;
+
+  export const Preview = styled.img`
+    max-height: 40px;
+    max-width: 40px;
+    cursor: pointer;
+  `;
+
+  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 const Max = styled.div`
+    max-width: 500px;
+    white-space: pre;
+    display: inline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+}
+
+export interface CellDisplayWidgetProps {
+  row: PageRow;
+  cell: any;
+  variable: Variable;
+}
+
+const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
+
+export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
+  const { row, cell, variable } = props;
+  if (cell == null) {
+    return <S.Empty>null</S.Empty>;
+  }
+  if (_.isString(cell)) {
+    if (cell.trim() === '') {
+      return <S.Empty>empty</S.Empty>;
+    }
+    return <S.Max>{cell}</S.Max>;
+  }
+  if (_.isNumber(cell)) {
+    return cell;
+  }
+  if (_.isArray(cell)) {
+    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} />;
+  }
+  if (cell instanceof Day) {
+    return <SmartDateDisplayWidget date={cell.toDate()} />;
+  }
+  if (_.isBoolean(cell)) {
+    return <CheckboxWidget checked={cell} onChange={() => {}} />;
+  }
+  if (cell instanceof Location) {
+    return (
+      <>
+        <MetadataWidget label={'Lat'} value={`${cell.latitude}`} />
+        <MetadataWidget label={'Long'} value={`${cell.longitude}`} />
+      </>
+    );
+  }
+  if (cell instanceof Attachment) {
+    if (cell.uploaded()) {
+      return (
+        <S.Preview
+          onClick={() => {
+            row.model.getMedia(variable.name).then((media) => {
+              if (media instanceof ImageMedia) {
+                media.open();
+              } else {
+                window.open(cell.url(), '_blank');
+              }
+            });
+          }}
+          src={cell.urls['thumbnail']}
+        />
+      );
+    }
+    return <S.Empty>Not uploaded</S.Empty>;
+  }
+  console.log('unknown type', cell);
+  return null;
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+export interface ColumnDisplayWidgetProps {
+  label: string;
+}
+
+export const ColumnDisplayWidget: React.FC<ColumnDisplayWidgetProps> = (props) => {
+  let parts = (props.label || '').split(' ');
+  if (parts.length >= 5) {
+    return <S.Width length={150}>{props.label}</S.Width>;
+  }
+  if (parts.length >= 3) {
+    return <S.Width length={80}>{props.label}</S.Width>;
+  }
+  return <S.Span>{props.label}</S.Span>;
+};
+
+namespace S {
+  export const Width = styled.div<{ length: number }>`
+    min-width: ${(p) => p.length}px;
+  `;
+
+  export const Span = styled.div`
+    white-space: nowrap;
+  `;
+}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { Variable } from '@journeyapps/db';
+import { ColumnDisplayWidget } from './ColumnDisplayWidget';
+import { SmartFilterWidget } from './SmartFilterWidget';
+import { SimpleFilter } from '../filters';
+
+export interface SmartColumnWidgetProps {
+  variable: Variable;
+  filter?: SimpleFilter;
+  filterChanged: (filter: SimpleFilter | null) => any;
+}
+
+export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
+  return (
+    <S.Container>
+      <ColumnDisplayWidget label={props.variable.label} />
+      <SmartFilterWidget filter={props.filter} variable={props.variable} filterChanged={props.filterChanged} />
+    </S.Container>
+  );
+};
+
+namespace S {
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+  `;
+}

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { SingleChoiceIntegerType, SingleChoiceType, TextType, Variable } from '@journeyapps/db';
+import { ComboBoxStore, DialogStore, ioc, PanelButtonWidget } from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { Condition, SimpleFilter } from '../filters';
+
+export interface SmartFilterWidgetProps {
+  variable: Variable;
+  filter?: SimpleFilter;
+  filterChanged: (filter: SimpleFilter | null) => any;
+}
+
+export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
+  if (props.variable.type instanceof SingleChoiceIntegerType || props.variable.type instanceof SingleChoiceType) {
+    return (
+      <PanelButtonWidget
+        {...{
+          icon: 'filter',
+          highlight: !!props.filter,
+          action: async (position) => {
+            let results = await ioc.get(ComboBoxStore).showMultiSelectComboBox(
+              _.map(props.variable.type.options, (option) => {
+                return {
+                  title: `${option.value}`,
+                  key: `${option.value}`,
+                  checked: !!props.filter?.statements?.find((s) => s.arg === `${option.value}`)
+                };
+              }),
+              position
+            );
+            if (results.length > 0) {
+              props.filterChanged(
+                new SimpleFilter(
+                  props.variable,
+                  results.map((r) => {
+                    return {
+                      arg: r.key,
+                      condition: Condition.EQUALS
+                    };
+                  })
+                )
+              );
+            } else {
+              props.filterChanged(null);
+            }
+          }
+        }}
+      />
+    );
+  }
+  if (props.variable.type instanceof TextType) {
+    return (
+      <PanelButtonWidget
+        {...{
+          icon: 'filter',
+          highlight: !!props.filter,
+          action: async () => {
+            let value = await ioc.get(DialogStore).showInputDialog({
+              title: `${props.variable.label}`,
+              initialValue: props.filter?.statements[0]?.arg
+            });
+            if (value) {
+              props.filterChanged(
+                new SimpleFilter(props.variable, [
+                  {
+                    arg: value,
+                    condition: Condition.EQUALS
+                  }
+                ])
+              );
+            } else {
+              props.filterChanged(null);
+            }
+          }
+        }}
+      />
+    );
+  }
+  return null;
+};

package/src/forms/SchemaModelForm.tsx

@@ -2,7 +2,10 @@ import {
   BooleanInput,
   DateInput,
   DateTimePickerType,
+  FileInput,
   FormModel,
+  ImageInput,
+  ImageMedia,
   SelectInput,
   TextInput
 } from '@journeyapps-labs/reactor-mod';
@@ -22,6 +25,7 @@ import {
   SingleChoiceType,
   TextType
 } from '@journeyapps/db';
+import { LocationInput } from './inputs/LocationInput';
 
 export interface SchemaModelFormOptions {
   definition: SchemaModelDefinition;
@@ -49,13 +53,25 @@ export class SchemaModelForm extends FormModel {
           type: DateTimePickerType.DATE
         });
       }
-      if (attribute.type instanceof AttachmentType) {
-      }
-      if (attribute.type instanceof SignatureType) {
-        console.log(options.object?.model[attribute.name]);
+      if (attribute.type instanceof SignatureType || attribute.type instanceof PhotoType) {
+        let media = new ImageInput({
+          name: attribute.name,
+          label: attribute.label
+        });
+
+        if (options.object) {
+          options.object.getMedia(attribute.name).then((m) => {
+            media.setValue(m as ImageMedia);
+          });
+        }
+        return media;
       }
-      if (attribute.type instanceof PhotoType) {
-        console.log(options.object?.model[attribute.name]);
+      if (attribute.type instanceof AttachmentType) {
+        return new FileInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name] || null
+        });
       }
       if (attribute.type instanceof BooleanType) {
         return new BooleanInput({
@@ -65,10 +81,13 @@ export class SchemaModelForm extends FormModel {
         });
       }
       if (attribute.type instanceof LocationType) {
+        return new LocationInput({
+          name: attribute.name,
+          label: attribute.label,
+          value: options.object?.model[attribute.name]
+        });
       }
-      if (attribute.type instanceof SingleChoiceIntegerType) {
-      }
-      if (attribute.type instanceof SingleChoiceType) {
+      if (attribute.type instanceof SingleChoiceIntegerType || attribute.type instanceof SingleChoiceType) {
         return new SelectInput({
           name: attribute.name,
           label: attribute.label,

package/src/forms/inputs/LocationInput.tsx

@@ -0,0 +1,104 @@
+import {
+  FormInput,
+  FormInputGenerics,
+  FormInputOptions,
+  FormInputRenderOptions,
+  InputContainerWidget,
+  NumberInput,
+  PanelButtonMode,
+  PanelButtonWidget
+} from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
+import { Location } from '@journeyapps/db';
+import styled from '@emotion/styled';
+
+export class LocationInput extends FormInput<FormInputGenerics & { VALUE: Location }> {
+  latitude: NumberInput;
+  longitude: NumberInput;
+
+  constructor(options: FormInputOptions<Location>) {
+    super(options);
+    this.latitude = new NumberInput({
+      name: 'latitude',
+      label: 'Latitude',
+      value: options.value?.latitude
+    });
+    this.longitude = new NumberInput({
+      name: 'longitude',
+      label: 'Longitude',
+      value: options.value?.longitude
+    });
+
+    this.update();
+
+    [this.latitude, this.longitude].forEach((l) => {
+      l.registerListener({
+        valueChanged: () => {
+          this.update();
+        }
+      });
+    });
+  }
+
+  setValue(value: Location) {
+    super.setValue(value);
+    if (this.latitude.value !== value?.latitude) {
+      this.latitude.setValue(value?.latitude);
+    }
+    if (this.longitude.value !== value?.longitude) {
+      this.longitude.setValue(value?.longitude);
+    }
+  }
+
+  update() {
+    let lat = this.latitude.value;
+    let long = this.longitude.value;
+    if (lat == null || long === null) {
+      this.setValue(null);
+    } else {
+      this.setValue(
+        new Location({
+          latitude: lat,
+          longitude: long,
+          horizontal_accuracy: (this.value as Location)?.horizontal_accuracy,
+          vertical_accuracy: (this.value as Location)?.vertical_accuracy,
+          altitude: (this.value as Location)?.altitude,
+          timestamp: new Date()
+        })
+      );
+    }
+  }
+
+  renderControl(options: FormInputRenderOptions): React.JSX.Element {
+    return (
+      <S.Container>
+        <InputContainerWidget error={this.latitude.error} label={this.latitude.label} inline={true}>
+          {this.latitude.renderControl({ inline: true })}
+        </InputContainerWidget>
+        <InputContainerWidget error={this.longitude.error} label={this.longitude.label} inline={true}>
+          {this.longitude.renderControl({ inline: true })}
+        </InputContainerWidget>
+        {this.value ? (
+          <PanelButtonWidget
+            mode={PanelButtonMode.LINK}
+            label="Open in maps"
+            icon="map"
+            action={() => {
+              window.open(`https://www.google.com/maps/?q=${this.latitude.value},${this.longitude.value}`, '_blank');
+            }}
+          />
+        ) : null}
+      </S.Container>
+    );
+  }
+}
+
+namespace S {
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    row-gap: 2px;
+    max-width: 250px;
+    align-items: flex-start;
+  `;
+}

package/src/panels/model/ModelPanelFactory.tsx

@@ -24,7 +24,7 @@ export class ModelPanelModel extends ReactorPanelModel {
 
   constructor(options?: ModelPanelModelOptions) {
     super(ModelPanelFactory.TYPE);
-    this.setExpand(true, true);
+    this.setExpand(false, true);
     this.definition = options?.definition;
     this.model = options?.model;
   }

package/src/panels/model/ModelPanelWidget.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import styled from '@emotion/styled';
-import { BorderLayoutWidget, LoadingPanelWidget } from '@journeyapps-labs/reactor-mod';
+import {
+  BorderLayoutWidget,
+  LoadingPanelWidget,
+  PANEL_CONTENT_PADDING,
+  PanelToolbarWidget,
+  ScrollableDivCss
+} from '@journeyapps-labs/reactor-mod';
 
 import { SchemaModelForm } from '../../forms/SchemaModelForm';
 import { ModelPanelModel } from './ModelPanelFactory';
@@ -13,7 +19,9 @@ export interface QueryPanelWidgetProps {
 
 namespace S {
   export const Container = styled.div`
-    padding: 20px;
+    overflow: auto;
+    padding: ${PANEL_CONTENT_PADDING}px;
+    ${ScrollableDivCss};
   `;
 }
 
@@ -32,10 +40,36 @@ export const ModelPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
     );
   }, [props.model.model, props.model.definition]);
 
+  let top = null;
+  if (props.model.model) {
+    top = (
+      <PanelToolbarWidget
+        btns={
+          [
+            // {
+            //   label: 'Delete object',
+            //   action: () => {}
+            // }
+          ]
+        }
+        meta={[
+          {
+            label: 'ID',
+            value: props.model?.id
+          }
+        ]}
+      />
+    );
+  }
+
   return (
     <LoadingPanelWidget loading={!form}>
       {() => {
-        return <S.Container>{form.render()}</S.Container>;
+        return (
+          <BorderLayoutWidget top={top}>
+            <S.Container>{form.render()}</S.Container>
+          </BorderLayoutWidget>
+        );
       }}
     </LoadingPanelWidget>
   );

package/src/panels/query/QueryPanelWidget.tsx

@@ -7,6 +7,7 @@ import { BorderLayoutWidget, LoadingPanelWidget } from '@journeyapps-labs/reacto
 import { Page } from '../../core/query/Page';
 import { PageResultsWidget } from './PageResultsWidget';
 import { TableControlsWidget } from './TableControlsWidget';
+import { autorun } from 'mobx';
 
 export interface QueryPanelWidgetProps {
   model: QueryPanelModel;
@@ -30,9 +31,11 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
   }, [props.model.query]);
 
   useEffect(() => {
-    if (props.model.query) {
-      setPage(props.model.query.getPage(props.model.current_page));
-    }
+    return autorun(() => {
+      if (props.model.query) {
+        setPage(props.model.query.getPage(props.model.current_page));
+      }
+    });
   }, [props.model.query]);
 
   return (

package/src/panels/query/TableControlsWidget.tsx

@@ -46,6 +46,7 @@ export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer(
       />
       <PanelButtonWidget
         label="Page"
+        tooltip="Reload page"
         icon="refresh"
         action={() => {
           props.current_page.load();
@@ -53,9 +54,10 @@ export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer(
       />
       <PanelButtonWidget
         label="Query"
+        tooltip="Reload Query"
         icon="refresh"
-        action={() => {
-          props.query.load();
+        action={async (event, loading) => {
+          await props.query.load();
         }}
       />
     </S.Container>