@sealcode/sealgen 0.15.57-beta → 0.15.58-beta

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 (3) hide show
  1. package/lib/forms/controls/table.js +40 -24
  2. package/package.json +1 -1
  3. package/src/forms/controls/table.ts +63 -43
package/lib/forms/controls/table.js CHANGED
@@ -2,6 +2,7 @@ import { hasShape, is, predicates } from "@sealcode/ts-predicates";
2
2
  import qs from "qs";
3
3
  import { tempstream } from "tempstream";
4
4
  import { FormControl } from "./form-control.js";
5
+ const TO_REPLACE = "____$$$$";
5
6
  class Table extends FormControl {
6
7
  constructor(table_field, options) {
7
8
  super();
@@ -24,7 +25,7 @@ class Table extends FormControl {
24
25
  ${Object.entries(this.table_field.columns).map(([key]) => {
25
26
  return tempstream`<td>${this.options.render_fields[key](
26
27
  fctx,
27
- `${this.table_field.name}[][${key}]`,
28
+ `${this.table_field.name}[${row_index}][${key}]`,
28
29
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
29
30
  row?.[key] || ""
30
31
  )}</td>`;
@@ -32,13 +33,19 @@ class Table extends FormControl {
32
33
  ${this.options.allow_removing ? (
33
34
  /* HTML */
34
35
  `<td>
35
- <input
36
- type="submit"
37
- data-turbo-frame="${this.getFrameID()}"
38
- value="${this.options.label_remove || "remove"}"
39
- form="${fctx.form_id}"
40
- formnovalidate
41
- formaction="${this.getActionURL(
36
+ <button
37
+ onclick="this.closest('tr').remove()"
38
+ >
39
+ remove
40
+ </button>
41
+ <noscript>
42
+ <input
43
+ type="submit"
44
+ data-turbo-frame="${this.getFrameID()}"
45
+ value="${this.options.label_remove || "remove"}"
46
+ form="${fctx.form_id}"
47
+ formnovalidate
48
+ formaction="${this.getActionURL(
42
49
  this.table_field.name,
43
50
  {
44
51
  remove: {
@@ -46,7 +53,8 @@ class Table extends FormControl {
46
53
  }
47
54
  }
48
55
  )}"
49
- />
56
+ />
57
+ </noscript>
50
58
  </td>`
51
59
  ) : ""}
52
60
  </tr>`
@@ -71,21 +79,29 @@ class Table extends FormControl {
71
79
  ${rows?.map((row, index) => make_row(row, index))}
72
80
  </tbody>
73
81
  </table>
74
- <template> ${make_row(null, rows.length)} </template>
75
- ${this.options.allow_adding ? (
82
+ <template> ${make_row(null, TO_REPLACE)} </template>
83
+
84
+ ${/* because of https://github.com/ljharb/qs/issues/252 we have to
85
+ put the indexes in the field names */
86
+ this.options.allow_adding ? (
76
87
  /* HTML */
77
88
  `<button
78
- onclick="this.closest('turbo-frame').querySelector('tbody').appendChild(this.closest('turbo-frame').querySelector('template').cloneNode(true).content)"
79
- >
80
- add
81
- </button>
82
- <noscript>
83
- <input
84
- type="submit"
85
- value="${this.options.label_add || "add"}"
86
- form="${fctx.form_id}"
87
- formnovalidate
88
- formaction="${this.getActionURL(
89
+ onclick="const template = this.closest('turbo-frame').querySelector('template');
90
+ const tbody = this.closest('turbo-frame').querySelector('tbody');
91
+ const orig_template = template.innerHTML;
92
+ template.innerHTML = orig_template.replaceAll('${TO_REPLACE}', tbody.querySelectorAll('tr').length);
93
+ tbody.appendChild(template.cloneNode(true).content);
94
+ template.innerHTML = orig_template;"
95
+ >
96
+ add
97
+ </button>
98
+ <noscript>
99
+ <input
100
+ type="submit"
101
+ value="${this.options.label_add || "add"}"
102
+ form="${fctx.form_id}"
103
+ formnovalidate
104
+ formaction="${this.getActionURL(
89
105
  this.table_field.name,
90
106
  {
91
107
  insert: {
@@ -94,8 +110,8 @@ class Table extends FormControl {
94
110
  }
95
111
  }
96
112
  )}"
97
- />
98
- </noscript>`
113
+ />
114
+ </noscript>`
99
115
  ) : ""}
100
116
  </div>
101
117
  </turbo-frame>`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sealcode/sealgen",
3
- "version": "0.15.57-beta",
3
+ "version": "0.15.58-beta",
4
4
  "description": "Module to automate adding routes and collections to a sealious application",
5
5
  "main": "lib/index.js",
6
6
  "type": "module",
package/src/forms/controls/table.ts CHANGED
@@ -38,6 +38,8 @@ export type TableControlOptions<F extends Record<string, FormField>> = {
38
38
  }
39
39
  );
40
40
 
41
+ const TO_REPLACE = "____$$$$";
42
+
41
43
  export class Table<F extends Record<string, FormField>> extends FormControl {
42
44
  role = <const>"input";
43
45
  constructor(
@@ -64,13 +66,13 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
64
66
  >;
65
67
  }
66
68
  | null,
67
- row_index: number
69
+ row_index: number | string
68
70
  ) => {
69
71
  return /* HTML */ tempstream`<tr>
70
72
  ${Object.entries(this.table_field.columns).map(([key]) => {
71
73
  return tempstream`<td>${this.options.render_fields[key](
72
74
  fctx,
73
- `${this.table_field.name}[][${key}]`,
75
+ `${this.table_field.name}[${row_index}][${key}]`,
74
76
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
75
77
  (row?.[key] as string) || ""
76
78
  )}</td>`;
@@ -78,22 +80,29 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
78
80
  ${
79
81
  this.options.allow_removing
80
82
  ? /* HTML */ `<td>
81
- <input
82
- type="submit"
83
- data-turbo-frame="${this.getFrameID()}"
84
- value="${this.options.label_remove ||
85
- "remove"}"
86
- form="${fctx.form_id}"
87
- formnovalidate
88
- formaction="${this.getActionURL(
89
- this.table_field.name,
90
- {
91
- remove: {
92
- index: row_index,
93
- },
94
- }
95
- )}"
96
- />
83
+ <button
84
+ onclick="this.closest('tr').remove()"
85
+ >
86
+ remove
87
+ </button>
88
+ <noscript>
89
+ <input
90
+ type="submit"
91
+ data-turbo-frame="${this.getFrameID()}"
92
+ value="${this.options
93
+ .label_remove || "remove"}"
94
+ form="${fctx.form_id}"
95
+ formnovalidate
96
+ formaction="${this.getActionURL(
97
+ this.table_field.name,
98
+ {
99
+ remove: {
100
+ index: row_index,
101
+ },
102
+ }
103
+ )}"
104
+ />
105
+ </noscript>
97
106
  </td>`
98
107
  : ""
99
108
  }
@@ -127,31 +136,42 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
127
136
  ${rows?.map((row, index) => make_row(row, index))}
128
137
  </tbody>
129
138
  </table>
130
- <template> ${make_row(null, rows.length)} </template>
131
- ${this.options.allow_adding
132
- ? /* HTML */ `<button
133
- onclick="this.closest('turbo-frame').querySelector('tbody').appendChild(this.closest('turbo-frame').querySelector('template').cloneNode(true).content)"
134
- >
135
- add
136
- </button>
137
- <noscript>
138
- <input
139
- type="submit"
140
- value="${this.options.label_add || "add"}"
141
- form="${fctx.form_id}"
142
- formnovalidate
143
- formaction="${this.getActionURL(
144
- this.table_field.name,
145
- {
146
- insert: {
147
- index: rows.length,
148
- value: {},
149
- },
150
- }
151
- )}"
152
- />
153
- </noscript>`
154
- : ""}
139
+ <template> ${make_row(null, TO_REPLACE)} </template>
140
+
141
+ ${
142
+ /* because of https://github.com/ljharb/qs/issues/252 we have to
143
+ put the indexes in the field names */
144
+ this.options.allow_adding
145
+ ? /* HTML */ `<button
146
+ onclick="const template = this.closest('turbo-frame').querySelector('template');
147
+ const tbody = this.closest('turbo-frame').querySelector('tbody');
148
+ const orig_template = template.innerHTML;
149
+ template.innerHTML = orig_template.replaceAll('${TO_REPLACE}', tbody.querySelectorAll('tr').length);
150
+ tbody.appendChild(template.cloneNode(true).content);
151
+ template.innerHTML = orig_template;"
152
+ >
153
+ add
154
+ </button>
155
+ <noscript>
156
+ <input
157
+ type="submit"
158
+ value="${this.options.label_add ||
159
+ "add"}"
160
+ form="${fctx.form_id}"
161
+ formnovalidate
162
+ formaction="${this.getActionURL(
163
+ this.table_field.name,
164
+ {
165
+ insert: {
166
+ index: rows.length,
167
+ value: {},
168
+ },
169
+ }
170
+ )}"
171
+ />
172
+ </noscript>`
173
+ : ""
174
+ }
155
175
  </div>
156
176
  </turbo-frame>`;
157
177
  }