From ee8aa06b927fb0823edd1708b227f1fd75722dca Mon Sep 17 00:00:00 2001 From: Svetlana Date: Mon, 22 Jul 2024 11:48:24 +0500 Subject: [PATCH 1/2] Add FOLV info --- .../components/efd3_object-list-view.ru.md | 374 +++++++++++++++++- 1 file changed, 372 insertions(+), 2 deletions(-) diff --git a/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md b/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md index aa80e7f46..07360c928 100644 --- a/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md +++ b/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md @@ -101,8 +101,15 @@ action=customActionName `editFormRoute`| Задаёт имя роута формы редактирования, в котором будет открываться модель. `singleColumnHeaderTitle`| Заголовок для мобильного представления компонента, вместо названий колонок. Если не задан или равен "", то шапка таблицы в компоненте скрывается. `colsConfigButton`| Флаг (`true`/`false`) включающий/выключающий отображение кнопок пользовательских настроек. -`bottomPagination`| Флаг, определяющий положение пагинации верху/снизу. - +`bottomPagination`| Флаг, определяющий положение пагинации верху/снизу. +`tableStriped`| Флаг, определяющий, будут ли строки таблицы раскрашены через одну ("зебра"). Значение по умолчанию: true. +`_availableHierarchicalMode`| Флаг, включающий настройку иерархического списка. Значение по умолчанию: false. +`disableHierarchicalMode`| Флаг, отключающий настройку иерархического списка. Значение по умолчанию: false. +`hierarchicalIndent`| Отступ в пикселях для вложенных элементов. Значение по умолчанию: 20. +`hierarchyPaging`| Флаг, используемый для включения/отключения иерархической пейджинга. Значение по умолчанию: false. +`hierarchicalAttribute`| Имя атрибута для построения иерархии. +`inHierarchicalMode`| Флаг указывающий, когда компонент находится в иерархическом режиме. Значение по умолчанию: false. +`onEditForm`| Флаг указывающий, размещен ли компонент на форме редактирования. Значение по умолчанию: false. Значения по умолчанию: ```javascript @@ -206,3 +213,366 @@ export default ListFormController.extend({ ## Пользовательские кнопки в тулбаре Панель управления, как и кнопки в строках, может быть дополнена пользовательскими кнопками, реализующими необходимые прикладные функции для работы со списком. Подробнее описано в статье [Настройки списков](efd3_setting-lists.html). + +## Раскраска строк + +У компонента есть свойство раскраски строк `tableStriped`. При включенном свойстве строки таблицы окрашиваются через одну для удобства восприятия. По умолчанию это свойство включено для браузерных версий и выключено для мобильной. + +## Ограничение длины текста в ячейках + +Есть возможность задавать длину текста в ячейках спискового компонента. Пример можно посмотреть на [тестовом стенде](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/limited-text-size-example). + +Чтобы задавать длину текста в ячейках, нужно прописать настройку `maxTextLength` и/или `cutBySpaces`в `getCellComponent` в контроллере: + +```js +/** + Method to get type and attributes of a component, + which will be embeded in object-list-view cell. + + @method getCellComponent. + @param {Object} attr Attribute of projection property related to current table cell. + @param {String} bindingPath Path to model property related to current table cell. + @param {DS.Model} modelClass Model class of data record related to current table row. + @return {Object} Object containing name & properties of component, which will be used to render current table cell. + { componentName: 'my-component', componentProperties: { ... } }. + */ +getCellComponent: function(attr) { + let cellComponent = { + componentName: 'object-list-view-cell', + componentProperties: { + maxTextLength: 10, + cutBySpaces: true, + } + }; + + if (attr.caption === 'Text') { + cellComponent = { + componentName: 'flexberry-text-cell', + componentProperties: { + maxTextLength: 10, + cutBySpaces: true, + } + }; + } + + return cellComponent; +} +``` + +Длина текста `maxTextLength`задается в символах. Если содержимое ячейки не влезает в указанную длину, то будет показываться заданное количество символов и троеточие после. Если задать длину 0, то ограничение длины отключено. По умолчанию равно 0. + +Включенная настройка `cutBySpaces` будет обрезать строки по первому встреченному пробелу. По умолчанию отключена. + +## Возможности сервиса objectlistview-events + +`objectlistview-events` - это сервис, который предназначен для управления событиями, связанными с компонентом flexberry-objectlistview. Чтобы получить доступ к сервису, нужно прописать: + +``` js + /** + Service that triggers objectlistview events. + + @property objectlistviewEventsService + @type Service + */ + objectlistviewEventsService: service('objectlistview-events'), +``` + +Основные возможности этого сервиса: + +* Управление выбранными записями: Сервис хранит и управляет списком выбранных записей для всех компонентов flexberry-objectlistview. Он предоставляет методы для получения, очистки и восстановления выбранных записей. Примеры использования: + + ```js + // Получение выбранных записей + let selectedRecords = this.get('objectlistviewEvents').getSelectedRecords('myOlvComponentName'); + + // Очистка выбранных записей + this.get('objectlistviewEvents').clearSelectedRecords('myOlvComponentName'); + + // Восстановление выбранных записей после обновления страницы или перехода на другую страницу + this.get('objectlistviewEvents').restoreSelectedRecords('myOlvComponentName'); + + ``` + +* Управление фильтрами: Сервис хранит информацию о доступных фильтрах для каждого компонента flexberry-objectlistview и предоставляет методы для их установки и получения. Примеры использования: + + ```js + // Установка набора столбцов с фильтрами для компонента flexberry-objectlistview + this.get('objectlistviewEvents').setOlvFilterColumnsArray('myOlvComponentName', [ + { name: 'name', caption: 'Name', filterType: 'text' }, + { name: 'age', caption: 'Age', filterType: 'number' } + ]); + + // Получение набора столбцов с фильтрами + let filters = this.get('objectlistviewEvents').getOlvFilterColumnsArray('myOlvComponentName'); + ``` + +* Триггеры событий: Сервис предоставляет множество методов для генерации различных событий, связанных с компонентом flexberry-objectlistview, таких как добавление, удаление, выбор и изменение записей, применение фильтров, обновление списка и т.д. Примеры использования: + + ```js + // Триггер события "добавить новую строку" + this.get('objectlistviewEvents').addRowTrigger('myOlvComponentName'); + + // Триггер события "удалить выбранные строки" + this.get('objectlistviewEvents').deleteRowsTrigger('myOlvComponentName', true); + + // Триггер события "обновить список" + this.get('objectlistviewEvents').refreshListTrigger('myOlvComponentName'); + ``` + +* Управление состоянием загрузки: Сервис предоставляет методы для установки и получения состояния загрузки формы, которые используются в приложении. Примеры использования: + + ```js + // Установка состояния загрузки + this.get('objectlistviewEvents').setLoadingState('loading'); + + // Получение состояния загрузки + let loadingState = this.get('objectlistviewEvents.loadingState'); + + ``` + +* Управление сортировкой: Сервис предоставляет методы для установки и получения параметров сортировки для компонента flexberry-objectlistview. Примеры использования: + + ```js + // Установка сортировки для flexberry-objectlistview + this.get('objectlistviewEvents').setSortingTrigger('myOlvComponentName', [ + { propName: 'name', direction: 'asc' }, + { propName: 'age', direction: 'desc' } // Массив определений сортировки + ]); + + // Установка сортировки для flexberry-groupedit + this.get('objectlistviewEvents').setGeSortTrigger('myGeComponentName', [ + { propName: 'name', direction: 'asc' }, + { propName: 'age', direction: 'desc' }], // Массив определений сортировки + this.get('model.colDescs') // Массив столбцов + ); + + // Установка сортировки по умолчанию для flexberry-groupedit + this.get('_groupEditEventsService').setDefaultGeSortTrigger(this.get('colDescs')); + + // Применение сортировки для flexberry-groupedit + this.get('objectlistviewEvents').geSortApplyTrigger('myOlvComponentName', [ + { propName: 'name', direction: 'asc' }, + { propName: 'age', direction: 'desc' } + ]); + ``` + +* Управление шириной столбцов: Сервис предоставляет метод `updateWidthTrigger` для обновления ширины столбцов в компоненте flexberry-objectlistview. Пример использования: + + ```js + updateWidth() { + this.get('objectlistviewEventsService').updateWidthTrigger('myOlvComponentName'); + }, + ``` + + Имя компонента 'myOlvComponentName' можно не передавать, тогда триггериться будут все доступные компоненты. + +* Управление выделением всех записей: Сервис предоставляет метод для выделения или снятия выделения со всех записей в компоненте flexberry-objectlistview. Примеры использования: + + ```js + // Выделение всех записей + this.get('objectlistviewEvents').updateSelectAllTrigger('myOlvComponentName', true, false); + + // Снятие выделения со всех записей + this.get('objectlistviewEvents').updateSelectAllTrigger('myOlvComponentName', false, false); + ``` + +* Управление перемещением записей: Сервис предоставляет метод для перемещения записей вверх или вниз в компоненте flexberry-objectlistview. Примеры использования: + + ```js + // Перемещение записей вниз + this.get('objectlistviewEvents').moveRowTrigger('myOlvComponentName', 1); + + // Перемещение записей вверх + this.get('objectlistviewEvents').moveRowTrigger('myOlvComponentName', -1); + ``` + +* Управление изменением фильтра: Сервис предоставляет метод для генерации события об изменении фильтра в компоненте flexberry-objectlistview, установку, получение фильтра. Примеры использования: + + ```hbs + {{flexberry-objectlistview + componentName='myOlvComponentName' + modelName='user' + modelProjection='UserE' + limit=getLimitFunction('myOlvComponentName') + ... + }} + ``` + + ```js + import { SimplePredicate } from 'ember-flexberry-data/query/predicate'; + + // Создание LimitFunction + let limitFunction = new SimplePredicate('Name', 'eq', 'John'); + + // Установка LimitFunction для компонента 'myOlvComponentName' + this.get('objectlistviewEvents').setLimitFunction(limitFunction, 'myOlvComponentName'); + + // Получение LimitFunction для компонента 'myOlvComponentName' + limitFunction = this.get('objectlistviewEvents').getLimitFunction('myOlvComponentName'); + + // Генерация события об изменении фильтра + this.get('objectlistviewEvents').filterConditionChangedTrigger( + 'myOlvComponentName', + { name: 'name', caption: 'Name', filterType: 'text' }, // Объект с описанием фильтра + 'newFilterValue', + 'oldFilterValue' + ); + ``` + +* Управление диалогом редактирования записи: Сервис предоставляет методы для генерации событий о создании и скрытии диалога редактирования записи. Примеры использования: + + ```js + // Генерация события о создании диалога редактирования + this.get('objectlistviewEvents').editRecordDialogCreatedTrigger(); + + // Генерация события о скрытии диалога редактирования + this.get('objectlistviewEvents').editRecordDialogHiddenTrigger(); + ``` + +## Иерархический список + +Для спискового объекта есть возможность задать отображение иерархий (когда у детейла есть детейл). Примеры есть на тестовом стенде: [Пример иерархии на списке](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/hierarchy-example), [Пример иерархии c пейджингом на списке](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/hierarchy-paging-example). + +Атрибуты, влияющие на настройку иерархии: + +Наименование компонента |Краткое описание компонента |Краткое описание компонента +:-----------------------|:------------------------------ |:------------------------------ +`_availableHierarchicalMode`| Флаг, включающий настройку иерархического списка. | false +`disableHierarchicalMode`| Флаг, отключающий настройку иерархического списка. | false +`hierarchicalIndent`| Отступ в пикселях для вложенных элементов. | 20 +`hierarchyPaging`| Флаг, используемый для включения/отключения иерархической пейджинга. | false +`hierarchicalAttribute`| Имя атрибута для построения иерархии. Если указано, будет предпринята попытка построить эту иерархию атрибутов. | undefined +`inHierarchicalMode`| Флаг указывающий, когда компонент находится в иерархическом режиме. | false + +Чтобы включить иерархию на списке, достаточно прописать в шаблоне компонента `disableHierarchicalMode=true`. Однако настройка может выглядеть и так: + +```hbs +{{flexberry-objectlistview + ... + disableHierarchicalMode=false + inHierarchicalMode=true + hierarchicalAttribute='parent' + hierarchyPaging=true +}} +``` + +## Размещение компонента списка на форме редактирования + +Списковый компонент можно разместить на форме редактирования. Можно посмотреть [пример](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/on-edit-form?sort=%2Bname) на тестовом стенде, открыв любую запись на редактирование. + +Чтобы разместить flexberry-objectlistview на форме редактирования, нужно прописать компонент в шаблоне нужной эдит форме с атрибутом `onEditForm=true`, в роуте эдит форме прописать в `developerUserSettings` списковый компонент, в контроллере эдит формы прописать свойства спискового компонента (используя `OlvOnEditMixin` миксин): + +```hbs +{{!-- templates/example/edit-form.hbs --}} + +{{flexberry-objectlistview + ... + componentName="FOLVOnEditForm" + onEditForm=true + content=customFolvContent + modelName=folvModelName + editFormRoute=folvEditFormRoute + modelProjection=folvProjection + customButtons=customButtons + userButtonAddAction=(action 'userButtonAddAction') +}} +``` + +```js +// routes/example/edit-form.js + +import EditFormRoute from 'ember-flexberry/routes/edit-form'; +import { computed } from '@ember/object'; +export default EditFormRoute.extend({ + /** + Name of model projection to be used as record's properties limitation. + + @property modelProjection + @type String + @default 'ExampleE' + */ + modelProjection: 'ExampleE', + + developerUserSettings: computed(function() { + return { FOLVOnEditForm: { } }}), + /** + Name of model to be used as form's record type. + + @property modelName + @type String + @default 'example-model-name' + */ + modelName: 'example-model-name' +}); +``` + +```js +// controlles/example/edit-from.js + +import EditFormController from 'ember-flexberry/controllers/edit-form'; +import OlvOnEditMixin from 'ember-flexberry/mixins/flexberry-objectlistview-on-edit-form-controller'; + +export default EditFormController.extend(OlvOnEditMixin, { + /** + Route name for transition after close edit form. + + @property parentRoute + @type String + */ + parentRoute: 'example/edit-form', + + /** + Name of related to FOLV edit form route. + + @property folvEditFormRoute + @type String + */ + folvEditFormRoute: 'folv-edit-form-route', + + /** + Name of FOLV model. + + @property folvModelName + @type String + */ + folvModelName: 'folv-edit-form-model-name', + + /** + Name of FOLV projection. + + @property folvProjection + @type String + */ + folvProjection: 'folvEditFormL', + + /** + Property to form array of special structures of custom user buttons. + + @property customButtons + @type Array + */ + customButtons: computed('i18n.locale', function() { + let i18n = this.get('i18n'); + return [{ + buttonName: 'User button', + buttonAction: 'userButtonAddAction', + buttonClasses: 'my-add-user-button add-click-button positive' + }]; + }), + + actions: { + /** + Handler for click on custom user button. + + @method userButtonAddAction + */ + userButtonAddAction: function() { + let thisUrl = this.get('target.url'); + this.transitionToRoute(this.get('folvEditFormRoute') + '.new') + .then((newRoute) => { + newRoute.controller.set('parentRoute', thisUrl); + }); + }, + }, +}); +``` From 0d3651b365b29380dbafe75977698f8d2a7b081d Mon Sep 17 00:00:00 2001 From: Svetlana Date: Wed, 28 Aug 2024 01:37:58 +0500 Subject: [PATCH 2/2] code review --- .../components/efd3_object-list-view.ru.md | 46 ++++++++++++------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md b/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md index 07360c928..bf9472c79 100644 --- a/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md +++ b/pages/products/flexberry-ember/3.x/components/efd3_object-list-view.ru.md @@ -101,18 +101,20 @@ action=customActionName `editFormRoute`| Задаёт имя роута формы редактирования, в котором будет открываться модель. `singleColumnHeaderTitle`| Заголовок для мобильного представления компонента, вместо названий колонок. Если не задан или равен "", то шапка таблицы в компоненте скрывается. `colsConfigButton`| Флаг (`true`/`false`) включающий/выключающий отображение кнопок пользовательских настроек. -`bottomPagination`| Флаг, определяющий положение пагинации верху/снизу. -`tableStriped`| Флаг, определяющий, будут ли строки таблицы раскрашены через одну ("зебра"). Значение по умолчанию: true. -`_availableHierarchicalMode`| Флаг, включающий настройку иерархического списка. Значение по умолчанию: false. -`disableHierarchicalMode`| Флаг, отключающий настройку иерархического списка. Значение по умолчанию: false. -`hierarchicalIndent`| Отступ в пикселях для вложенных элементов. Значение по умолчанию: 20. -`hierarchyPaging`| Флаг, используемый для включения/отключения иерархической пейджинга. Значение по умолчанию: false. -`hierarchicalAttribute`| Имя атрибута для построения иерархии. -`inHierarchicalMode`| Флаг указывающий, когда компонент находится в иерархическом режиме. Значение по умолчанию: false. -`onEditForm`| Флаг указывающий, размещен ли компонент на форме редактирования. Значение по умолчанию: false. +`bottomPagination`| Флаг, определяющий положение пагинации верху/снизу. +`tableStriped`| Флаг, определяющий, будут ли строки таблицы раскрашены через одну ("зебра"). Значение по умолчанию: true. +`_availableHierarchicalMode`| Флаг, включающий настройку иерархического списка. Значение по умолчанию: false. +`disableHierarchicalMode`| Флаг, отключающий настройку иерархического списка. Значение по умолчанию: false. +`hierarchicalIndent`| Отступ в пикселях для вложенных элементов. Значение по умолчанию: 20. +`hierarchyPaging`| Флаг, используемый для включения/отключения иерархической пейджинга. Значение по умолчанию: false. +`hierarchicalAttribute`| Имя атрибута для построения иерархии. +`inHierarchicalMode`| Флаг указывающий, когда компонент находится в иерархическом режиме. Значение по умолчанию: false. +`onEditForm`| Флаг указывающий, размещен ли компонент на форме редактирования. Значение по умолчанию: false. + Значения по умолчанию: ```javascript +{% raw %} action: 'rowClick', createNewButton: false, refreshButton: false, @@ -125,6 +127,7 @@ showDeleteMenuItemInRow: false, showEditMenuItemInRow: true, colsConfigButton: true, bottomPagination: true +{% endraw %} ``` ## Настройки списка по умолчанию @@ -216,13 +219,13 @@ export default ListFormController.extend({ ## Раскраска строк -У компонента есть свойство раскраски строк `tableStriped`. При включенном свойстве строки таблицы окрашиваются через одну для удобства восприятия. По умолчанию это свойство включено для браузерных версий и выключено для мобильной. +У компонента существует свойство раскраски строк `tableStriped`. При включенном свойстве строки таблицы окрашиваются через одну для удобства восприятия. По умолчанию это свойство включено для браузерных версий и выключено для мобильной. ## Ограничение длины текста в ячейках Есть возможность задавать длину текста в ячейках спискового компонента. Пример можно посмотреть на [тестовом стенде](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/limited-text-size-example). -Чтобы задавать длину текста в ячейках, нужно прописать настройку `maxTextLength` и/или `cutBySpaces`в `getCellComponent` в контроллере: +Длину текста можно задать, прописав настройку `maxTextLength` и/или `cutBySpaces`в `getCellComponent` в контроллере: ```js /** @@ -431,11 +434,14 @@ getCellComponent: function(attr) { ## Иерархический список -Для спискового объекта есть возможность задать отображение иерархий (когда у детейла есть детейл). Примеры есть на тестовом стенде: [Пример иерархии на списке](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/hierarchy-example), [Пример иерархии c пейджингом на списке](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/hierarchy-paging-example). +Для спискового объекта есть возможность задать отображение иерархий (когда у детейла есть детейл). Примеры есть на тестовом стенде: + +* [Пример иерархии на списке](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/hierarchy-example) +* [Пример иерархии c пейджингом на списке](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/hierarchy-paging-example). Атрибуты, влияющие на настройку иерархии: -Наименование компонента |Краткое описание компонента |Краткое описание компонента +Наименование компонента |Краткое описание компонента |Значение по умолчанию :-----------------------|:------------------------------ |:------------------------------ `_availableHierarchicalMode`| Флаг, включающий настройку иерархического списка. | false `disableHierarchicalMode`| Флаг, отключающий настройку иерархического списка. | false @@ -444,9 +450,10 @@ getCellComponent: function(attr) { `hierarchicalAttribute`| Имя атрибута для построения иерархии. Если указано, будет предпринята попытка построить эту иерархию атрибутов. | undefined `inHierarchicalMode`| Флаг указывающий, когда компонент находится в иерархическом режиме. | false -Чтобы включить иерархию на списке, достаточно прописать в шаблоне компонента `disableHierarchicalMode=true`. Однако настройка может выглядеть и так: +Для отображения списка в иерархическом режиме достаточно прописать в шаблоне компонента `disableHierarchicalMode=true`. Однако, настройка может выглядеть и так: ```hbs +{% raw %} {{flexberry-objectlistview ... disableHierarchicalMode=false @@ -454,15 +461,17 @@ getCellComponent: function(attr) { hierarchicalAttribute='parent' hierarchyPaging=true }} +{% endraw %} ``` ## Размещение компонента списка на форме редактирования -Списковый компонент можно разместить на форме редактирования. Можно посмотреть [пример](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/on-edit-form?sort=%2Bname) на тестовом стенде, открыв любую запись на редактирование. +Списковый компонент можно разместить на форме редактирования. Это показывает [пример](https://flexberry.github.io/ember-flexberry/dummy/dummy-test-2/#/components-examples/flexberry-objectlistview/on-edit-form?sort=%2Bname) на тестовом стенде при открытии любой записи на редактирование. -Чтобы разместить flexberry-objectlistview на форме редактирования, нужно прописать компонент в шаблоне нужной эдит форме с атрибутом `onEditForm=true`, в роуте эдит форме прописать в `developerUserSettings` списковый компонент, в контроллере эдит формы прописать свойства спискового компонента (используя `OlvOnEditMixin` миксин): +Для расположения flexberry-objectlistview на форме редактирования нужно прописать компонент в шаблоне нужной эдит форме с атрибутом `onEditForm=true`, в роуте эдит форме прописать в `developerUserSettings` списковый компонент, в контроллере эдит формы прописать свойства спискового компонента (используя `OlvOnEditMixin` миксин): ```hbs +{% raw %} {{!-- templates/example/edit-form.hbs --}} {{flexberry-objectlistview @@ -476,9 +485,11 @@ getCellComponent: function(attr) { customButtons=customButtons userButtonAddAction=(action 'userButtonAddAction') }} +{% endraw %} ``` ```js +{% raw %} // routes/example/edit-form.js import EditFormRoute from 'ember-flexberry/routes/edit-form'; @@ -504,9 +515,11 @@ export default EditFormRoute.extend({ */ modelName: 'example-model-name' }); +{% endraw %} ``` ```js +{% raw %} // controlles/example/edit-from.js import EditFormController from 'ember-flexberry/controllers/edit-form'; @@ -575,4 +588,5 @@ export default EditFormController.extend(OlvOnEditMixin, { }, }, }); +{% endraw %} ```