in web/frontend/src/app/pages/streams/modules/schema-editor/components/fields-list/fields-list.component.ts [62:228]
ngOnInit() {
this.gridOptions$ = this.activatedRoute.params.pipe(
map(({id}) => {
return this.gridService.options(`${id}fieldList`, {
deltaRowDataMode: true,
rowClassRules: {
isEdited: ({data}) =>
this.seFieldFormsService.fieldHasChanges(data) || data._props._isNew,
hasError: ({data}) => this.seFieldFormsService.showErrorOnField(this.type, data),
'ag-row-editing': ({data}) => data._props?._isSelected,
},
getRowNodeId: ({name}) => name,
});
}),
);
this.gridService
.onSelectionChanged()
.pipe(takeUntil(this.destroy$))
.subscribe((event: SelectionChangedEvent) => {
const item = event.api.getSelectedRows()[0];
this.gridEventsService.selectedField.next(item);
if (item && !item._props?._parentName) {
this.selectedFieldName = item.name;
setTimeout(() => {
if (item.name === this.selectedFieldName) {
this.appStore.dispatch(SetSelectedFieldForSchemaItem({fieldUuid: item._props._uuid}));
}
}, 300);
}
});
this.gridService
.onDoubleClicked()
.pipe(takeUntil(this.destroy$))
.subscribe(({data}) => {
if (data._props && data._props._parentName) {
this.appStore.dispatch(SetSelectedSchemaItem({itemName: data._props._parentName}));
}
});
this.appStore
.pipe(
select(getSelectedSchemaItem),
distinctUntilChanged((p, c) => p?._props?._uuid === c?._props?._uuid),
withLatestFrom(this.translate.get('gridTitle.fieldsList')),
takeUntil(this.destroy$),
switchMap(([selectedItem, messages]) => {
if (!selectedItem) return of(null);
this.type = selectedItem;
let props;
if (selectedItem.isEnum) {
props = [
columnsVisibleColumn(),
{
headerName: messages.values,
field: 'name',
filter: false,
sortable: false,
},
];
} else {
props = [
columnsVisibleColumn(true, true),
{
headerName: messages.name,
field: 'name',
floatingFilterComponent: 'GridTextFilterComponent',
sortable: false,
cellRenderer: ({data, value}) => {
if (data._props?._parentField) {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="12" width="12" style="color: white; transform: rotate(90deg);"
fill="currentcolor" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6 6-6z"/></svg><span>${value}</span>`;
}
return value;
},
},
{
headerName: messages.static.title,
field: 'static',
floatingFilterComponent: 'GridDropdownFilterComponent',
floatingFilterComponentParams: {
list: [
{id: 'true', name: messages.static.static},
{id: 'false', name: messages.static.nonstatic},
],
},
sortable: false,
valueFormatter: ({value}) =>
value ? messages.static.static : messages.static.nonstatic,
},
{
headerName: messages.type,
field: 'type',
filter: false,
sortable: false,
children: [
{
headerName: messages.encoding,
field: 'type.encoding',
filter: false,
sortable: false,
},
{
headerName: messages.name,
field: 'type.name',
filter: false,
sortable: false,
},
{
headerName: messages.nullable,
field: 'type.nullable',
filter: false,
sortable: false,
},
],
},
{
headerName: messages.title,
field: 'title',
floatingFilterComponent: 'GridTextFilterComponent',
sortable: false,
},
{
headerName: messages.description,
field: 'relativeTo',
filter: false,
sortable: false,
},
{
headerName: messages.description,
field: 'description',
filter: false,
sortable: false,
},
];
}
return this.gridService.setColumns(props);
}),
)
.subscribe();
this.appStore
.pipe(
select(getSelectedSchemaItemAllFields),
distinctUntilChanged(),
filter((fields) => !!fields),
takeUntil(this.destroy$),
switchMap((fields) => this.gridService.setRowData(fields).pipe(map(() => fields))),
)
.subscribe((fields) => {
const selected = fields.find((f) => f._props._isSelected);
if (selected) {
this.seSelectionService.onSelectField(selected._props._typeName, selected?._props._uuid);
}
this.selectInitial(fields);
});
this.seFieldFormsService
.hasChanges()
.pipe(
takeUntil(this.destroy$),
switchMap(() => this.gridService.redrawRows()),
)
.subscribe();
}