src/app/features/todos/todos-related-to-entity/todos-related-to-entity.component.ts
RelatedEntitiesComponent<Todo>
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-todos-related-to-entity |
| standalone | true |
| imports |
MatSlideToggleModule
|
| styleUrls | ./todos-related-to-entity.component.scss |
| templateUrl | ./todos-related-to-entity.component.html |
No results matching.
EntitiesTableComponent
MatSlideToggleModule
FormsModule
RelatedEntitiesComponent<Todo>
Properties |
|
Methods |
|
Inputs |
Outputs |
| loaderMethod | |
Default value : LoaderMethod.TodosRelatedToEntity
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
| clickMode | |
Type : "popup" | "navigate" | "popup-details"
|
|
Default value : "popup"
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
| columns | |
Type : ColumnConfig[]
|
|
Default value : []
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
|
Columns to be displayed in the table |
|
| dataSource | |
Type : DataSourceType
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
| editable | |
Type : boolean
|
|
Default value : true
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
| entity | |
Type : Entity
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
|
currently viewed/main entity for which related entities are displayed in this component |
|
| entityType | |
Type : string
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
|
entity type of the related entities to be displayed |
|
| filter | |
Type : DataFilter<E>
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
|
This filter is applied before displaying the data. |
|
| property | |
Type : string | string[]
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
|
Property name of the related entities (type given in this.entityType) that holds the entity id to be matched with the id of the current main entity (given in this.entity). If not explicitly set, this will be inferred based on the defined relations between the entities. manually setting this is only necessary if you have multiple properties referencing the same entity type
and you want to list only records related to one of them.
For example: if you set |
|
| showInactive | |
Type : boolean | undefined
|
|
Default value : undefined
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
|
Whether inactive/archived records should be shown. |
|
| showInactive | |
Type : boolean | undefined
|
|
|
Inherited from
RelatedEntitiesComponent
|
|
|
Whether inactive/archived records should be shown. |
|
| Protected getDefaultColumns |
getDefaultColumns()
|
|
Inherited from
RelatedEntitiesComponent
|
|
Returns :
FormFieldConfig[]
|
| Public getNewEntryFunction |
getNewEntryFunction()
|
|
Returns :
Todo
|
| Protected initFilter |
initFilter()
|
|
Inherited from
RelatedEntitiesComponent
|
|
Returns :
DataFilter<Todo>
|
| showDetails | ||||||
showDetails(entity: Todo)
|
||||||
|
Parameters :
Returns :
void
|
| createNewRecordFactory |
createNewRecordFactory()
|
|
Inherited from
RelatedEntitiesComponent
|
|
Returns :
() => any
|
| Protected getColumns | ||||||
getColumns(value: ColumnConfig[] | undefined)
|
||||||
|
Inherited from
RelatedEntitiesComponent
|
||||||
|
Parameters :
Returns :
FormFieldConfig[]
|
| Protected getProperty |
getProperty()
|
|
Inherited from
RelatedEntitiesComponent
|
|
Auto-detect which properties of the related entity type reference the current entity. Returns dot-paths for nested references (e.g. "attendance.participant").
Returns :
string | []
|
| backgroundColorFn |
Type : unknown
|
Default value : () => {...}
|
| entityCtr |
Type : unknown
|
Default value : signal(Todo)
|
|
Inherited from
RelatedEntitiesComponent
|
| Readonly _columns |
Type : unknown
|
Default value : computed(() => {
const entity = this.entity();
const rawCols = this.getColumns(this.columns());
if (!entity) return rawCols;
return rawCols.map((column) => {
if (typeof column.additional === "object" && column.additional !== null) {
return {
...column,
additional: { ...column.additional, relatedEntitiesParent: entity },
};
}
return column;
});
})
|
|
Inherited from
RelatedEntitiesComponent
|
| Readonly columnsToDisplay |
Type : unknown
|
Default value : computed(() =>
this._columns()
.filter((column) => {
if (column?.hideFromTable) return false;
const numericValue = ScreenSize[column?.visibleFrom];
if (numericValue === undefined) return true;
return this.currentScreenSize() >= numericValue;
})
.map((c) => c.id),
)
|
|
Inherited from
RelatedEntitiesComponent
|
| Readonly filterObj |
Type : unknown
|
Default value : signal<DataFilter<E>>({})
|
|
Inherited from
RelatedEntitiesComponent
|
| Protected filterService |
Type : unknown
|
Default value : inject(FilterService)
|
|
Inherited from
RelatedEntitiesComponent
|
| recordsDataSource |
Type : unknown
|
Default value : computed(() =>
resolveDataSource<E>(this.injector, this.dataSource(), this.loaderMethod()),
)
|
|
Inherited from
RelatedEntitiesComponent
|
| Protected Readonly relationProperty |
Type : unknown
|
Default value : computed<string | string[]>(() => {
const entity = this.entity();
const entityCtr = this.entityCtr();
if (!entity || !entityCtr) {
return [];
}
const resolvedProperty = this.property() ?? this.getProperty();
return typeof resolvedProperty === "string"
? this.resolvePropertyPath(resolvedProperty)
: resolvedProperty.map((p) => this.resolvePropertyPath(p));
})
|
|
Inherited from
RelatedEntitiesComponent
|
import {
ChangeDetectionStrategy,
Component,
inject,
input,
signal,
} from "@angular/core";
import { FormsModule } from "@angular/forms";
import { MatSlideToggleModule } from "@angular/material/slide-toggle";
import { RELATED_ENTITIES_DEFAULT_CONFIGS } from "app/utils/related-entities-default-config";
import { EntitiesTableComponent } from "../../../core/common-components/entities-table/entities-table.component";
import { FormFieldConfig } from "../../../core/common-components/entity-form/FormConfig";
import { DynamicComponent } from "../../../core/config/dynamic-components/dynamic-component.decorator";
import { RelatedEntitiesComponent } from "../../../core/entity-details/related-entities/related-entities.component";
import {
combineFilterConditions,
DataFilter,
} from "#src/app/core/filter/filters/filters";
import { FormDialogService } from "../../../core/form-dialog/form-dialog.service";
import { Todo } from "../model/todo";
import { TODO_NOT_COMPLETED_FILTER } from "../model/todo-filters";
import { LoaderMethod } from "#src/app/core/entity/entity-special-loader/entity-special-loader.service";
@DynamicComponent("TodosRelatedToEntity")
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-todos-related-to-entity",
templateUrl: "./todos-related-to-entity.component.html",
styleUrls: ["./todos-related-to-entity.component.scss"],
imports: [EntitiesTableComponent, MatSlideToggleModule, FormsModule],
})
export class TodosRelatedToEntityComponent extends RelatedEntitiesComponent<Todo> {
private formDialog = inject(FormDialogService);
override entityCtr = signal(Todo);
override loaderMethod = input(LoaderMethod.TodosRelatedToEntity);
protected override getDefaultColumns(): FormFieldConfig[] {
return RELATED_ENTITIES_DEFAULT_CONFIGS["TodosRelatedToEntity"].columns;
}
backgroundColorFn = (r: Todo) => {
if (r.completed || r.inactive) {
return "#e0e0e0";
} else {
return r.getColor();
}
};
public getNewEntryFunction(): () => Todo {
return () => {
const newEntry = new Todo();
const entityId = this.entity()?.getId();
newEntry.relatedEntities = entityId ? [entityId] : [];
return newEntry;
};
}
protected override initFilter(): DataFilter<Todo> {
return combineFilterConditions<Todo>(
TODO_NOT_COMPLETED_FILTER,
super.initFilter(),
);
}
showDetails(entity: Todo) {
this.formDialog.openView(entity);
}
}
<app-entities-table
[entityType]="entityCtr()"
[recordsDataSource]="recordsDataSource()"
[customColumns]="_columns()"
[newRecordFactory]="getNewEntryFunction()"
clickMode="none"
[filter]="filterObj()"
(entityClick)="showDetails($event)"
[getBackgroundColor]="backgroundColorFn"
></app-entities-table>
./todos-related-to-entity.component.scss