@journeyapps-labs/reactor-mod-data-browser 3.5.0 → 3.6.1

package/src/panels/query/QueryPanelFactory.tsx

@@ -10,6 +10,9 @@ import { SavedQueryStore } from '../../stores/SavedQueryStore';
 import { AbstractConnection } from '../../core/AbstractConnection';
 import { SharedConnectionPanelFactory } from '../_shared/SharedConnectionPanelFactory';
 import { Page } from '../../core/query/Page';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { action } from 'mobx';
+import * as _ from 'lodash';
 
 export class QueryPanelModel extends ReactorPanelModel {
   @inject(ConnectionStore)
@@ -24,6 +27,9 @@ export class QueryPanelModel extends ReactorPanelModel {
   @observable.ref
   accessor current_page_data: Page | null;
 
+  @observable.ref
+  accessor selected_models: SchemaModelObject[];
+
   accessor table_scroll_top: number;
   accessor table_scroll_left: number;
 
@@ -33,10 +39,26 @@ export class QueryPanelModel extends ReactorPanelModel {
     this.query = query;
     this.current_page = 0;
     this.current_page_data = null;
+    this.selected_models = [];
     this.table_scroll_top = 0;
     this.table_scroll_left = 0;
   }
 
+  @action clearSelection() {
+    this.selected_models = [];
+  }
+
+  @action mergeSelectionForPage(event: { page: Page; models: SchemaModelObject[] }) {
+    const pageRowKeys = new Set(event.page.asRows().map((row) => row.key));
+    const nextSelectedModels = this.selected_models.filter((model) => !pageRowKeys.has(model.id));
+    this.selected_models = _.uniqBy([...nextSelectedModels, ...event.models], (model) => model.id);
+  }
+
+  @action async reloadQuery() {
+    this.clearSelection();
+    await this.query.load();
+  }
+
   isSerializable() {
     return this.query instanceof AbstractSerializableQuery;
   }
@@ -71,6 +93,7 @@ export class QueryPanelModel extends ReactorPanelModel {
     }
     this.current_page = 0;
     this.current_page_data = null;
+    this.clearSelection();
     this.query = query;
     await query.load();
   }

package/src/panels/query/QueryPanelWidget.tsx

@@ -9,6 +9,7 @@ import { PageResultsWidget } from './PageResultsWidget';
 import { TableControlsWidget } from './TableControlsWidget';
 import { autorun } from 'mobx';
 import { TableControlsPositionPreference, TableControlsPositionValue } from '../../preferences/QueryControlPreferences';
+import { deleteSchemaModels } from '../../core/delete-schema-models';
 
 export interface QueryPanelWidgetProps {
   model: QueryPanelModel;
@@ -101,6 +102,12 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
       query={props.model.query}
       current_page={activePage}
       loading={loading}
+      selectedCount={props.model.selected_models.length}
+      onDeleteSelected={async () => {
+        await deleteSchemaModels({
+          models: props.model.selected_models
+        });
+      }}
       onLoadSavedQuery={async (id) => {
         await props.model.loadSavedQuery(id);
       }}
@@ -132,6 +139,13 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
               <PageResultsWidget
                 query={props.model.query}
                 page={activePage}
+                selectedModels={props.model.selected_models}
+                onSelectionChange={(event) => {
+                  props.model.mergeSelectionForPage({
+                    page: activePage,
+                    models: event.rows.map((row) => row.model)
+                  });
+                }}
                 scrollTop={props.model.table_scroll_top}
                 scrollLeft={props.model.table_scroll_left}
                 onScroll={({ top, left }) => {

package/src/panels/query/TableControlsWidget.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { BooleanSetting, IconWidget, ioc, PrefsStore, styled } from '@journeyapps-labs/reactor-mod';
+import {
+  BooleanSetting,
+  IconWidget,
+  ioc,
+  PanelButtonMode,
+  PanelButtonWidget,
+  PrefsStore,
+  styled
+} from '@journeyapps-labs/reactor-mod';
 import { AbstractQuery } from '../../core/query/AbstractQuery';
 import { observer } from 'mobx-react';
 import * as _ from 'lodash';
@@ -12,6 +20,8 @@ import { SortControlsWidget } from './table-controls/SortControlsWidget';
 import { ChangesControlsWidget } from './table-controls/ChangesControlsWidget';
 import { FilterControlsWidget } from './table-controls/FilterControlsWidget';
 import { QueryControlPreferences } from '../../preferences/QueryControlPreferences';
+import { SelectionControlsWidget } from './table-controls/SelectionControlsWidget';
+import { CreateModelAction } from '../../actions/schema-definitions/CreateModelAction';
 
 export interface TableControlsWidgetProps {
   current_page: Page;
@@ -20,6 +30,8 @@ export interface TableControlsWidgetProps {
   query: AbstractQuery;
   onLoadSavedQuery?: (id: string) => Promise<any> | any;
   loading?: boolean;
+  selectedCount: number;
+  onDeleteSelected: () => Promise<void>;
 }
 
 export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer((props) => {
@@ -36,9 +48,20 @@ export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer(
   const showFilterControls = prefsStore.getPreference<BooleanSetting>(
     QueryControlPreferences.SHOW_FILTER_CONTROLS
   ).checked;
+  const createModelButton = simpleQuery?.options.definition
+    ? CreateModelAction.get().renderAsButton(
+        (btn) => {
+          return <PanelButtonWidget {...btn} label="Create model" mode={PanelButtonMode.PRIMARY} />;
+        },
+        {
+          targetEntity: simpleQuery.options.definition
+        }
+      )
+    : null;
 
   return (
     <S.Container className={props.className}>
+      {createModelButton}
       <PageControlsWidget query={props.query} currentPage={props.current_page} goToPage={props.goToPage} />
       <QueryControlsWidget
         query={props.query}
@@ -52,6 +75,7 @@ export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer(
       {simpleQuery && showSortControls ? (
         <SortControlsWidget simpleQuery={simpleQuery} goToPage={props.goToPage} />
       ) : null}
+      <SelectionControlsWidget selectedCount={props.selectedCount} onDeleteSelected={props.onDeleteSelected} />
       <ChangesControlsWidget query={props.query} currentPage={props.current_page} />
       {props.loading ? <S.Loading icon="spinner" spin={true} /> : null}
     </S.Container>
@@ -65,7 +89,7 @@ namespace S {
     column-gap: 20px;
     row-gap: 20px;
     padding: 5px 5px;
-    align-items: center;
+    align-items: flex-end;
     flex-wrap: wrap;
   `;
 

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

@@ -36,7 +36,7 @@ export const ChangesControlsWidget: React.FC<ChangesControlsWidgetProps> = obser
           icon="save"
           iconColor={_theme.status.success}
           action={async () => {
-            props.query.batchSave();
+            await props.query.batchSave();
           }}
         />
         <PanelButtonWidget

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

@@ -21,6 +21,9 @@ export interface PageControlsWidgetProps {
 export const PageControlsWidget: React.FC<PageControlsWidgetProps> = observer((props) => {
   const hasCurrentPage = !!props.currentPage;
   const currentPageIndex = props.currentPage?.index ?? 0;
+  const totalPages = props.query.totalPages;
+  const totalPagesLoading = totalPages === 0 && !!props.currentPage?.loading;
+  const canGoNext = hasCurrentPage && totalPages > currentPageIndex + 1;
 
   return (
     <InputContainerWidget label="Page">
@@ -36,7 +39,7 @@ export const PageControlsWidget: React.FC<PageControlsWidgetProps> = observer((p
           }}
         />
         <PanelButtonWidget
-          disabled={!hasCurrentPage || props.query.totalPages === currentPageIndex + 1}
+          disabled={!canGoNext}
           label="Next"
           action={() => {
             if (!hasCurrentPage) {
@@ -47,20 +50,19 @@ export const PageControlsWidget: React.FC<PageControlsWidgetProps> = observer((p
         />
         <S.PageSelector>
           <PanelDropdownWidget
+            disabled={totalPages === 0}
             onChange={({ key }) => {
               props.goToPage?.(parseInt(key));
             }}
             selected={`${currentPageIndex}`}
-            items={_.range(0, props.query.totalPages).map((r) => {
+            items={_.range(0, 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.TotalPages>/ {totalPagesLoading ? <S.Spinner icon="spinner" spin={true} /> : totalPages}</S.TotalPages>
         </S.PageSelector>
       </S.Group>
     </InputContainerWidget>

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {
+  InputContainerWidget,
+  ioc,
+  PanelButtonMode,
+  PanelButtonWidget,
+  theme,
+  ThemeStore
+} from '@journeyapps-labs/reactor-mod';
+
+export interface SelectionControlsWidgetProps {
+  selectedCount: number;
+  onDeleteSelected: () => Promise<void>;
+}
+
+export const SelectionControlsWidget: React.FC<SelectionControlsWidgetProps> = (props) => {
+  const _theme = ioc.get(ThemeStore).getCurrentTheme(theme);
+
+  if (props.selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <InputContainerWidget label="Selection">
+      <PanelButtonWidget
+        mode={PanelButtonMode.PRIMARY}
+        label={`Delete selected [${props.selectedCount}]`}
+        icon="trash"
+        iconColor={_theme.status.failed}
+        action={props.onDeleteSelected}
+      />
+    </InputContainerWidget>
+  );
+};