angular-slickgrid 9.0.0 → 9.0.2

package/docs/backend-services/graphql/GraphQL-JSON-Result.md

@@ -1,85 +0,0 @@
-The GraphQL JSON result will always follow a certain structure where only the dataset name and the `nodes` array will change. With that in mind, if we look at the `GraphqlResult` TypeScript interface, the JSON result will mostly follow this structure (except when Pagination is disabled if so continue reading):
-
-#### `GraphqlResult` TypeScript interface
-The `datasetName` is the only dynamic portion of the structure and in our demo will be `users`.
-
-##### with Pagination
-```ts
-export interface GraphqlPaginatedResult {
-  data: {
-    [datasetName: string]: {
-      /** result set of data objects (array of data) */
-      nodes: any[];
-
-      /** Total count of items in the table (needed for the Pagination to work) */
-      totalCount: number; 
-    }
-  };
-
-  /** Some metrics of the last executed query (startTime, endTime, executionTime, itemCount, totalItemCount) */
-  metrics?: Metrics;
-}
-```
-
-##### without Pagination
-```ts
-export interface GraphqlResult {
-  data: {
-    [datasetName: string]: any[];
-  };
-
-  /** Some metrics of the last executed query (startTime, endTime, executionTime, itemCount, totalItemCount) */
-  metrics?: Metrics;
-}
-```
-
-### ResultSet
-#### Users demo (with Pagination)
-If we consider that we defined a grid of Users and we provided the `datasetName: 'users'` with 3 defined columns (firstName, lastName, email), note that `id` will **always** be included as it is a requirement from SlickGrid itself and it must be unique ids. The JSON result could look like the following:
-
-```ts
-{
-  "data": {
-    "users": {
-      "totalCount": 2,
-      "nodes": [
-        {
-          "id": 0,
-          "firstName": "John",
-          "lastName": "Doe",
-          "email": "john@doe.com"
-        },
-        {
-          "id": 1,
-          "firstName": "Jane",
-          "lastName": "Doe",
-          "email": "john@doe.com"
-        }
-      ]
-    }
-  }
-}
-```
-
-#### Users demo (**without** Pagination)
-
-```ts
-{
-  "data": {
-    "users": [
-      {
-        "id": 0,
-        "firstName": "John",
-        "lastName": "Doe",
-        "email": "john@doe.com"
-      },
-      {
-        "id": 1,
-        "firstName": "Jane",
-        "lastName": "Doe",
-        "email": "john@doe.com"
-      }
-    ]
-  }
-}
-```

package/docs/backend-services/graphql/GraphQL-Pagination.md

@@ -1,77 +0,0 @@
-The implementation of a GraphQL Service requires a certain structure to follow for `Slickgrid-Universal` to work correctly (it will fail if your GraphQL Schema is any different than what is shown below).
-
-### Implementation
-For the implementation in your code, refer to the [GraphQL Service](../GraphQL.md) section.
-
-### Without Cursor (recommended)
-Pagination without cursor, this is the simplest implementation and is what we use on our side. The query can have any of the 3 arguments:
-- `first`: integer representing how many rows of data to get from the start of dataset
-- `last`: integer representing how many rows of data to get from the end of dataset
-- `offset`: integer representing how many to skip
-
-For example
-```ts
-users (first:20, offset: 10) {
-  totalCount
-  nodes {
-    name
-    gender
-  }
-}
-```
-
-### With Cursor `useCursor`
-Cursor Pagination is more generally used for real-time data scenarios. It usually reads sequentially from the head or tail of a list. It cannot navigate directly to the middle of a list. It conceptually treats the data similarly to a LinkedList as opposed to a Vector.
-
-Pagination with cursor, the query can have any of the 4 arguments:
-- `first`: integer representing how many rows of data to get from the start of dataset
-- `after`: pull data starting at `cursor` "x", where "x" is the last item `cursor`
-- `last`: integer representing how many rows of data to get from the end of dataset
-- `before`: pull data before a `cursor` "x", where "x" is the last item `cursor`
-
-For example
-```ts
-users (first:20, after:"YXJyYXljb25uZWN0aW9uOjM=") {
-  totalCount
-  pageInfo {
-    hasPreviousPage
-    hasNextPage
-    startCursor
-    endCursor
-  }
-  edges {
-    cursor
-    node {
-      name
-      gender
-    }
-  }
-}
-```
-
-To retrieve subsequent data, the `pageInfo.endCursor` property should be used as part of the next query.
-eg:
-```ts
-users (first:20, after:"${pageInfo.endCursor}")
-```
-
-or when navigating backwards
-```ts
-users (last:20, before:"${pageInfo.startCursor}")
-```
-
-When using the `paginationService`, this is handled by calling `setCursorPageInfo(pageInfo)`.
-
-Also note the difference in behaviour between `relay` style pagination as it affects the returned `pageInfo` object.
-eg
-```ts
-relay pagination - Infinte scrolling appending data
-  page1: {startCursor: A, endCursor: B }
-  page2: {startCursor: A, endCursor: C }
-  page3: {startCursor: A, endCursor: D }
-
-non-relay pagination - Getting page chunks
-  page1: {startCursor: A, endCursor: B }
-  page2: {startCursor: B, endCursor: C }
-  page3: {startCursor: C, endCursor: D }
-```

package/docs/backend-services/graphql/GraphQL-Sorting.md

@@ -1,78 +0,0 @@
-The implementation of a GraphQL Service requires a certain structure to follow for `Slickgrid-Universal` to work correctly (it will fail if your GraphQL Schema is any different than what is shown below).
-
-### Implementation
-For the implementation in your code, refer to the [GraphQL Service](../GraphQL.md) section.
-
-### orderBy
-The sorting uses `orderBy` as per this [GitHub Suggestion](https://github.com/graphql/graphql-relay-js/issues/20#issuecomment-220494222) of a Facebook employee. The query will have a `orderBy` argument with an array of filter properties:
-- `orderBy`: array of sorting object(s) (see below)
-  - `field`: field name to sort
-  - `direction`: a GraphQL enum (server side) that can have 1 of these choices:
-    - `ASC`, `DESC`
-
-**Note:** the `orderBy` order is following the order of how the filter objects were entered in the array.
-
-For example
-```ts
-users (first: 20, offset: 10, orderBy: [{field: lastName, direction: ASC}, {field: firstName, direction: DESC}]) {
-  totalCount
-  nodes {
-    name
-    firstName
-    lastName
-    gender
-  }
-}
-```
-
-### Complex Objects
-Dealing with complex objects are a little bit more involving. Because of some limitation with our [GraphQL for .Net](https://github.com/graphql-dotnet/graphql-dotnet) implementation, we decided to leave `field` as regular strings and keep the dot notation within the string. For that behavior to work, a new `keepArgumentFieldDoubleQuotes` property was added that can be passed to the GraphQL `initOptions()` function. For example, given a complex object field (defined in the Column Definition) that is `field: "billing.street"` will give this GraphQL query (if you have `keepArgumentFieldDoubleQuotes` set to True).
-
-##### Grid Definition example
-```ts
-import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
-
-export class Sample {
-  prepareDatagrid(private graphqlService: GraphqlService ) {
-    this.columnDefinitions = [
-      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true },
-      { id: 'company', name: 'Company', field: 'company', filterable: true },
-      { id: 'billingStreet', name: 'Billing Address Street', field: 'billing.address.street', filterable: true, sortable: true },
-      { id: 'billingZip', name: 'Billing Address Zip', field: 'billing.address.zip', filterable: true, sortable: true },
-    ];
-
-    this.gridOptions = {
-      backendServiceApi: {
-        service: new GraphqlService(),
-        process: (query) => this.userService.getAll<Customer[]>(query),
-        options: {
-          datasetName: 'customers'
-        }
-      }
-    };
-  }
-}
-```
-
-##### GraphQL Query
-
-```ts
-// the orderBy/filterBy fields will keep the dot notation while nodes are exploded
-{
-  users(first: 20, offset: 0, orderBy: [{field: "billing.address.street", direction: ASC}]) {
-    totalCount,
-    nodes {
-      name,
-      company,
-      billing {
-        address {
-          street,
-          zip
-        }
-      }
-    }
-  }
-}
-```
-
-From the previous example, you can see that the `orderBy` keeps the (.) dot notation, while the `nodes` is exploded as it should `billing { street }}`. So keep this in mind while building your backend GraphQL service.

package/docs/column-functionalities/cell-menu.md

@@ -1,212 +0,0 @@
-#### index
-- [Default Usage](#default-usage)
-- [Action Callback Methods](#action-callback-methods-preferred-approach)
-- [Override Callback Methods](#override-callback-methods)
-- [How to add Translations](#how-to-add-translations)
-- [How to Disable Cell Menu](#how-to-disable-the-cell-menu)
-- [UI Sample](#ui-sample)
-
-### Demo
-[Demo](https://ghiscoding.github.io/Angular-Slickgrid/#/context) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-contextmenu.component.ts)
-
-### Description
-A Cell Menu, most often used as an Action Menu and is more oriented on a row action (e.g. delete current row), it could be defined on 1 or more columns (defined in a column definition) and is triggered by a cell click or touch. The menu can show a list of Commands (to execute an action) and/or Options (to change the value of a field). Also note that the Commands list is following the same structure used in the [Context Menu](../grid-functionalities/Context-Menu.md), [Header Menu](../grid-functionalities/Header-Menu-&-Header-Buttons.md) & [Grid Menu](../grid-functionalities/Grid-Menu.md). The Cell Menu is very similar to the [Context Menu](../grid-functionalities/Context-Menu.md), both were create as SlickGrid plugins during the same period, their main difference is that they get triggered differently (cell click vs mouse right+click) and they serve different purposes. The Cell Menu is more oriented on a row action (e.g. delete current row) while the Context Menu is all about actions for the entire grid (e.g. export to Excel).
-
-This extensions is wrapped around the new SlickGrid Plugin **SlickCellMenu**
-
-### Default Usage
-To use the Cell Menu, you will need to enable it in the Grid Options and also define its structure in the chose column. You can customize the menu with 2 different lists, Commands and/or Options, they can be used separately or at the same time (same as [Context Menu](../grid-functionalities/Context-Menu.md)). However please note that you will also need to use a Custom Formatter to display the Action button/text, it's easy enough as you can see below. Also note that even though the code shown below makes a separation between the Commands and Options, you can mix them in the same Cell Menu.
-
-#### with Commands
-```ts
-this.columnDefinitions = [
-  { id: 'firstName', field: 'firstName', name: 'First Name' },
-  { id: 'lastName', field: 'lastName', name: 'Last Name' },
-  // ... more column defs
-  {
-    id: 'action', name: 'Action', field: 'action', width: 110, maxWidth: 200,
-    excludeFromExport: true,    // you typically don't want this column exported
-    formatter: actionFormatter, // your Custom Formatter
-    cellMenu: {
-      commandTitle: 'Commands', // optional title
-      commandItems: [
-        // array of command item objects, you can also use the "positionOrder" that will be used to sort the items in the list
-        {
-          command: 'command1', title: 'Command 1', positionOrder: 61,
-          // you can use the "action" callback and/or use "onCommand" callback from the grid options, they both have the same arguments
-          action: (e, args) => {
-            console.log(args.dataContext, args.column); // action callback.. do something
-          }
-        },
-        { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 },
-        // you can add sub-menus by adding nested `commandItems`
-        {
-         // we can also have multiple nested sub-menus
-         command: 'export', title: 'Exports', positionOrder: 99,
-         commandItems: [
-           { command: 'exports-txt', title: 'Text (tab delimited)' },
-           {
-              command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange',
-              commandItems: [
-                { command: 'exports-csv', title: 'Excel (csv)' },
-                { command: 'exports-xlsx', title: 'Excel (xlsx)' },
-             ]
-           }
-         ]
-        },
-      ],
-    }
-  }
-]
-```
-
-#### with Options
-That is when you want to define a list of Options (only 1 list) that the user can choose from and once an option is selected we would do something (for example change the value of a cell in the grid).
-```ts
-this.columnDefinitions = [
-  { id: 'firstName', field: 'firstName', name: 'First Name' },
-  { id: 'lastName', field: 'lastName', name: 'Last Name' },
-  // ... more column defs
-  {
-    id: 'action', name: 'Action', field: 'action', width: 110, maxWidth: 200,
-    excludeFromExport: true,    // you typically don't want this column exported
-    formatter: actionFormatter, // your Custom Formatter
-    cellMenu: {
-      optionTitle: 'Change Effort Driven Flag', // optional, add title
-      optionItems: [
-        { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' },
-        { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' },
-        { divider: true, command: '', positionOrder: 60 },
-      ],
-      // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option)
-      action: (e, args) => {
-        console.log(args.dataContext, args.column); // action callback.. do something
-      }
-    }
-  }
-};
-```
-
-### Action Callback Methods (preferred approach)
-There are 2 ways to execute an action after a Command is clicked (or an Option is selected), you could do it via the `action` callback or via the `onCommand` callback. You might be wondering why 2 and what's the difference? Well, the `action` would have to be defined on every single Command/Option while the `onCommand` (or `onOptionSelected`) is more of a global subscriber which gets triggered every time any of the Command/Option is clicked/selected, so for that, you would typically need to use `if/else` or a `switch/case`... hmm ok but I still don't understand when would I use the `onCommand`? Let say you combine the Cell Menu with the [Context Menu](../grid-functionalities/Context-Menu.md) and some of the commands are the same, well, in that case, it might be better to use the `onCommand` and centralize your commands in that callback, while in most other cases if you wish to do only 1 thing with a command, then using the `action` might be better. Also, note that they could also both be used if you wish.
-
-So if you decide to use the `action` callback, then your code would look like this
-##### with `action` callback
-```ts
-this.columnDefinitions = [
-  { id: 'action', field: 'action', name: 'Action',
-    cellMenu: {
-      commandItems: [
-        { command: 'command1', title: 'Command 1', action: (e, args) => console.log(args) },
-        { command: 'command2', title: 'Command 2', action: (e, args) => console.log(args) }
-        // ...
-      ]
-    }
-  }
-];
-```
-
-##### with `onCommand` callback
-The `onCommand` (or `onOptionSelected`) **must** be defined in the Grid Options
-
-```ts
-this.columnDefinitions = [
-  { id: 'action', field: 'action', name: 'Action',
-    cellMenu: {
-      commandItems: [
-        { command: 'command1', title: 'Command 1' },
-        { command: 'command2', title: 'Command 2' }
-        // ...
-      ]
-    }
-  }
-];
-
-this.gridOptions = {
-  enableCellMenu: true,
-  cellMenu: {
-    onCommand(e, args) => {
-      const columnDef = args.columnDef;
-      const command = args.command;
-      const dataContext = args.dataContext;
-
-      switch (command) {
-        case 'command1': alert('Command 1'); break;
-        case 'command2': alert('Command 2'); break;
-        default: break;
-      }
-    }
-  }
-};
-```
-
-### Override Callback Methods
-What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following
-- `menuUsabilityOverride` returning false would make the Cell Menu unavailable to the user
-- `itemVisibilityOverride` returning false would hide the item (command/option) from the list
-- `itemUsabilityOverride` return false would disabled the item (command/option) from the list
-  - **note** there is also a `disabled` property that you could use, however it is defined at the beginning while the override is meant to be used with certain logic dynamically.
-
-For example, say we want the Cell Menu to only be available on the first 20 rows of the grid, we could use the override this way
-```ts
-this.columnDefinitions = [
-  { id: 'action', field: 'action', name: 'Action',
-    cellMenu: {
-      menuUsabilityOverride: (args) => {
-        const dataContext = args && args.dataContext;
-        return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20
-      },
-    }
-  }
-];
-```
-
-To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way
-```ts
-this.columnDefinitions = [
-  { id: 'action', field: 'action', name: 'Action',
-    cellMenu: {
-      optionItems: [
-      {
-        option: 0, title: 'n/a', textCssClass: 'italic',
-        // only enable this option when the task is Not Completed
-        itemUsabilityOverride: (args) => {
-          const dataContext = args && args.dataContext;
-          return !dataContext.completed;
-        },
-        { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' },
-        { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' },
-        { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' },
-      ]
-    }
-  }
-];
-```
-
-### How to add Translations?
-It works exactly like the rest of the library when `enableTranslate` is set, all we have to do is to provide translations with the `Key` suffix, so for example without translations, we would use `title` and that would become `titleKey` with translations, that;'s easy enough. So for example, a list of Options could be defined as follow:
-```ts
-this.columnDefinitions = [
-  { id: 'action', field: 'action', name: 'Action',
-    cellMenu: {
-      optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options
-      optionItems: [
-        { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' },
-        { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' },
-        { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' },
-      ]
-    }
-  }
-];
-```
-
-### How to Disable the Cell Menu?
-You can disable the Cell Menu, by calling `enableCellMenu: false` from the Grid Options.
-```ts
-this.gridOptions = {
-   enableCellMenu: false
-};
-```
-
-### UI Sample
-![image](https://user-images.githubusercontent.com/643976/71301668-3aead800-2370-11ea-8ae5-acd124aff054.png)