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

package/src/panels/query/QueryPanelWidget.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { QueryPanelModel } from './QueryPanelFactory';
 import { observer } from 'mobx-react';
 import styled from '@emotion/styled';
@@ -22,7 +22,16 @@ namespace S {
 }
 
 export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props) => {
-  const [page, setPage] = useState<Page>(null);
+  const [displayPage, setDisplayPage] = useState<Page>(null);
+  const [loading, setLoading] = useState(false);
+  const displayPageRef = useRef<Page>(null);
+  const pendingDisposerRef = useRef<() => void>(null);
+
+  const setVisiblePage = (page: Page) => {
+    displayPageRef.current = page;
+    setDisplayPage(page);
+  };
+
   useEffect(() => {
     if (!props.model.query) {
       return;
@@ -33,13 +42,53 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
   useEffect(() => {
     return autorun(() => {
       if (props.model.query) {
-        setPage(props.model.query.getPage(props.model.current_page));
+        const nextPage = props.model.query.getPage(props.model.current_page);
+        const currentPage = displayPageRef.current;
+
+        if (!currentPage) {
+          setVisiblePage(nextPage);
+          setLoading(!!nextPage?.loading);
+          return;
+        }
+
+        if (nextPage === currentPage) {
+          setLoading(!!nextPage.loading);
+          return;
+        }
+
+        if (!nextPage.loading) {
+          pendingDisposerRef.current?.();
+          pendingDisposerRef.current = null;
+          setVisiblePage(nextPage);
+          setLoading(false);
+          return;
+        }
+
+        setLoading(true);
+        pendingDisposerRef.current?.();
+        pendingDisposerRef.current = autorun(() => {
+          if (!nextPage.loading) {
+            pendingDisposerRef.current?.();
+            pendingDisposerRef.current = null;
+            setVisiblePage(nextPage);
+            setLoading(false);
+          }
+        });
       }
     });
   }, [props.model.query]);
 
+  useEffect(() => {
+    return () => {
+      pendingDisposerRef.current?.();
+      pendingDisposerRef.current = null;
+    };
+  }, []);
+
+  const activePage = displayPage || (props.model.query ? props.model.query.getPage(props.model.current_page) : null);
+
   return (
-    <LoadingPanelWidget loading={!props.model.query || !page}>
+    <LoadingPanelWidget loading={!props.model.query || !activePage}>
       {() => {
         return (
           <S.Container>
@@ -47,9 +96,12 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
               top={
                 <TableControlsWidget
                   query={props.model.query}
-                  current_page={page}
+                  current_page={activePage}
+                  loading={loading}
+                  onLoadSavedQuery={async (id) => {
+                    await props.model.loadSavedQuery(id);
+                  }}
                   goToPage={(index) => {
-                    setPage(props.model.query.getPage(index));
                     props.model.current_page = index;
                   }}
                 />
@@ -57,15 +109,18 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
               bottom={
                 <TableControlsWidget
                   query={props.model.query}
-                  current_page={page}
+                  current_page={activePage}
+                  loading={loading}
+                  onLoadSavedQuery={async (id) => {
+                    await props.model.loadSavedQuery(id);
+                  }}
                   goToPage={(index) => {
-                    setPage(props.model.query.getPage(index));
                     props.model.current_page = index;
                   }}
                 />
               }
             >
-              <PageResultsWidget query={props.model.query} page={page} />
+              <PageResultsWidget query={props.model.query} page={activePage} />
             </BorderLayoutWidget>
           </S.Container>
         );

package/src/panels/query/TableControlsWidget.tsx

@@ -1,153 +1,75 @@
 import * as React from 'react';
-import {
-  ComboBoxItem,
-  ioc,
-  PanelButtonWidget,
-  PanelDropdownWidget,
-  setupTooltipProps,
-  styled,
-  theme,
-  ThemeStore,
-  TooltipPosition,
-  WorkspaceStore
-} from '@journeyapps-labs/reactor-mod';
+import { BooleanSetting, IconWidget, ioc, PrefsStore, styled } from '@journeyapps-labs/reactor-mod';
 import { AbstractQuery } from '../../core/query/AbstractQuery';
 import { observer } from 'mobx-react';
 import * as _ from 'lodash';
 import { Page } from '../../core/query/Page';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SimplePage } from '../../core/query/query-simple/SimplePage';
-import { QueryPanelModel } from './QueryPanelFactory';
-import { ChangedModelQuery } from '../../core/query/query-changed/ChangedModelQuery';
 import { SimpleQuery } from '../../core/query/query-simple/SimpleQuery';
+import { SavedQueryStore } from '../../stores/SavedQueryStore';
+import { PageControlsWidget } from './table-controls/PageControlsWidget';
+import { QueryControlsWidget } from './table-controls/QueryControlsWidget';
+import { SortControlsWidget } from './table-controls/SortControlsWidget';
+import { ChangesControlsWidget } from './table-controls/ChangesControlsWidget';
+import { FilterControlsWidget } from './table-controls/FilterControlsWidget';
+import { QueryControlPreferences } from '../../preferences/QueryControlPreferences';
 
 export interface TableControlsWidgetProps {
   current_page: Page;
   goToPage?: (index: number) => any;
   className?: any;
   query: AbstractQuery;
+  onLoadSavedQuery?: (id: string) => Promise<any> | any;
+  loading?: boolean;
 }
 
 export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer((props) => {
-  const _theme = ioc.get(ThemeStore).getCurrentTheme(theme);
-  const dirtyObjects = props.query.getDirtyObjects();
+  const prefsStore = ioc.get(PrefsStore);
+  const simpleQuery = props.query instanceof SimpleQuery ? props.query : null;
+  const savedQueries = simpleQuery ? ioc.get(SavedQueryStore).getSavedForQuery(simpleQuery) : [];
+  const activeSavedQuery =
+    simpleQuery &&
+    (savedQueries.find((saved) => {
+      return _.isEqual(saved.query, simpleQuery.serialize());
+    }) ||
+      null);
+  const showSortControls = prefsStore.getPreference<BooleanSetting>(QueryControlPreferences.SHOW_SORT_CONTROLS).checked;
+  const showFilterControls = prefsStore.getPreference<BooleanSetting>(
+    QueryControlPreferences.SHOW_FILTER_CONTROLS
+  ).checked;
+
   return (
     <S.Container className={props.className}>
-      <PanelButtonWidget
-        disabled={props.current_page?.index === 0}
-        label="Prev"
-        action={() => {
-          props.goToPage(props.current_page.index - 1);
-        }}
-      />
-      <PanelButtonWidget
-        disabled={props.query.totalPages == props.current_page.index + 1}
-        label="Next"
-        action={() => {
-          props.goToPage(props.current_page.index + 1);
-        }}
+      <PageControlsWidget query={props.query} currentPage={props.current_page} goToPage={props.goToPage} />
+      <QueryControlsWidget
+        query={props.query}
+        simpleQuery={simpleQuery}
+        activeSavedQueryName={activeSavedQuery?.name || null}
+        onLoadSavedQuery={props.onLoadSavedQuery}
       />
-      <S.PageSelector>
-        <PanelDropdownWidget
-          onChange={({ key }) => {
-            props.goToPage(parseInt(key));
-          }}
-          selected={`${props.current_page.index}`}
-          items={_.range(0, props.query.totalPages).map((r) => {
-            return {
-              title: `${r + 1}`,
-              key: `${r}`
-            } as ComboBoxItem;
-          })}
-        />
-        <S.TotalPages>/ {props.query.totalPages}</S.TotalPages>
-      </S.PageSelector>
-      {props.current_page instanceof SimplePage ? (
-        <PanelButtonWidget
-          label="Page"
-          tooltip="Reload page"
-          icon="refresh"
-          action={async () => {
-            await (props.current_page as SimplePage).load();
-          }}
-        />
+      {simpleQuery && showFilterControls ? (
+        <FilterControlsWidget simpleQuery={simpleQuery} goToPage={props.goToPage} />
       ) : null}
-      <PanelButtonWidget
-        tooltip="Reload Query"
-        icon="refresh"
-        action={async (event, loading) => {
-          await props.query.load();
-        }}
-      />
-      {dirtyObjects.length > 0 ? (
-        <>
-          <PanelButtonWidget
-            label={`Save all [${dirtyObjects.length}]`}
-            icon="save"
-            iconColor={_theme.status.success}
-            action={async (event, loading) => {
-              props.query.batchSave();
-            }}
-          />
-          <span
-            {...setupTooltipProps({
-              tooltip: 'Discard all edits',
-              tooltipPos: TooltipPosition.RIGHT
-            })}
-          >
-            <S.RevertButton
-              icon="arrow-rotate-back"
-              onClick={() => {
-                props.current_page.reset();
-              }}
-            />
-          </span>
-          {props.query instanceof SimpleQuery ? (
-            <span
-              {...setupTooltipProps({
-                tooltip: 'View changed models',
-                tooltipPos: TooltipPosition.RIGHT
-              })}
-            >
-              <S.RevertButton
-                icon="eye"
-                onClick={() => {
-                  ioc
-                    .get(WorkspaceStore)
-                    .addModel(new QueryPanelModel(new ChangedModelQuery(props.query as SimpleQuery)));
-                }}
-              />
-            </span>
-          ) : null}
-        </>
+      {simpleQuery && showSortControls ? (
+        <SortControlsWidget simpleQuery={simpleQuery} goToPage={props.goToPage} />
       ) : null}
+      <ChangesControlsWidget query={props.query} currentPage={props.current_page} />
+      {props.loading ? <S.Loading icon="spinner" spin={true} /> : null}
     </S.Container>
   );
 });
+
 namespace S {
   export const Container = styled.div`
     display: flex;
     flex-direction: row;
-    column-gap: 5px;
+    column-gap: 20px;
+    row-gap: 20px;
     padding: 5px 5px;
     align-items: center;
+    flex-wrap: wrap;
   `;
 
-  export const PageSelector = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  `;
-
-  export const TotalPages = styled.div`
-    color: ${(p) => p.theme.text.primary};
-    padding-left: 5px;
-  `;
-
-  export const RevertButton = styled(FontAwesomeIcon)`
-    color: ${(p) => p.theme.status.success};
-    font-size: 12px;
-    padding: 5px;
-    cursor: pointer;
+  export const Loading = styled(IconWidget)`
+    color: ${(p) => p.theme.button.icon};
   `;
 }

package/src/panels/query/table-controls/ChangesControlsWidget.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  InputContainerWidget,
+  ioc,
+  PanelButtonWidget,
+  styled,
+  theme,
+  ThemeStore,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
+import { AbstractQuery } from '../../../core/query/AbstractQuery';
+import { Page } from '../../../core/query/Page';
+import { ChangedModelQuery } from '../../../core/query/query-changed/ChangedModelQuery';
+import { SimpleQuery } from '../../../core/query/query-simple/SimpleQuery';
+import { QueryPanelModel } from '../QueryPanelFactory';
+import { observer } from 'mobx-react';
+
+export interface ChangesControlsWidgetProps {
+  query: AbstractQuery;
+  currentPage: Page;
+}
+
+export const ChangesControlsWidget: React.FC<ChangesControlsWidgetProps> = observer((props) => {
+  const _theme = ioc.get(ThemeStore).getCurrentTheme(theme);
+  const dirtyObjects = props.query.getDirtyObjects();
+
+  if (dirtyObjects.length === 0) {
+    return null;
+  }
+
+  return (
+    <InputContainerWidget label="Changes">
+      <S.Group>
+        <PanelButtonWidget
+          label={`Save all [${dirtyObjects.length}]`}
+          icon="save"
+          iconColor={_theme.status.success}
+          action={async () => {
+            props.query.batchSave();
+          }}
+        />
+        <PanelButtonWidget
+          tooltip="Discard all edits"
+          icon="arrow-rotate-back"
+          action={() => {
+            props.currentPage.reset();
+          }}
+        />
+        {props.query instanceof SimpleQuery ? (
+          <PanelButtonWidget
+            tooltip="View changed models"
+            icon="eye"
+            action={() => {
+              ioc.get(WorkspaceStore).addModel(new QueryPanelModel(new ChangedModelQuery(props.query as SimpleQuery)));
+            }}
+          />
+        ) : null}
+      </S.Group>
+    </InputContainerWidget>
+  );
+});
+
+namespace S {
+  export const Group = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+  `;
+}

package/src/panels/query/table-controls/FilterControlsWidget.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import {
+  ComboBoxItem,
+  ComboBoxStore2,
+  InputContainerWidget,
+  PanelButtonMode,
+  PanelButtonWidget,
+  SimpleComboBoxDirective,
+  ioc,
+  styled
+} from '@journeyapps-labs/reactor-mod';
+import { SimpleQuery } from '../../../core/query/query-simple/SimpleQuery';
+import { SmartFilterMetadataWidget } from '../../../core/query/widgets/SmartFilterWidget';
+
+export interface FilterControlsWidgetProps {
+  simpleQuery: SimpleQuery;
+  goToPage?: (index: number) => any;
+}
+
+export const FilterControlsWidget: React.FC<FilterControlsWidgetProps> = (props) => {
+  const showAddFilterMenu = async (event: React.MouseEvent<any>) => {
+    const fields = props.simpleQuery.filterState.getFilterableFields();
+    if (fields.length === 0) {
+      return;
+    }
+    const directive = await ioc.get(ComboBoxStore2).show(
+      new SimpleComboBoxDirective({
+        title: 'Add filter',
+        event: event as any,
+        items: fields.map((field) => {
+          return {
+            key: field.key,
+            title: field.label,
+            action: async () => {
+              await props.simpleQuery.filterState.setupFilterForField(field.key, event.nativeEvent as any);
+              props.goToPage?.(0);
+            }
+          } as ComboBoxItem;
+        })
+      })
+    );
+    directive.getSelectedItem();
+  };
+
+  const filters = props.simpleQuery.filterState.getActiveFilters();
+
+  return (
+    <InputContainerWidget label="Filters">
+      <S.Group>
+        <PanelButtonWidget
+          icon="plus"
+          tooltip="Add filter"
+          action={async (event) => {
+            await showAddFilterMenu(event as any);
+          }}
+        />
+        {filters.map((entry) => {
+          const key = entry.variable.name;
+          const label = entry.variable.label || entry.variable.name;
+          return (
+            <S.FilterItem
+              key={key}
+              onContextMenu={async (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                const directive = await ioc.get(ComboBoxStore2).show(
+                  new SimpleComboBoxDirective({
+                    title: label,
+                    event: event as any,
+                    items: [
+                      {
+                        key: 'edit',
+                        title: 'Edit filter',
+                        icon: 'pencil',
+                        action: async () => {
+                          await props.simpleQuery.filterState.setupFilterForField(key, event.nativeEvent as any);
+                          props.goToPage?.(0);
+                        }
+                      },
+                      {
+                        key: 'clear',
+                        title: 'Clear filter',
+                        icon: 'trash',
+                        action: async () => {
+                          entry.filter.delete();
+                          props.goToPage?.(0);
+                        }
+                      }
+                    ]
+                  })
+                );
+                directive.getSelectedItem();
+              }}
+            >
+              <S.FilterLabel>{label}</S.FilterLabel>
+              <SmartFilterMetadataWidget filter={entry.filter} variable={entry.filter.variable} />
+              <S.CloseButton
+                mode={PanelButtonMode.LINK}
+                icon="close"
+                tooltip={`Clear ${label} filter`}
+                action={async () => {
+                  entry.filter.delete();
+                  props.goToPage?.(0);
+                }}
+              />
+            </S.FilterItem>
+          );
+        })}
+      </S.Group>
+    </InputContainerWidget>
+  );
+};
+
+namespace S {
+  export const Group = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+  `;
+
+  export const FilterItem = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 4px;
+    padding: 1px 3px;
+
+    &:hover {
+      background: ${(p) => p.theme.forms.groupBorder};
+    }
+  `;
+
+  export const CloseButton = styled(PanelButtonWidget)`
+    padding: 2px;
+  `;
+
+  export const FilterLabel = styled.div`
+    font-size: 12px;
+    color: ${(p) => p.theme.text.secondary};
+    padding-right: 4px;
+  `;
+}

package/src/panels/query/table-controls/PageControlsWidget.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import {
+  ComboBoxItem,
+  IconWidget,
+  InputContainerWidget,
+  PanelButtonWidget,
+  PanelDropdownWidget,
+  styled
+} from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { AbstractQuery } from '../../../core/query/AbstractQuery';
+import { Page } from '../../../core/query/Page';
+import { observer } from 'mobx-react';
+
+export interface PageControlsWidgetProps {
+  query: AbstractQuery;
+  currentPage: Page;
+  goToPage?: (index: number) => any;
+}
+
+export const PageControlsWidget: React.FC<PageControlsWidgetProps> = observer((props) => {
+  const hasCurrentPage = !!props.currentPage;
+  const currentPageIndex = props.currentPage?.index ?? 0;
+
+  return (
+    <InputContainerWidget label="Page">
+      <S.Group>
+        <PanelButtonWidget
+          disabled={!hasCurrentPage || currentPageIndex === 0}
+          label="Prev"
+          action={() => {
+            if (!hasCurrentPage) {
+              return;
+            }
+            props.goToPage?.(currentPageIndex - 1);
+          }}
+        />
+        <PanelButtonWidget
+          disabled={!hasCurrentPage || props.query.totalPages === currentPageIndex + 1}
+          label="Next"
+          action={() => {
+            if (!hasCurrentPage) {
+              return;
+            }
+            props.goToPage?.(currentPageIndex + 1);
+          }}
+        />
+        <S.PageSelector>
+          <PanelDropdownWidget
+            onChange={({ key }) => {
+              props.goToPage?.(parseInt(key));
+            }}
+            selected={`${currentPageIndex}`}
+            items={_.range(0, props.query.totalPages).map((r) => {
+              return {
+                title: `${r + 1}`,
+                key: `${r}`
+              } as ComboBoxItem;
+            })}
+          />
+          <S.TotalPages>
+            / {props.query.totalPages === 0 ? <S.Spinner icon="spinner" spin={true} /> : props.query.totalPages}
+          </S.TotalPages>
+        </S.PageSelector>
+      </S.Group>
+    </InputContainerWidget>
+  );
+});
+
+namespace S {
+  export const Group = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+  `;
+
+  export const PageSelector = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  `;
+
+  export const TotalPages = styled.div`
+    color: ${(p) => p.theme.text.primary};
+    padding-left: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  `;
+
+  export const Spinner = styled(IconWidget)`
+    color: ${(p) => p.theme.text.secondary};
+  `;
+}