@lobb-js/studio 0.22.0 → 0.24.0

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 (9) hide show
  1. package/dist/components/dataTable/fieldCell.svelte +64 -51
  2. package/dist/components/dataTable/table.svelte +1 -1
  3. package/dist/components/detailView/update/children.svelte +35 -122
  4. package/dist/components/importButton.svelte +25 -17
  5. package/package.json +1 -1
  6. package/src/lib/components/dataTable/fieldCell.svelte +64 -51
  7. package/src/lib/components/dataTable/table.svelte +1 -1
  8. package/src/lib/components/detailView/update/children.svelte +35 -122
  9. package/src/lib/components/importButton.svelte +25 -17
package/dist/components/dataTable/fieldCell.svelte CHANGED
@@ -6,8 +6,10 @@
6
6
  import EnumBadge from "./enumBadge.svelte";
7
7
  import PolymorphicFieldCell from "./polymorphicFieldCell.svelte";
8
8
  import { getStudioContext } from "../../context";
9
+ import ExtensionsComponents from "../extensionsComponents.svelte";
10
+ import { getExtensionUtils } from "../../extensions/extensionUtils";
9
11
 
10
- const { ctx } = getStudioContext();
12
+ const { ctx, lobb } = getStudioContext();
11
13
 
12
14
  interface Props {
13
15
  collectionName: string;
@@ -32,55 +34,66 @@
32
34
  const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
33
35
  </script>
34
36
 
35
- {#if polymorphicRelation}
36
- <PolymorphicFieldCell
37
- collectionField={polymorphicRelation.from.collection_field}
38
- idField={polymorphicRelation.from.id_field}
39
- {entry}
40
- bind:tableParams
41
- />
42
- {:else if isRefrenceField}
43
- {#if value?.id && value.id !== 0}
44
- <div class="flex items-center gap-2">
45
- <div>{value.id}</div>
46
- {#if Object.values(value)[1]}
47
- <div class="border bg-muted px-3 py-1 rounded-full">
48
- {Object.values(value)[1]}
37
+ <ExtensionsComponents
38
+ name="dataTable.cell"
39
+ utils={getExtensionUtils(lobb, ctx)}
40
+ {collectionName}
41
+ {fieldName}
42
+ {value}
43
+ {entry}
44
+ >
45
+ {#snippet children()}
46
+ {#if polymorphicRelation}
47
+ <PolymorphicFieldCell
48
+ collectionField={polymorphicRelation.from.collection_field}
49
+ idField={polymorphicRelation.from.id_field}
50
+ {entry}
51
+ bind:tableParams
52
+ />
53
+ {:else if isRefrenceField}
54
+ {#if value?.id && value.id !== 0}
55
+ <div class="flex items-center gap-2">
56
+ <div>{value.id}</div>
57
+ {#if Object.values(value)[1]}
58
+ <div class="border bg-muted px-3 py-1 rounded-full">
59
+ {Object.values(value)[1]}
60
+ </div>
61
+ {/if}
62
+ <UpdateDetailViewButton
63
+ collectionName={relationTarget!}
64
+ recordId={value.id}
65
+ variant="ghost"
66
+ class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
67
+ Icon={ExternalLink}
68
+ onSuccessfullSave={async () => {
69
+ tableParams = { ...tableParams };
70
+ }}
71
+ />
49
72
  </div>
73
+ {:else if value?.id === 0}
74
+ <div class="text-muted-foreground">PARENT ID</div>
75
+ {:else}
76
+ <div class="text-muted-foreground">NULL</div>
50
77
  {/if}
51
- <UpdateDetailViewButton
52
- collectionName={relationTarget!}
53
- recordId={value.id}
54
- variant="ghost"
55
- class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
56
- Icon={ExternalLink}
57
- onSuccessfullSave={async () => {
58
- tableParams = { ...tableParams };
59
- }}
60
- />
61
- </div>
62
- {:else if value?.id === 0}
63
- <div class="text-muted-foreground">PARENT ID</div>
64
- {:else}
65
- <div class="text-muted-foreground">NULL</div>
66
- {/if}
67
- {:else if isPasswordField}
68
- <div class="text-muted-foreground tracking-widest">••••••</div>
69
- {:else if value === ""}
70
- <div class="text-muted-foreground">EMPTY STRING</div>
71
- {:else if value === null || value === undefined}
72
- <div class="text-muted-foreground">NULL</div>
73
- {:else if field?.enum}
74
- <EnumBadge {value} enum={field.enum} />
75
- {:else if field.type === "datetime"}
76
- {@const date = new Date(value).toLocaleDateString()}
77
- {@const time = new Date(value).toLocaleTimeString()}
78
- <div>{date}, {time}</div>
79
- {:else if field.type === "date"}
80
- {@const date = new Date(value).toLocaleDateString()}
81
- <div>{date}</div>
82
- {:else if field.type === "time"}
83
- <div>{value}</div>
84
- {:else}
85
- {value}
86
- {/if}
78
+ {:else if isPasswordField}
79
+ <div class="text-muted-foreground tracking-widest">••••••</div>
80
+ {:else if value === ""}
81
+ <div class="text-muted-foreground">EMPTY STRING</div>
82
+ {:else if value === null || value === undefined}
83
+ <div class="text-muted-foreground">NULL</div>
84
+ {:else if field?.enum}
85
+ <EnumBadge {value} enum={field.enum} />
86
+ {:else if field.type === "datetime"}
87
+ {@const date = new Date(value).toLocaleDateString()}
88
+ {@const time = new Date(value).toLocaleTimeString()}
89
+ <div>{date}, {time}</div>
90
+ {:else if field.type === "date"}
91
+ {@const date = new Date(value).toLocaleDateString()}
92
+ <div>{date}</div>
93
+ {:else if field.type === "time"}
94
+ <div>{value}</div>
95
+ {:else}
96
+ {value}
97
+ {/if}
98
+ {/snippet}
99
+ </ExtensionsComponents>
package/dist/components/dataTable/table.svelte CHANGED
@@ -209,7 +209,7 @@
209
209
  class="
210
210
  sticky top-0 z-10
211
211
  flex items-center p-2.5 text-xs h-10
212
- {unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
212
+ {unifiedBgColor ? unifiedBgColor : 'bg-muted'}
213
213
  {lastColumn && !showLastColumnBorder ? '' : 'border-r'}
214
214
  border-b gap-2
215
215
  {headerBorderTop ? 'border-t' : ''}
package/dist/components/detailView/update/children.svelte CHANGED
@@ -1,14 +1,10 @@
1
1
  <script lang="ts">
2
2
  import DataTable from "../../../components/dataTable/dataTable.svelte";
3
3
  import { getStudioContext } from "../../../context";
4
- import { Link, Plus, TableIcon, Unlink } from "lucide-svelte";
4
+ import { Link, Plus, TableIcon } from "lucide-svelte";
5
5
  import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
6
6
  import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
7
7
  import { getExtensionUtils } from "../../../extensions/extensionUtils";
8
- import SelectRecord from "../../../components/selectRecord.svelte";
9
- import { getCollectionColumns } from "../../dataTable/utils";
10
- import Table from "../../../components/dataTable/table.svelte";
11
- import Button from "../../../components/ui/button/button.svelte";
12
8
 
13
9
  const { ctx, lobb } = getStudioContext();
14
10
 
@@ -19,92 +15,67 @@
19
15
 
20
16
  let { collectionName, entry }: LocalProp = $props();
21
17
 
22
- const allChildren = ctx.meta.collections[collectionName]?.children ?? [];
23
- const fkChildren = allChildren.filter((c) => c.type === "fk") as { type: "fk"; collection: string; field: string }[];
24
- const relationalChildren = allChildren.filter((c) => c.type === "m2m" || c.type === "polymorphic") as { type: string; collection: string }[];
25
-
26
- const fkRefresh: boolean[] = $state(new Array(fkChildren.length).fill(true));
27
-
28
- let relationalRecords: Record<string, any[]> = $state({});
29
- let relationalLoading = $state(false);
30
-
31
- async function fetchRelational() {
32
- if (!relationalChildren.length || !entry?.id) return;
33
- relationalLoading = true;
34
- const childrenParam: Record<string, any> = {};
35
- for (const child of relationalChildren) {
36
- childrenParam[child.collection] = { fields: ["*"] };
37
- }
38
- const response = await lobb.findAll(collectionName, {
39
- filter: { id: entry.id },
40
- limit: 1,
41
- children: childrenParam,
42
- });
43
- const result = await response.json();
44
- const record = result.data?.[0];
45
- if (record) {
46
- for (const child of relationalChildren) {
47
- relationalRecords[child.collection] = record[child.collection] ?? [];
48
- }
49
- }
50
- relationalLoading = false;
51
- }
52
-
53
- async function linkRecord(childCollection: string, selected: any) {
54
- await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { link: [selected.id] } });
55
- await fetchRelational();
56
- }
57
-
58
- async function unlinkRecord(childCollection: string, id: any) {
59
- await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { unlink: [id] } });
60
- await fetchRelational();
61
- }
62
-
63
- $effect(() => {
64
- fetchRelational();
65
- });
18
+ const childrenRelations = ctx.meta.relations.filter(
19
+ (relation) => relation.to.collection === collectionName,
20
+ );
21
+ const refresh: boolean[] = $state(
22
+ new Array(childrenRelations.length).fill(true),
23
+ );
66
24
  </script>
67
25
 
68
- {#if allChildren.length}
26
+ {#if childrenRelations.length}
69
27
  <div class="flex flex-col gap-4 border-t p-4">
70
28
  <div class="flex items-center gap-2">
71
29
  <Link size="17.5" />
72
30
  <div>Sub Records</div>
73
31
  </div>
74
32
  <div class="flex flex-col gap-4">
75
-
76
- <!-- FK children -->
77
- {#each fkChildren as child, index}
33
+ {#each childrenRelations as relation, index}
34
+ {@const childCollection = relation.from.collection}
35
+ {@const childField = relation.from.field}
78
36
  <ExtensionsComponents
79
- name="detailView.update.subRecords.{child.collection}"
37
+ name="detailView.update.subRecords.{childCollection}"
80
38
  utils={getExtensionUtils(lobb, ctx)}
81
- collectionName={child.collection}
82
- filter={{ [child.field]: entry.id }}
39
+ collectionName={childCollection}
40
+ filter={{
41
+ [childField]: entry.id,
42
+ }}
83
43
  class="bg-muted/30 border rounded-md overflow-hidden"
84
44
  >
85
45
  <div class="border rounded-md overflow-clip">
86
- <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
46
+ <div
47
+ class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b"
48
+ >
87
49
  <div class="flex-1 flex h-full items-center gap-2">
88
- <TableIcon class="text-muted-foreground" size="17.5" />
89
- <div class="text-sm text-muted-foreground">{child.collection}</div>
50
+ <TableIcon
51
+ class="text-muted-foreground"
52
+ size="17.5"
53
+ />
54
+ <div class="text-sm text-muted-foreground">
55
+ {childCollection}
56
+ </div>
90
57
  </div>
91
58
  <div class="flex gap-2">
92
59
  <CreateDetailViewButton
93
60
  variant="ghost"
94
61
  class="h-7 px-2 font-normal text-xs"
95
62
  Icon={Plus}
96
- collectionName={child.collection}
97
- onSuccessfullSave={async () => { fkRefresh[index] = !fkRefresh[index]; }}
63
+ collectionName={childCollection}
64
+ onSuccessfullSave={async () => {
65
+ refresh[index] = !refresh[index];
66
+ }}
98
67
  >
99
68
  Create
100
69
  </CreateDetailViewButton>
101
70
  </div>
102
71
  </div>
103
72
  <div class="max-h-72 overflow-auto rounded-md">
104
- {#key fkRefresh[index]}
73
+ {#key refresh[index]}
105
74
  <DataTable
106
- collectionName={child.collection}
107
- filter={{ [child.field]: entry.id }}
75
+ collectionName={childCollection}
76
+ filter={{
77
+ [childField]: entry.id,
78
+ }}
108
79
  unifiedBgColor="bg-muted/30"
109
80
  showHeader={false}
110
81
  showFooter={false}
@@ -120,64 +91,6 @@
120
91
  </div>
121
92
  </ExtensionsComponents>
122
93
  {/each}
123
-
124
- <!-- M2M and polymorphic children -->
125
- {#each relationalChildren as child}
126
- {@const columns = getCollectionColumns(ctx, child.collection)}
127
- {@const linkedIds = new Set((relationalRecords[child.collection] ?? []).map((r: any) => String(r.id)))}
128
- <div class="border rounded-md overflow-clip">
129
- <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
130
- <div class="flex-1 flex h-full items-center gap-2">
131
- <TableIcon class="text-muted-foreground" size="17.5" />
132
- <div class="text-sm text-muted-foreground">{child.collection}</div>
133
- </div>
134
- <div class="flex gap-2">
135
- <CreateDetailViewButton
136
- variant="ghost"
137
- class="h-7 px-2 font-normal text-xs"
138
- Icon={Plus}
139
- collectionName={child.collection}
140
- onSuccessfullSave={async (newEntry) => { await linkRecord(child.collection, newEntry); }}
141
- >
142
- Create & link
143
- </CreateDetailViewButton>
144
- <SelectRecord
145
- collectionName={child.collection}
146
- text="Link existing"
147
- onSelect={(selected) => linkRecord(child.collection, selected)}
148
- filter={{ id: { $nin: [...linkedIds] } }}
149
- variant="ghost"
150
- class="h-7 px-2 font-normal text-xs"
151
- />
152
- </div>
153
- </div>
154
- <div class="max-h-72 overflow-auto bg-muted/30">
155
- {#if relationalLoading}
156
- <div class="p-4 text-sm text-muted-foreground">Loading...</div>
157
- {:else}
158
- <Table
159
- data={relationalRecords[child.collection] ?? []}
160
- {columns}
161
- unifiedBgColor="bg-muted/30"
162
- showLastRowBorder={false}
163
- showLastColumnBorder={false}
164
- showCheckboxes={false}
165
- >
166
- {#snippet tools(record, _index)}
167
- <Button
168
- class="h-6 w-6 text-muted-foreground hover:bg-transparent"
169
- variant="ghost"
170
- size="icon"
171
- onclick={() => unlinkRecord(child.collection, record.id)}
172
- Icon={Unlink}
173
- />
174
- {/snippet}
175
- </Table>
176
- {/if}
177
- </div>
178
- </div>
179
- {/each}
180
-
181
94
  </div>
182
95
  </div>
183
96
  {/if}
package/dist/components/importButton.svelte CHANGED
@@ -8,6 +8,8 @@
8
8
  import Table from "./dataTable/table.svelte";
9
9
  import Fuse from "fuse.js";
10
10
  import { emitEvent } from "../eventSystem";
11
+ import ExtensionsComponents from "./extensionsComponents.svelte";
12
+ import { getExtensionUtils } from "../extensions/extensionUtils";
11
13
 
12
14
  const { lobb, ctx } = getStudioContext();
13
15
 
@@ -127,24 +129,24 @@
127
129
  });
128
130
  const finalRows = eventResult.rows ?? transformedRows;
129
131
 
130
- const results: { row: any; error: string | null }[] = [];
131
- for (const row of finalRows) {
132
- const response = await lobb.createOne(collectionName, row);
133
- if (response.ok) {
134
- results.push({ row, error: null });
135
- } else {
136
- const body = await response.json().catch(() => null);
137
- const message = body?.details
138
- ? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
139
- : (body?.message ?? `HTTP ${response.status}`);
140
- results.push({ row, error: message });
141
- }
142
- }
132
+ const txBody = finalRows.map((row: any) => ({
133
+ method: "createOne",
134
+ props: { collectionName, data: row },
135
+ }));
143
136
 
144
- importResults = results;
145
- const succeeded = results.filter((r) => r.error === null);
137
+ const response = await lobb.transactions(txBody);
138
+
139
+ if (response.ok) {
140
+ importResults = finalRows.map((row: any) => ({ row, error: null }));
141
+ if (onSuccessfullSave) await onSuccessfullSave();
142
+ } else {
143
+ const body = await response.json().catch(() => null);
144
+ const message = body?.details
145
+ ? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
146
+ : (body?.message ?? `HTTP ${response.status}`);
147
+ importResults = finalRows.map((row: any) => ({ row, error: message }));
148
+ }
146
149
 
147
- if (succeeded.length > 0 && onSuccessfullSave) await onSuccessfullSave();
148
150
  step = "results";
149
151
  } catch (e: any) {
150
152
  step = "preview";
@@ -180,7 +182,7 @@
180
182
  onOpenChange={(open) => { if (!open) hideDrawer(); }}
181
183
  >
182
184
  <Dialog.Content
183
- class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
185
+ class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-7xl h-[80vh]' : 'max-w-lg'}"
184
186
  >
185
187
  <!-- Header -->
186
188
  <div class="flex h-12 shrink-0 items-center justify-between border-b px-4">
@@ -212,6 +214,12 @@
212
214
  </button>
213
215
  </div>
214
216
 
217
+ <ExtensionsComponents
218
+ name="collections.import.info"
219
+ utils={getExtensionUtils(lobb, ctx)}
220
+ {collectionName}
221
+ />
222
+
215
223
  <div class="p-4">
216
224
  {#if activeTab === "upload"}
217
225
  <div
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lobb-js/studio",
3
3
  "license": "UNLICENSED",
4
- "version": "0.22.0",
4
+ "version": "0.24.0",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public"
package/src/lib/components/dataTable/fieldCell.svelte CHANGED
@@ -6,8 +6,10 @@
6
6
  import EnumBadge from "./enumBadge.svelte";
7
7
  import PolymorphicFieldCell from "./polymorphicFieldCell.svelte";
8
8
  import { getStudioContext } from "../../context";
9
+ import ExtensionsComponents from "../extensionsComponents.svelte";
10
+ import { getExtensionUtils } from "../../extensions/extensionUtils";
9
11
 
10
- const { ctx } = getStudioContext();
12
+ const { ctx, lobb } = getStudioContext();
11
13
 
12
14
  interface Props {
13
15
  collectionName: string;
@@ -32,55 +34,66 @@
32
34
  const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
33
35
  </script>
34
36
 
35
- {#if polymorphicRelation}
36
- <PolymorphicFieldCell
37
- collectionField={polymorphicRelation.from.collection_field}
38
- idField={polymorphicRelation.from.id_field}
39
- {entry}
40
- bind:tableParams
41
- />
42
- {:else if isRefrenceField}
43
- {#if value?.id && value.id !== 0}
44
- <div class="flex items-center gap-2">
45
- <div>{value.id}</div>
46
- {#if Object.values(value)[1]}
47
- <div class="border bg-muted px-3 py-1 rounded-full">
48
- {Object.values(value)[1]}
37
+ <ExtensionsComponents
38
+ name="dataTable.cell"
39
+ utils={getExtensionUtils(lobb, ctx)}
40
+ {collectionName}
41
+ {fieldName}
42
+ {value}
43
+ {entry}
44
+ >
45
+ {#snippet children()}
46
+ {#if polymorphicRelation}
47
+ <PolymorphicFieldCell
48
+ collectionField={polymorphicRelation.from.collection_field}
49
+ idField={polymorphicRelation.from.id_field}
50
+ {entry}
51
+ bind:tableParams
52
+ />
53
+ {:else if isRefrenceField}
54
+ {#if value?.id && value.id !== 0}
55
+ <div class="flex items-center gap-2">
56
+ <div>{value.id}</div>
57
+ {#if Object.values(value)[1]}
58
+ <div class="border bg-muted px-3 py-1 rounded-full">
59
+ {Object.values(value)[1]}
60
+ </div>
61
+ {/if}
62
+ <UpdateDetailViewButton
63
+ collectionName={relationTarget!}
64
+ recordId={value.id}
65
+ variant="ghost"
66
+ class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
67
+ Icon={ExternalLink}
68
+ onSuccessfullSave={async () => {
69
+ tableParams = { ...tableParams };
70
+ }}
71
+ />
49
72
  </div>
73
+ {:else if value?.id === 0}
74
+ <div class="text-muted-foreground">PARENT ID</div>
75
+ {:else}
76
+ <div class="text-muted-foreground">NULL</div>
50
77
  {/if}
51
- <UpdateDetailViewButton
52
- collectionName={relationTarget!}
53
- recordId={value.id}
54
- variant="ghost"
55
- class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
56
- Icon={ExternalLink}
57
- onSuccessfullSave={async () => {
58
- tableParams = { ...tableParams };
59
- }}
60
- />
61
- </div>
62
- {:else if value?.id === 0}
63
- <div class="text-muted-foreground">PARENT ID</div>
64
- {:else}
65
- <div class="text-muted-foreground">NULL</div>
66
- {/if}
67
- {:else if isPasswordField}
68
- <div class="text-muted-foreground tracking-widest">••••••</div>
69
- {:else if value === ""}
70
- <div class="text-muted-foreground">EMPTY STRING</div>
71
- {:else if value === null || value === undefined}
72
- <div class="text-muted-foreground">NULL</div>
73
- {:else if field?.enum}
74
- <EnumBadge {value} enum={field.enum} />
75
- {:else if field.type === "datetime"}
76
- {@const date = new Date(value).toLocaleDateString()}
77
- {@const time = new Date(value).toLocaleTimeString()}
78
- <div>{date}, {time}</div>
79
- {:else if field.type === "date"}
80
- {@const date = new Date(value).toLocaleDateString()}
81
- <div>{date}</div>
82
- {:else if field.type === "time"}
83
- <div>{value}</div>
84
- {:else}
85
- {value}
86
- {/if}
78
+ {:else if isPasswordField}
79
+ <div class="text-muted-foreground tracking-widest">••••••</div>
80
+ {:else if value === ""}
81
+ <div class="text-muted-foreground">EMPTY STRING</div>
82
+ {:else if value === null || value === undefined}
83
+ <div class="text-muted-foreground">NULL</div>
84
+ {:else if field?.enum}
85
+ <EnumBadge {value} enum={field.enum} />
86
+ {:else if field.type === "datetime"}
87
+ {@const date = new Date(value).toLocaleDateString()}
88
+ {@const time = new Date(value).toLocaleTimeString()}
89
+ <div>{date}, {time}</div>
90
+ {:else if field.type === "date"}
91
+ {@const date = new Date(value).toLocaleDateString()}
92
+ <div>{date}</div>
93
+ {:else if field.type === "time"}
94
+ <div>{value}</div>
95
+ {:else}
96
+ {value}
97
+ {/if}
98
+ {/snippet}
99
+ </ExtensionsComponents>
package/src/lib/components/dataTable/table.svelte CHANGED
@@ -209,7 +209,7 @@
209
209
  class="
210
210
  sticky top-0 z-10
211
211
  flex items-center p-2.5 text-xs h-10
212
- {unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
212
+ {unifiedBgColor ? unifiedBgColor : 'bg-muted'}
213
213
  {lastColumn && !showLastColumnBorder ? '' : 'border-r'}
214
214
  border-b gap-2
215
215
  {headerBorderTop ? 'border-t' : ''}
package/src/lib/components/detailView/update/children.svelte CHANGED
@@ -1,14 +1,10 @@
1
1
  <script lang="ts">
2
2
  import DataTable from "../../../components/dataTable/dataTable.svelte";
3
3
  import { getStudioContext } from "../../../context";
4
- import { Link, Plus, TableIcon, Unlink } from "lucide-svelte";
4
+ import { Link, Plus, TableIcon } from "lucide-svelte";
5
5
  import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
6
6
  import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
7
7
  import { getExtensionUtils } from "../../../extensions/extensionUtils";
8
- import SelectRecord from "../../../components/selectRecord.svelte";
9
- import { getCollectionColumns } from "../../dataTable/utils";
10
- import Table from "../../../components/dataTable/table.svelte";
11
- import Button from "../../../components/ui/button/button.svelte";
12
8
 
13
9
  const { ctx, lobb } = getStudioContext();
14
10
 
@@ -19,92 +15,67 @@
19
15
 
20
16
  let { collectionName, entry }: LocalProp = $props();
21
17
 
22
- const allChildren = ctx.meta.collections[collectionName]?.children ?? [];
23
- const fkChildren = allChildren.filter((c) => c.type === "fk") as { type: "fk"; collection: string; field: string }[];
24
- const relationalChildren = allChildren.filter((c) => c.type === "m2m" || c.type === "polymorphic") as { type: string; collection: string }[];
25
-
26
- const fkRefresh: boolean[] = $state(new Array(fkChildren.length).fill(true));
27
-
28
- let relationalRecords: Record<string, any[]> = $state({});
29
- let relationalLoading = $state(false);
30
-
31
- async function fetchRelational() {
32
- if (!relationalChildren.length || !entry?.id) return;
33
- relationalLoading = true;
34
- const childrenParam: Record<string, any> = {};
35
- for (const child of relationalChildren) {
36
- childrenParam[child.collection] = { fields: ["*"] };
37
- }
38
- const response = await lobb.findAll(collectionName, {
39
- filter: { id: entry.id },
40
- limit: 1,
41
- children: childrenParam,
42
- });
43
- const result = await response.json();
44
- const record = result.data?.[0];
45
- if (record) {
46
- for (const child of relationalChildren) {
47
- relationalRecords[child.collection] = record[child.collection] ?? [];
48
- }
49
- }
50
- relationalLoading = false;
51
- }
52
-
53
- async function linkRecord(childCollection: string, selected: any) {
54
- await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { link: [selected.id] } });
55
- await fetchRelational();
56
- }
57
-
58
- async function unlinkRecord(childCollection: string, id: any) {
59
- await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { unlink: [id] } });
60
- await fetchRelational();
61
- }
62
-
63
- $effect(() => {
64
- fetchRelational();
65
- });
18
+ const childrenRelations = ctx.meta.relations.filter(
19
+ (relation) => relation.to.collection === collectionName,
20
+ );
21
+ const refresh: boolean[] = $state(
22
+ new Array(childrenRelations.length).fill(true),
23
+ );
66
24
  </script>
67
25
 
68
- {#if allChildren.length}
26
+ {#if childrenRelations.length}
69
27
  <div class="flex flex-col gap-4 border-t p-4">
70
28
  <div class="flex items-center gap-2">
71
29
  <Link size="17.5" />
72
30
  <div>Sub Records</div>
73
31
  </div>
74
32
  <div class="flex flex-col gap-4">
75
-
76
- <!-- FK children -->
77
- {#each fkChildren as child, index}
33
+ {#each childrenRelations as relation, index}
34
+ {@const childCollection = relation.from.collection}
35
+ {@const childField = relation.from.field}
78
36
  <ExtensionsComponents
79
- name="detailView.update.subRecords.{child.collection}"
37
+ name="detailView.update.subRecords.{childCollection}"
80
38
  utils={getExtensionUtils(lobb, ctx)}
81
- collectionName={child.collection}
82
- filter={{ [child.field]: entry.id }}
39
+ collectionName={childCollection}
40
+ filter={{
41
+ [childField]: entry.id,
42
+ }}
83
43
  class="bg-muted/30 border rounded-md overflow-hidden"
84
44
  >
85
45
  <div class="border rounded-md overflow-clip">
86
- <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
46
+ <div
47
+ class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b"
48
+ >
87
49
  <div class="flex-1 flex h-full items-center gap-2">
88
- <TableIcon class="text-muted-foreground" size="17.5" />
89
- <div class="text-sm text-muted-foreground">{child.collection}</div>
50
+ <TableIcon
51
+ class="text-muted-foreground"
52
+ size="17.5"
53
+ />
54
+ <div class="text-sm text-muted-foreground">
55
+ {childCollection}
56
+ </div>
90
57
  </div>
91
58
  <div class="flex gap-2">
92
59
  <CreateDetailViewButton
93
60
  variant="ghost"
94
61
  class="h-7 px-2 font-normal text-xs"
95
62
  Icon={Plus}
96
- collectionName={child.collection}
97
- onSuccessfullSave={async () => { fkRefresh[index] = !fkRefresh[index]; }}
63
+ collectionName={childCollection}
64
+ onSuccessfullSave={async () => {
65
+ refresh[index] = !refresh[index];
66
+ }}
98
67
  >
99
68
  Create
100
69
  </CreateDetailViewButton>
101
70
  </div>
102
71
  </div>
103
72
  <div class="max-h-72 overflow-auto rounded-md">
104
- {#key fkRefresh[index]}
73
+ {#key refresh[index]}
105
74
  <DataTable
106
- collectionName={child.collection}
107
- filter={{ [child.field]: entry.id }}
75
+ collectionName={childCollection}
76
+ filter={{
77
+ [childField]: entry.id,
78
+ }}
108
79
  unifiedBgColor="bg-muted/30"
109
80
  showHeader={false}
110
81
  showFooter={false}
@@ -120,64 +91,6 @@
120
91
  </div>
121
92
  </ExtensionsComponents>
122
93
  {/each}
123
-
124
- <!-- M2M and polymorphic children -->
125
- {#each relationalChildren as child}
126
- {@const columns = getCollectionColumns(ctx, child.collection)}
127
- {@const linkedIds = new Set((relationalRecords[child.collection] ?? []).map((r: any) => String(r.id)))}
128
- <div class="border rounded-md overflow-clip">
129
- <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
130
- <div class="flex-1 flex h-full items-center gap-2">
131
- <TableIcon class="text-muted-foreground" size="17.5" />
132
- <div class="text-sm text-muted-foreground">{child.collection}</div>
133
- </div>
134
- <div class="flex gap-2">
135
- <CreateDetailViewButton
136
- variant="ghost"
137
- class="h-7 px-2 font-normal text-xs"
138
- Icon={Plus}
139
- collectionName={child.collection}
140
- onSuccessfullSave={async (newEntry) => { await linkRecord(child.collection, newEntry); }}
141
- >
142
- Create & link
143
- </CreateDetailViewButton>
144
- <SelectRecord
145
- collectionName={child.collection}
146
- text="Link existing"
147
- onSelect={(selected) => linkRecord(child.collection, selected)}
148
- filter={{ id: { $nin: [...linkedIds] } }}
149
- variant="ghost"
150
- class="h-7 px-2 font-normal text-xs"
151
- />
152
- </div>
153
- </div>
154
- <div class="max-h-72 overflow-auto bg-muted/30">
155
- {#if relationalLoading}
156
- <div class="p-4 text-sm text-muted-foreground">Loading...</div>
157
- {:else}
158
- <Table
159
- data={relationalRecords[child.collection] ?? []}
160
- {columns}
161
- unifiedBgColor="bg-muted/30"
162
- showLastRowBorder={false}
163
- showLastColumnBorder={false}
164
- showCheckboxes={false}
165
- >
166
- {#snippet tools(record, _index)}
167
- <Button
168
- class="h-6 w-6 text-muted-foreground hover:bg-transparent"
169
- variant="ghost"
170
- size="icon"
171
- onclick={() => unlinkRecord(child.collection, record.id)}
172
- Icon={Unlink}
173
- />
174
- {/snippet}
175
- </Table>
176
- {/if}
177
- </div>
178
- </div>
179
- {/each}
180
-
181
94
  </div>
182
95
  </div>
183
96
  {/if}
package/src/lib/components/importButton.svelte CHANGED
@@ -8,6 +8,8 @@
8
8
  import Table from "./dataTable/table.svelte";
9
9
  import Fuse from "fuse.js";
10
10
  import { emitEvent } from "../eventSystem";
11
+ import ExtensionsComponents from "./extensionsComponents.svelte";
12
+ import { getExtensionUtils } from "../extensions/extensionUtils";
11
13
 
12
14
  const { lobb, ctx } = getStudioContext();
13
15
 
@@ -127,24 +129,24 @@
127
129
  });
128
130
  const finalRows = eventResult.rows ?? transformedRows;
129
131
 
130
- const results: { row: any; error: string | null }[] = [];
131
- for (const row of finalRows) {
132
- const response = await lobb.createOne(collectionName, row);
133
- if (response.ok) {
134
- results.push({ row, error: null });
135
- } else {
136
- const body = await response.json().catch(() => null);
137
- const message = body?.details
138
- ? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
139
- : (body?.message ?? `HTTP ${response.status}`);
140
- results.push({ row, error: message });
141
- }
142
- }
132
+ const txBody = finalRows.map((row: any) => ({
133
+ method: "createOne",
134
+ props: { collectionName, data: row },
135
+ }));
143
136
 
144
- importResults = results;
145
- const succeeded = results.filter((r) => r.error === null);
137
+ const response = await lobb.transactions(txBody);
138
+
139
+ if (response.ok) {
140
+ importResults = finalRows.map((row: any) => ({ row, error: null }));
141
+ if (onSuccessfullSave) await onSuccessfullSave();
142
+ } else {
143
+ const body = await response.json().catch(() => null);
144
+ const message = body?.details
145
+ ? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
146
+ : (body?.message ?? `HTTP ${response.status}`);
147
+ importResults = finalRows.map((row: any) => ({ row, error: message }));
148
+ }
146
149
 
147
- if (succeeded.length > 0 && onSuccessfullSave) await onSuccessfullSave();
148
150
  step = "results";
149
151
  } catch (e: any) {
150
152
  step = "preview";
@@ -180,7 +182,7 @@
180
182
  onOpenChange={(open) => { if (!open) hideDrawer(); }}
181
183
  >
182
184
  <Dialog.Content
183
- class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
185
+ class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-7xl h-[80vh]' : 'max-w-lg'}"
184
186
  >
185
187
  <!-- Header -->
186
188
  <div class="flex h-12 shrink-0 items-center justify-between border-b px-4">
@@ -212,6 +214,12 @@
212
214
  </button>
213
215
  </div>
214
216
 
217
+ <ExtensionsComponents
218
+ name="collections.import.info"
219
+ utils={getExtensionUtils(lobb, ctx)}
220
+ {collectionName}
221
+ />
222
+
215
223
  <div class="p-4">
216
224
  {#if activeTab === "upload"}
217
225
  <div