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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -15,10 +15,10 @@
   "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.6.0",
@@ -27,11 +27,11 @@
     "@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/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/core/AbstractConnection.ts

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

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/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/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/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

@@ -42,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({
@@ -95,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/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';
@@ -13,6 +21,7 @@ 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;
@@ -39,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}
@@ -69,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>