@lobb-js/studio 0.23.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 (7) hide show
  1. package/dist/components/dataTable/fieldCell.svelte +64 -51
  2. package/dist/components/dataTable/table.svelte +1 -1
  3. package/dist/components/importButton.svelte +25 -17
  4. package/package.json +1 -1
  5. package/src/lib/components/dataTable/fieldCell.svelte +64 -51
  6. package/src/lib/components/dataTable/table.svelte +1 -1
  7. 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/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.23.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/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