& NajaPayload;
+ response: AjaxResponse & Response;
+}
+
+export interface ErrorEventDetail<
+ E extends Error = Error,
+> extends BaseErrorEventDetail {
+ return await this.client.makeRequest(args.method, args.url, args.data) as P;
+ }
+
+ async submitForm {
+ return await this.client.uiHandler.submitForm(element) as P;
+ }
+
+ dispatch<
+ K extends string, M extends BaseAjaxEventMap = AjaxEventMap
+ >(type: K, detail: K extends keyof M ? EventDetail
', '\n');
- if (cell.attr('data-datagrid-editable-value')) {
- valueToEdit = String(cell.data('datagrid-editable-value'));
- } else {
- valueToEdit = cellValue;
- }
- cell.data('originalValue', cellValue);
- cell.data('valueToEdit', valueToEdit);
- if (cell.data('datagrid-editable-type') === 'textarea') {
- input = $('');
- cell_padding = parseInt(cell.css('padding').replace(/[^-\d\.]/g, ''), 10);
- cell_height = cell.outerHeight();
- line_height = Math.round(parseFloat(cell.css('line-height')));
- cell_lines = (cell_height - (2 * cell_padding)) / line_height;
- input.attr('rows', Math.round(cell_lines));
- } else if (cell.data('datagrid-editable-type') === 'select') {
- input = $(cell.data('datagrid-editable-element'));
- input.find("option[value='" + valueToEdit + "']").prop('selected', true);
- } else {
- input = $('');
- input.val(valueToEdit);
- }
- attrs = cell.data('datagrid-editable-attrs');
- for (attr_name in attrs) {
- attr_value = attrs[attr_name];
- input.attr(attr_name, attr_value);
- }
- cell.removeClass('edited');
- cell.html(input);
- submit = function(cell, el) {
- var value;
- value = el.val();
- if (value !== cell.data('valueToEdit')) {
- dataGridRegisterAjaxCall({
- url: cell.data('datagrid-editable-url'),
- data: {
- value: value
- },
- type: 'POST',
- success: function(payload) {
- if (cell.data('datagrid-editable-type') === 'select') {
- cell.html(input.find("option[value='" + value + "']").html());
- } else {
- if (payload._datagrid_editable_new_value) {
- value = payload._datagrid_editable_new_value;
- }
- cell.html(value);
- }
- return cell.addClass('edited');
- },
- error: function() {
- cell.html(cell.data('originalValue'));
- return cell.addClass('edited-error');
- }
- });
- } else {
- cell.html(cell.data('originalValue'));
- }
- return setTimeout(function() {
- return cell.removeClass('editing');
- }, 1200);
- };
- cell.find('input,textarea,select').focus().on('blur', function() {
- return submit(cell, $(this));
- }).on('keydown', function(e) {
- if (cell.data('datagrid-editable-type') !== 'textarea') {
- if (e.which === 13) {
- e.stopPropagation();
- e.preventDefault();
- return submit(cell, $(this));
- }
- }
- if (e.which === 27) {
- e.stopPropagation();
- e.preventDefault();
- cell.removeClass('editing');
- return cell.html(cell.data('originalValue'));
- }
- });
- return cell.find('select').on('change', function() {
- return submit(cell, $(this));
- });
- }
-});
-
-dataGridRegisterExtension('datagrid.after_inline_edit', {
- success: function(payload) {
- var grid = $('.datagrid-' + payload._datagrid_name);
-
- if (payload._datagrid_inline_edited) {
- grid.find('tr[data-id="' + payload._datagrid_inline_edited + '"] > td').addClass('edited');
- return grid.find('.datagrid-inline-edit-trigger').removeClass('hidden');
- } else if (payload._datagrid_inline_edit_cancel) {
- return grid.find('.datagrid-inline-edit-trigger').removeClass('hidden');
- }
- }
-});
-
-$(document).on('mouseup', '[data-datagrid-cancel-inline-add]', function(e) {
- var code = e.which || e.keyCode || 0;
- if (code === 1) {
- e.stopPropagation();
- e.preventDefault();
- return $('.datagrid-row-inline-add').addClass('datagrid-row-inline-add-hidden');
- }
-});
-
-dataGridRegisterExtension('datagrid-toggle-inline-add', {
- success: function(payload) {
- var grid = $('.datagrid-' + payload._datagrid_name);
-
- if (payload._datagrid_inline_adding) {
- var row = grid.find('.datagrid-row-inline-add');
-
- if (row.hasClass('datagrid-row-inline-add-hidden')) {
- row.removeClass('datagrid-row-inline-add-hidden');
- }
-
- row.find('input:not([readonly]),textarea:not([readonly])').first().focus();
- }
- }
-});
-
-datagridFilterMultiSelect = function() {
- var select = $('.selectpicker').first();
-
- if ($.fn.selectpicker) {
- let defaults = $.fn.selectpicker.defaults = {
- countSelectedText: select.data('i18n-selected'),
- iconBase: '',
- tickIcon: select.data('selected-icon-check')
- };
-
- $('.selectpicker')
- .removeClass('form-select form-select-sm')
- .addClass('form-control form-control-sm')
- .selectpicker('destroy')
- .selectpicker({
- iconBase: 'fa'
- });
-
- return defaults;
- }
-};
-
-$(function() {
- return datagridFilterMultiSelect();
-});
-
-datagridGroupActionMultiSelect = function() {
- var selects;
-
- if (!$.fn.selectpicker) {
- return;
- }
-
- selects = $('[data-datagrid-multiselect-id]');
-
- return selects.each(function() {
- var id;
- if ($(this).hasClass('selectpicker')) {
- $(this).removeAttr('id');
- id = $(this).data('datagrid-multiselect-id');
- $(this).on('loaded.bs.select', function(e) {
- $(this).parent().attr('style', 'display:none;');
- return $(this).parent().find('.hidden').removeClass('hidden').addClass('btn-default btn-secondary');
- });
- return $(this).on('rendered.bs.select', function(e) {
- return $(this).parent().attr('id', id);
- });
- }
- });
-};
-
-$(function() {
- return datagridGroupActionMultiSelect();
-});
-
-dataGridRegisterExtension('datagrid.fitlerMultiSelect', {
- success: function() {
- datagridFilterMultiSelect();
- }
-});
-
-dataGridRegisterExtension('datagrid.groupActionMultiSelect', {
- success: function() {
- return datagridGroupActionMultiSelect();
- }
-});
-
-dataGridRegisterExtension('datagrid.inline-editing', {
- success: function(payload) {
- var grid;
- if (payload._datagrid_inline_editing) {
- grid = $('.datagrid-' + payload._datagrid_name);
- return grid.find('.datagrid-inline-edit-trigger').addClass('hidden');
- }
- }
-});
-
-dataGridRegisterExtension('datagrid.redraw-item', {
- success: function(payload) {
- var row;
- if (payload._datagrid_redraw_item_class) {
- row = $('tr[data-id="' + payload._datagrid_redraw_item_id + '"]');
- return row.attr('class', payload._datagrid_redraw_item_class);
- }
- }
-});
-
-dataGridRegisterExtension('datagrid.reset-filter-by-column', {
- success: function(payload) {
- var grid, href, i, key, len, ref;
- if (!payload._datagrid_name) {
- return;
- }
- grid = $('.datagrid-' + payload._datagrid_name);
- grid.find('[data-datagrid-reset-filter-by-column]').addClass('hidden');
- if (payload.non_empty_filters && payload.non_empty_filters.length) {
- ref = payload.non_empty_filters;
- for (i = 0, len = ref.length; i < len; i++) {
- key = ref[i];
- grid.find('[data-datagrid-reset-filter-by-column="' + key + '"]').removeClass('hidden');
- }
- href = grid.find('.reset-filter').attr('href');
- return grid.find('[data-datagrid-reset-filter-by-column]').each(function() {
- var new_href;
- key = $(this).attr('data-datagrid-reset-filter-by-column');
- new_href = href.replace('do=' + payload._datagrid_name + '-resetFilter', 'do=' + payload._datagrid_name + '-resetColumnFilter');
- new_href += '&' + payload._datagrid_name + '-key=' + key;
- return $(this).attr('href', new_href);
- });
- }
- }
-});
diff --git a/assets/datagrid.ts b/assets/datagrid.ts
new file mode 100644
index 000000000..de36fcaa0
--- /dev/null
+++ b/assets/datagrid.ts
@@ -0,0 +1,145 @@
+import { defaultDatagridNameResolver, isEnter } from "./utils";
+import type { Ajax, DatagridEventMap, DatagridOptions, EventDetail, EventListener, } from "./types";
+
+export class Datagrid extends EventTarget {
+ private static readonly defaultOptions: DatagridOptions = {
+ confirm: confirm,
+ resolveDatagridName: defaultDatagridNameResolver,
+ plugins: [],
+ };
+
+ public readonly name: string;
+
+ public readonly ajax: Ajax;
+
+ private readonly options: DatagridOptions;
+
+ constructor(
+ public readonly el: HTMLElement,
+ ajax: Ajax | ((grid: Datagrid) => Ajax),
+ options: Partial