v7.3.0
SupportExamplesFree Trial

CrudManager

The Crud Manager (or "CM") is a class implementing centralized loading and saving of data in multiple stores. Loading the stores and saving all changes is done using two requests (load and sync). The stores managed by CRUD manager should not be configured with their own CRUD URLs or use autoLoad/autoCommit.

This class uses JSON as its data encoding format.

Scheduler stores

The class supports Scheduler specific stores (namely: resource, event, assignment and dependency stores). For these stores, the CM has separate configs (resourceStore, eventStore, assignmentStore) to register them.

const crudManager = new CrudManager({
    autoLoad        : true,
    resourceStore   : resourceStore,
    eventStore      : eventStore,
    assignmentStore : assignmentStore,
    transport       : {
        load : {
            url : 'php/read.php'
        },
        sync : {
            url : 'php/save.php'
        }
    }
});

Load response structure

The backend request (php/read.php) should return a JSON response:

{
  "success": true,
  "events": {
    "rows": [
      {
        "id": "e1",
        "name": "Client meeting",
        "startDate": "2017-01-01",
        "endDate": "2017-01-02",
        "iconCls": "fa fa-calendar"
      },
      {
        "id": "e2",
        "name": "Performance review",
        "startDate": "2017-01-03",
        "endDate": "2017-01-05",
        "iconCls": "fa fa-search"
      }
    ]
  },
  "resources": {
    "rows": [
      {
        "id": "r1",
        "name": "Mike Anderson",
        "category": "Consultants",
        "type": "Full time",
        "image": "mike"
      },
      {
        "id": "r2",
        "name": "Kevin Larson",
        "category": "Consultants",
        "type": "Full time",
        "image": "amit"
      }
    ]
  },
  "assignments": {
    "rows": [
        "resourceId": "r1",
        "eventId": "e1",
    ],
    [
        "resourceId": "r2",
        "eventId": "e1",
    ],
    [
        "resourceId": "r1",
        "eventId": "e2",
    ]
  }
}

Sync request structure

The sync request (php/save.php) is a single endpoint for all the operations (create, update, and delete).

The general request structure includes the store that is modified and the operation name (added, deleted, or updated).

{
  "type": "sync",
  "requestId": 17156805380431,
  "events": {
    "added": [
      {
        // new event attributes
      },
    ],
    "updated": [
      {
        // updated attributes
      },
    ],
    "removed": [
      {
        // only the ID
      },
    ],
  }
}

To update an event in a scheduler, the request should look like:

{
  "type": "sync",
  "requestId": 17156805380431,
  "events": {
    "updated": [
      {
        "startDate": "2024-02-19T08:00:00+05:00",
        "endDate": "2024-02-19T09:00:00+05:00",
        "id": 7
      }
    ]
  }
}

Similarly, for a resource:

{
  "type": "sync",
  "requestId": 17156805528382,
  "resources": {
    "updated": [
      {
        "name": "James Shawn",
        "id": 5
      }
    ]
  }
}

This will update the resource name to James Shawn.

In case of creating a new event or resource, the request should look like:

{
  "type": "sync",
  "requestId": 17156805826393,
  "events": {
    "added": [
      {
        "startDate": "2024-02-19T07:30:00+05:00",
        "endDate": "2024-02-19T08:30:00+05:00",
        "duration": 0.041666666666666664,
        "durationUnit": "day",
        "cls": "",
        "name": "Walk the dog",
        "exceptionDates": [],
        "allDay": false,
        "$PhantomId": "_generatedModelClass_4a742332-6c83-45b4-9557-774f770d11d7"
      }
    ]
  },
  "assignments": {
    "added": [
      {
        "resourceId": 5,
        "eventId": "_generatedModelClass_4a742332-6c83-45b4-9557-774f770d11d7",
        "$PhantomId": "_generatedModelClass_d50b7d11-3550-4d70-9350-ca180e465ed3"
      }
    ]
  }
}

The above will create a Walk the dog event.

Sync response structure

In case of updated and removed, the response only contains success:

{
    "success": true
}

The added case is different, where you need to return the $PhantomId with the server assigned id.

{
  "success": true,
  "events": {
    "rows": [
      {
        "$PhantomId": "_generatedModelClass_4a742332-6c83-45b4-9557-774f770d11d7",
        "id": "5a9bf309-ae4a-4bcb-bbc9-f38a94beb2a3"
      }
    ]
  },
  "assignments": {
    "rows": [
      {
        "$PhantomId": "_generatedModelClass_d50b7d11-3550-4d70-9350-ca180e465ed3",
        "id": "ca8f7274-c0af-4069-9ba2-218d71266318"
      }
    ]
  }
}

AJAX request configuration

To configure AJAX request parameters please take a look at the AjaxTransport docs.

const crudManager = new CrudManager({
    autoLoad        : true,
    resourceStore,
    eventStore,
    assignmentStore,
    transport       : {
        load    : {
            url         : 'php/read.php',
            // use GET request
            method      : 'GET',
            // pass request JSON in "rq" parameter
            paramName   : 'rq',
            // extra HTTP request parameters
            params      : {
                foo     : 'bar'
            },
            // pass some extra Fetch API option
            credentials : 'include'
        },
        sync : {
            url : 'php/save.php'
        }
    }
});

Using inline data

The CrudManager provides settable property inlineData that can be used to get data from all crudStores at once and to set this data as well. Populating the stores this way can be useful if you cannot or you do not want to use CrudManager for server requests but you pull the data by other means and have it ready outside CrudManager. Also, the data from all stores is available in a single assignment statement.

Getting data

const data = scheduler.crudManager.inlineData;

// use the data in your application

You can read the inline data by console.log(scheduler.crudManager.inlineData):

// the data should look like:
{
    "calendars": [],
    "events": [
        {
            "id": 1,
            "name": "Meeting",
            "startDate": "2020-03-23T07:00:00+05:00",
            "endDate": "2020-03-23T08:00:00+05:00",
            "duration": 3,
            "resourceId": 1
        },
        {
            "id": 2,
            "name": "Business",
            "startDate": "2020-03-23T11:00:00+05:00",
            "startDate": "2020-03-23T11:40:00+05:00",
            "duration": 2,
            "resourceId": 2
        }
    ],
    "resources": [
        {
            "id": 1,
            "parentId": null,
            "name": "George",
            "eventColor": "blue",
        },
        {
            "id": 2,
            "parentId": null,
            "name": "Rob",
            "eventColor": "blue",
        }
    ],
    "dependencies": [
        {
            "id": 1,
            "type": 2,
            "cls": "",
            "lag": 0,
            "lagUnit": "day",
            "fromEvent": 1,
            "toEvent": 2,
            "active": true
        }
    ],
    "timeRanges": [],
    "resourceTimeRanges": []
}

The xxData properties are deprecated and will be removed in the future. Use xx instead. For example eventsData is deprecated, use events instead. For now, both naming schemes are included in the data object

Setting data

const data = // your function to pull server data

scheduler.crudManager.inlineData = data;

It should have the following structure:

scheduler.crudManager.inlineData = {
  resources: [
    {
      id   : 1,
      name : 'George',
      type : 'Operators',
    },
    {
      id   : 2,
      name : 'Rob',
      type : 'Operators',
    },
    {
      id   : 3,
      name : 'Mike',
      type : 'Main'
    },
  ],
  events: [
    {
      id           : 1,
      name         : 'Meeting',
      startDate    : '2020-03-23T07:00',
      duration     : 4,
      durationUnit : 'hour',
      percentDone  : 100,
      resourceId   : 1
    },
    {
      id           : 2,
      startDate    : '2020-03-23T11:00',
      name         : 'Get parts',
      durationUnit : 'hour',
      duration     : 3,
      percentDone  : 40,
      resourceId   : 2
    },
  ],
  dependencies: [
    {
      id        : 1,
      fromEvent : 1,
      toEvent   : 2
    },
  ],
};

Either you can pass the response in this format directly:

{
 resource: [],
 events: [],
 dependencies: [],
}

Or you can modify the response once received and assign it to scheduler.crudManager.inlineData.

The xxData properties are deprecated and will be removed in the future. Use xx instead. For example eventsData is deprecated, use events instead. For now, both naming schemes are included in the data object

Load order

The CM is aware of the proper load order for Scheduler specific stores so you don't need to worry about it. If you provide any extra stores (using stores config) they will be added to the start of collection before the Scheduler specific stores. If you need a different loading order, you should use addStore method to register your store:

const crudManager = new CrudManager({
    resourceStore   : resourceStore,
    eventStore      : eventStore,
    assignmentStore : assignmentStore,
    // extra user defined stores will get to the start of collection
    // so they will be loaded first
    stores          : [ store1, store2 ],
    transport       : {
        load : {
            url : 'php/read.php'
        },
        sync : {
            url : 'php/save.php'
        }
    }
});

// append store3 to the end so it will be loaded last crudManager.addStore(store3);

// now when we registered all the stores let's load them crudManager.load();

Assignment store

The Crud Manager is designed to use AssignmentStore for assigning events to one or multiple resources. However if server provides resourceId for any of the events then the Crud Manager enables backward compatible mode when an event could have a single assignment only. This also disables multiple assignments in Scheduler UI. In order to use multiple assignments server backend should be able to receive/send assignments for load and sync requests.

Project

The Crud Manager automatically consumes stores of the provided project (namely its eventStore, resourceStore, assignmentStore, dependencyStore, timeRangeStore and resourceTimeRangeStore):

const crudManager = new CrudManager({
    // crud manager will get stores from myAppProject project
    project   : myAppProject,
    transport : {
        load : {
            url : 'php/read.php'
        },
        sync : {
            url : 'php/save.php'
        }
    }
});

Useful configs and functions

Member Description
resourceStore Resource store instance or config
eventStore Event store instance or config
assignmentStore Assignment store instance or config
dependencyStore Dependency store instance or config
project Project model holding linked stores
resourceTimeRangeStore Resource time range store or config

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • A store with assignments (or a config object).

    Has a corresponding runtime assignmentStore property.

  • A store with dependencies(or a config object).

    Has a corresponding runtime dependencyStore property.

  • A project that holds and links stores

  • A store with resources (or a config object).

    Has a corresponding runtime resourceStore property.

  • A store with resource time ranges (or a config object).

    Has a corresponding runtime resourceTimeRangeStore property.

  • true to automatically persist store changes after edits are made in any of the stores monitored. Please note that sync request will not be invoked immediately but only after autoSyncTimeout interval.

  • The timeout in milliseconds to wait before persisting changes to the server. Used when autoSync is set to true.

  • Configuration of the JSON encoder used by the Crud Manager.

    • requestData : Object

      Static data to send with the data request.

      new CrudManager({
          // add static "foo" property to all requests data
          encoder : {
              requestData : {
                  foo : 'Bar'
              }
          },
          ...
      });
      

      The above snippet will result adding "foo" property to all requests data:

          {
              "requestId"   : 756,
              "type"        : "load",
      
              "foo"         : "Bar",
      
              "stores"      : [
                  ...
      
  • Specify as true to force sync requests to be sent when calling sync(), even if there are no local changes. Useful in a polling scenario, to keep client up to date with the backend.

    Has a corresponding runtime forceSync property.

  • Set to true to make STM ignore changes coming from the backend. This will allow user to only undo redo local changes.

    Has a corresponding runtime ignoreRemoteChangesInSTM property.

  • Field name to be used to transfer a phantom record identifier.

  • Field name to be used to transfer a phantom parent record identifier.

  • True to reset identifiers (defined by idField config) of phantom records before submitting them to the server.

  • When true treats parsed responses without success property as successful. In this mode a parsed response is treated as invalid if it has explicitly set success : false.

  • When true forces the CRUD manager to process responses depending on their type attribute. So load request may be responded with sync response for example. Can be used for smart server logic allowing the server to decide when it's better to respond with a complete data set (load response) or it's enough to return just a delta (sync response).

  • true to write all fields from the record to the server. If set to false it will only send the fields that were modified. Note that any fields that have persist set to false will still be ignored and fields having alwaysWrite set to true will always be included.

  • Internal listeners, that cannot be removed by the user.

  • The number of Resource records each page should contain, when using remotePaging

Properties

Properties are getters/setters or publicly accessible variables on this class
  • Identifies an object as an instance of AbstractCrudManagerMixin class, or subclass thereof.
  • Identifies an object as an instance of AbstractCrudManagerValidation class, or subclass thereof.
  • isAjaxTransport : Booleantrue
    READONLY
    static
    ADVANCED
    AjaxTransport
    Identifies an object as an instance of AjaxTransport class, or subclass thereof.
  • isCrudManager : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of CrudManager class, or subclass thereof.
  • isDelayable : Booleantrue
    READONLY
    static
    ADVANCED
    Delayable
    Identifies an object as an instance of Delayable class, or subclass thereof.
  • isEvents : Booleantrue
    READONLY
    static
    ADVANCED
    Events
    Identifies an object as an instance of Events class, or subclass thereof.
  • isJsonEncoder : Booleantrue
    READONLY
    static
    ADVANCED
    JsonEncoder
    Identifies an object as an instance of JsonEncoder class, or subclass thereof.
  • isLazyLoadCrudManager : Booleantrue
    READONLY
    static
    ADVANCED
    LazyLoadCrudManager
    Identifies an object as an instance of LazyLoadCrudManager class, or subclass thereof.
  • isProjectCrudManager : Booleantrue
    READONLY
    static
    ADVANCED
    ProjectCrudManager
    Identifies an object as an instance of ProjectCrudManager class, or subclass thereof.
  • A class property getter for the default values of internal properties for this class.

  • Get/set the assignment store bound to the CRUD manager.

    Has a corresponding assignmentStore config.

  • Get/set the dependency store bound to the CRUD manager.

    Has a corresponding dependencyStore config.

  • Get/set the event store bound to the CRUD manager.

    Has a corresponding eventStore config.

  • Get/set the resource store bound to the CRUD manager.

    Has a corresponding resourceStore config.

  • Store for resourceTimeRanges feature.

    Has a corresponding resourceTimeRangeStore config.

  • Store for timeRanges feature.

  • The server revision stamp. The revision stamp is a number which should be incremented after each server-side change. This property reflects the current version of the data retrieved from the server and gets updated after each load and sync call.

  • A list of registered stores whose server communication will be collected into a single batch. Each store is represented by a store descriptor.

    Has a corresponding stores config.

  • Returns the data from all CrudManager crudStores in a format that can be consumed by inlineData.

  • An empty array that can be used as a default value.

  • An empty object that can be used as a default value.

  • The server revision stamp. The revision stamp is a number which should be incremented after each server-side change. This property reflects the current version of the data retrieved from the server and gets updated after each load and sync call.

  • A list of registered stores whose server communication will be collected into a single batch. Each store is represented by a store descriptor.

    Has a corresponding crudStores config.

  • Specify as true to force sync requests to be sent when calling sync(), even if there are no local changes. Useful in a polling scenario, to keep client up to date with the backend.

    Has a corresponding forceSync config.

  • Set to true to make STM ignore changes coming from the backend. This will allow user to only undo redo local changes.

    Has a corresponding ignoreRemoteChangesInSTM config.

  • Returns true if changes tracking is suspended

  • Returns true if the crud manager is currently loading data

  • Returns true if the crud manager is currently syncing data

  • Returns true if the crud manager is currently loading data

  • Generates unique request identifier.

  • An array of stores presenting an alternative sync responses apply order. Each store is represented by a store descriptor.

    Has a corresponding syncApplySequence config.

  • Identifies an object as an instance of AbstractCrudManager class, or subclass thereof.
  • isCrudManager : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of CrudManager class, or subclass thereof.
  • If set to true, or a config object, this makes the CrudManager load records only when needed. When a record or a date range that is not already loaded is requested, a load request will be made to the specified URL. More more details about lazy loading, see the guide

    Has a corresponding lazyLoad config.

  • config : Object
    READONLY
    ADVANCED
    AbstractCrudManager

    Returns a copy of the full configuration which was used to configure this object.

  • This property is set to true before the constructor returns.

  • This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).

Functions

Functions are methods available for calling on the class
  • This optional class method is called when a class is mixed in using the mixin() method.

  • initClass( )
    static
    ADVANCED
    AbstractCrudManager

    Registers this class type with its Factory

  • Accepts all changes in all stores, resets the modification tracking:

    • Clears change tracking for all records
    • Clears added
    • Clears modified
    • Clears removed Leaves the store in an "unmodified" state.
  • Reverts all changes in all stores and re-inserts any records that were removed locally. Any new uncommitted records will be removed.

  • Suspends automatic sync upon store changes. Can be called multiple times (it uses an internal counter).

  • Suspends hasChanges and noChanges events.

  • Internal function used to hook destroy() calls when using thisObj

  • Internal function used restore hooked destroy() calls when using thisObj

  • doDestroy( )
    internal
    Events

    Auto detaches listeners registered from start, if set as detachable

  • once( )
    private
    Events

    Internal function used to run a callback function after an event is triggered

  • Removes all listeners registered to this object by the application.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

Source path

Scheduler/data/CrudManager.js

Contents