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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -21,8 +21,8 @@
     "@journeyapps-labs/common-sdk": "^1.0.3",
     "@journeyapps-labs/common-utils": "^1.0.1",
     "@journeyapps-labs/lib-reactor-data-layer": "1.0.11",
-    "@journeyapps-labs/reactor-mod": "5.4.0",
-    "@journeyapps-labs/reactor-mod-editor": "2.2.2",
+    "@journeyapps-labs/reactor-mod": "5.6.0",
+    "@journeyapps-labs/reactor-mod-editor": "2.2.4",
     "@journeyapps/db": "^8.1.1",
     "@journeyapps/parser-schema": "^8.2.5",
     "@projectstorm/react-workspaces-core": "4.2.3",

package/src/DataBrowserModule.ts

@@ -18,6 +18,7 @@ import { EditSchemaModelAction } from './actions/schema-model/EditSchemaModelAct
 import { TypeEngine } from './forms/TypeEngine';
 import { ViewSchemaModelAsJsonAction } from './actions/schema-model/ViewSchemaModelAsJsonAction';
 import { ViewHasManyAction } from './actions/schema-model/ViewHasManyAction';
+import { DeleteSchemaModelAction } from './actions/schema-model/DeleteSchemaModelAction';
 import { ModelJsonPanelFactory } from './panels/model-json/ModelJsonPanelFactory';
 import { SchemaModelIndexDefinition } from './entities/SchemaModelIndexDefinition';
 import { SavedQueryStore } from './stores/SavedQueryStore';
@@ -52,6 +53,7 @@ export class DataBrowserModule extends AbstractReactorModule {
     actionStore.registerAction(new EditSchemaModelAction());
     actionStore.registerAction(new ViewSchemaModelAsJsonAction());
     actionStore.registerAction(new ViewHasManyAction());
+    actionStore.registerAction(new DeleteSchemaModelAction());
     actionStore.registerAction(new OpenSavedQueryAction());
     actionStore.registerAction(new RemoveSavedQueryAction());
 

package/src/actions/schema-model/DeleteSchemaModelAction.ts

@@ -0,0 +1,43 @@
+import {
+  ActionStore,
+  EntityAction,
+  EntityActionEvent,
+  ioc,
+  setupDeleteConfirmation
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { runDeleteSchemaModels } from '../../core/delete-schema-models';
+import { ModelPanelModel } from '../../panels/model/ModelPanelFactory';
+
+export interface DeleteSchemaModelActionEvent extends EntityActionEvent<SchemaModelObject> {
+  sourcePanel?: ModelPanelModel;
+}
+
+export class DeleteSchemaModelAction extends EntityAction<SchemaModelObject, DeleteSchemaModelActionEvent> {
+  static ID = 'DELETE_SCHEMA_MODEL';
+
+  constructor() {
+    super({
+      id: DeleteSchemaModelAction.ID,
+      name: 'Delete schema model',
+      icon: 'trash',
+      target: DataBrowserEntities.SCHEMA_MODEL_OBJECT
+    });
+
+    setupDeleteConfirmation({
+      action: this
+    });
+  }
+
+  async fireEvent(event: DeleteSchemaModelActionEvent): Promise<any> {
+    await runDeleteSchemaModels({
+      models: [event.targetEntity],
+      sourcePanel: event.sourcePanel
+    });
+  }
+
+  static get() {
+    return ioc.get(ActionStore).getActionByID<DeleteSchemaModelAction>(DeleteSchemaModelAction.ID);
+  }
+}

package/src/core/AbstractConnection.ts

@@ -94,6 +94,27 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     }
   }
 
+  async batchDelete(models: SchemaModelObject[]) {
+    if (models.length === 0) {
+      return;
+    }
+    const database = await this.getConnection();
+    let batch = new database.Batch();
+    for (let model of models) {
+      if (!model?.model?.persisted) {
+        continue;
+      }
+      batch.destroy(model.model);
+    }
+    await batch.execute();
+    for (let model of models) {
+      if (!model?.model?.persisted) {
+        continue;
+      }
+      model.definition.cache.delete(model.id);
+    }
+  }
+
   getSchemaModelDefinitionByName(name: string) {
     return this.schema_models.items.find((i) => i.definition.name === name);
   }

package/src/core/delete-schema-models.ts

@@ -0,0 +1,131 @@
+import { CrudError } from '@journeyapps/db';
+import {
+  DialogStore,
+  ioc,
+  NotificationStore,
+  NotificationType,
+  ReactorPanelModel,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { SchemaModelObject } from './SchemaModelObject';
+import { QueryPanelModel } from '../panels/query/QueryPanelFactory';
+import { ModelPanelModel } from '../panels/model/ModelPanelFactory';
+
+export interface DeleteSchemaModelsOptions {
+  models: SchemaModelObject[];
+  sourcePanel?: ReactorPanelModel;
+}
+
+const normalizeModels = (models: SchemaModelObject[]) => {
+  return _.uniqBy(
+    models.filter((model) => model?.model?.persisted),
+    (model) => model.id
+  );
+};
+
+const getErrorMessage = (error: unknown) => {
+  if (error instanceof CrudError) {
+    return error.firstError()?.detail || error.message;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return 'An unknown error occurred while deleting the selected models.';
+};
+
+const buildDeleteMarkdown = (models: SchemaModelObject[]) => {
+  if (models.length === 1) {
+    const model = models[0];
+    const display = model.data?.display || model.id;
+    return `Delete **${display}**?\n\nThis action cannot be undone.`;
+  }
+
+  return `Delete **${models.length}** models?\n\nThis action cannot be undone.`;
+};
+
+export const runDeleteSchemaModels = async (options: DeleteSchemaModelsOptions): Promise<boolean> => {
+  const models = normalizeModels(options.models);
+
+  if (models.length === 0) {
+    return false;
+  }
+
+  const definition = models[0].definition;
+  const mismatchedModel = models.find((model) => model.definition.connection !== definition.connection);
+  if (mismatchedModel) {
+    ioc.get(NotificationStore).showNotification({
+      title: 'Cannot delete models',
+      description: 'Selected models must come from the same connection.',
+      type: NotificationType.ERROR
+    });
+    return false;
+  }
+
+  try {
+    await definition.connection.batchDelete(models);
+    const sourcePanelID = options.sourcePanel?.id;
+    if (options.sourcePanel instanceof ModelPanelModel) {
+      options.sourcePanel.delete();
+    }
+    await Promise.all(
+      ioc
+        .get(WorkspaceStore)
+        .flatten(ioc.get(WorkspaceStore).getRoot())
+        .map(async (panel) => {
+          if (panel.id === sourcePanelID) {
+            return;
+          }
+          if (panel instanceof QueryPanelModel) {
+            await panel.reloadQuery();
+            return;
+          }
+          if (panel instanceof ModelPanelModel && models.some((model) => model.id === panel.model?.id)) {
+            panel.delete();
+          }
+        })
+    );
+    ioc.get(NotificationStore).showNotification({
+      title: models.length === 1 ? 'Model deleted' : 'Models deleted',
+      description:
+        models.length === 1
+          ? 'The selected model has been deleted.'
+          : `${models.length} selected models have been deleted.`,
+      type: NotificationType.SUCCESS
+    });
+    return true;
+  } catch (error) {
+    ioc.get(NotificationStore).showNotification({
+      title: 'Delete failed',
+      description: getErrorMessage(error),
+      type: NotificationType.ERROR
+    });
+    return false;
+  }
+};
+
+export const deleteSchemaModels = async (options: DeleteSchemaModelsOptions): Promise<boolean> => {
+  const models = normalizeModels(options.models);
+
+  if (models.length <= 1) {
+    return false;
+  }
+
+  const confirmed = await ioc.get(DialogStore).showConfirmDialog({
+    title: 'Delete selected models',
+    markdown: buildDeleteMarkdown(models),
+    yesBtn: {
+      label: `Delete ${models.length} models`,
+      icon: 'trash'
+    }
+  });
+
+  if (!confirmed) {
+    return false;
+  }
+
+  return runDeleteSchemaModels({
+    ...options,
+    models
+  });
+};

package/src/core/query/query-simple/SimpleQueryColumns.tsx

@@ -112,7 +112,6 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
               />
             ),
             noWrap: true,
-            shrink: true,
             accessor: (cell, row: PageRow) => {
               return (
                 <SmartBelongsToDisplayWidget
@@ -160,7 +159,6 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
             />
           ),
           noWrap: true,
-          shrink: true,
           accessor: (cell, row: PageRow) => {
             return <SmartCellDisplayWidget name={attribute.name} row={row} />;
           }

package/src/entities/SchemaModelObjectEntityDefinition.ts

@@ -13,6 +13,7 @@ import { SchemaModelObject } from '../core/SchemaModelObject';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
 import { validate as validateUUID } from 'uuid';
 import { ViewHasManyAction } from '../actions/schema-model/ViewHasManyAction';
+import { DeleteSchemaModelAction } from '../actions/schema-model/DeleteSchemaModelAction';
 
 export interface SchemaModelObjectEntityDefinitionEncoded {
   connection_id: string;
@@ -98,6 +99,9 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
   }
 
   isActionAllowedForEntity(action: Action, entity: SchemaModelObject) {
+    if (action.id === DeleteSchemaModelAction.ID) {
+      return !!entity.model?.persisted;
+    }
     if (action.id === ViewHasManyAction.ID) {
       return Object.keys(entity.definition.definition.hasMany || {}).length > 0;
     }

package/src/panels/model/ModelPanelWidget.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import styled from '@emotion/styled';
 import {
   BorderLayoutWidget,
+  Btn,
   ioc,
   LoadingPanelWidget,
   PANEL_CONTENT_PADDING,
@@ -15,6 +16,7 @@ import {
 } from '@journeyapps-labs/reactor-mod';
 import { SchemaModelForm } from '../../forms/SchemaModelForm';
 import { ModelPanelModel } from './ModelPanelFactory';
+import { DeleteSchemaModelAction } from '../../actions/schema-model/DeleteSchemaModelAction';
 
 export interface QueryPanelWidgetProps {
   model: ModelPanelModel;
@@ -55,16 +57,21 @@ export const ModelPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
 
   let top = null;
   if (props.model.model) {
+    const toolbarButtons: Btn[] = props.model.model.model?.persisted
+      ? [
+          DeleteSchemaModelAction.get().representAsButton(
+            {
+              targetEntity: props.model.model,
+              sourcePanel: props.model
+            },
+            true
+          )
+        ].filter((button): button is Btn => !!button)
+      : [];
+
     top = (
       <PanelToolbarWidget
-        btns={
-          [
-            // {
-            //   label: 'Delete object',
-            //   action: () => {}
-            // }
-          ]
-        }
+        btns={toolbarButtons}
         meta={[
           {
             label: 'ID',

package/src/panels/query/PageResultsWidget.tsx

@@ -1,15 +1,27 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
-import { Page } from '../../core/query/Page';
-import { themed, ioc, ScrollableDivCss, System, TableWidget, LoadingPanelWidget } from '@journeyapps-labs/reactor-mod';
+import { Page, PageRow } from '../../core/query/Page';
+import {
+  ComboBoxItem,
+  themed,
+  ioc,
+  ScrollableDivCss,
+  System,
+  MultiSelectChangeEvent,
+  MultiSelectTableWidget,
+  LoadingPanelWidget
+} from '@journeyapps-labs/reactor-mod';
 import { AbstractQuery } from '../../core/query/AbstractQuery';
 import { observer } from 'mobx-react';
 import { DataBrowserEntities } from '../../entities';
 import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { deleteSchemaModels } from '../../core/delete-schema-models';
 
 export interface PageResultsWidgetProps {
   page: Page;
   query: AbstractQuery;
+  selectedModels: SchemaModelObject[];
+  onSelectionChange: (event: MultiSelectChangeEvent<PageRow>) => void;
   scrollTop: number;
   scrollLeft: number;
   onScroll: (offsets: { top: number; left: number }) => void;
@@ -18,8 +30,35 @@ export interface PageResultsWidgetProps {
 export const PageResultsWidget: React.FC<PageResultsWidgetProps> = observer((props) => {
   const system = ioc.get(System);
   const rows = props.page.loading ? [] : props.page.asRows();
+  const selectedRowKeys = props.selectedModels.map((model) => model.id);
   const ref = useRef<HTMLDivElement>(null);
 
+  const showContextMenu = (event: React.MouseEvent, row: PageRow) => {
+    const definition = system.getDefinition<SchemaModelObject>(DataBrowserEntities.SCHEMA_MODEL_OBJECT);
+    const isSelectedRow = props.selectedModels.some((model) => model.id === row.model.id);
+
+    const selectedItems: ComboBoxItem[] =
+      isSelectedRow && props.selectedModels.length > 1
+        ? [
+            {
+              key: 'delete-selected',
+              title: `Delete selected [${props.selectedModels.length}]`,
+              group: 'Selected',
+              icon: 'trash',
+              action: async () => {
+                await deleteSchemaModels({
+                  models: props.selectedModels
+                });
+              }
+            }
+          ]
+        : [];
+
+    definition.showContextMenuForEntity(row.model, event, {
+      additionalItems: selectedItems
+    } as any);
+  };
+
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -43,12 +82,10 @@ export const PageResultsWidget: React.FC<PageResultsWidgetProps> = observer((pro
         });
       }}
     >
-      <TableWidget
-        onContextMenu={(event, row) => {
-          system
-            .getDefinition<SchemaModelObject>(DataBrowserEntities.SCHEMA_MODEL_OBJECT)
-            .showContextMenuForEntity(row.model, event);
-        }}
+      <MultiSelectTableWidget
+        onContextMenu={showContextMenu}
+        selectedRowKeys={selectedRowKeys}
+        onSelectionChange={props.onSelectionChange}
         rows={rows}
         columns={props.query.getColumns()}
       />

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

@@ -12,6 +12,7 @@ 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';
 
 export interface TableControlsWidgetProps {
   current_page: Page;
@@ -20,6 +21,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) => {
@@ -52,6 +55,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>

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>
+  );
+};