@contributte/datagrid 0.0.0-20250725-9e25345 → 0.0.0-20250805-f476dfd

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/assets/datagrid-full.ts +2 -0
  2. package/assets/datagrid.ts +2 -0
  3. package/assets/plugins/features/editable.ts +102 -88
  4. package/dist/datagrid-full.js +3 -3
  5. package/dist/datagrid-full.js.map +1 -1
  6. package/package.json +1 -1
package/assets/datagrid-full.ts CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  ConfirmPlugin,
7
7
  createDatagrids,
8
8
  DatepickerPlugin,
9
+ EditablePlugin,
9
10
  InlinePlugin,
10
11
  ItemDetailPlugin,
11
12
  NetteFormsPlugin,
@@ -37,6 +38,7 @@ document.addEventListener("DOMContentLoaded", () => {
37
38
  new AutosubmitPlugin(),
38
39
  new CheckboxPlugin(),
39
40
  new ConfirmPlugin(),
41
+ new EditablePlugin(),
40
42
  new InlinePlugin(),
41
43
  new ItemDetailPlugin(),
42
44
  new NetteFormsPlugin(netteForms),
package/assets/datagrid.ts CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  AutosubmitPlugin,
6
6
  CheckboxPlugin,
7
7
  ConfirmPlugin,
8
+ EditablePlugin,
8
9
  InlinePlugin,
9
10
  NetteFormsPlugin,
10
11
  SelectpickerPlugin,
@@ -214,6 +215,7 @@ export const createFullDatagrids = (ajax: Ajax, _options: Partial<DatagridsOptio
214
215
  new AutosubmitPlugin(),
215
216
  new CheckboxPlugin(),
216
217
  new ConfirmPlugin(),
218
+ new EditablePlugin(),
217
219
  new InlinePlugin(),
218
220
  new NetteFormsPlugin(),
219
221
  new SortablePlugin(new SortableJS()),
package/assets/plugins/features/editable.ts CHANGED
@@ -14,105 +14,119 @@ export const EditableAttrsAttribute = "datagrid-editable-attrs";
14
14
 
15
15
  export class EditablePlugin implements DatagridPlugin {
16
16
  onDatagridInit(datagrid: Datagrid): boolean {
17
+ datagrid.ajax.addEventListener('success', (event) => {
18
+ this.initEditableCells(datagrid);
19
+ });
20
+
21
+ this.initEditableCells(datagrid);
22
+
23
+ return true;
24
+ }
25
+
26
+ initEditableCells(datagrid: Datagrid) {
27
+
17
28
  datagrid.el.querySelectorAll<HTMLElement>(`[${EditableUrlAttribute}]`).forEach(cell => {
18
- if (cell instanceof HTMLAnchorElement || cell.classList.contains("datagrid-inline-edit")) return;
19
-
20
- if (!cell.classList.contains("editing")) {
21
- cell.classList.add("editing");
22
- const originalValue = cell.innerHTML.replace(/<\/?br>/g, "\n");
23
- const valueToEdit = cell.getAttribute(EditableValueAttribute) ?? originalValue;
24
-
25
- cell.setAttribute("originalValue", originalValue);
26
- cell.setAttribute("valueToEdit", valueToEdit);
27
-
28
- const type = cell.getAttribute(EditableTypeAttribute) ?? "text";
29
-
30
- let input: HTMLElement;
31
-
32
- switch (type) {
33
- case "textarea":
34
- cell.innerHTML = `<textarea rows="${calculateCellLines(cell)}">${valueToEdit}</textarea>`;
35
- input = cell.querySelector("textarea")!;
36
- break;
37
- case "select":
38
- input = cell.querySelector(cell.getAttribute(EditableElementAttribute) ?? "")!;
39
- input
40
- .querySelectorAll(`option[value='${valueToEdit}']`)
41
- .forEach(input => input.setAttribute("selected", "true"));
42
- break;
43
- default:
44
- cell.innerHTML = `<input type='${type}' />`;
45
- input = cell.querySelector("input")!;
46
- }
47
29
 
48
- const attributes = JSON.parse(cell.getAttribute(EditableAttrsAttribute) ?? "{}");
49
- for (const key in attributes) {
50
- const value = attributes[key];
51
- input.setAttribute(key, value);
52
- }
30
+ cell.addEventListener("click", e => {
31
+
32
+ if (cell instanceof HTMLAnchorElement || cell.classList.contains("datagrid-inline-edit")) return;
33
+
34
+ if (!cell.classList.contains("editing")) {
35
+ cell.classList.add("editing");
36
+ const originalValue = cell.innerHTML.replace(/<\/?br>/g, "\n");
37
+ const valueToEdit = cell.getAttribute(EditableValueAttribute) ?? originalValue;
38
+
39
+ cell.setAttribute("originalValue", originalValue);
40
+ cell.setAttribute("valueToEdit", valueToEdit);
41
+
42
+ const type = cell.getAttribute(EditableTypeAttribute) ?? "text";
43
+
44
+ let input: HTMLElement;
45
+
46
+ switch (type) {
47
+ case "textarea":
48
+ cell.innerHTML = `<textarea rows="${calculateCellLines(cell)}">${valueToEdit}</textarea>`;
49
+ input = cell.querySelector("textarea")!;
50
+ break;
51
+ case "select":
52
+ input = cell.querySelector(cell.getAttribute(EditableElementAttribute) ?? "")!;
53
+ input
54
+ .querySelectorAll(`option[value='${valueToEdit}']`)
55
+ .forEach(input => input.setAttribute("selected", "true"));
56
+ break;
57
+ default:
58
+ cell.innerHTML = `<input type='${type}' />`;
59
+ input = cell.querySelector("input")!;
60
+ input.setAttribute("value", valueToEdit.trim());
61
+ }
62
+
63
+ const attributes = JSON.parse(cell.getAttribute(EditableAttrsAttribute) ?? "{}");
64
+ for (const key in attributes) {
65
+ const value = attributes[key];
66
+ input.setAttribute(key, value);
67
+ }
53
68
 
54
- cell.classList.remove("edited");
55
-
56
- const submitCell = async (el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
57
- let value = el.value;
58
- if (value !== valueToEdit) {
59
- try {
60
- const response = await datagrid.ajax.request({
61
- url: cell.getAttribute(EditableUrlAttribute) ?? "",
62
- method: "POST",
63
- data: {
64
- value,
65
- },
66
- }) as any;
67
-
68
- if (type === "select") {
69
- cell.innerHTML = cell.querySelector(`option[value='${value}']`)?.innerHTML ?? "";
70
- } else {
71
- if (response._datagrid_editable_new_value) {
72
- value = response._datagrid_editable_new_value;
69
+ cell.classList.remove("edited");
70
+
71
+ const submitCell = async (el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
72
+ let value = el.value;
73
+ if (value !== valueToEdit) {
74
+ try {
75
+ const response = await datagrid.ajax.request({
76
+ url: cell.getAttribute(EditableUrlAttribute) ?? "",
77
+ method: "POST",
78
+ data: {
79
+ value,
80
+ },
81
+ }) as any;
82
+
83
+ if (type === "select") {
84
+ cell.innerHTML = cell.querySelector(`option[value='${value}']`)?.innerHTML ?? "";
85
+ } else {
86
+ if (response._datagrid_editable_new_value) {
87
+ value = response._datagrid_editable_new_value;
88
+ }
89
+ cell.innerHTML = value;
73
90
  }
74
- cell.innerHTML = value;
91
+ cell.classList.add("edited");
92
+ } catch {
93
+ cell.innerHTML = originalValue;
94
+ cell.classList.add("edited-error");
75
95
  }
76
- cell.classList.add("edited");
77
- } catch {
96
+ } else {
78
97
  cell.innerHTML = originalValue;
79
- cell.classList.add("edited-error");
80
98
  }
81
- } else {
82
- cell.innerHTML = originalValue;
83
- }
84
99
 
85
- cell.classList.remove("editing");
86
- };
87
-
88
- cell
89
- .querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
90
- "input, textarea, select"
91
- )
92
- .forEach(el => {
93
- el.addEventListener("blur", () => submitCell(el));
94
- el.addEventListener("keydown", e => {
95
- if (isEnter(e as KeyboardEvent)) {
96
- e.stopPropagation();
97
- e.preventDefault();
98
- return submitCell(el);
99
- }
100
+ cell.classList.remove("editing");
101
+ };
102
+
103
+ cell
104
+ .querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
105
+ "input, textarea, select"
106
+ )
107
+ .forEach(el => {
108
+ el.addEventListener("blur", () => submitCell(el));
109
+ el.addEventListener("keydown", e => {
110
+ if (isEnter(e as KeyboardEvent)) {
111
+ e.stopPropagation();
112
+ e.preventDefault();
113
+ return submitCell(el);
114
+ }
100
115
 
101
- if (isEsc(e as KeyboardEvent)) {
102
- e.stopPropagation();
103
- e.preventDefault();
104
- cell.classList.remove("editing");
105
- cell.innerHTML = originalValue;
116
+ if (isEsc(e as KeyboardEvent)) {
117
+ e.stopPropagation();
118
+ e.preventDefault();
119
+ cell.classList.remove("editing");
120
+ cell.innerHTML = originalValue;
121
+ }
122
+ });
123
+
124
+ if (el instanceof HTMLSelectElement) {
125
+ el.addEventListener("change", () => submitCell(el));
106
126
  }
107
127
  });
108
-
109
- if (el instanceof HTMLSelectElement) {
110
- el.addEventListener("change", () => submitCell(el));
111
- }
112
- });
113
- }
128
+ }
129
+ });
114
130
  });
115
-
116
- return true;
117
131
  }
118
132
  }