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

package/src/entities/SchemaModelDefinitionEntityDefinition.ts

@@ -3,9 +3,8 @@ import {
   EntityActionHandlerComponent,
   EntityDefinition,
   EntityDescriberComponent,
-  inject,
   InlineEntityEncoderComponent,
-  InlineTreePresenterComponent,
+  inject,
   SimpleParentEntitySearchEngine
 } from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../entities';
@@ -14,6 +13,7 @@ import { AbstractConnection } from '../core/AbstractConnection';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
 import { QuerySchemaModelAction } from '../actions/schema-definitions/QuerySchemaModelAction';
 import { IndexModel } from '../core/IndexModel';
+import { SchemaModelTreePresenterComponent } from './SchemaModelTreePresenterComponent';
 
 export interface SchemaModelDefinitionEntityDefinitionEncoded {
   connection_id: string;
@@ -77,17 +77,7 @@ export class SchemaModelDefinitionEntityDefinition extends EntityDefinition<Sche
       })
     );
 
-    this.registerComponent(
-      new InlineTreePresenterComponent({
-        loadChildrenAsNodesAreOpened: true,
-        cacheTreeEntities: true,
-        augmentTreeNodeProps: () => {
-          return {
-            openOnSingleClick: false
-          };
-        }
-      })
-    );
+    this.registerComponent(new SchemaModelTreePresenterComponent({ loadChildrenAsNodesAreOpened: true }));
 
     this.registerComponent(
       new SimpleParentEntitySearchEngine<AbstractConnection, SchemaModelDefinition>({

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/entities/SchemaModelTreePresenterComponent.ts

@@ -0,0 +1,31 @@
+import {
+  CachedEntityTreePresenterContext,
+  EntityReactorNode,
+  EntityTreePresenterComponent,
+  ReactorTreeEntity
+} from '@journeyapps-labs/reactor-mod';
+import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { SchemaModelOrderValue, SchemaModelOrderingPreference } from '../preferences/SchemaOrderingPreferences';
+
+class SchemaModelTreePresenterContext extends CachedEntityTreePresenterContext<SchemaModelDefinition> {
+  getSortedEntities(entities: SchemaModelDefinition[]) {
+    if (SchemaModelOrderingPreference.getValue() === SchemaModelOrderValue.AS_DEFINED_IN_SCHEMA) {
+      return entities;
+    }
+    return super.getSortedEntities(entities);
+  }
+
+  protected doGenerateTreeNode(entity: SchemaModelDefinition, options): ReactorTreeEntity {
+    return new EntityReactorNode({
+      entity,
+      definition: this.definition,
+      events: options?.events
+    });
+  }
+}
+
+export class SchemaModelTreePresenterComponent extends EntityTreePresenterComponent<SchemaModelDefinition> {
+  protected _generateContext() {
+    return new SchemaModelTreePresenterContext(this);
+  }
+}

package/src/forms/SchemaModelForm.tsx

@@ -7,6 +7,7 @@ import { DirtyWrapperInput } from './inputs/DirtyWrapperInput';
 import { TypeEngine, TypeHandler } from './TypeEngine';
 import { autorun, IReactionDisposer } from 'mobx';
 import { Variable } from '@journeyapps/db';
+import { OrderedSchemaFieldType } from '../core/SchemaModelDefinition';
 
 export interface SchemaModelFormOptions {
   definition: SchemaModelDefinition;
@@ -104,52 +105,56 @@ export class SchemaModelForm extends FormModel {
   constructor(protected options: SchemaModelFormOptions) {
     super();
     this.bindings = new Set<Binding>();
-    _.map(options.definition.definition.belongsTo, (relationship) => {
-      const definition = options.definition.connection.getSchemaModelDefinitionByName(relationship.foreignType.name);
-
-      let entity = new EntityInput({
-        name: relationship.name,
-        entityType: DataBrowserEntities.SCHEMA_MODEL_OBJECT,
-        parent: definition,
-        label: relationship.name,
-        value: null
-      });
-
-      return new Binding({
-        name: relationship.name,
-        model: this.options.object,
-        input: entity,
-        resolve: () => {
-          if (!options.object.data.belongs_to[relationship.name]) {
+    options.definition
+      .getOrderedFieldsAndRelationships()
+      .map((entry) => {
+        if (entry.type === OrderedSchemaFieldType.BELONGS_TO) {
+          const relationship = entry.object;
+          const definition = options.definition.connection.getSchemaModelDefinitionByName(
+            relationship.foreignType.name
+          );
+          if (!definition) {
             return null;
           }
-          return definition.resolve(options.object.data.belongs_to[relationship.name]);
+
+          const entity = new EntityInput({
+            name: relationship.name,
+            entityType: DataBrowserEntities.SCHEMA_MODEL_OBJECT,
+            parent: definition,
+            label: relationship.name,
+            value: null
+          });
+
+          return new Binding({
+            name: relationship.name,
+            model: this.options.object,
+            input: entity,
+            resolve: () => {
+              if (!options.object.data.belongs_to[relationship.name]) {
+                return null;
+              }
+              return definition.resolve(options.object.data.belongs_to[relationship.name]);
+            }
+          });
         }
-      });
-    })
-      .filter((f) => !!f)
-      .forEach((binding) => {
-        this.bindings.add(binding);
-        this.addInput(new DirtyWrapperInput(binding.input, options.object));
-      });
 
-    _.map(options.definition.definition.attributes, (attribute) => {
-      let field = this.typeEngine.getHandler(attribute.type)?.generateField({
-        name: attribute.name,
-        label: attribute.label,
-        type: attribute.type
-      });
-      if (!field) {
-        return;
-      }
+        const attribute = entry.object;
+        let field = this.typeEngine.getHandler(attribute.type)?.generateField({
+          name: attribute.name,
+          label: attribute.label,
+          type: attribute.type
+        });
+        if (!field) {
+          return null;
+        }
 
-      return new TypedBinding({
-        variable: attribute,
-        model: this.options.object,
-        input: field,
-        name: attribute.name
-      });
-    })
+        return new TypedBinding({
+          variable: attribute,
+          model: this.options.object,
+          input: field,
+          name: attribute.name
+        });
+      })
       .filter((binding) => !!binding)
       .forEach((binding) => {
         this.bindings.add(binding);

package/src/index.ts

@@ -15,6 +15,7 @@ export * from './entities/QueryEntityDefinition';
 export * from './entities/ConnectionEntityDefinition';
 export * from './entities/ConnectionFactoryEntityDefinition';
 export * from './entities/SchemaModelDefinitionEntityDefinition';
+export * from './entities/SchemaModelTreePresenterComponent';
 export * from './entities/SchemaModelObjectEntityDefinition';
 
 export * from './panels/query/QueryPanelFactory';

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

@@ -8,6 +8,8 @@ import { Page } from '../../core/query/Page';
 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;
@@ -93,6 +95,27 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
 
   const activePage =
     props.model.current_page_data || (props.model.query ? props.model.query.getPage(props.model.current_page) : null);
+  const controlsPosition = TableControlsPositionPreference.getValue();
+
+  const controls = (
+    <TableControlsWidget
+      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);
+      }}
+      goToPage={(index) => {
+        props.model.current_page = index;
+      }}
+    />
+  );
 
   return (
     <LoadingPanelWidget loading={!props.model.query || !activePage}>
@@ -101,35 +124,28 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
           <S.Container>
             <BorderLayoutWidget
               top={
-                <TableControlsWidget
-                  query={props.model.query}
-                  current_page={activePage}
-                  loading={loading}
-                  onLoadSavedQuery={async (id) => {
-                    await props.model.loadSavedQuery(id);
-                  }}
-                  goToPage={(index) => {
-                    props.model.current_page = index;
-                  }}
-                />
+                controlsPosition === TableControlsPositionValue.TOP ||
+                controlsPosition === TableControlsPositionValue.BOTH
+                  ? controls
+                  : null
               }
               bottom={
-                <TableControlsWidget
-                  query={props.model.query}
-                  current_page={activePage}
-                  loading={loading}
-                  onLoadSavedQuery={async (id) => {
-                    await props.model.loadSavedQuery(id);
-                  }}
-                  goToPage={(index) => {
-                    props.model.current_page = index;
-                  }}
-                />
+                controlsPosition === TableControlsPositionValue.BOTTOM ||
+                controlsPosition === TableControlsPositionValue.BOTH
+                  ? controls
+                  : null
               }
             >
               <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>
+  );
+};

package/src/preferences/QueryControlPreferences.ts

@@ -1,9 +1,49 @@
-import { BooleanSetting, PrefsStore } from '@journeyapps-labs/reactor-mod';
+import { BooleanSetting, PrefsStore, SetSetting, ioc } from '@journeyapps-labs/reactor-mod';
 
 export enum QueryControlPreferences {
   SHOW_SORT_CONTROLS = 'databrowser/query-controls/show-sort-controls',
   SHOW_FILTER_CONTROLS = 'databrowser/query-controls/show-filter-controls',
-  FILTER_NULL_FIELDS_IN_RELATIONSHIP_PEEK = 'databrowser/query-controls/filter-null-fields-in-relationship-peek'
+  FILTER_NULL_FIELDS_IN_RELATIONSHIP_PEEK = 'databrowser/query-controls/filter-null-fields-in-relationship-peek',
+  SHOW_ID_VALUE_IN_ID_COLUMN = 'databrowser/query-controls/show-id-value-in-id-column',
+  TABLE_CONTROLS_POSITION = 'databrowser/query-controls/table-controls-position'
+}
+
+export enum TableControlsPositionValue {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  BOTH = 'both'
+}
+
+export class TableControlsPositionPreference extends SetSetting {
+  static KEY = QueryControlPreferences.TABLE_CONTROLS_POSITION;
+
+  constructor() {
+    super({
+      key: TableControlsPositionPreference.KEY,
+      name: 'Table controls position',
+      category: 'Query Controls',
+      value: TableControlsPositionValue.BOTH,
+      options: [
+        {
+          key: TableControlsPositionValue.TOP,
+          label: 'Top'
+        },
+        {
+          key: TableControlsPositionValue.BOTTOM,
+          label: 'Bottom'
+        },
+        {
+          key: TableControlsPositionValue.BOTH,
+          label: 'Both'
+        }
+      ]
+    });
+  }
+
+  static getValue(): TableControlsPositionValue {
+    return ioc.get(PrefsStore).getPreference<TableControlsPositionPreference>(TableControlsPositionPreference.KEY)
+      .value as TableControlsPositionValue;
+  }
 }
 
 export const registerQueryControlPreferences = (prefsStore: PrefsStore) => {
@@ -31,4 +71,13 @@ export const registerQueryControlPreferences = (prefsStore: PrefsStore) => {
       category: 'Query Controls'
     })
   );
+  prefsStore.registerPreference(
+    new BooleanSetting({
+      key: QueryControlPreferences.SHOW_ID_VALUE_IN_ID_COLUMN,
+      checked: true,
+      name: 'Show ID value in ID column',
+      category: 'Query Controls'
+    })
+  );
+  prefsStore.registerPreference(new TableControlsPositionPreference());
 };

package/src/preferences/SchemaOrderingPreferences.ts

@@ -0,0 +1,82 @@
+import { ioc, PrefsStore, SetSetting } from '@journeyapps-labs/reactor-mod';
+
+export enum SchemaModelOrderValue {
+  ALPHABETICAL = 'alphabetical',
+  AS_DEFINED_IN_SCHEMA = 'as_defined_in_schema'
+}
+
+export class SchemaModelOrderingPreference extends SetSetting {
+  static KEY = 'databrowser/schema/model-order';
+
+  constructor() {
+    super({
+      key: SchemaModelOrderingPreference.KEY,
+      name: 'Schema model order',
+      category: 'Schema',
+      value: SchemaModelOrderValue.AS_DEFINED_IN_SCHEMA,
+      options: [
+        {
+          key: SchemaModelOrderValue.AS_DEFINED_IN_SCHEMA,
+          label: 'As defined in schema'
+        },
+        {
+          key: SchemaModelOrderValue.ALPHABETICAL,
+          label: 'Alphabetical'
+        }
+      ]
+    });
+  }
+
+  static getValue(): SchemaModelOrderValue {
+    return ioc.get(PrefsStore).getPreference<SchemaModelOrderingPreference>(SchemaModelOrderingPreference.KEY)
+      .value as SchemaModelOrderValue;
+  }
+}
+
+export enum SchemaFieldOrderValue {
+  ALPHABETICAL = 'alphabetical',
+  BELONGS_TO_FIRST = 'belongs_to_first',
+  BELONGS_TO_LAST = 'belongs_to_last',
+  AS_DEFINED_IN_SCHEMA = 'as_defined_in_schema'
+}
+
+export class SchemaFieldOrderingPreference extends SetSetting {
+  static KEY = 'databrowser/schema/field-order';
+
+  constructor() {
+    super({
+      key: SchemaFieldOrderingPreference.KEY,
+      name: 'Schema field order',
+      category: 'Schema',
+      value: SchemaFieldOrderValue.AS_DEFINED_IN_SCHEMA,
+      options: [
+        {
+          key: SchemaFieldOrderValue.AS_DEFINED_IN_SCHEMA,
+          label: 'As defined in schema'
+        },
+        {
+          key: SchemaFieldOrderValue.ALPHABETICAL,
+          label: 'Alphabetical'
+        },
+        {
+          key: SchemaFieldOrderValue.BELONGS_TO_FIRST,
+          label: 'Belongs-to first'
+        },
+        {
+          key: SchemaFieldOrderValue.BELONGS_TO_LAST,
+          label: 'Belongs-to last'
+        }
+      ]
+    });
+  }
+
+  static getValue(): SchemaFieldOrderValue {
+    return ioc.get(PrefsStore).getPreference<SchemaFieldOrderingPreference>(SchemaFieldOrderingPreference.KEY)
+      .value as SchemaFieldOrderValue;
+  }
+}
+
+export const registerSchemaOrderingPreferences = (prefsStore: PrefsStore) => {
+  prefsStore.registerPreference(new SchemaModelOrderingPreference());
+  prefsStore.registerPreference(new SchemaFieldOrderingPreference());
+};