@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

# Run tests
npm test -- --project=@meshmakers/octo-ui-legacy --watch=false

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