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

package/src/core/query/query-simple/SimpleQueryTypes.ts

@@ -0,0 +1,61 @@
+import { BaseObserver } from '@journeyapps-labs/common-utils';
+
+export enum SortDirection {
+  ASC = 'asc',
+  DESC = 'desc'
+}
+
+export interface SerializedSimpleQuerySort {
+  field: string;
+  direction: SortDirection;
+}
+
+export interface SimpleQuerySortListener {
+  changed: () => any;
+  removeRequested: () => any;
+}
+
+export class SimpleQuerySort extends BaseObserver<SimpleQuerySortListener> {
+  constructor(
+    public field: string,
+    public direction: SortDirection
+  ) {
+    super();
+  }
+
+  static deserialize(value: SerializedSimpleQuerySort): SimpleQuerySort {
+    return new SimpleQuerySort(value.field, value.direction);
+  }
+
+  static create(field: string, direction: SortDirection = SortDirection.ASC): SimpleQuerySort {
+    return new SimpleQuerySort(field, direction);
+  }
+
+  serialize(): SerializedSimpleQuerySort {
+    return {
+      field: this.field,
+      direction: this.direction
+    };
+  }
+
+  setDirection(direction: SortDirection): boolean {
+    if (this.direction === direction) {
+      return false;
+    }
+    this.direction = direction;
+    this.iterateListeners((listener) => listener.changed?.());
+    return true;
+  }
+
+  toggle(): void {
+    if (this.direction === SortDirection.ASC) {
+      this.setDirection(SortDirection.DESC);
+      return;
+    }
+    this.remove();
+  }
+
+  remove(): void {
+    this.iterateListeners((listener) => listener.removeRequested?.());
+  }
+}

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

@@ -6,6 +6,8 @@ import { IconWidget, styled, TableButtonWidget } from '@journeyapps-labs/reactor
 import { copyTextToClipboard } from '@journeyapps-labs/lib-reactor-utils';
 import { Relationship } from '@journeyapps/parser-schema';
 import { observer } from 'mobx-react';
+import { PeekRelationshipButton } from './PeekRelationshipButton';
+import { EmptyValueWidget } from '../../../widgets/EmptyValueWidget';
 
 export interface BelongsToDisplayWidgetProps {
   relationship: Relationship;
@@ -49,7 +51,7 @@ export const BelongsToDisplayWidget: React.FC<BelongsToDisplayWidgetProps> = obs
   }
 
   if (!props.id) {
-    return <S.Empty>Not set</S.Empty>;
+    return <EmptyValueWidget>Not set</EmptyValueWidget>;
   }
 
   if (!object) {
@@ -59,12 +61,15 @@ export const BelongsToDisplayWidget: React.FC<BelongsToDisplayWidgetProps> = obs
   return (
     <S.Container className={props.className}>
       {object.data.display}
-      <TableButtonWidget
-        icon="arrow-right"
-        action={() => {
-          props.open(object);
-        }}
-      />
+      <S.Actions>
+        <PeekRelationshipButton object={object} open={props.open} />
+        <TableButtonWidget
+          icon="arrow-right"
+          action={() => {
+            props.open(object);
+          }}
+        />
+      </S.Actions>
     </S.Container>
   );
 });
@@ -75,10 +80,6 @@ namespace S {
     flex-direction: row;
   `;
 
-  export const Empty = styled.div`
-    opacity: 0.2;
-  `;
-
   export const Spinner = styled(IconWidget)`
     opacity: 0.2;
   `;
@@ -91,4 +92,11 @@ namespace S {
     justify-content: space-between;
     flex-grow: 1;
   `;
+
+  export const Actions = styled.div`
+    display: flex;
+    flex-direction: row;
+    column-gap: 3px;
+    align-items: center;
+  `;
 }

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

@@ -1,14 +1,9 @@
-import { ioc, SmartDateDisplayWidget, styled } from '@journeyapps-labs/reactor-mod';
-import * as _ from 'lodash';
+import { ioc, SmartDateDisplayWidget } from '@journeyapps-labs/reactor-mod';
 import * as React from 'react';
 import { PageRow } from '../Page';
 import { TypeEngine } from '../../../forms/TypeEngine';
-
-namespace S {
-  export const Empty = styled.div`
-    opacity: 0.2;
-  `;
-}
+import { EmptyValueWidget } from '../../../widgets/EmptyValueWidget';
+import { StandardModelFields } from '../StandardModelFields';
 
 export interface CellDisplayWidgetProps {
   row: PageRow;
@@ -19,10 +14,10 @@ export interface CellDisplayWidgetProps {
 export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
   const { row, cell, name } = props;
   if (cell == null) {
-    return <S.Empty>null</S.Empty>;
+    return <EmptyValueWidget />;
   }
 
-  if (name === 'updated_at') {
+  if (name === StandardModelFields.UPDATED_AT) {
     return <SmartDateDisplayWidget date={cell} />;
   }
 

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

@@ -4,33 +4,37 @@ import styled from '@emotion/styled';
 export interface ColumnDisplayWidgetProps {
   label: string;
   className?: any;
+  onClick?: () => any;
 }
 
 export const ColumnDisplayWidget: React.FC<ColumnDisplayWidgetProps> = (props) => {
-  let parts = (props.label || '').split(' ');
-  if (parts.length >= 5) {
-    return (
-      <S.Width className={props.className} length={150}>
-        {props.label}
-      </S.Width>
-    );
-  }
-  if (parts.length >= 3) {
-    return (
-      <S.Width className={props.className} length={80}>
-        {props.label}
-      </S.Width>
-    );
-  }
-  return <S.Span className={props.className}>{props.label}</S.Span>;
+  const parts = (props.label || '').split(' ');
+  const minWidth = parts.length >= 5 ? 150 : parts.length >= 3 ? 80 : undefined;
+  return (
+    <S.Label
+      className={props.className}
+      minWidth={minWidth}
+      clickable={!!props.onClick}
+      nowrap={!minWidth}
+      onClick={props.onClick}
+    >
+      {props.label}
+    </S.Label>
+  );
 };
 
 namespace S {
-  export const Width = styled.div<{ length: number }>`
-    min-width: ${(p) => p.length}px;
+  const clickableStyle = `
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      opacity: 0.9;
+    }
   `;
 
-  export const Span = styled.div`
-    white-space: nowrap;
+  export const Label = styled.div<{ minWidth?: number; clickable: boolean; nowrap: boolean }>`
+    ${(p) => (p.minWidth ? `min-width: ${p.minWidth}px;` : '')};
+    ${(p) => (p.nowrap ? 'white-space: nowrap;' : '')};
+    ${(p) => (p.clickable ? clickableStyle : '')};
   `;
 }

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

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import {
+  BooleanSetting,
+  ComboBoxItem,
+  ComboBoxStore2,
+  NotificationStore,
+  NotificationType,
+  PrefsStore,
+  SimpleComboBoxDirective,
+  SmartDateDisplayWidget,
+  TableButtonWidget,
+  themed,
+  ioc
+} from '@journeyapps-labs/reactor-mod';
+import { copyTextToClipboard } from '@journeyapps-labs/lib-reactor-utils';
+import { SchemaModelObject } from '../../SchemaModelObject';
+import { TypeEngine } from '../../../forms/TypeEngine';
+import { QueryControlPreferences } from '../../../preferences/QueryControlPreferences';
+import { EmptyValueWidget } from '../../../widgets/EmptyValueWidget';
+
+export interface PeekRelationshipButtonProps {
+  object: SchemaModelObject;
+  open: (object: SchemaModelObject) => any;
+}
+
+export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (props) => {
+  const typeEngine = ioc.get(TypeEngine);
+  const notifications = ioc.get(NotificationStore);
+
+  const copyFieldValue = async (attribute: any, value: unknown) => {
+    try {
+      const handler = typeEngine.getHandler(attribute.type);
+      let scalar: unknown = value;
+      if (handler) {
+        const decoded = await handler.decode(value);
+        scalar = handler.encodeToScalar ? await handler.encodeToScalar(decoded) : decoded;
+      }
+      copyTextToClipboard(scalar == null ? 'null' : `${scalar}`);
+      notifications.showNotification({
+        title: 'Copied',
+        description: `${attribute.label || attribute.name} copied to clipboard`,
+        type: NotificationType.SUCCESS
+      });
+    } catch (error) {
+      notifications.showNotification({
+        title: 'Copy failed',
+        description: `Failed to copy ${attribute.label || attribute.name}`,
+        type: NotificationType.ERROR
+      });
+    }
+  };
+
+  const showPeek = async (event: React.MouseEvent<any>) => {
+    const hideNullFields = ioc
+      .get(PrefsStore)
+      .getPreference<BooleanSetting>(QueryControlPreferences.FILTER_NULL_FIELDS_IN_RELATIONSHIP_PEEK).checked;
+
+    const attributeItems: ComboBoxItem[] = Object.values(props.object.definition.definition.attributes)
+      .map((attribute) => {
+        const value = props.object.model?.[attribute.name];
+        if (hideNullFields && value == null) {
+          return null;
+        }
+        let display: React.ReactNode = null;
+        if (value != null) {
+          display = typeEngine.getHandler(attribute.type)?.generateDisplay({
+            model: props.object,
+            value,
+            label: attribute.label || attribute.name,
+            name: attribute.name,
+            type: attribute.type
+          });
+        }
+        return {
+          key: `field-${attribute.name}`,
+          title: attribute.label || attribute.name,
+          right: <S.FieldValue>{display || (value == null ? <EmptyValueWidget /> : `${value}`)}</S.FieldValue>,
+          group: 'Fields',
+          action: async () => {
+            await copyFieldValue(attribute, value);
+          }
+        } as ComboBoxItem;
+      })
+      .filter((item) => !!item);
+
+    const items: ComboBoxItem[] = [
+      {
+        key: 'meta-id',
+        title: 'ID',
+        icon: 'copy',
+        right: <S.FieldValue>{props.object.id}</S.FieldValue>,
+        disabled: true,
+        group: 'Object'
+      },
+      {
+        key: 'meta-updated',
+        title: 'Updated at',
+        icon: 'clock',
+        right: props.object.updated_at ? (
+          <SmartDateDisplayWidget date={props.object.updated_at} />
+        ) : (
+          <S.FieldValue>Unknown</S.FieldValue>
+        ),
+        disabled: true,
+        group: 'Object'
+      },
+      ...attributeItems,
+      {
+        key: 'open',
+        title: 'Open record',
+        icon: 'arrow-right',
+        group: 'Actions',
+        action: async () => {
+          props.open(props.object);
+        }
+      },
+      {
+        key: 'copy',
+        title: 'Copy ID',
+        icon: 'copy',
+        group: 'Actions',
+        action: async () => {
+          copyTextToClipboard(props.object.id);
+          notifications.showNotification({
+            title: 'Copied',
+            description: 'Relationship ID copied to clipboard',
+            type: NotificationType.SUCCESS
+          });
+        }
+      }
+    ];
+    const directive = await ioc.get(ComboBoxStore2).show(
+      new SimpleComboBoxDirective({
+        title: props.object.data.display || props.object.id,
+        subtitle: props.object.definition.definition.label || props.object.definition.definition.name,
+        event: event as any,
+        items
+      })
+    );
+    directive.getSelectedItem();
+  };
+
+  return (
+    <TableButtonWidget
+      icon="eye"
+      tooltip="Peek relationship"
+      action={(event) => {
+        showPeek(event as any);
+      }}
+    />
+  );
+};
+
+namespace S {
+  export const FieldValue = themed.div`
+    max-width: 360px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+}

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

@@ -2,18 +2,24 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import { ObjectType, Type, Variable } from '@journeyapps/db';
 import { ColumnDisplayWidget } from './ColumnDisplayWidget';
-import { SmartFilterWidget } from './SmartFilterWidget';
+import { SmartFilterMetadataWidget, SmartFilterWidget } from './SmartFilterWidget';
 import { SimpleFilter } from '../filters';
+import { PanelTitleToolbarButtonWidget } from '@journeyapps-labs/reactor-mod';
+import type { SortDirection } from '../query-simple/SimpleQuery';
 
 export interface SmartColumnWidgetProps {
   variable: Variable;
   type?: ObjectType;
   filter?: SimpleFilter;
+  sortDirection?: SortDirection;
+  onToggleSort?: () => Promise<any> | any;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
 export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
-  let display = <ColumnDisplayWidget label={props.variable.label || props.variable.name} />;
+  const baseLabel = props.variable.label || props.variable.name;
+  const displayLabel = props.sortDirection ? `${baseLabel} ${props.sortDirection === 'asc' ? '↑' : '↓'}` : baseLabel;
+  let display = <ColumnDisplayWidget label={displayLabel} onClick={props.onToggleSort} />;
   if (props.type) {
     display = (
       <S.TypeGroup>
@@ -24,14 +30,23 @@ export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
   }
   return (
     <S.Container>
-      {display}
-      <SmartFilterWidget filter={props.filter} variable={props.variable} filterChanged={props.filterChanged} />
+      <S.TopRow>
+        {display}
+        <SmartFilterWidget filter={props.filter} variable={props.variable} filterChanged={props.filterChanged} />
+      </S.TopRow>
     </S.Container>
   );
 };
 
 namespace S {
   export const Container = styled.div`
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 3px;
+  `;
+
+  export const TopRow = styled.div`
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -43,4 +58,11 @@ namespace S {
   `;
 
   export const TypeGroup = styled.div``;
+
+  export const FilterMetaRow = styled.div`
+    display: flex;
+    align-items: center;
+    column-gap: 2px;
+    justify-content: flex-start;
+  `;
 }

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

@@ -1,8 +1,16 @@
 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';
+import { Variable } from '@journeyapps/db';
+import {
+  DualIconWidget,
+  IconWidget,
+  MetadataWidget,
+  ioc,
+  setupTooltipProps,
+  styled,
+  TooltipPosition
+} from '@journeyapps-labs/reactor-mod';
+import { TypeEngine } from '../../../forms/TypeEngine';
+import { SimpleFilter, StatementMatch } from '../filters';
 
 export interface SmartFilterWidgetProps {
   variable: Variable;
@@ -10,71 +18,113 @@ export interface SmartFilterWidgetProps {
   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);
-            }
-          }
-        }}
-      />
-    );
+export interface SmartFilterMetadataWidgetProps {
+  variable: Variable;
+  filter?: SimpleFilter;
+  className?: any;
+}
+
+const getFilterSummary = (filter?: SimpleFilter): string => {
+  const metadata = filter?.getMetadata() || [];
+  if (metadata.length === 0) {
+    return 'No filter applied';
   }
-  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);
-            }
-          }
-        }}
-      />
-    );
+  const match = filter?.match === StatementMatch.ALL ? 'AND' : 'OR';
+  const joined = metadata.map((entry) => `${entry.label} ${entry.value}`).join(` ${match} `);
+  return `Filtered by: ${joined}`.trim();
+};
+
+const getFilterTooltip = (filter?: SimpleFilter): string => {
+  if (!filter || !filter.statements || filter.statements.length === 0) {
+    return 'Click to add a filter';
+  }
+  return `${getFilterSummary(filter)}. Click to edit filter`;
+};
+
+export const SmartFilterMetadataWidget: React.FC<SmartFilterMetadataWidgetProps> = (props) => {
+  const metadata = props.filter?.getMetadata() || [];
+  if (metadata.length === 0) {
+    return null;
   }
-  return null;
+  const matchLabel = props.filter?.match === StatementMatch.ALL ? 'AND' : 'OR';
+  return (
+    <S.MetaList className={props.className}>
+      {metadata.map((entry, index) => {
+        return (
+          <React.Fragment key={`${entry.label}-${entry.value}-${index}`}>
+            {index > 0 ? <S.MetaJoiner>{matchLabel}</S.MetaJoiner> : null}
+            <MetadataWidget {...entry} active={entry.active ?? true} />
+          </React.Fragment>
+        );
+      })}
+    </S.MetaList>
+  );
 };
+
+export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
+  const isActive = (props.filter?.statements?.length || 0) > 0;
+  const handler = ioc.get(TypeEngine).getHandler(props.variable.type);
+  if (!handler?.setupFilter) {
+    return null;
+  }
+  return (
+    <S.FilterButton
+      active={isActive}
+      {...setupTooltipProps({
+        tooltip: getFilterTooltip(props.filter),
+        tooltipPos: TooltipPosition.BOTTOM
+      })}
+      onClick={async (event) => {
+        const filter = await handler.setupFilter?.({
+          variable: props.variable,
+          filter: props.filter,
+          position: event.nativeEvent
+        });
+        if (filter == null) {
+          return;
+        }
+        props.filterChanged(filter);
+      }}
+    >
+      {isActive ? <DualIconWidget icon1="filter" icon2="check" /> : <IconWidget icon="filter" />}
+    </S.FilterButton>
+  );
+};
+
+namespace S {
+  export const MetaList = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+  `;
+
+  export const MetaJoiner = styled.div`
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: ${(p) => p.theme.text.secondary};
+    padding: 0 2px;
+  `;
+
+  export const FilterButton = styled.button<{ active: boolean }>`
+    position: relative;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    border-radius: 6px;
+    border: 1px solid ${(p) => (p.active ? p.theme.guide.accent : p.theme.button.border)};
+    background: ${(p) => (p.active ? p.theme.buttonPrimary.background : p.theme.button.background)};
+    color: ${(p) => (p.active ? p.theme.buttonPrimary.color : p.theme.button.color)};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+
+    &:hover {
+      color: ${(p) => (p.active ? p.theme.buttonPrimary.colorHover : p.theme.button.colorHover)};
+    }
+  `;
+}