@meshmakers/octo-ui-legacy
Legacy Angular UI library based on Angular Material for backward compatibility with older OctoMesh applications.
Note: For new projects, use @meshmakers/octo-ui (Kendo UI based) instead.
Part of the @meshmakers package ecosystem.
Purpose
This library provides Material Design-based UI components for applications that have not yet migrated to the Kendo UI based @meshmakers/octo-ui. It contains modernized Material Design versions of table, breadcrumb, notification, and entity selection components.
Build & Test
# Build
npm run build:octo-ui-legacy
# Lint
npm run lint:octo-ui-legacy
This project has no unit tests.
Architecture
octo-ui-legacy/
├── src/
│ ├── public-api.ts
│ └── lib/
│ ├── table/
│ │ ├── mm-octo-table.component.ts # Data table
│ │ ├── mm-octo-table.component.html
│ │ ├── mm-octo-table.component.scss
│ │ └── mm-octo-table.model.ts # Column/action models
│ ├── breadcrumb/
│ │ └── mm-breadcrumb.component.ts # Breadcrumb navigation
│ ├── notification-bar/
│ │ └── mm-notification-bar.component.ts # Error snack bar
│ └── entity-select-input/
│ └── mm-entity-select-input.component.ts # Entity autocomplete
Components
| Component | Selector | Description |
|---|---|---|
MmOctoTableComponent | mm-octo-table | Material table with sorting, pagination, search, action columns, responsive mobile layout |
MmBreadcrumbComponent | mm-breadcrumb | Breadcrumb navigation using BreadCrumbService |
MmNotificationBarComponent | mm-notification-bar | Error notification via Material SnackBar with auto-dismiss |
MmEntitySelectInputComponent | mm-entity-select-input | Material Autocomplete for entity selection with ControlValueAccessor |
MmOctoTableComponent
Material Design data table with GraphQL data source integration.
Features: Sorting, pagination, search with debounce, action columns with menus, responsive mobile layout (card-based under 959px), toolbar actions, row selection.
Inputs:
| Input | Type | Description |
|---|---|---|
dataSource | AssetRepoGraphQlDataSource | GraphQL data source |
columns | ColumnDefinition[] | Column definitions (string or TableColumn) |
actionColumns | ActionColumn[] | Action button columns |
optionActions | ActionColumn[] | Dropdown menu actions |
searchFilterColumns | string[] | Columns to include in search |
pageSizeOptions | number[] | Page size options |
defaultSortColumn | string | Default sort field |
rowIsClickable | boolean | Enable row click events |
Outputs:
| Output | Type | Description |
|---|---|---|
rowClicked | EventEmitter<any> | Emitted on row click |
actionColumnClick | EventEmitter<{action, id, entry}> | Emitted on action click |
searchFilterStringUpdated | EventEmitter<string> | Emitted on search text change |
MmEntitySelectInputComponent
Material Autocomplete input implementing ControlValueAccessor, MatFormFieldControl, and Validator.
Features: Debounced search (300ms), min 3 chars before filtering, loading spinner, auto-select on blur with single result, prefix support for direct lookup.
Models
| Model | Description |
|---|---|
TableColumn | Column definition with displayName, dataKey, templateName, sortingDisabled |
ColumnDefinition | Union type: string | TableColumn |
ActionColumn | Action button with displayText, actionId, iconName, svgIconName |
ToolbarAction | Toolbar action with route, clickHandler, isDisabled, isHidden |
Dependencies
- Angular 21 with Angular Material and CDK
- @meshmakers/octo-services (GraphQL data sources, DTOs)
- @meshmakers/shared-services (BreadCrumbService, MessageService, EntitySelectDataSource)
Migration to octo-ui / shared-ui
| Legacy (Material) | Modern (Kendo) |
|---|---|
MmOctoTableComponent | ListViewComponent from @meshmakers/shared-ui |
MmBreadcrumbComponent | Kendo Breadcrumb or custom (in host app) |
MmNotificationBarComponent | NotificationDisplayService from @meshmakers/shared-ui |
MmEntitySelectInputComponent | EntitySelectInputComponent from @meshmakers/shared-ui |
Documentation and Testing Standards
- All developer documentation must be written in English
- Every code change must include updated documentation — update README.md, CLAUDE.md, or inline docs when adding, modifying, or removing features
- Unit tests and integration tests must be executed after every code change
- Existing tests must be updated when the behavior of tested code changes
- New tests must be added when new features, components, or services are implemented
- Never commit code with failing tests