@meshmakers / octo-ui-legacy
遗留的Angular UI库 角材料 以向后兼容旧的OctoMesh应用程序。
注意： 对于新项目，使用 @meshmakers/octo-ui （基于剑道UI）。
部分 @meshmakers 包的生态系统。
目的
此库为尚未迁移到基于剑道UI的应用程序提供了基于材料设计的UI组件 @meshmakers/octo-ui． 它包含了表格、面包屑、通知和实体选择组件的现代化Material Design版本。
构建和测试
# Build
npm run build:octo-ui-legacy
# Lint
npm run lint:octo-ui-legacy
此项目没有单元测试。
体系结构
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
组件
| 组件 | 选择器 | 描述 |
|---|---|---|
MmOctoTableComponent | mm-octo-table | 材料表与排序，分页，搜索，行动列，响应移动布局 |
MmBreadcrumbComponent | mm-breadcrumb | 面包屑导航使用 BreadCrumbService |
MmNotificationBarComponent | mm-notification-bar | 错误通知通过材料小吃栏与自动解散 |
MmEntitySelectInputComponent | mm-entity-select-input | 材质自动完成实体选择 ControlValueAccessor |
MmOctoTableComponent
材料设计数据表与GraphQL数据源集成。
特点: 排序、分页、debounce搜索、菜单操作栏、响应式移动布局（959px下基于卡片）、工具栏操作、行选择。
输入:
| 输入 | 类型 | 描述 |
|---|---|---|
dataSource | AssetRepoGraphQlDataSource | GraphQL数据源 |
columns | ColumnDefinition[] | 列定义（字符串或tablecoln） |
actionColumns | ActionColumn[] | 动作按钮列 |
optionActions | ActionColumn[] | 下拉菜单操作 |
searchFilterColumns | string[] | 要包含在搜索中的列 |
pageSizeOptions | number[] | 页面大小选项 |
defaultSortColumn | string | 默认排序字段 |
rowIsClickable | boolean | 启用行单击事件 |
输出:
| 输出 | 类型 | 描述 |
|---|---|---|
rowClicked | EventEmitter<any> | 在行单击时触发 |
actionColumnClick | EventEmitter<{action, id, entry}> | 点击动作时触发 |
searchFilterStringUpdated | EventEmitter<string> | 在搜索文本更改时触发 |
MmEntitySelectInputComponent
材料自动完成输入实现 ControlValueAccessor， MatFormFieldControl, Validator.
特点: 去噪搜索（300ms），过滤前至少3个字符，加载旋转器，自动选择模糊与单一结果，前缀支持直接查找。
模型
| 模型 | 描述 |
|---|---|
TableColumn | 列定义与displayName， dataKey, templateName, sortingDisabled |
ColumnDefinition | 联合类型: string | TableColumn |
ActionColumn | 带有displayText， actionId, iconName， svgIconName的动作按钮 |
ToolbarAction | 带有route， clickHandler, isDisabled， isHidden的工具栏动作 |
依赖关系
- 角21 使用Angular Material和CDK
- @meshmakers / octo-services （GraphQL数据源，dto）
- @meshmakers /共享服务 （breadcrumservice, MessageService, EntitySelectDataSource）
迁移到octo-ui / shared-ui
| 遗产(材料) | 现代(剑道) |
|---|---|
MmOctoTableComponent | ListViewComponent 从 @meshmakers/shared-ui |
MmBreadcrumbComponent | Kendo Breadcrumb或自定义（在主机应用程序中） |
MmNotificationBarComponent | NotificationDisplayService 从 @meshmakers/shared-ui |
MmEntitySelectInputComponent | EntitySelectInputComponent 从 @meshmakers/shared-ui |
文件和测试标准
- 所有开发人员文档必须用英语编写
- 每次代码更改都必须包含更新的文档 -更新自述文件。医学博士,克劳德。在添加、修改或删除功能时使用
- 必须执行单元测试和集成测试 每次代码更改之后
- 必须更新现有的测试 当被测试代码的行为发生变化时
- 必须添加新的测试 当实现新的特性、组件或服务时
- 永远不要提交测试失败的代码