@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
212 lines (211 loc) • 8.34 kB
JavaScript
import { ApiBase } from '../Implementation/ApiBase';
export class RowFormInternalApi extends ApiBase {
async buildRowEditForm(rowNode) {
return this.buildRowForm('rowEdited', rowNode);
}
async buildRowCreateForm(clonedRowNode) {
return this.buildRowForm('rowCreated', clonedRowNode);
}
async buildRowForm(type, rowNode) {
const formFields = await this.buildRowFormFields(type, rowNode);
const formButtons = this.buidRowFormButtons(type, rowNode, formFields);
const formTitle = this.getFormTitle(type, rowNode);
const formDescription = this.getFormDescription(type, rowNode);
const rowForm = {
title: formTitle,
description: formDescription,
fields: formFields,
buttons: formButtons,
};
return rowForm;
}
getFormTitle(type, rowNode) {
const rowFormOptions = this.getRowFormOptions();
if (rowFormOptions.rowFormTitle == undefined) {
return type === 'rowCreated' ? 'Create New Row' : 'Edit Row';
}
return typeof rowFormOptions.rowFormTitle === 'function'
? rowFormOptions.rowFormTitle(this.buildFormParamContext(type, rowNode))
: rowFormOptions.rowFormTitle;
}
buildFormParamContext(type, rowNode) {
return {
rowNode,
...this.getAdaptableInternalApi().buildBaseContext(),
type: type,
};
}
getFormDescription(type, rowNode) {
const rowFormOptions = this.getRowFormOptions();
return typeof rowFormOptions.rowFormDescription === 'function'
? rowFormOptions.rowFormDescription(this.buildFormParamContext(type, rowNode))
: rowFormOptions.rowFormDescription;
}
buidRowFormButtons(type, rowNode, formFields) {
if (Array.isArray(this.getRowFormOptions().rowFormButtons)) {
return this.getRowFormOptions().rowFormButtons;
}
const cancelButton = {
label: 'Cancel',
buttonStyle: {
variant: 'raised',
tone: 'neutral',
},
};
const saveButton = {
label: 'Save',
buttonStyle: {
variant: 'raised',
tone: 'success',
},
disabled: (_button, context) => {
const formIsValid = context.formIsValid;
return formIsValid === false;
},
onClick: (button, context) => {
const eventInfo = type === 'rowCreated'
? {
type: 'rowCreated',
formData: this.prepareCreateData(formFields, context),
...this.getAdaptableInternalApi().buildBaseContext(),
clonedRowNode: rowNode,
}
: {
type: 'rowEdited',
formData: this.prepareEditData(formFields, context),
rowNode: rowNode,
...this.getAdaptableInternalApi().buildBaseContext(),
};
this.getEventApi().internalApi.fireRowFormSubmittedEvent(eventInfo);
this.getRowFormOptions()?.onRowFormSubmit?.(eventInfo);
},
};
return [cancelButton, saveButton];
}
prepareCreateData(formFields, context) {
const dataToSave = { ...context.formData };
for (const formField of formFields) {
if (dataToSave[formField.name] === '') {
delete dataToSave[formField.name];
}
}
return dataToSave;
}
prepareEditData(formFields, context) {
const dataToSave = { ...context.formData };
for (const formField of formFields) {
if (formField.fieldType === 'textOutput') {
delete dataToSave[formField.name];
}
}
const pkValue = this.getGridApi().getPrimaryKeyValueForRowNode(context.rowNode);
dataToSave[this.getOptions().primaryKey] = pkValue;
return dataToSave;
}
async buildRowFormFields(rowFormType, rowNode) {
const relevantColumns = this.getColumnApi()
.getUIAvailableColumns()
.filter((column) => {
return !!rowNode || this.isCellEditable(column, rowNode);
})
.filter((column) => this.showColumnInRowForm(column, rowFormType));
return Promise.all(relevantColumns.map((column) => this.buildRowFormField(rowFormType, column, rowNode)));
}
showColumnInRowForm(adaptableColumn, rowFormType) {
if (adaptableColumn.isActionColumn) {
return false;
}
const showColumnFn = this.getRowFormOptions()?.includeColumnInRowForm;
if (typeof showColumnFn === 'function') {
return showColumnFn({
...this.getAdaptableInternalApi().buildBaseContext(),
adaptableColumn,
rowFormType: rowFormType,
});
}
return true;
}
isCellEditable(column, rowNode) {
if (!rowNode) {
return !column.readOnly;
}
const gridCell = this.getGridApi().getGridCellFromRowNode(rowNode, column.columnId);
return this.getGridApi().isCellEditable(gridCell);
}
async buildRowFormField(type, column, rowNode) {
const isCellEditable = this.isCellEditable(column, rowNode);
const fieldValueOptions = await this.getFieldValueOptions(column, rowNode);
const fieldType = isCellEditable
? !!fieldValueOptions?.length
? 'select'
: this.getFieldTypeFromColumnType(column)
: 'textOutput';
const defaultValue = rowNode
? isCellEditable
? this.getGridApi().getRawValueFromRowNode(rowNode, column.columnId)
: this.getGridApi().getDisplayValueFromRowNode(rowNode, column.columnId)
: null;
const baseField = {
label: this.getRowFormFieldLabel(type, column, rowNode),
name: column.columnId,
defaultValue,
fieldType,
options: fieldValueOptions,
};
const overrideFn = this.getRowFormOptions().rowFormField;
if (typeof overrideFn === 'function') {
const override = overrideFn(this.buildFormFieldLabelContext(type, column, rowNode));
if (override) {
return { ...baseField, ...override, name: baseField.name };
}
}
return baseField;
}
getRowFormFieldLabel(type, column, rowNode) {
const customFieldLabel = typeof this.getRowFormOptions().rowFormFieldLabel === 'function'
? this.getRowFormOptions().rowFormFieldLabel(this.buildFormFieldLabelContext(type, column, rowNode))
: undefined;
return customFieldLabel ?? column.friendlyName;
}
buildFormFieldLabelContext(type, column, rowNode) {
return {
rowNode,
column,
...this.getAdaptableInternalApi().buildBaseContext(),
type: type,
};
}
getFieldTypeFromColumnType(column) {
switch (column.dataType) {
case 'boolean':
return 'checkbox';
case 'date':
return 'date';
case 'number':
return 'number';
default:
return 'text';
}
}
async getFieldValueOptions(column, rowNode) {
const shouldShowSelectCellEditor = this.getUserInterfaceApi().internalApi.shouldShowSelectCellEditor(column);
if (!shouldShowSelectCellEditor) {
return;
}
const gridCell = rowNode
? this.getGridApi().getGridCellFromRowNode(rowNode, column.columnId)
: undefined;
const valueOptions = await this.getGridApi().internalApi.getDistinctEditDisplayValuesForColumn({
columnId: column.columnId,
gridCell,
currentSearchValue: '',
});
if (!valueOptions?.length) {
return;
}
return valueOptions.map((opt) => ({
value: opt.value,
label: opt.label ?? String(opt.value),
}));
}
}