@genesislcap/foundation-entity-management 11.3.0

package/dist/dts/users/users.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"users.template.d.ts","sourceRoot":"","sources":["../../../src/users/users.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAqF5D,eAAO,MAAM,aAAa,EAAE,YAmC3B,CAAC"}

package/dist/dts/utils/formatting.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Format the error as a string with a different format depending on whether
+ * `err` has a `FIELD` property or not
+ * @public
+ */
+export declare const getErrorFormat: (err: any) => string;
+//# sourceMappingURL=formatting.d.ts.map

package/dist/dts/utils/formatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../src/utils/formatting.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,cAAc,sBAAsE,CAAC"}

package/dist/dts/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './formatting';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/entities/entities.js

@@ -0,0 +1,296 @@
+import { __awaiter, __decorate, __rest } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { ErrorBoundaryEvent, getErrorBuilder, getNotificationBuilder, } from '@genesislcap/foundation-errors';
+import { createLogger, LifecycleMixin } from '@genesislcap/foundation-utils';
+import { attr, customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { getErrorFormat } from '../utils';
+import { styles } from './entities.styles';
+import { template } from './entities.template';
+/**
+ * Logger for the entity management suite
+ *
+ * @privateRemarks TODO: Should we expose a hook to set log level rather than the logger itself
+ * @internal
+ */
+export const logger = createLogger('entity-management');
+/**
+ * Main class which defines the entity management functionality
+ *
+ * @remarks
+ *
+ * Connects to a backend resource and wraps up a grid which is populated
+ * with entities from that resource. The different interactions that the user
+ * can perform with the entities can be configured, examples being able to
+ * update and delete entities.
+ *
+ * @public
+ *
+ * @example
+ * Example of using the entity management system to handle counterparties
+ * ```
+ * <entity-management
+ *   resourceName="ALL_COUNTERPARTYS"
+ *   title="Counterparty Management"
+ *   updateEvent="EVENT_COUNTERPARTY_MODIFY"
+ *   deleteEvent="EVENT_COUNTERPARTY_DELETE"
+ *   createEvent="EVENT_COUNTERPARTY_INSERT"
+ * ></entity-management>
+ * ```
+ * Where:<br />
+ * - the title of the grid is `Counterparty Management`<br />
+ * - the name of the resource in the database to manage is `ALL_COUNTERPARTYS`<br />
+ * - the name of the event handler for update events is `EVENT_COUNTERPARTY_MODIFY`<br />
+ * - the name of the event handler for create events is `EVENT_COUNTERPARTY_INSERT`<br />
+ * - the name of the event handler for delete events is `EVENT_COUNTERPARTY_DELETE`<br />
+ *
+ */
+let EntityManagement = class EntityManagement extends LifecycleMixin(FASTElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Label for the entity which has usages such as being shown in the title of the modal wen editing the entity
+         * @public
+         */
+        this.entityLabel = '';
+        this.editModalVisible = false;
+        /**
+         * Updates the reference to the current entity stored in the class. Added as an event listener on the class when receiving the `rowSelected` event.
+         *
+         * @param e - CustomEvent which contains data about the selected entity. If the row is not selected then the reference will be set to an empty object.
+         * @internal
+         */
+        this.selectEntity = (e) => {
+            this.selectedEntity = e.detail.node.isSelected() ? e.detail.data : {};
+        };
+    }
+    editModalVisibleChanged() {
+        if (this.editEntityModal) {
+            if (this.editModalVisible) {
+                this.editEntityModal.show();
+            }
+            else {
+                this.editEntityModal.close();
+            }
+        }
+    }
+    /**
+     * Set up the web component
+     * @internal
+     */
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            this.addEventListener('rowSelected', this.selectEntity);
+            if (this.deleteEvent) {
+                this.addEventListener('delete-entity', this.deleteEntity);
+            }
+            this.addEventListener('edit-entity', this.editEntity);
+            this.addEventListener('read-entity', this.readEntity);
+        });
+    }
+    /**
+     * Override the deepClone method to ensure that observable attributes are cloned
+     * @public
+     */
+    deepClone() {
+        const copy = super.deepClone();
+        copy.createFormUiSchema = structuredClone(this.createFormUiSchema);
+        copy.datasourceConfig = structuredClone(this.datasourceConfig);
+        copy.editDialogTitle = structuredClone(this.editDialogTitle);
+        copy.editModalVisible = structuredClone(this.editModalVisible);
+        copy.formResourceName = structuredClone(this.formResourceName);
+        copy.formUiSchema = structuredClone(this.formUiSchema);
+        copy.updateFormUiSchema = structuredClone(this.updateFormUiSchema);
+        // this.columns[number] might contain a function, so can't use structuredClone
+        copy.columns = this.columns ? [...this.columns].map((x) => (Object.assign({}, x))) : this.columns;
+        return copy;
+    }
+    /**
+     * Event handler for when the user submits the action for the currently open form, either editing or adding the entity
+     *
+     * @param e - CustomEvent which contains the payload for the entity to submit to the backend
+     *
+     * Emits an event upon error
+     * @public
+     */
+    submitEntityChanges(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.closeModal();
+        });
+    }
+    /**
+     * Sets up and opens the model to either edit or add an entity. Added as an event listener on the class when receiving the `edit-entity` event.
+     *
+     * @param e - CustomEvent where `e.detail` is used to deduce whether to edit or add an entity.
+     * @internal
+     */
+    editEntity(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.editDialogTitle = `${e.detail ? 'Edit' : 'Add'} ${this.entityLabel}`;
+            this.formUiSchema = e.detail ? this.updateFormUiSchema : this.createFormUiSchema;
+            this.formResourceName = e.detail ? this.updateEvent : this.createEvent;
+            if (e.detail) {
+                const _a = e.detail, { ROW_REF } = _a, formData = __rest(_a, ["ROW_REF"]);
+                this.editedEntity = formData;
+                if (this.readEventFn) {
+                    const readEntityReq = yield this.readEventFn(formData);
+                    this.editedEntity = Object.assign(Object.assign({}, readEntityReq), this.editedEntity);
+                }
+                else if (this.readEvent) {
+                    const readEventReq = yield this.connect.request(this.readEvent, {
+                        REQUEST: formData,
+                    });
+                    this.editedEntity = Object.assign(Object.assign({}, readEventReq.REPLY[0]), this.editedEntity);
+                }
+            }
+            else {
+                this.editedEntity = {};
+            }
+            this.editModalVisible = true;
+        });
+    }
+    readEntity(e) {
+        this.readonly = true;
+        this.editEntity(e);
+        this.editDialogTitle = '';
+    }
+    closeModal() {
+        this.readonly = false;
+        this.editModalVisible = false;
+    }
+    /**
+     * Handler for deleting the entity. Added as an event listener on the class when receiving the `delete-entity` event.
+     *
+     * @param e - CustomEvent where `e.detail` contains data to update the selectedEntity reference with the entity to delete.
+     * @internal
+     */
+    deleteEntity(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const schema = yield this.connect.getJSONSchema(this.deleteEvent);
+            this.selectedEntity = e.detail;
+            const DETAILS = {};
+            if (typeof schema.INBOUND.properties.DETAILS !== 'boolean') {
+                const requiredFields = schema.INBOUND.properties.DETAILS.required;
+                if (requiredFields) {
+                    requiredFields.forEach((property) => {
+                        DETAILS[property] = this.selectedEntity[property];
+                    });
+                    const deleteReq = yield this.connect.commitEvent(this.deleteEvent, {
+                        DETAILS,
+                    });
+                    this.errorNotify(deleteReq);
+                }
+                else {
+                    logger.error('No required fields found for delete event', this.deleteEvent);
+                }
+            }
+        });
+    }
+    /**
+     * Show notifications if the executed event returned an error.
+     * @public
+     */
+    errorNotify(request) {
+        const notificationCloseTimeout = 5000;
+        if (request.ERROR) {
+            logger.error(request.ERROR);
+            request.ERROR.forEach((err) => {
+                this.$emit(ErrorBoundaryEvent.ERROR_BOUNDARY_EVENT, getErrorBuilder()
+                    .withTitle(err.CODE)
+                    .withErrorDetails(getErrorFormat(err))
+                    .withNotification(getNotificationBuilder()
+                    .withType('warning')
+                    .withAutoClose(true)
+                    .withCloseTimeout(notificationCloseTimeout)
+                    .build())
+                    .build());
+            });
+        }
+    }
+};
+__decorate([
+    Connect
+], EntityManagement.prototype, "connect", void 0);
+__decorate([
+    attr
+], EntityManagement.prototype, "resourceName", void 0);
+__decorate([
+    attr
+], EntityManagement.prototype, "readEvent", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "readEventFn", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], EntityManagement.prototype, "readonly", void 0);
+__decorate([
+    attr
+], EntityManagement.prototype, "updateEvent", void 0);
+__decorate([
+    attr
+], EntityManagement.prototype, "deleteEvent", void 0);
+__decorate([
+    attr
+], EntityManagement.prototype, "createEvent", void 0);
+__decorate([
+    attr
+], EntityManagement.prototype, "title", void 0);
+__decorate([
+    attr
+], EntityManagement.prototype, "entityLabel", void 0);
+__decorate([
+    attr({ attribute: 'persist-column-state-key' })
+], EntityManagement.prototype, "persistColumnStateKey", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "columns", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "datasourceConfig", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "formUiSchema", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "createFormUiSchema", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "updateFormUiSchema", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "formResourceName", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "selectedEntity", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "editedEntity", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "submitting", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "editDialogTitle", void 0);
+__decorate([
+    observable
+], EntityManagement.prototype, "editModalVisible", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'size-columns-to-fit' })
+], EntityManagement.prototype, "sizeColumnsToFit", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'enable-filter-bar' })
+], EntityManagement.prototype, "enableFilterBar", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'enable-cell-flashing' })
+], EntityManagement.prototype, "enableCellFlashing", void 0);
+EntityManagement = __decorate([
+    customElement({
+        name: 'entity-management',
+        template,
+        styles,
+    })
+], EntityManagement);
+export { EntityManagement };

package/dist/esm/entities/entities.styles.js

@@ -0,0 +1,29 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Defines the css of the entity component as an ElementStyles object
+ *
+ * @remarks
+ *
+ * Mixin to custom ElementStyles to override and customise the style of an
+ * entity manager component
+ */
+export const styles = css `
+  :host {
+    contain: content;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  foundation-form {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .title {
+    margin-left: 1px;
+  }
+`;

package/dist/esm/entities/entities.template.js

@@ -0,0 +1,43 @@
+import { Form } from '@genesislcap/foundation-forms';
+import { html, ref, when } from '@microsoft/fast-element';
+import { List } from '../list';
+List;
+Form;
+/**
+ * Defines the html of the entity component as a ViewTemplate object
+ * @typeParam EntityManagement - the {@link @genesislcap/foundation-entity-management#EntityManagement | class} the template is defined for
+ */
+export const template = html `
+  <div class="container">
+    <entity-list
+      title=${(x) => x.title}
+      persist-column-state-key=${(x) => x.persistColumnStateKey}
+      size-columns-to-fit=${(x) => x.sizeColumnsToFit}
+      enable-filter-bar=${(x) => x.enableFilterBar}
+      resourceName=${(x) => x.resourceName}
+      :createEvent=${(x) => x.createEvent}
+      :deleteEvent=${(x) => x.deleteEvent}
+      :updateEvent=${(x) => x.updateEvent}
+      :columns=${(x) => x.columns}
+      :datasourceConfig=${(x) => x.datasourceConfig}
+    ></entity-list>
+    <zero-modal
+      ${ref('editEntityModal')}
+      position="right"
+      :onCloseCallback=${(x) => x.closeModal.bind(x)}
+    >
+      <div slot="top">${(x) => x.editDialogTitle}</div>
+
+      <slot name="edit">
+        ${when((x) => x.editModalVisible, html `
+            <foundation-form
+              resourceName=${(x) => x.formResourceName}
+              :data=${(x) => x.editedEntity}
+              :uischema=${(x) => x.formUiSchema}
+              @submit-success=${(x, c) => x.submitEntityChanges(c.event)}
+            ></foundation-form>
+          `)}
+      </slot>
+    </zero-modal>
+  </div>
+`;

package/dist/esm/entities/index.js

@@ -0,0 +1,3 @@
+export * from './entities';
+export * from './entities.template';
+export * from './entities.styles';

package/dist/esm/index.federated.js

@@ -0,0 +1 @@
+import('./index');

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './users/users';
+export * from './profiles/profiles';
+export * from './entities/entities';
+export * from './utils';

package/dist/esm/list/index.js

@@ -0,0 +1 @@
+export * from './list';

package/dist/esm/list/list.js

@@ -0,0 +1,111 @@
+import { __awaiter, __decorate } from "tslib";
+import { Events } from '@ag-grid-community/core';
+import { attr, customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { listStyles } from './list.styles';
+import { buttonCellRenderer, listTemplate } from './list.template';
+let List = class List extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.resourceName = '';
+        this.title = '';
+        this.actionButtonsConfig = [];
+        this.edit = (e) => {
+            this.$emit('edit-entity', e);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grid.addEventListener('onGridReady', () => {
+            this.grid.gridApi.addEventListener(Events.EVENT_FIRST_DATA_RENDERED, () => {
+                if (this.sizeColumnsToFit) {
+                    this.grid.gridApi.sizeColumnsToFit();
+                }
+            });
+            this.grid.gridApi.addEventListener('rowClicked', (e) => this.select(e));
+            this.actionButtonsConfig = [];
+            if (this.deleteEvent) {
+                this.actionButtonsConfig.push(buttonCellRenderer('Delete', (e) => this.delete(e)));
+            }
+            if (this.updateEvent) {
+                this.actionButtonsConfig.push(buttonCellRenderer('Edit', this.edit));
+            }
+            if (this.enableFilterBar) {
+                this.addEventListener('filter-changed', this.handleFilterChanged);
+                this.addEventListener('filter-cleared', this.handleFilterCleared);
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.enableFilterBar) {
+            this.removeEventListener('filter-changed', this.handleFilterChanged);
+            this.removeEventListener('filter-cleared', this.handleFilterCleared);
+        }
+    }
+    handleFilterChanged(e) {
+        var _a, _b;
+        const fieldName = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.fieldName;
+        const filter = (_b = e === null || e === void 0 ? void 0 : e.detail) === null || _b === void 0 ? void 0 : _b.filter;
+        fieldName && filter && this.datasource.setFilter(fieldName, filter);
+    }
+    handleFilterCleared(e) {
+        var _a;
+        const fieldName = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.fieldName;
+        this.datasource.removeFilter(fieldName);
+    }
+    select(e) {
+        this.$emit('rowSelected', e);
+    }
+    create() {
+        this.$emit('edit-entity');
+    }
+    delete(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.$emit('delete-entity', e);
+        });
+    }
+};
+__decorate([
+    attr
+], List.prototype, "resourceName", void 0);
+__decorate([
+    attr
+], List.prototype, "title", void 0);
+__decorate([
+    attr({ attribute: 'persist-column-state-key' })
+], List.prototype, "persistColumnStateKey", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'size-columns-to-fit' })
+], List.prototype, "sizeColumnsToFit", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'enable-filter-bar' })
+], List.prototype, "enableFilterBar", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'enable-cell-flashing' })
+], List.prototype, "enableCellFlashing", void 0);
+__decorate([
+    observable
+], List.prototype, "columns", void 0);
+__decorate([
+    observable
+], List.prototype, "datasourceConfig", void 0);
+__decorate([
+    observable
+], List.prototype, "actionButtonsConfig", void 0);
+__decorate([
+    observable
+], List.prototype, "createEvent", void 0);
+__decorate([
+    observable
+], List.prototype, "deleteEvent", void 0);
+__decorate([
+    observable
+], List.prototype, "updateEvent", void 0);
+List = __decorate([
+    customElement({
+        name: 'entity-list',
+        template: listTemplate,
+        styles: listStyles,
+    })
+], List);
+export { List };

package/dist/esm/list/list.styles.js

@@ -0,0 +1,27 @@
+import { css } from '@microsoft/fast-element';
+export const listStyles = css `
+  :host {
+    contain: content;
+  }
+
+  :host,
+  fast-router {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    width: 100%;
+  }
+
+  .heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+`;

package/dist/esm/list/list.template.js

@@ -0,0 +1,77 @@
+import { html, ref, repeat, when } from '@microsoft/fast-element';
+export const buttonCellRenderer = (title, clickHandler) => ({
+    width: 100,
+    pinned: 'right',
+    enableCellChangeFlash: false,
+    cellStyle: { padding: '0', lineHeight: '25px' },
+    filter: false,
+    suppressFiltersToolPanel: true,
+    suppressColumnsToolPanel: true,
+    headerName: '',
+    minWidth: 100,
+    maxWidth: 100,
+    cellRendererSelector: (params) => params.node.group
+        ? undefined
+        : {
+            component: 'action',
+            params: {
+                actionClick: clickHandler,
+                actionName: title,
+                appearance: 'accent',
+            },
+        },
+});
+export const listTemplate = html `
+  <div class="heading">
+    <h3>${(x) => x.title}</h3>
+    ${when((x) => x.createEvent, html `
+        <zero-button
+          appearance="accent"
+          @click=${(x) => x.create()}
+          ?disabled="${(x) => x.addDisabled}"
+        >
+          Add
+        </zero-button>
+      `)}
+  </div>
+  <div class="container">
+    ${when((x) => x.enableFilterBar, html `
+        <zero-filter-bar
+          resource=${(x) => x.resourceName}
+          only=${(x) => { var _a; return (_a = x.columns) === null || _a === void 0 ? void 0 : _a.map((colDef) => colDef.field).filter((field) => !!field); }}
+          labels=${(x) => { var _a; return (_a = x.columns) === null || _a === void 0 ? void 0 : _a.map((colDef) => colDef.headerName || ''); }}
+          target="datasource"
+        ></zero-filter-bar>
+      `)}
+    <zero-grid-pro
+      ${ref('grid')}
+      auto-cell-renderer-by-type
+      rowSelection="single"
+      rowHeight="36"
+      headerHeight="36"
+      persist-column-state-key=${(x) => x.persistColumnStateKey}
+      ?only-template-col-defs=${(x) => !!x.columns}
+      suppressCellFocus="true"
+      suppressRowDeselection="true"
+      enable-cell-flashing=${(x) => x.enableCellFlashing}
+    >
+      <grid-pro-genesis-datasource
+        ${ref('datasource')}
+        resource-name=${(x) => x.resourceName}
+        criteria=${(x) => { var _a; return (_a = x.datasourceConfig) === null || _a === void 0 ? void 0 : _a.criteria; }}
+        fields=${(x) => { var _a; return (_a = x.datasourceConfig) === null || _a === void 0 ? void 0 : _a.fields; }}
+        is-snapshot=${(x) => { var _a; return (_a = x.datasourceConfig) === null || _a === void 0 ? void 0 : _a.isSnapshot; }}
+        max-rows=${(x) => { var _a; return (_a = x.datasourceConfig) === null || _a === void 0 ? void 0 : _a.maxRows; }}
+        max-view=${(x) => { var _a; return (_a = x.datasourceConfig) === null || _a === void 0 ? void 0 : _a.maxView; }}
+        order-by=${(x) => { var _a; return (_a = x.datasourceConfig) === null || _a === void 0 ? void 0 : _a.orderBy; }}
+        reverse=${(x) => { var _a; return (_a = x.datasourceConfig) === null || _a === void 0 ? void 0 : _a.reverse; }}
+      ></grid-pro-genesis-datasource>
+      ${repeat((x) => x.columns, html `
+          <grid-pro-column :definition=${(x) => x}></grid-pro-column>
+        `)}
+      ${repeat((x) => x.actionButtonsConfig, html `
+          <grid-pro-column :definition=${(x) => x}></grid-pro-column>
+        `)}
+    </zero-grid-pro>
+  </div>
+`;

package/dist/esm/profiles/editProfileSchema.js

@@ -0,0 +1,40 @@
+export const editProfileFormSchema = {
+    type: 'VerticalLayout',
+    elements: [
+        {
+            type: 'Control',
+            label: 'NAME',
+            scope: '#/properties/NAME',
+        },
+        {
+            type: 'Control',
+            label: 'Description',
+            scope: '#/properties/DESCRIPTION',
+        },
+        {
+            type: 'Control',
+            label: 'Status',
+            scope: '#/properties/STATUS',
+        },
+        {
+            type: 'Control',
+            label: 'Rights',
+            scope: '#/properties/RIGHT_CODES',
+            options: {
+                allOptionsResourceName: 'RIGHT',
+                valueField: 'CODE',
+                labelField: 'CODE',
+            },
+        },
+        {
+            type: 'Control',
+            label: 'Users',
+            scope: '#/properties/USER_NAMES',
+            options: {
+                allOptionsResourceName: 'USER',
+                valueField: 'USER_NAME',
+                labelField: 'USER_NAME',
+            },
+        },
+    ],
+};