Идея виджетов

[ildar-ceo]

Вся система должна строится на виджетах. Настройки задаются в моделях. Когда компонентов используется по минимуму. Программирование делается в моделях

При создании роута, должна быть определено какие виджеты нужно создать и добавить на страницу.
Есть FormWidget, TableWidget, TableDialogWidget.

У виджета есть два метода: initWidget(), loadData(). Первый инициализирует виджет. Второй загружает данные.

[ildar-ceo]

Пример кода роута:

/**
 * Таблица
 */
async void actionIndex()
{
	TableWidget table = this.page_model.addWidget( new TableWidget({ "widget_name": "table" }) );
	table.addField({
		"name": "row_number",
	});
	table.addField({
		"name": "service_name",
	});
	table.addField({
		"name": "status",
	});
	table.addField({
		"name": "replicas",
	});
	table.addField({
		"name": "row_buttons",
	});
	table.setApiName("app.application");
	table.addTopButton( new RefreshButton() );
	
	table.setPage(route.query.get("page"));
	
	/* Загрузка данных */
	async table.loadData();
	
	this.page.setTitle("Список элементов");
}


/**
 * Форма сохранить
 */
void actionSave()
{
	FormWidget form = this.page_model.addWidget( new FormWidget({ "widget_name": "form" }) );
	form.addField({
		"name": "stack_name",
	});
	form.addField({
		"name": "app_name",
	});
	form.addField({
		"name": "status",
	});
	form.setApiName("app.application");
	
	form.setAction("edit");
	form.setPrimaryKey({
		"id": route.query.get("id"),
	});
	
	form.setApiName("app.application");
	form.addTopButton( new BackButton() );
	form.addFormButton( new SaveButton() );
	
	/* Загрузка данных */
	async form.loadData();
	
	this.page.setTitle("Сохранить элемент");
}


/**
 * Форма удалить
 */
void actionDelete()
{
	DeleteFormWidget form = this.page.addWidget( new DeleteFormWidget({ "widget_name": "form" }) );
	form.setApiName("app.application");
	
	form.setAction("delete");
	form.setPrimaryKey({
		"id": route.query.get("id"),
	});
	
	form.setApiName("app.application");
	form.addTopButton( new BackButton() );
	form.addFormButton( new DeleteButton() );
	
	/* Функция контента формы */
	form.setDeleteContent( (Map params) => {
		Map item = params.get("item");
		return "Удалить элемент " ~ item.get("name");
	} );
	
	/* Загрузка данных */
	async form.loadData();
	
	this.page.setTitle("Удалить элемент ?");
}

[ildar-ceo]

По умолчанию данные хранятся в моделях DeleteFormWidget, FormWidget, TableWidget.

в TableWidget есть items, page, pages
в FormWidget есть item, item_pk, error_message, error_code

В этих моделях по умолчанию инициируется FormApiProvider и TableApiProvider, которые предоставляют методы для загрузки, сохранение и получения данных. Также можно инициировать FormModelProvider, и TableModelProvider. Эти провайдеры позволяют ссылаться на другую модель и от туда получать данные и сохранять их, т.е. сохранение идет не по api, а в другую модель.

[ildar-ceo]

Действия сохранения, обновления должны быть в моделях RefreshButton, SaveButton, DeleteButton, которые обращаются к api_provider и обновляют данные таблицы и формы.

[ildar-ceo]

Можно также попробовать использовать миксин fieldsList. Потому что у формы и таблицы одинаковая структура полей.

[ildar-ceo]

Также надо подумать как добавлять кастомные кнопки и вычисляемые поля в строки таблицы. Например так:

form.addField({
	"name": "admin",
	"component": AdminButton,
});

form.addField({
	"name": "service_name",
	"label": "Service name",
	"value": string (int row_number, FieldInfo field, Dict item) => {
		return item["stack_name"] ~ "_" ~ item["name"];
	},
});

[ildar-ceo]

Возможно нужны фабрики. Например, TableFactory и FormFactory, которые умеют создавать и настраивать таблицы и формы. Это нужно, чтобы можно было переиспользовать форму или таблицу в других страницах или использовать их в связях многие ко многим.

[ildar-ceo]

Строка с кнопками

form.addField({
	"name": "row_buttons",
	"component": new ButtonsListFactory(() => {
		return [
			EditButton,
			DeleteButton,
		];
	}),
});

[ildar-ceo]

Фабрика для создания компонента:

form.addField({
	"name": "admin",
	"component": new ComponentFactory( () => return AdminButton ),
});