diff --git a/_data/components/data-view.yml b/_data/components/data-view.yml new file mode 100644 index 000000000..c27d7474b --- /dev/null +++ b/_data/components/data-view.yml @@ -0,0 +1,101 @@ +directive: "o-data-view" +version: "15.0.0" + +apiTitle: "ODataViewComponent" +inheritedAttributes: + [ + { + component: "OServiceBaseComponent", + path: "components/service/service-base/api", + attributes: + [ + "attr", + "columns", + "configure-service-args", + "delete-method", + "entity", + "insert-method", + "keys", + "pageable", + "paginated-query-method", + "parent-keys", + "query-fallback-function", + "query-method", + "query-on-bind", + "query-on-init", + "query-rows", + "query-with-null-parent-keys", + "service", + "service-type", + "static-data", + "store-state", + "update-method", + "show-buttons-text", + "quick-filter-placeholder", + "insert-button", + "refresh-button", + "fixed-header", + "controls", + "title", + "quick-filter", + "quick-filter-appearance", + "recursive-detail", + "recursive-edit", + "recursive-insert", + "detail-form-route", + "pagination-controls", + "insert-form-route", + "filter-case-sensitive", + ], + }, + ] + +attributes: + [ + { + name: "default-view", + type: "'table' | 'grid'", + default: "table", + required: "", + description: "Default view rendered by the component.", + }, + { + name: "toggle-button", + type: "no | false | yes | true", + default: "yes", + required: "", + description: "Indicates whether or not to show the built-in view toggle. By default it is enabled, which is the standard way `o-data-view` provides view switching.", + }, + { + name: "toggle-on-toolbar", + type: "no | false | yes | true", + default: "no", + required: "", + description: "Indicates whether or not to render the view toggle inside the toolbar.", + }, + { + name: "toggle-floatable", + type: "no | false | yes | true", + default: "no", + required: "", + description: "Indicates whether or not the view toggle is rendered as a floating control.", + }, + { + name: "table-config", + type: "TableConfig", + default: "", + required: "", + description: "Table view configuration object. Values defined here have precedence over the global table configuration injection token and the component defaults.", + }, + { + name: "grid-config", + type: "GridConfig", + default: "", + required: "", + description: "Grid view configuration object.", + }, + ] + +extraComponents: "dataViewData" + +directives: [{ name: "oDataViewTableColumns" }, { name: "oDataViewGridItem" }] diff --git a/_data/components/dataViewData/01.tableConfig.yml b/_data/components/dataViewData/01.tableConfig.yml new file mode 100644 index 000000000..b1145938a --- /dev/null +++ b/_data/components/dataViewData/01.tableConfig.yml @@ -0,0 +1,59 @@ +directive: "table-config" +title: "Table configuration" + +inheritedAttributes: + [ + { + component: "OTableComponent", + path: "components/data/table/api", + attributes: + [ + "visible", + "detailButtonInRow", + "detailButtonInRowIcon", + "editButtonInRow", + "editButtonInRowIcon", + "editFormRoute", + "rowHeight", + "autoAdjust", + "autoAlignTitles", + "collapseGroupedColumns", + "columnsVisibilityButton", + "defaultVisibleColumns", + "deleteButton", + "disableSelectionFunction", + "detailMode", + "editionMode", + "enabled", + "exportButton", + "exportServiceType", + "filterColumnActiveByDefault", + "groupable", + "groupedColumns", + "horizontalScroll", + "keepSelectedItems", + "multipleSort", + "nonHidableColumns", + "pageSizeOptions", + "orderable", + "quickFilterFunction", + "resizable", + "rowClass", + "selectAllCheckbox", + "selectAllCheckboxVisible", + "selectionMode", + "showConfigurationOption", + "showExpandableIconFunction", + "showFilterOption", + "showPaginatorFirstLastButtons", + "showReportOnDemandOption", + "showChartsOnDemandOption", + "showResetWidthOption", + "sortColumns", + "virtualScroll", + "visibleColumns", + "visibleExportDialogButtons", + "selectionOnRowClick", + ], + }, + ] diff --git a/_data/components/dataViewData/02.gridConfig.yml b/_data/components/dataViewData/02.gridConfig.yml new file mode 100644 index 000000000..6a03279f2 --- /dev/null +++ b/_data/components/dataViewData/02.gridConfig.yml @@ -0,0 +1,28 @@ +directive: "grid-config" +title: "Grid configuration" + +inheritedAttributes: + [ + { + component: "OGridComponent", + path: "components/data/grid/api", + attributes: + [ + "enabled", + "visible", + "cols", + "gridItemHeight", + "gutterSize", + "insertButtonFloatable", + "insertButtonPosition", + "pageSizeOptions", + "orderable", + "quickFilterColumns", + "showFooter", + "showPageSize", + "sortColumn", + "sortableColumns", + "detailMode", + ], + }, + ] diff --git a/_data/components/image-editor.yml b/_data/components/image-editor.yml new file mode 100644 index 000000000..bf3719991 --- /dev/null +++ b/_data/components/image-editor.yml @@ -0,0 +1,3 @@ +directive: "o-image-editor" + +apiTitle: "OImageEditorComponent" \ No newline at end of file diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index edbf9d29e..0494b0954 100644 --- a/_data/menu_descriptions.yml +++ b/_data/menu_descriptions.yml @@ -374,6 +374,9 @@ sections: - url: "/components/media/image/overview" title: "Image" imagepath: "/assets/images/menus/media/image" + - url: "/components/media/image-editor/overview" + title: "Image Editor" + imagepath: "/assets/images/menus/media/image-editor" "layout": - url: "/components/layout/applayout/overview" title: "App layout" @@ -425,4 +428,10 @@ sections: - url: "/guide/service/ontimize" title: "Ontimize" imagepath: "/assets/images/menus/services/ontimize" - + "extra-components": + - url: "/extra-components/installation" + title: "Installation" + description: "How to install the ontimize-web-ngx-extra-components addon" + - url: "/extra-components/data-view/overview" + title: "Data View" + description: "Display the same dataset using two different visualizations" diff --git a/assets/images/menus/data/data-view.svg b/assets/images/menus/data/data-view.svg new file mode 100644 index 000000000..6d057209c --- /dev/null +++ b/assets/images/menus/data/data-view.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/images/menus/data/data-view_dark.svg b/assets/images/menus/data/data-view_dark.svg new file mode 100644 index 000000000..5b71cd4bf --- /dev/null +++ b/assets/images/menus/data/data-view_dark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/images/menus/data/tree.svg b/assets/images/menus/data/tree.svg index 0033ea51c..56d6bfb7d 100644 --- a/assets/images/menus/data/tree.svg +++ b/assets/images/menus/data/tree.svg @@ -1,5 +1,12 @@ - - - - + + + + + + + + + + + diff --git a/assets/images/menus/data/tree_dark.svg b/assets/images/menus/data/tree_dark.svg index 65fd1d64f..e8b9a9fa5 100644 --- a/assets/images/menus/data/tree_dark.svg +++ b/assets/images/menus/data/tree_dark.svg @@ -1,3 +1,12 @@ - - + + + + + + + + + + + diff --git a/docs/00-doc-overview.md b/docs/00-doc-overview.md index f98de34cf..00fa437cd 100644 --- a/docs/00-doc-overview.md +++ b/docs/00-doc-overview.md @@ -25,7 +25,7 @@ This documentation is divided into three sections: | [Getting started]({{ base_path }}/example-overview/) | First contact with an Ontimize Web app. Run sample app code. | | [Guide]({{ base_path }}/guide/appstructure/) | More extensive documentation covering Ontimize Web in depth. | | [Components]({{ base_path }}/components/) | Access into the examples and documentation of all our components. | -| [Customization]({{ base_path }}/customize/theming/) | How to customize the application. | +| [Extra-components]({{ base_path }}/extra-components/) | Access into the examples and documentation of all components available in the Ontimize Web Extra Components repository. | | [Addons]({{ base_path }}/addons/) | Advanced components to cover your specific needs. | --- diff --git a/docs/addons/ontimize_web_ngx_report/general/02-installation.md b/docs/addons/ontimize_web_ngx_report/general/02-installation.md index 3f3bd86b8..a7bb09bfd 100644 --- a/docs/addons/ontimize_web_ngx_report/general/02-installation.md +++ b/docs/addons/ontimize_web_ngx_report/general/02-installation.md @@ -19,7 +19,7 @@ nav_order: 2 ### Import the Ontimize Web Report module into your application -Import the `OReportModule ` into the main module of your application. +Import the `OReportModule` into the main module of your application. ```javascript import { OReportModule } from 'ontimize-web-ngx-report'; diff --git a/docs/components/media/o-image-editor.component.md b/docs/components/media/o-image-editor.component.md new file mode 100644 index 000000000..c685ca9e9 --- /dev/null +++ b/docs/components/media/o-image-editor.component.md @@ -0,0 +1,29 @@ +--- +layout: o-component +permalink: /components/media/image-editor/overview +title: "Image Editor" +comp: image-editor +parent: Media +grand_parent: Components +nav_order: 2 +--- +{% include base_path %} +{% include toc %} + + +The `o-image-editor` component wraps `ngx-image-cropper` and provides a simplified image cropping + zooming UI consistent with the Ontimize Web design system. It supports: + +- Uploading and editing images. +- Dynamic **aspect ratio** changes. +- **Zoom** slider up to a configurable max. +- Clear display of the crop area size in **pixels**. +- Emitting the final cropped image on apply. + + +## Installation + +The `o-image-editor` component is distributed as part of the **Ontimize Web Extra Components** library (`ontimize-web-ngx-extra-components`). + +```bash +npm i ontimize-web-ngx-extra-components +``` diff --git a/docs/extra-components.md b/docs/extra-components.md new file mode 100644 index 000000000..5baea3682 --- /dev/null +++ b/docs/extra-components.md @@ -0,0 +1,18 @@ +--- +layout: default +title: Extra-components +has_children: true +nav_order: 6 +permalink: /extra-components/ +has_toc: false +--- + +{% include nav_cards.html folder="extra-components" yml="true" %} + +## Introduction + +The **Ontimize Web Extra Components** library provides an additional set of components designed to extend **OntimizeWeb** applications with advanced features while keeping the same look & feel and development philosophy. + +## Support + +The Ontimize Web Extra Components module is available in [github](https://github.com/OntimizeWeb/ontimize-web-ngx-extra-components/tree/main.15.x){:target="_blank"} where you can start discussions, add bug reports or feature requests in the [issues](https://github.com/OntimizeWeb/ontimize-web-ngx-extra-components/issues){:target="_blank"} section. \ No newline at end of file diff --git a/docs/extra-components/data-view/36-o-data-view.component-api.md b/docs/extra-components/data-view/36-o-data-view.component-api.md new file mode 100644 index 000000000..e8ac86534 --- /dev/null +++ b/docs/extra-components/data-view/36-o-data-view.component-api.md @@ -0,0 +1,7 @@ +--- +layout: o-component +permalink: /extra-components/data-view/api +title: "Data View" +comp: data-view +nav_exclude: true +--- \ No newline at end of file diff --git a/docs/extra-components/data-view/36-o-data-view.component.md b/docs/extra-components/data-view/36-o-data-view.component.md new file mode 100644 index 000000000..f463c50ad --- /dev/null +++ b/docs/extra-components/data-view/36-o-data-view.component.md @@ -0,0 +1,233 @@ +--- +layout: o-component +permalink: /extra-components/data-view/overview +title: "Data view" +comp: data-view +parent: Extra-components +nav_order: 1 +--- + +{% include base_path %} +{% include toc %} + +## Introduction +The `o-data-view` component is used to display the same dataset using **two different visualizations**: + +- **Table view**, based on `o-table` +- **Grid view**, based on `o-grid` + +The component provides a single entry point for data binding and common UI configuration (title, toolbar controls, quick filter, pagination, etc.), while allowing you to define custom templates for both the table columns and the grid items. + +## Data binding + +The `o-data-view` component supports data binding and you can command the component to display data either from *local* or *remote* data storage. + +The data array can be provided in two ways: +* Provide an array of objects to the `static-data` attribute. +* Configure the component to query the data from a service using `service` and `entity` attributes. +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). + +## Configuration objects + +The o-data-view component provides two configuration inputs to group view-specific options: + +* `table-config`: table-specific configuration (selection, grouping, export, scrolling, edit/detail behavior, etc.). See all of its properties [here]({{base_path}}/components/data/data-view/api#Table%20configuration) +* `grid-config`: grid-specific configuration (layout, footer, orderable, quick filter columns, etc.). See all of its properties [here]({{base_path}}/components/data/data-view/api#Grid%20configuration) + +This allows you to keep the main component declaration clean and move advanced settings into configuration objects. + +## Global table configuration (Injection token) + +Besides configuring the table behavior through `table-config`, some default table options can be defined *globally* by providing the `O_TABLE_GLOBAL_CONFIG` injection token. + +The final value for a given option is resolved using the following precedence order: + +1. **`table-config` input value** (highest priority) +2. **`O_TABLE_GLOBAL_CONFIG` injection token value** +3. **Component default value** (lowest priority) + +{: .note } +> This is especially useful when you want to enforce consistent table behavior across the application (e.g. default row height, default edition mode), while still allowing each `o-data-view` / `o-table` instance to override those defaults through `table-config`. + +### Example + +```ts +import { NgModule } from '@angular/core'; +import { O_TABLE_GLOBAL_CONFIG, OTableGlobalConfig } from 'ontimize-web-ngx'; + +const TABLE_GLOBAL_CONFIG: OTableGlobalConfig = { + autoAdjust: true, + autoAlignTitles: false, + filterColumnActiveByDefault: false, + editionMode: 'dblclick', + detailMode: 'click', + rowHeight: 'medium' +}; + +@NgModule({ + providers: [ + { provide: O_TABLE_GLOBAL_CONFIG, useValue: TABLE_GLOBAL_CONFIG } + ] +}) +export class AppModule {} +``` +For a full description of the token and its supported properties, see the official [OTableComponent documentation]({{base_path}}/components/data/table/api#OTableGlobalConfig). + +## Templates + +The `o-data-view` component uses **content projection** to allow you to customize what is rendered in each view. + +For that reason, `ng-template` definitions are required in the following cases: + +- **Grid view**: you must provide a grid item template, otherwise the grid has no content to render. +- **Table view**: you can optionally provide a table columns template to define columns and attach table extensions (filters, aggregates, context menu, paginator, etc.). + +### Table columns template + +To configure the table (columns and extensions), define an `ng-template` with the `oDataViewTableColumns` directive and place any table-related definitions inside it. + +This is the recommended approach to: + +- define `o-table-column` elements +- add table extensions such as: + - `o-table-columns-filter` + - `o-table-column-aggregate` + - `o-table-context-menu` + - `o-table-paginator` + - and any other table configuration components + +### Grid item template + +To render items in grid mode, define an `ng-template` with the `oDataViewGridItem` directive. + +Each rendered item receives the current record as template context using `let-item`, allowing you to build card-based layouts or any custom UI. + +{: .note } +>In grid mode, the oDataViewGridItem template is required to display content. +In table mode, the oDataViewTableColumns template is recommended when you need to define columns or attach table extensions (filters, aggregates, context menus, paginator, etc.). + +## Basic example + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ item.name }} + {{ item.location }} + + +
Cost: {{item.price | currency}}
+ + + + + +``` + +```ts +tableCfg = { visibleColumns: 'name;location;price;duration;score', editButtonInRow: 'yes', selectAllCheckbox: 'yes', deleteButton: 'no', showReportOnDemandOption: 'no', exportButton: 'no', rowHeight: 'small' }; + +gridCfg = { cols: 4, gutterSize: '2px', gridItemHeight: '175px', quickFilterColumns: 'name;price', showPageSize: "yes", insertButtonFloatable: 'no' }; +``` + +## View modes +The `o-data-view` component can render data in two modes: + +- **table**: optimized for dense data inspection and column-based operations (sorting, grouping, selection, etc.) +- **grid**: optimized for browsing, card layouts and visually rich items + +You can define which view is shown by default using the `default-view` attribute. + +## Toggle between views +The `o-data-view` component can show a toggle to switch between **table** and **grid** modes. + +The toggle behavior can be configured with: + +- `toggle-on-toolbar`: places the toggle inside the toolbar. +- `toggle-floatable`: renders the toggle as a floating control (useful to keep it accessible while scrolling). +- `toggle-button`: indicates whether or not to show the toggle button. + +{: .note } +>`toggle-button` is enabled by default (`yes`). This is the default way `o-data-view` provides view switching between **table** and **grid** modes. + +## Custom view switching (without toggle) + +In addition to the built-in toggle, the `o-data-view` component exposes a public method to switch the active view programmatically. + +This is useful when you want to provide your own UI (buttons, menus, tabs, etc.) to change between **table** and **grid** modes. + +### Public method: changeView + +Use the `changeView` method passing a valid `ODataViewMode` value: + +- `table` +- `grid` + +### Example: custom buttons + +```html + +
+ + +
+ + + + + + + + + + + + +``` + +In this example: + +- The default toggle is disabled using `toggle-button="no"`. +- A template reference variable (`#dv`) is used to access the component instance. +- Two custom buttons call `changeView('table')` and `changeView('grid')`. + +{: .note } +>`changeView` only accepts `table` or `grid`. Any other value will be ignored or may cause unexpected behavior depending on the implementation. + +## Demo +You can see this and more examples of this component in the [OntimizeWeb playground]({{site.playgroundurl}}/main/data/data-view/basic). diff --git a/docs/extra-components/installation.md b/docs/extra-components/installation.md new file mode 100644 index 000000000..22412d163 --- /dev/null +++ b/docs/extra-components/installation.md @@ -0,0 +1,42 @@ +--- +layout: default +permalink: /extra-components/installation/ +title: "Installation" +parent: "Extra-components" +nav_order: 1 +has_toc: false +--- +{% include base_path %} + +## Installation + +```bash +npm install ontimize-web-ngx-extra-components --save +``` + +## Compatibility + +The **ontimize-web-ngx-extra-components** library is compatible with **ontimize-web-ngx** starting from version **15.9.0**. + + +## Usage + +### Import into your application + +Import the `OExtraComponentsModule` into the main module of your application. + +```js +... +import { OExtraComponentsModule } from 'ontimize-web-ngx-extra-components'; +... + +@NgModule({ + imports: [ + OExtraComponentsModule, + /* other imports */ + ], + declarations: ... + providers: ... +}) +export class ExampleModule { } +```