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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -15,23 +15,23 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@emotion/styled": "^11.14.1",
-    "@fortawesome/react-fontawesome": "^3.3.0",
+    "@fortawesome/react-fontawesome": "^3.3.1",
     "@journeyapps-labs/client-backend-v4": "1.0.0",
     "@journeyapps-labs/common-ioc": "^1.0.1",
-    "@journeyapps-labs/common-sdk": "^1.0.3",
+    "@journeyapps-labs/common-sdk": "^1.0.4",
     "@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",
     "async": "^3.2.6",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "react": "19.2.4",
-    "uuid": "^13.0.0"
+    "react": "19.2.5",
+    "uuid": "^14.0.0"
   },
   "devDependencies": {
     "@journeyapps-labs/lib-reactor-builder": "3.0.2",

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-definitions/CreateModelAction.ts

@@ -20,7 +20,7 @@ export class CreateModelAction extends EntityAction<SchemaModelDefinition> {
     super({
       id: CreateModelAction.ID,
       name: 'Create schema model',
-      icon: 'search',
+      icon: 'plus',
       target: DataBrowserEntities.SCHEMA_MODEL_DEFINITION
     });
   }

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

@@ -90,7 +90,29 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     }
     await batch.execute();
     for (let model of models) {
-      model.reload();
+      await model.reload();
+      model.clearEdits();
+    }
+  }
+
+  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);
     }
   }
 

package/src/core/SchemaModelDefinition.ts

@@ -6,13 +6,11 @@ import { SchemaModelObject } from './SchemaModelObject';
 import { LifecycleModel } from '@journeyapps-labs/lib-reactor-data-layer';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
 import { queue, QueueObject } from 'async';
-import { v4 } from 'uuid';
-import { V4Index } from '@journeyapps-labs/client-backend-v4';
-import { action, observable } from 'mobx';
+import { observable } from 'mobx';
 import { IndexModel } from './IndexModel';
 import { TypeEngine } from '../forms/TypeEngine';
-import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields, idVariable } from './query/StandardModelFields';
-import { SchemaFieldOrderValue, SchemaFieldOrderingPreference } from '../preferences/SchemaOrderingPreferences';
+import { idVariable, STANDARD_MODEL_FIELD_LABELS, StandardModelFields } from './query/StandardModelFields';
+import { SchemaFieldOrderingPreference, SchemaFieldOrderValue } from '../preferences/SchemaOrderingPreferences';
 
 export interface SchemaModelDefinitionListener {
   resolved: (event: { object: SchemaModelObject }) => any;

package/src/core/SchemaModelObject.ts

@@ -1,6 +1,7 @@
 import { ApiObjectData, DatabaseAdapter, DatabaseObject } from '@journeyapps/db';
 import { SchemaModelDefinition } from './SchemaModelDefinition';
-import { action, observable } from 'mobx';
+import { action, observable, runInAction } from 'mobx';
+import { inject, NotificationStore, NotificationType, VisorStore } from '@journeyapps-labs/reactor-mod';
 
 export interface SchemaModelObjectOptions {
   definition: SchemaModelDefinition;
@@ -9,6 +10,12 @@ export interface SchemaModelObjectOptions {
 }
 
 export class SchemaModelObject {
+  @inject(VisorStore)
+  accessor visorStore: VisorStore;
+
+  @inject(NotificationStore)
+  accessor notificationStore: NotificationStore;
+
   @observable
   accessor data: ApiObjectData;
 
@@ -31,30 +38,42 @@ export class SchemaModelObject {
   async applyPatches() {
     if (!this.model) {
       const collection = await this.definition.getCollection();
-      this.model = collection.create();
+      runInAction(() => {
+        this.model = collection.create();
+      });
     }
     for (let entry of this.patch.entries()) {
       if (this.definition.definition.belongsTo[entry[0]]) {
-        this.model[entry[0]](entry[1].model);
+        this.model[entry[0]](entry[1]?.model || null);
       } else {
         this.model[entry[0]] = entry[1];
       }
     }
-    this.patch.clear();
+    this.clearEdits();
   }
 
   async save() {
-    await this.definition.connection.batchSave([this]);
+    await this.visorStore.wrap(`Saving ${this.definition.definition.label}`, async () => {
+      await this.definition.connection.batchSave([this]);
+    });
+    this.notificationStore.showNotification({
+      title: 'Model updated',
+      description: `${this.definition.definition.label} was updated`,
+      type: NotificationType.SUCCESS
+    });
   }
 
+  @action
   clearEdits() {
     this.patch.clear();
   }
 
+  @action
   revert(field: string) {
     this.patch.delete(field);
   }
 
+  @action
   set(field: string, value: any) {
     if (this.model?.[field] === value) {
       this.patch.delete(field);
@@ -72,7 +91,11 @@ export class SchemaModelObject {
   }
 
   async reload() {
-    await this.definition.load(this.id);
+    const model = await this.definition.load(this.id);
+    if (model && model !== this) {
+      this.setData(model.data);
+      this.definition.cache.set(this.id, this);
+    }
   }
 
   get definition(): SchemaModelDefinition {
@@ -80,6 +103,6 @@ export class SchemaModelObject {
   }
 
   get id() {
-    return this.data.id;
+    return this.data?.id;
   }
 }

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/AbstractQuery.ts

@@ -1,10 +1,16 @@
 import { Page } from './Page';
 import { AbstractConnection } from '../AbstractConnection';
 import { v4 } from 'uuid';
-import { TableColumn } from '@journeyapps-labs/reactor-mod';
+import { inject, NotificationStore, NotificationType, TableColumn, VisorStore } from '@journeyapps-labs/reactor-mod';
 import { SchemaModelObject } from '../SchemaModelObject';
 
 export abstract class AbstractQuery {
+  @inject(VisorStore)
+  accessor visorStore: VisorStore;
+
+  @inject(NotificationStore)
+  accessor notificationStore: NotificationStore;
+
   id: string;
 
   constructor(
@@ -15,7 +21,15 @@ export abstract class AbstractQuery {
   }
 
   async batchSave() {
-    await this.connection.batchSave(this.getDirtyObjects());
+    const dirtyObjects = this.getDirtyObjects();
+    await this.visorStore.wrap(`Saving ${dirtyObjects.length} models`, async () => {
+      await this.connection.batchSave(dirtyObjects);
+    });
+    this.notificationStore.showNotification({
+      title: 'Models updated',
+      description: `${dirtyObjects.length} ${dirtyObjects.length === 1 ? 'model was' : 'models were'} updated`,
+      type: NotificationType.SUCCESS
+    });
   }
 
   abstract getDirtyObjects(): SchemaModelObject[];

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/core/query/widgets/SmartFilterWidget.tsx

@@ -73,7 +73,7 @@ export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
       active={isActive}
       {...setupTooltipProps({
         tooltip: getFilterTooltip(props.filter),
-        tooltipPos: TooltipPosition.BOTTOM
+        tooltipPos: TooltipPosition.BOTTOM_RIGHT
       })}
       onClick={async (event) => {
         const filter = await props.setupFilter({

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/forms/SchemaModelForm.tsx

@@ -81,7 +81,7 @@ export class TypedBinding extends Binding {
     super({
       ...options,
       resolve: async () => {
-        return options.model?.model[options.name];
+        return options.model?.model?.[options.name];
       }
     });
     this.handler = this.typeEngine.getHandler(options.variable.type);
@@ -110,6 +110,7 @@ export class SchemaModelForm extends FormModel {
       .map((entry) => {
         if (entry.type === OrderedSchemaFieldType.BELONGS_TO) {
           const relationship = entry.object;
+          const idVariable = options.definition.getBelongsToIdVariableForRelationship(relationship.name);
           const definition = options.definition.connection.getSchemaModelDefinitionByName(
             relationship.foreignType.name
           );
@@ -130,7 +131,11 @@ export class SchemaModelForm extends FormModel {
             model: this.options.object,
             input: entity,
             resolve: () => {
-              if (!options.object.data.belongs_to[relationship.name]) {
+              if (idVariable && options.object?.model) {
+                const objectId = options.object.model[idVariable.name];
+                return objectId ? definition.resolve(objectId) : null;
+              }
+              if (!options.object?.data?.belongs_to?.[relationship.name]) {
                 return null;
               }
               return definition.resolve(options.object.data.belongs_to[relationship.name]);

package/src/panels/_shared/SharedModelPanelFactory.tsx

@@ -36,8 +36,10 @@ export class SharedModelPanelModel extends ReactorPanelModel {
   }
 
   async decodeEntities(data: ReturnType<this['encodeEntities']>) {
-    this.definition = data.definition;
-    this.model = data.model || (await data.definition.generateNewModelObject());
+    const definition = data.definition;
+    const model = definition ? data.model || (await definition.generateNewModelObject()) : null;
+    this.definition = definition;
+    this.model = model;
   }
 }
 

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;
@@ -40,7 +42,7 @@ export const ModelPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
   const _theme = ioc.get(ThemeStore).getCurrentTheme(theme);
 
   useEffect(() => {
-    if (!props.model.definition) {
+    if (!props.model.definition || !props.model.model) {
       return;
     }
     let _form = new SchemaModelForm({
@@ -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',
@@ -88,8 +95,8 @@ export const ModelPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
                   label="Save"
                   icon="save"
                   iconColor={_theme.status.success}
-                  action={() => {
-                    props.model.model.save();
+                  action={async () => {
+                    await props.model.model.save();
                   }}
                 />
                 <PanelButtonWidget

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()}
       />