@arbidocs/blocks 0.5.37 → 0.5.38
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.
- package/dist/{ConnectedCallDock-2NYM46HU.js → ConnectedCallDock-CT3D6LLI.js} +8 -8
- package/dist/{ConnectedCallDock-2NYM46HU.js.map → ConnectedCallDock-CT3D6LLI.js.map} +1 -1
- package/dist/{ConnectedCallDock-2LMIR4ID.cjs → ConnectedCallDock-V7DPSE6X.cjs} +17 -17
- package/dist/{ConnectedCallDock-2LMIR4ID.cjs.map → ConnectedCallDock-V7DPSE6X.cjs.map} +1 -1
- package/dist/{ConnectedCallRoom-QJ2UV6GV.js → ConnectedCallRoom-A27AM7IQ.js} +8 -8
- package/dist/{ConnectedCallRoom-QJ2UV6GV.js.map → ConnectedCallRoom-A27AM7IQ.js.map} +1 -1
- package/dist/{ConnectedCallRoom-26PBMTCC.cjs → ConnectedCallRoom-TNOCSTX2.cjs} +9 -9
- package/dist/{ConnectedCallRoom-26PBMTCC.cjs.map → ConnectedCallRoom-TNOCSTX2.cjs.map} +1 -1
- package/dist/{ConnectedNativeDocxComparison-5MN7PVRE.cjs → ConnectedNativeDocxComparison-H2OZMWHT.cjs} +13 -13
- package/dist/{ConnectedNativeDocxComparison-5MN7PVRE.cjs.map → ConnectedNativeDocxComparison-H2OZMWHT.cjs.map} +1 -1
- package/dist/{ConnectedNativeDocxComparison-GHOEFJUN.js → ConnectedNativeDocxComparison-RWKFPJPJ.js} +12 -12
- package/dist/{ConnectedNativeDocxComparison-GHOEFJUN.js.map → ConnectedNativeDocxComparison-RWKFPJPJ.js.map} +1 -1
- package/dist/{ConnectedNativeDocxEditor-HWPSWU2A.js → ConnectedNativeDocxEditor-43BI5LN6.js} +11 -11
- package/dist/{ConnectedNativeDocxEditor-HWPSWU2A.js.map → ConnectedNativeDocxEditor-43BI5LN6.js.map} +1 -1
- package/dist/{ConnectedNativeDocxEditor-VA7476NF.cjs → ConnectedNativeDocxEditor-6DQEM6SD.cjs} +13 -13
- package/dist/{ConnectedNativeDocxEditor-VA7476NF.cjs.map → ConnectedNativeDocxEditor-6DQEM6SD.cjs.map} +1 -1
- package/dist/{ConnectedStreamedWordArtifact-UMSTUZBY.cjs → ConnectedStreamedWordArtifact-3VKYIG6C.cjs} +13 -13
- package/dist/ConnectedStreamedWordArtifact-3VKYIG6C.cjs.map +1 -0
- package/dist/{ConnectedStreamedWordArtifact-KZUZB47X.js → ConnectedStreamedWordArtifact-TEB332E3.js} +12 -12
- package/dist/ConnectedStreamedWordArtifact-TEB332E3.js.map +1 -0
- package/dist/{WorkspaceTableView-DYXHUIRA.cjs → WorkspaceTableView-KG546U7M.cjs} +9 -9
- package/dist/{WorkspaceTableView-DYXHUIRA.cjs.map → WorkspaceTableView-KG546U7M.cjs.map} +1 -1
- package/dist/{WorkspaceTableView-HXSBJY42.js → WorkspaceTableView-OSFIWJ5C.js} +7 -7
- package/dist/{WorkspaceTableView-HXSBJY42.js.map → WorkspaceTableView-OSFIWJ5C.js.map} +1 -1
- package/dist/agents/index.cjs +401 -401
- package/dist/agents/index.js +10 -10
- package/dist/calls/index.cjs +131 -131
- package/dist/calls/index.js +9 -9
- package/dist/chat/index.cjs +81 -81
- package/dist/chat/index.js +3 -3
- package/dist/{chunk-3ON5DJLR.js → chunk-24H5WTGM.js} +4 -4
- package/dist/{chunk-3ON5DJLR.js.map → chunk-24H5WTGM.js.map} +1 -1
- package/dist/{chunk-EHRT5M5F.js → chunk-2C3I27VI.js} +3 -3
- package/dist/{chunk-EHRT5M5F.js.map → chunk-2C3I27VI.js.map} +1 -1
- package/dist/{chunk-UKG4DDLI.cjs → chunk-2QDNQM63.cjs} +10 -10
- package/dist/{chunk-UKG4DDLI.cjs.map → chunk-2QDNQM63.cjs.map} +1 -1
- package/dist/{chunk-EZJOJFY2.cjs → chunk-3ZLNI7ZA.cjs} +3 -3
- package/dist/{chunk-EZJOJFY2.cjs.map → chunk-3ZLNI7ZA.cjs.map} +1 -1
- package/dist/{chunk-JYASRZUQ.js → chunk-4DKI37QQ.js} +7 -7
- package/dist/{chunk-JYASRZUQ.js.map → chunk-4DKI37QQ.js.map} +1 -1
- package/dist/{chunk-OXIGJYMO.cjs → chunk-5NTSJV5H.cjs} +3 -3
- package/dist/{chunk-OXIGJYMO.cjs.map → chunk-5NTSJV5H.cjs.map} +1 -1
- package/dist/{chunk-7P2IL7RX.cjs → chunk-6EQSP77K.cjs} +5 -5
- package/dist/{chunk-7P2IL7RX.cjs.map → chunk-6EQSP77K.cjs.map} +1 -1
- package/dist/{chunk-T7O73MX2.js → chunk-7CHI36EP.js} +5 -5
- package/dist/{chunk-T7O73MX2.js.map → chunk-7CHI36EP.js.map} +1 -1
- package/dist/{chunk-CXY2ELL5.js → chunk-AL7EXOX5.js} +3 -3
- package/dist/{chunk-CXY2ELL5.js.map → chunk-AL7EXOX5.js.map} +1 -1
- package/dist/{chunk-YRWMYVHU.cjs → chunk-BIWPXSGS.cjs} +20 -20
- package/dist/{chunk-YRWMYVHU.cjs.map → chunk-BIWPXSGS.cjs.map} +1 -1
- package/dist/{chunk-ZZ76AUGX.cjs → chunk-BRYRZOS3.cjs} +4 -4
- package/dist/{chunk-ZZ76AUGX.cjs.map → chunk-BRYRZOS3.cjs.map} +1 -1
- package/dist/{chunk-ABKRLMWN.cjs → chunk-EFSL4O3B.cjs} +5 -5
- package/dist/{chunk-ABKRLMWN.cjs.map → chunk-EFSL4O3B.cjs.map} +1 -1
- package/dist/{chunk-32ZIHUXE.cjs → chunk-EGSSLWNZ.cjs} +3 -3
- package/dist/{chunk-32ZIHUXE.cjs.map → chunk-EGSSLWNZ.cjs.map} +1 -1
- package/dist/{chunk-ZXU2TKUV.js → chunk-EZSYYENN.js} +6 -6
- package/dist/{chunk-ZXU2TKUV.js.map → chunk-EZSYYENN.js.map} +1 -1
- package/dist/{chunk-LPGFODB4.cjs → chunk-FEVJA4BP.cjs} +3 -3
- package/dist/{chunk-LPGFODB4.cjs.map → chunk-FEVJA4BP.cjs.map} +1 -1
- package/dist/{chunk-IC2BXIUT.js → chunk-FHB4G77H.js} +3 -3
- package/dist/{chunk-IC2BXIUT.js.map → chunk-FHB4G77H.js.map} +1 -1
- package/dist/{chunk-UCCYCT3R.cjs → chunk-FY4C7HU5.cjs} +16 -16
- package/dist/{chunk-UCCYCT3R.cjs.map → chunk-FY4C7HU5.cjs.map} +1 -1
- package/dist/{chunk-RVCQE66I.cjs → chunk-H5BFOVVL.cjs} +5 -5
- package/dist/{chunk-RVCQE66I.cjs.map → chunk-H5BFOVVL.cjs.map} +1 -1
- package/dist/{chunk-WDMWWBPB.cjs → chunk-H6K7EWL2.cjs} +7 -7
- package/dist/{chunk-WDMWWBPB.cjs.map → chunk-H6K7EWL2.cjs.map} +1 -1
- package/dist/{chunk-NNUNS47F.js → chunk-ICCBNHPU.js} +3 -3
- package/dist/{chunk-NNUNS47F.js.map → chunk-ICCBNHPU.js.map} +1 -1
- package/dist/{chunk-U7IEC2EM.cjs → chunk-JKMV4QNV.cjs} +74 -74
- package/dist/{chunk-U7IEC2EM.cjs.map → chunk-JKMV4QNV.cjs.map} +1 -1
- package/dist/{chunk-GMECFWVT.js → chunk-K6W2GWCN.js} +3 -3
- package/dist/{chunk-GMECFWVT.js.map → chunk-K6W2GWCN.js.map} +1 -1
- package/dist/{chunk-7W7TPWSZ.cjs → chunk-LNYEYR7W.cjs} +3 -3
- package/dist/{chunk-7W7TPWSZ.cjs.map → chunk-LNYEYR7W.cjs.map} +1 -1
- package/dist/{chunk-VWX5UECZ.js → chunk-MLHOG7YH.js} +3 -3
- package/dist/{chunk-VWX5UECZ.js.map → chunk-MLHOG7YH.js.map} +1 -1
- package/dist/{chunk-L7IBURSP.js → chunk-N3HVTMQK.js} +3 -3
- package/dist/{chunk-L7IBURSP.js.map → chunk-N3HVTMQK.js.map} +1 -1
- package/dist/{chunk-OJTXFIXU.cjs → chunk-NOKTUWTN.cjs} +4 -4
- package/dist/{chunk-OJTXFIXU.cjs.map → chunk-NOKTUWTN.cjs.map} +1 -1
- package/dist/{chunk-2VEBUYEJ.js → chunk-NUV5F6MM.js} +3 -3
- package/dist/{chunk-2VEBUYEJ.js.map → chunk-NUV5F6MM.js.map} +1 -1
- package/dist/{chunk-MJYGHJ4Y.js → chunk-P6MVDOCL.js} +3 -3
- package/dist/{chunk-MJYGHJ4Y.js.map → chunk-P6MVDOCL.js.map} +1 -1
- package/dist/{chunk-GI5ITZ53.js → chunk-PRY52BW5.js} +4 -4
- package/dist/{chunk-GI5ITZ53.js.map → chunk-PRY52BW5.js.map} +1 -1
- package/dist/chunk-PTYERKEU.js +2132 -0
- package/dist/chunk-PTYERKEU.js.map +1 -0
- package/dist/{chunk-IYW6Q33D.cjs → chunk-PUX4M22Q.cjs} +50 -50
- package/dist/{chunk-IYW6Q33D.cjs.map → chunk-PUX4M22Q.cjs.map} +1 -1
- package/dist/{chunk-ORBXJ4IT.js → chunk-QFYRXQTD.js} +3 -3
- package/dist/{chunk-ORBXJ4IT.js.map → chunk-QFYRXQTD.js.map} +1 -1
- package/dist/{chunk-UHYO2E25.js → chunk-RH4XIABH.js} +3 -3
- package/dist/{chunk-UHYO2E25.js.map → chunk-RH4XIABH.js.map} +1 -1
- package/dist/{chunk-GMZ2XFQQ.js → chunk-S3YRRD54.js} +3 -3
- package/dist/{chunk-GMZ2XFQQ.js.map → chunk-S3YRRD54.js.map} +1 -1
- package/dist/chunk-TQSU3I4C.cjs +2180 -0
- package/dist/chunk-TQSU3I4C.cjs.map +1 -0
- package/dist/{chunk-LXF22VRI.js → chunk-VKY4SQMH.js} +4 -4
- package/dist/{chunk-LXF22VRI.js.map → chunk-VKY4SQMH.js.map} +1 -1
- package/dist/{chunk-H3JKC55K.cjs → chunk-VMLEISRZ.cjs} +9 -9
- package/dist/{chunk-H3JKC55K.cjs.map → chunk-VMLEISRZ.cjs.map} +1 -1
- package/dist/{chunk-VP5TGUBY.js → chunk-VPWCARVO.js} +5 -5
- package/dist/{chunk-VP5TGUBY.js.map → chunk-VPWCARVO.js.map} +1 -1
- package/dist/{chunk-N2SUDWY2.cjs → chunk-WALADS2S.cjs} +3 -3
- package/dist/{chunk-N2SUDWY2.cjs.map → chunk-WALADS2S.cjs.map} +1 -1
- package/dist/{chunk-ME3R44JN.cjs → chunk-XFSEPGF7.cjs} +4 -4
- package/dist/{chunk-ME3R44JN.cjs.map → chunk-XFSEPGF7.cjs.map} +1 -1
- package/dist/{chunk-K7OF4KGP.cjs → chunk-YDY4GIC2.cjs} +5 -5
- package/dist/{chunk-K7OF4KGP.cjs.map → chunk-YDY4GIC2.cjs.map} +1 -1
- package/dist/{chunk-APPHGHMM.js → chunk-YPR4FSDJ.js} +3 -3
- package/dist/{chunk-APPHGHMM.js.map → chunk-YPR4FSDJ.js.map} +1 -1
- package/dist/collaboration/index.cjs +1 -1
- package/dist/collaboration/index.js +1 -1
- package/dist/connect/docx.cjs +15 -15
- package/dist/connect/docx.js +11 -11
- package/dist/connect/index.cjs +1433 -928
- package/dist/connect/index.cjs.map +1 -1
- package/dist/connect/index.d.ts +1 -0
- package/dist/connect/index.js +563 -59
- package/dist/connect/index.js.map +1 -1
- package/dist/connect/viewer.cjs +63 -63
- package/dist/connect/viewer.js +16 -16
- package/dist/connection/databases/ConnectedDatabasesPage.d.ts +1 -0
- package/dist/connection/databases/DatabaseViewsMenu.d.ts +10 -0
- package/dist/connection/databases/index.d.ts +1 -0
- package/dist/connection/databases/useDatabaseCellSources.d.ts +6 -0
- package/dist/databases/index.cjs +193 -2173
- package/dist/databases/index.cjs.map +1 -1
- package/dist/databases/index.js +4 -2129
- package/dist/databases/index.js.map +1 -1
- package/dist/facts/index.cjs +2 -2
- package/dist/facts/index.js +2 -2
- package/dist/files/index.cjs +223 -223
- package/dist/files/index.js +3 -3
- package/dist/home/index.cjs +29 -29
- package/dist/home/index.js +4 -4
- package/dist/index.cjs +1656 -1656
- package/dist/index.js +22 -22
- package/dist/settings/index.cjs +156 -156
- package/dist/settings/index.js +3 -3
- package/dist/shell/index.cjs +72 -72
- package/dist/shell/index.js +4 -4
- package/dist/studio/index.cjs +8 -8
- package/dist/studio/index.js +7 -7
- package/dist/workflow-canvas/index.cjs +23 -23
- package/dist/workflow-canvas/index.js +10 -10
- package/node_modules/@arbidocs/coedit/package.json +1 -1
- package/package.json +5 -5
- package/dist/ConnectedStreamedWordArtifact-KZUZB47X.js.map +0 -1
- package/dist/ConnectedStreamedWordArtifact-UMSTUZBY.cjs.map +0 -1
package/dist/databases/index.cjs
CHANGED
|
@@ -1,2182 +1,202 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
|
|
4
|
+
var chunkTQSU3I4C_cjs = require('../chunk-TQSU3I4C.cjs');
|
|
5
|
+
require('../chunk-D54JXTPG.cjs');
|
|
6
|
+
require('../chunk-LKK52DEY.cjs');
|
|
6
7
|
require('../chunk-FX3K6LNZ.cjs');
|
|
7
|
-
|
|
8
|
+
require('../chunk-MHVNT4J3.cjs');
|
|
8
9
|
require('../chunk-DES3K4SD.cjs');
|
|
9
|
-
var lucideReact = require('lucide-react');
|
|
10
|
-
var ui = require('@arbidocs/react/ui');
|
|
11
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
-
var react = require('react');
|
|
13
10
|
|
|
14
|
-
// src/databases/column-types.ts
|
|
15
|
-
var DATABASE_COLUMN_TYPES = [
|
|
16
|
-
"text",
|
|
17
|
-
"number",
|
|
18
|
-
"date",
|
|
19
|
-
"checkbox",
|
|
20
|
-
"select",
|
|
21
|
-
"person",
|
|
22
|
-
"document",
|
|
23
|
-
"relation",
|
|
24
|
-
"lookup",
|
|
25
|
-
"rollup"
|
|
26
|
-
];
|
|
27
|
-
var COMPUTED_COLUMN_TYPES = /* @__PURE__ */ new Set([
|
|
28
|
-
"lookup",
|
|
29
|
-
"rollup"
|
|
30
|
-
]);
|
|
31
|
-
var LINK_COLUMN_TYPES = /* @__PURE__ */ new Set([
|
|
32
|
-
"document",
|
|
33
|
-
"relation"
|
|
34
|
-
]);
|
|
35
|
-
var isComputedColumn = (column) => COMPUTED_COLUMN_TYPES.has(column.type);
|
|
36
|
-
var DATABASE_ROLLUP_OPS = ["count", "sum", "avg", "min", "max"];
|
|
37
|
-
var DEFAULT_DATABASE_COLUMN_TYPE_LABELS = {
|
|
38
|
-
text: "Text",
|
|
39
|
-
number: "Number",
|
|
40
|
-
date: "Date",
|
|
41
|
-
checkbox: "Checkbox",
|
|
42
|
-
select: "Select",
|
|
43
|
-
person: "Person",
|
|
44
|
-
document: "Documents",
|
|
45
|
-
relation: "Relation",
|
|
46
|
-
lookup: "Lookup",
|
|
47
|
-
rollup: "Rollup"
|
|
48
|
-
};
|
|
49
|
-
var OPTION_TONES = [
|
|
50
|
-
"bg-blue-bg text-blue-text",
|
|
51
|
-
"bg-green-bg text-green-text",
|
|
52
|
-
"bg-yellow-bg text-yellow-text",
|
|
53
|
-
"bg-purple-bg text-purple-text",
|
|
54
|
-
"bg-red-bg text-red-text",
|
|
55
|
-
"bg-gray-bg text-gray-text"
|
|
56
|
-
];
|
|
57
|
-
function optionTone(option) {
|
|
58
|
-
let hash = 0;
|
|
59
|
-
for (const ch of option.toLowerCase()) hash = hash * 31 + ch.charCodeAt(0) >>> 0;
|
|
60
|
-
return OPTION_TONES[hash % OPTION_TONES.length];
|
|
61
|
-
}
|
|
62
|
-
var isEmpty = (value) => value === null || value === void 0 || typeof value === "string" && value.trim() === "" || Array.isArray(value) && value.length === 0;
|
|
63
|
-
function cellList(value) {
|
|
64
|
-
if (isEmpty(value)) return [];
|
|
65
|
-
return Array.isArray(value) ? value.filter((v) => !isEmpty(v)) : [value];
|
|
66
|
-
}
|
|
67
|
-
function cellIds(value) {
|
|
68
|
-
return cellList(value).filter((v) => typeof v === "string");
|
|
69
|
-
}
|
|
70
|
-
function titleOf(id, titles) {
|
|
71
|
-
return titles?.[id] ?? id;
|
|
72
|
-
}
|
|
73
|
-
function sameCellValue(a, b) {
|
|
74
|
-
if (Array.isArray(a) || Array.isArray(b)) {
|
|
75
|
-
const la = cellList(a);
|
|
76
|
-
const lb = cellList(b);
|
|
77
|
-
return la.length === lb.length && la.every((v, i) => v === lb[i]);
|
|
78
|
-
}
|
|
79
|
-
return (a ?? null) === (b ?? null);
|
|
80
|
-
}
|
|
81
|
-
function formatDateValue(value, locale) {
|
|
82
|
-
const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
|
|
83
|
-
if (day) {
|
|
84
|
-
const [, y, m, d] = day;
|
|
85
|
-
return new Date(Date.UTC(+y, +m - 1, +d)).toLocaleDateString(locale, { timeZone: "UTC" });
|
|
86
|
-
}
|
|
87
|
-
const at = new Date(value);
|
|
88
|
-
return Number.isNaN(at.getTime()) ? value : at.toLocaleString(locale);
|
|
89
|
-
}
|
|
90
|
-
function formatNumberValue(value, locale) {
|
|
91
|
-
return value.toLocaleString(locale, { maximumFractionDigits: 6 });
|
|
92
|
-
}
|
|
93
|
-
var ISO_DATE = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/;
|
|
94
|
-
function formatLookupValue(value, titles, locale) {
|
|
95
|
-
if (isEmpty(value)) return "";
|
|
96
|
-
if (typeof value === "number") return formatNumberValue(value, locale);
|
|
97
|
-
if (typeof value === "boolean") return value ? "Yes" : "No";
|
|
98
|
-
if (typeof value === "string") {
|
|
99
|
-
if (titles?.[value] !== void 0) return titles[value];
|
|
100
|
-
if (ISO_DATE.test(value)) return formatDateValue(value, locale);
|
|
101
|
-
}
|
|
102
|
-
return String(value);
|
|
103
|
-
}
|
|
104
|
-
var NAMED_TYPES = /* @__PURE__ */ new Set([
|
|
105
|
-
"person",
|
|
106
|
-
"document",
|
|
107
|
-
"relation"
|
|
108
|
-
]);
|
|
109
|
-
function formatCell(value, type, locale, titles) {
|
|
110
|
-
if (isEmpty(value)) return "";
|
|
111
|
-
if ((type === "number" || type === "rollup") && typeof value === "number")
|
|
112
|
-
return formatNumberValue(value, locale);
|
|
113
|
-
if (type === "date" && typeof value === "string") return formatDateValue(value, locale);
|
|
114
|
-
if (type === "checkbox") return value ? "Yes" : "No";
|
|
115
|
-
if (NAMED_TYPES.has(type))
|
|
116
|
-
return cellIds(value).map((id) => titleOf(id, titles)).join(", ");
|
|
117
|
-
if (type === "lookup")
|
|
118
|
-
return cellList(value).map((v) => formatLookupValue(v, titles, locale)).join(", ");
|
|
119
|
-
return String(value);
|
|
120
|
-
}
|
|
121
|
-
function toApiValue(value, type) {
|
|
122
|
-
if (isEmpty(value)) return null;
|
|
123
|
-
if (LINK_COLUMN_TYPES.has(type)) return cellIds(value);
|
|
124
|
-
if (type === "checkbox") return Boolean(value);
|
|
125
|
-
if (type === "date" && value instanceof Date) {
|
|
126
|
-
const pad = (n) => String(n).padStart(2, "0");
|
|
127
|
-
return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
|
|
128
|
-
}
|
|
129
|
-
if (type === "number" && typeof value === "string") {
|
|
130
|
-
const n = Number(value.replace(/,/g, ""));
|
|
131
|
-
return Number.isFinite(n) ? n : value;
|
|
132
|
-
}
|
|
133
|
-
return value;
|
|
134
|
-
}
|
|
135
|
-
function compareCells(a, b, type, titlesA, titlesB) {
|
|
136
|
-
const ea = isEmpty(a);
|
|
137
|
-
const eb = isEmpty(b);
|
|
138
|
-
if (ea || eb) return ea === eb ? 0 : ea ? 1 : -1;
|
|
139
|
-
if (type === "number" || type === "checkbox" || type === "rollup") return Number(a) - Number(b);
|
|
140
|
-
const shown = NAMED_TYPES.has(type) || type === "lookup";
|
|
141
|
-
const ta = shown ? formatCell(a, type, void 0, titlesA) : String(a);
|
|
142
|
-
const tb = shown ? formatCell(b, type, void 0, titlesB) : String(b);
|
|
143
|
-
return ta.localeCompare(tb, void 0, { sensitivity: "base", numeric: true });
|
|
144
|
-
}
|
|
145
|
-
function rowTitle(row, columns, locale) {
|
|
146
|
-
const first = columns[0];
|
|
147
|
-
return first ? formatCell(row.values[first.id], first.type, locale, row.titles) : "";
|
|
148
|
-
}
|
|
149
|
-
var CHIP = "inline-flex h-[22px] min-w-0 max-w-[14rem] shrink-0 items-center gap-1 rounded-md border border-border bg-muted/50 px-1.5 text-xs text-foreground";
|
|
150
|
-
function initials(name) {
|
|
151
|
-
const parts = name.trim().split(/\s+/).filter(Boolean);
|
|
152
|
-
const letters = parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : name.slice(0, 2);
|
|
153
|
-
return letters.toUpperCase();
|
|
154
|
-
}
|
|
155
|
-
function PersonChip({ name }) {
|
|
156
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-sm", children: [
|
|
157
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
158
|
-
"span",
|
|
159
|
-
{
|
|
160
|
-
"aria-hidden": true,
|
|
161
|
-
className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground",
|
|
162
|
-
children: initials(name)
|
|
163
|
-
}
|
|
164
|
-
),
|
|
165
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: name })
|
|
166
|
-
] });
|
|
167
|
-
}
|
|
168
|
-
function LinkChip({
|
|
169
|
-
label,
|
|
170
|
-
kind,
|
|
171
|
-
onOpen,
|
|
172
|
-
testId
|
|
173
|
-
}) {
|
|
174
|
-
const Icon = kind === "document" ? lucideReact.FileText : lucideReact.ArrowUpRight;
|
|
175
|
-
const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
176
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
|
|
177
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
|
|
178
|
-
] });
|
|
179
|
-
if (!onOpen) {
|
|
180
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: CHIP, title: label, "data-testid": testId, children: body });
|
|
181
|
-
}
|
|
182
|
-
const stop = (e) => e.stopPropagation();
|
|
183
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
184
|
-
"button",
|
|
185
|
-
{
|
|
186
|
-
type: "button",
|
|
187
|
-
title: label,
|
|
188
|
-
"data-testid": testId,
|
|
189
|
-
onClick: (e) => {
|
|
190
|
-
e.stopPropagation();
|
|
191
|
-
onOpen();
|
|
192
|
-
},
|
|
193
|
-
onDoubleClick: stop,
|
|
194
|
-
onMouseDown: stop,
|
|
195
|
-
className: ui.cn(CHIP, "hover:bg-muted hover:underline"),
|
|
196
|
-
children: body
|
|
197
|
-
}
|
|
198
|
-
);
|
|
199
|
-
}
|
|
200
|
-
function ChipRow({ children, wrap }) {
|
|
201
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
202
|
-
"span",
|
|
203
|
-
{
|
|
204
|
-
className: ui.cn(
|
|
205
|
-
"flex min-w-0 items-center gap-1",
|
|
206
|
-
wrap ? "flex-wrap py-0.5" : "h-full overflow-hidden"
|
|
207
|
-
),
|
|
208
|
-
children
|
|
209
|
-
}
|
|
210
|
-
);
|
|
211
|
-
}
|
|
212
|
-
function PersonCell({ value, titles }) {
|
|
213
|
-
const [id] = cellIds(value);
|
|
214
|
-
return id ? /* @__PURE__ */ jsxRuntime.jsx(PersonChip, { name: titleOf(id, titles) }) : null;
|
|
215
|
-
}
|
|
216
|
-
function LinkChipsCell({
|
|
217
|
-
value,
|
|
218
|
-
titles,
|
|
219
|
-
kind,
|
|
220
|
-
onOpenDocument,
|
|
221
|
-
wrap
|
|
222
|
-
}) {
|
|
223
|
-
const ids = cellIds(value);
|
|
224
|
-
if (ids.length === 0) return null;
|
|
225
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ChipRow, { wrap, children: ids.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
226
|
-
LinkChip,
|
|
227
|
-
{
|
|
228
|
-
label: titleOf(id, titles),
|
|
229
|
-
kind,
|
|
230
|
-
testId: `database-chip-${id}`,
|
|
231
|
-
onOpen: kind === "document" && onOpenDocument ? () => onOpenDocument(id) : void 0
|
|
232
|
-
},
|
|
233
|
-
id
|
|
234
|
-
)) });
|
|
235
|
-
}
|
|
236
|
-
function LookupCell({
|
|
237
|
-
value,
|
|
238
|
-
titles,
|
|
239
|
-
locale,
|
|
240
|
-
wrap
|
|
241
|
-
}) {
|
|
242
|
-
const values = cellList(value);
|
|
243
|
-
if (values.length === 0) return null;
|
|
244
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ChipRow, { wrap, children: values.map((v, i) => {
|
|
245
|
-
const text = formatLookupValue(v, titles, locale);
|
|
246
|
-
const key = `${i}-${text}`;
|
|
247
|
-
if (typeof v === "string" && /^doc-/.test(v))
|
|
248
|
-
return /* @__PURE__ */ jsxRuntime.jsx(LinkChip, { label: text, kind: "document" }, key);
|
|
249
|
-
if (typeof v === "string" && /^dbr-/.test(v))
|
|
250
|
-
return /* @__PURE__ */ jsxRuntime.jsx(LinkChip, { label: text, kind: "relation" }, key);
|
|
251
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
252
|
-
"span",
|
|
253
|
-
{
|
|
254
|
-
title: text,
|
|
255
|
-
className: "inline-flex h-[22px] min-w-0 max-w-[14rem] shrink-0 items-center truncate rounded-md bg-muted/60 px-1.5 text-xs text-foreground",
|
|
256
|
-
children: text
|
|
257
|
-
},
|
|
258
|
-
key
|
|
259
|
-
);
|
|
260
|
-
}) });
|
|
261
|
-
}
|
|
262
|
-
var MAX_SHOWN = 50;
|
|
263
|
-
var SEARCH_DEBOUNCE_MS = 200;
|
|
264
|
-
var DEFAULT_PICK_CELL_EDITOR_LABELS = {
|
|
265
|
-
searchPlaceholder: "Search\u2026",
|
|
266
|
-
noMatches: "No matches",
|
|
267
|
-
searching: "Searching\u2026",
|
|
268
|
-
clear: "Clear",
|
|
269
|
-
done: "Done",
|
|
270
|
-
remove: (label) => `Remove ${label}`
|
|
271
|
-
};
|
|
272
|
-
function useChoices(query, options, search) {
|
|
273
|
-
const [found, setFound] = react.useState([]);
|
|
274
|
-
const [loading, setLoading] = react.useState(Boolean(search));
|
|
275
|
-
react.useEffect(() => {
|
|
276
|
-
if (!search) return;
|
|
277
|
-
let live = true;
|
|
278
|
-
setLoading(true);
|
|
279
|
-
const t = setTimeout(
|
|
280
|
-
() => {
|
|
281
|
-
search(query.trim()).then((rows) => live && setFound(rows)).catch(() => live && setFound([])).finally(() => live && setLoading(false));
|
|
282
|
-
},
|
|
283
|
-
query ? SEARCH_DEBOUNCE_MS : 0
|
|
284
|
-
);
|
|
285
|
-
return () => {
|
|
286
|
-
live = false;
|
|
287
|
-
clearTimeout(t);
|
|
288
|
-
};
|
|
289
|
-
}, [query, search]);
|
|
290
|
-
const filtered = react.useMemo(() => {
|
|
291
|
-
if (search) return found.slice(0, MAX_SHOWN);
|
|
292
|
-
const q = query.trim().toLowerCase();
|
|
293
|
-
const all = options ?? [];
|
|
294
|
-
const hits = q ? all.filter(
|
|
295
|
-
(o) => o.label.toLowerCase().includes(q) || (o.description ?? "").toLowerCase().includes(q)
|
|
296
|
-
) : all;
|
|
297
|
-
return hits.slice(0, MAX_SHOWN);
|
|
298
|
-
}, [found, options, query, search]);
|
|
299
|
-
return { choices: filtered, loading: Boolean(search) && loading };
|
|
300
|
-
}
|
|
301
|
-
function PickCellEditor(props) {
|
|
302
|
-
const { value, onValueChange, stopEditing, data, kind, options, search } = props;
|
|
303
|
-
const l = { ...DEFAULT_PICK_CELL_EDITOR_LABELS, ...props.labels };
|
|
304
|
-
const multiple = kind !== "person";
|
|
305
|
-
const [chosen, setChosen] = react.useState(() => cellIds(value));
|
|
306
|
-
const [query, setQuery] = react.useState("");
|
|
307
|
-
const [active, setActive] = react.useState(0);
|
|
308
|
-
const input = react.useRef(null);
|
|
309
|
-
const { choices, loading } = useChoices(query, options, search);
|
|
310
|
-
const names = react.useRef({ ...data?.titles ?? {} });
|
|
311
|
-
for (const o of options ?? []) names.current[o.id] ??= o.label;
|
|
312
|
-
for (const o of choices) names.current[o.id] = o.label;
|
|
313
|
-
const nameOf = (id) => names.current[id] ?? id;
|
|
314
|
-
react.useEffect(() => input.current?.focus(), []);
|
|
315
|
-
react.useEffect(() => setActive(0), [query]);
|
|
316
|
-
const commit = (ids) => {
|
|
317
|
-
setChosen(ids);
|
|
318
|
-
if (data) {
|
|
319
|
-
const titles = { ...data.titles ?? {} };
|
|
320
|
-
for (const id of ids) titles[id] ??= nameOf(id);
|
|
321
|
-
data.titles = titles;
|
|
322
|
-
}
|
|
323
|
-
onValueChange(multiple ? ids : ids[0] ?? null);
|
|
324
|
-
};
|
|
325
|
-
const close = () => setTimeout(() => stopEditing(), 0);
|
|
326
|
-
const toggle = (id) => {
|
|
327
|
-
if (!multiple) {
|
|
328
|
-
commit([id]);
|
|
329
|
-
close();
|
|
330
|
-
return;
|
|
331
|
-
}
|
|
332
|
-
commit(chosen.includes(id) ? chosen.filter((x) => x !== id) : [...chosen, id]);
|
|
333
|
-
};
|
|
334
|
-
const onKeyDown = (e) => {
|
|
335
|
-
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
336
|
-
e.preventDefault();
|
|
337
|
-
e.stopPropagation();
|
|
338
|
-
if (choices.length === 0) return;
|
|
339
|
-
const step = e.key === "ArrowDown" ? 1 : -1;
|
|
340
|
-
setActive((i) => (i + step + choices.length) % choices.length);
|
|
341
|
-
} else if (e.key === "Enter") {
|
|
342
|
-
e.preventDefault();
|
|
343
|
-
e.stopPropagation();
|
|
344
|
-
const pick = choices[active];
|
|
345
|
-
if (pick) toggle(pick.id);
|
|
346
|
-
else if (multiple) close();
|
|
347
|
-
} else if (e.key === "Backspace" && multiple && !query && chosen.length > 0) {
|
|
348
|
-
commit(chosen.slice(0, -1));
|
|
349
|
-
} else if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") {
|
|
350
|
-
e.stopPropagation();
|
|
351
|
-
}
|
|
352
|
-
};
|
|
353
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
354
|
-
"div",
|
|
355
|
-
{
|
|
356
|
-
"data-testid": "database-pick-editor",
|
|
357
|
-
className: "flex w-72 flex-col rounded-md border border-border bg-popover shadow-md",
|
|
358
|
-
children: [
|
|
359
|
-
multiple && chosen.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 border-b border-border p-1.5", children: chosen.map((id) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center", children: [
|
|
360
|
-
/* @__PURE__ */ jsxRuntime.jsx(LinkChip, { label: nameOf(id), kind: kind === "document" ? "document" : "relation" }),
|
|
361
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
362
|
-
"button",
|
|
363
|
-
{
|
|
364
|
-
type: "button",
|
|
365
|
-
"aria-label": l.remove(nameOf(id)),
|
|
366
|
-
onClick: () => commit(chosen.filter((x) => x !== id)),
|
|
367
|
-
"data-testid": `database-pick-remove-${id}`,
|
|
368
|
-
className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
369
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
|
|
370
|
-
}
|
|
371
|
-
)
|
|
372
|
-
] }, id)) }),
|
|
373
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 border-b border-border px-2", children: [
|
|
374
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
|
|
375
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
376
|
-
"input",
|
|
377
|
-
{
|
|
378
|
-
ref: input,
|
|
379
|
-
value: query,
|
|
380
|
-
placeholder: l.searchPlaceholder,
|
|
381
|
-
onChange: (e) => setQuery(e.target.value),
|
|
382
|
-
onKeyDown,
|
|
383
|
-
"data-testid": "database-pick-search",
|
|
384
|
-
className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
|
|
385
|
-
}
|
|
386
|
-
),
|
|
387
|
-
loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-3.5 animate-spin text-muted-foreground" })
|
|
388
|
-
] }),
|
|
389
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": multiple, className: "max-h-64 overflow-y-auto p-1", children: [
|
|
390
|
-
choices.map((o, i) => {
|
|
391
|
-
const isChosen = chosen.includes(o.id);
|
|
392
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
393
|
-
"button",
|
|
394
|
-
{
|
|
395
|
-
type: "button",
|
|
396
|
-
role: "option",
|
|
397
|
-
"aria-selected": isChosen,
|
|
398
|
-
onMouseEnter: () => setActive(i),
|
|
399
|
-
onClick: () => toggle(o.id),
|
|
400
|
-
"data-testid": `database-pick-option-${o.id}`,
|
|
401
|
-
className: ui.cn(
|
|
402
|
-
"flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm",
|
|
403
|
-
i === active && "bg-muted"
|
|
404
|
-
),
|
|
405
|
-
children: [
|
|
406
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
|
|
407
|
-
kind === "person" ? /* @__PURE__ */ jsxRuntime.jsx(PersonChip, { name: o.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: o.label }),
|
|
408
|
-
o.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: o.description })
|
|
409
|
-
] }),
|
|
410
|
-
isChosen && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5 shrink-0" })
|
|
411
|
-
]
|
|
412
|
-
},
|
|
413
|
-
o.id
|
|
414
|
-
);
|
|
415
|
-
}),
|
|
416
|
-
choices.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loading ? l.searching : l.noMatches })
|
|
417
|
-
] }),
|
|
418
|
-
(multiple || chosen.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end border-t border-border p-1", children: !multiple ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
419
|
-
"button",
|
|
420
|
-
{
|
|
421
|
-
type: "button",
|
|
422
|
-
onClick: () => {
|
|
423
|
-
commit([]);
|
|
424
|
-
close();
|
|
425
|
-
},
|
|
426
|
-
"data-testid": "database-pick-clear",
|
|
427
|
-
className: "rounded px-2 py-1 text-sm text-muted-foreground hover:bg-muted",
|
|
428
|
-
children: l.clear
|
|
429
|
-
}
|
|
430
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
431
|
-
"button",
|
|
432
|
-
{
|
|
433
|
-
type: "button",
|
|
434
|
-
onClick: close,
|
|
435
|
-
"data-testid": "database-pick-done",
|
|
436
|
-
className: "rounded px-2 py-1 text-sm font-medium hover:bg-muted",
|
|
437
|
-
children: l.done
|
|
438
|
-
}
|
|
439
|
-
) })
|
|
440
|
-
]
|
|
441
|
-
}
|
|
442
|
-
);
|
|
443
|
-
}
|
|
444
|
-
function SelectChip({ value }) {
|
|
445
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
446
|
-
"span",
|
|
447
|
-
{
|
|
448
|
-
className: ui.cn(
|
|
449
|
-
"inline-flex max-w-full items-center truncate rounded-md px-2 py-0.5 text-xs font-medium",
|
|
450
|
-
optionTone(value)
|
|
451
|
-
),
|
|
452
|
-
children: value
|
|
453
|
-
}
|
|
454
|
-
);
|
|
455
|
-
}
|
|
456
|
-
function SelectCellEditor(props) {
|
|
457
|
-
const { value, onValueChange, stopEditing, options, clearLabel = "Clear" } = props;
|
|
458
|
-
const items = [...options, null];
|
|
459
|
-
const [active, setActive] = react.useState(() => Math.max(0, options.indexOf(String(value ?? ""))));
|
|
460
|
-
const list = react.useRef(null);
|
|
461
|
-
react.useEffect(() => list.current?.focus(), []);
|
|
462
|
-
const pick = (option) => {
|
|
463
|
-
onValueChange(option);
|
|
464
|
-
setTimeout(() => stopEditing(), 0);
|
|
465
|
-
};
|
|
466
|
-
const onKeyDown = (e) => {
|
|
467
|
-
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
468
|
-
e.preventDefault();
|
|
469
|
-
e.stopPropagation();
|
|
470
|
-
const step = e.key === "ArrowDown" ? 1 : -1;
|
|
471
|
-
setActive((i) => (i + step + items.length) % items.length);
|
|
472
|
-
} else if (e.key === "Enter") {
|
|
473
|
-
e.preventDefault();
|
|
474
|
-
e.stopPropagation();
|
|
475
|
-
pick(items[active]);
|
|
476
|
-
}
|
|
477
|
-
};
|
|
478
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
479
|
-
"div",
|
|
480
|
-
{
|
|
481
|
-
ref: list,
|
|
482
|
-
role: "listbox",
|
|
483
|
-
tabIndex: -1,
|
|
484
|
-
onKeyDown,
|
|
485
|
-
"data-testid": "database-select-editor",
|
|
486
|
-
className: "flex min-w-44 flex-col gap-0.5 rounded-md border border-border bg-popover p-1 shadow-md outline-none",
|
|
487
|
-
children: items.map((option, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
488
|
-
"button",
|
|
489
|
-
{
|
|
490
|
-
type: "button",
|
|
491
|
-
role: "option",
|
|
492
|
-
"aria-selected": option === value,
|
|
493
|
-
onMouseEnter: () => setActive(i),
|
|
494
|
-
onClick: () => pick(option),
|
|
495
|
-
"data-testid": option === null ? "database-select-clear" : `database-select-option-${option}`,
|
|
496
|
-
className: ui.cn(
|
|
497
|
-
"flex items-center gap-2 rounded px-2 py-1 text-left text-sm",
|
|
498
|
-
i === active && "bg-muted"
|
|
499
|
-
),
|
|
500
|
-
children: [
|
|
501
|
-
option === null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: clearLabel }) : /* @__PURE__ */ jsxRuntime.jsx(SelectChip, { value: option }),
|
|
502
|
-
option !== null && option === value && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "ml-auto size-3.5" })
|
|
503
|
-
]
|
|
504
|
-
},
|
|
505
|
-
option ?? "__clear"
|
|
506
|
-
))
|
|
507
|
-
}
|
|
508
|
-
);
|
|
509
|
-
}
|
|
510
|
-
var DEFAULT_DATABASE_COLUMN_LABELS = {
|
|
511
|
-
addColumn: "Add a column",
|
|
512
|
-
columnSettings: (name) => `${name} column settings`,
|
|
513
|
-
computed: "Computed from a relation (read-only)",
|
|
514
|
-
openRow: "Open row"
|
|
515
|
-
};
|
|
516
|
-
var ADD_COLUMN_COL_ID = "__add_column";
|
|
517
|
-
var OPEN_ROW_COL_ID = "__open_row";
|
|
518
|
-
var COLUMN_TYPE_ICONS = {
|
|
519
|
-
text: lucideReact.Type,
|
|
520
|
-
number: lucideReact.Hash,
|
|
521
|
-
date: lucideReact.CalendarDays,
|
|
522
|
-
checkbox: lucideReact.CheckSquare,
|
|
523
|
-
select: lucideReact.ChevronDown,
|
|
524
|
-
person: lucideReact.UserRound,
|
|
525
|
-
document: lucideReact.FileText,
|
|
526
|
-
relation: lucideReact.ArrowUpRight,
|
|
527
|
-
lookup: lucideReact.Search,
|
|
528
|
-
rollup: lucideReact.Sigma
|
|
529
|
-
};
|
|
530
|
-
var WIDTHS = {
|
|
531
|
-
text: 220,
|
|
532
|
-
number: 130,
|
|
533
|
-
date: 140,
|
|
534
|
-
checkbox: 110,
|
|
535
|
-
select: 160,
|
|
536
|
-
person: 180,
|
|
537
|
-
document: 240,
|
|
538
|
-
relation: 240,
|
|
539
|
-
lookup: 200,
|
|
540
|
-
rollup: 130
|
|
541
|
-
};
|
|
542
|
-
function HeaderLabel({
|
|
543
|
-
column,
|
|
544
|
-
onEdit,
|
|
545
|
-
label,
|
|
546
|
-
computedLabel
|
|
547
|
-
}) {
|
|
548
|
-
const Icon = COLUMN_TYPE_ICONS[column.type];
|
|
549
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group/dbh flex min-w-0 items-center gap-1.5", children: [
|
|
550
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
|
|
551
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[12.5px] font-medium", children: column.name }),
|
|
552
|
-
isComputedColumn(column) && /* @__PURE__ */ jsxRuntime.jsx("span", { title: computedLabel, "data-testid": `database-column-computed-${column.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "size-3 shrink-0 text-muted-foreground/70", "aria-label": computedLabel }) }),
|
|
553
|
-
onEdit && /* @__PURE__ */ jsxRuntime.jsx(
|
|
554
|
-
"button",
|
|
555
|
-
{
|
|
556
|
-
type: "button",
|
|
557
|
-
"aria-label": label,
|
|
558
|
-
title: label,
|
|
559
|
-
"data-testid": `database-column-settings-${column.id}`,
|
|
560
|
-
onClick: (e) => {
|
|
561
|
-
e.stopPropagation();
|
|
562
|
-
onEdit();
|
|
563
|
-
},
|
|
564
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
565
|
-
className: "ml-auto rounded p-0.5 text-muted-foreground opacity-0 hover:bg-muted hover:text-foreground focus-visible:opacity-100 group-hover/dbh:opacity-100",
|
|
566
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-3.5" })
|
|
567
|
-
}
|
|
568
|
-
)
|
|
569
|
-
] });
|
|
570
|
-
}
|
|
571
|
-
function columnWidth(column) {
|
|
572
|
-
const header = Math.round(column.name.length * 8) + 76 + (isComputedColumn(column) ? 16 : 0);
|
|
573
|
-
return Math.min(320, Math.max(WIDTHS[column.type], header));
|
|
574
|
-
}
|
|
575
|
-
function canEditColumn(column, sources) {
|
|
576
|
-
if (isComputedColumn(column)) return false;
|
|
577
|
-
if (column.type === "person") return Boolean(sources?.members);
|
|
578
|
-
if (column.type === "document") return Boolean(sources?.documents);
|
|
579
|
-
if (column.type === "relation") return Boolean(sources?.searchRows && column.relation);
|
|
580
|
-
return true;
|
|
581
|
-
}
|
|
582
|
-
function editorFor(column, sources) {
|
|
583
|
-
const pick = (params) => ({
|
|
584
|
-
cellEditor: PickCellEditor,
|
|
585
|
-
cellEditorPopup: true,
|
|
586
|
-
cellEditorParams: params
|
|
587
|
-
});
|
|
588
|
-
switch (column.type) {
|
|
589
|
-
case "number":
|
|
590
|
-
return { cellEditor: "agNumberCellEditor", cellEditorParams: { showStepperButtons: false } };
|
|
591
|
-
case "date":
|
|
592
|
-
return { cellEditor: "agDateStringCellEditor" };
|
|
593
|
-
case "checkbox":
|
|
594
|
-
return { cellEditor: "agCheckboxCellEditor" };
|
|
595
|
-
case "select":
|
|
596
|
-
return {
|
|
597
|
-
cellEditor: SelectCellEditor,
|
|
598
|
-
cellEditorPopup: true,
|
|
599
|
-
cellEditorParams: { options: column.options ?? [] }
|
|
600
|
-
};
|
|
601
|
-
case "person":
|
|
602
|
-
return pick({ kind: "person", options: sources?.members ?? [] });
|
|
603
|
-
case "document":
|
|
604
|
-
return pick({ kind: "document", options: sources?.documents ?? [] });
|
|
605
|
-
case "relation": {
|
|
606
|
-
const target = column.relation?.database_id;
|
|
607
|
-
const searchRows = sources?.searchRows;
|
|
608
|
-
return pick({
|
|
609
|
-
kind: "relation",
|
|
610
|
-
search: target && searchRows ? (q) => searchRows(target, q) : void 0
|
|
611
|
-
});
|
|
612
|
-
}
|
|
613
|
-
case "lookup":
|
|
614
|
-
case "rollup":
|
|
615
|
-
return {};
|
|
616
|
-
default:
|
|
617
|
-
return { cellEditor: "agTextCellEditor" };
|
|
618
|
-
}
|
|
619
|
-
}
|
|
620
|
-
function rendererFor(column, locale, sources) {
|
|
621
|
-
switch (column.type) {
|
|
622
|
-
case "checkbox":
|
|
623
|
-
return {
|
|
624
|
-
cellRenderer: "agCheckboxCellRenderer",
|
|
625
|
-
cellClass: "flex items-center justify-center"
|
|
626
|
-
};
|
|
627
|
-
case "select":
|
|
628
|
-
return {
|
|
629
|
-
cellRenderer: (p) => typeof p.value === "string" && p.value ? /* @__PURE__ */ jsxRuntime.jsx(SelectChip, { value: p.value }) : null
|
|
630
|
-
};
|
|
631
|
-
case "number":
|
|
632
|
-
return {
|
|
633
|
-
cellClass: "cell-numeric",
|
|
634
|
-
valueFormatter: (p) => formatCell(p.value, "number", locale)
|
|
635
|
-
};
|
|
636
|
-
case "rollup":
|
|
637
|
-
return {
|
|
638
|
-
cellClass: "cell-numeric text-muted-foreground",
|
|
639
|
-
valueFormatter: (p) => formatCell(p.value, "rollup", locale)
|
|
640
|
-
};
|
|
641
|
-
case "date":
|
|
642
|
-
return {
|
|
643
|
-
valueFormatter: (p) => formatCell(p.value, "date", locale)
|
|
644
|
-
};
|
|
645
|
-
case "person":
|
|
646
|
-
return {
|
|
647
|
-
cellRenderer: (p) => /* @__PURE__ */ jsxRuntime.jsx(PersonCell, { value: p.value, titles: p.data?.titles })
|
|
648
|
-
};
|
|
649
|
-
case "document":
|
|
650
|
-
case "relation":
|
|
651
|
-
return {
|
|
652
|
-
cellRenderer: (p) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
653
|
-
LinkChipsCell,
|
|
654
|
-
{
|
|
655
|
-
value: p.value,
|
|
656
|
-
titles: p.data?.titles,
|
|
657
|
-
kind: column.type === "document" ? "document" : "relation",
|
|
658
|
-
onOpenDocument: sources?.onOpenDocument
|
|
659
|
-
}
|
|
660
|
-
)
|
|
661
|
-
};
|
|
662
|
-
case "lookup":
|
|
663
|
-
return {
|
|
664
|
-
cellRenderer: (p) => /* @__PURE__ */ jsxRuntime.jsx(LookupCell, { value: p.value, titles: p.data?.titles, locale })
|
|
665
|
-
};
|
|
666
|
-
default:
|
|
667
|
-
return {};
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
function createDatabaseColumns(columns, options = {}) {
|
|
671
|
-
const { readOnly, onEditColumn, onAddColumn, onOpenRow, locale, sources } = options;
|
|
672
|
-
const l = { ...DEFAULT_DATABASE_COLUMN_LABELS, ...options.labels };
|
|
673
|
-
const openRow = onOpenRow && columns.length > 0 ? [
|
|
674
|
-
{
|
|
675
|
-
colId: OPEN_ROW_COL_ID,
|
|
676
|
-
headerName: "",
|
|
677
|
-
width: 40,
|
|
678
|
-
minWidth: 40,
|
|
679
|
-
maxWidth: 40,
|
|
680
|
-
resizable: false,
|
|
681
|
-
sortable: false,
|
|
682
|
-
editable: false,
|
|
683
|
-
suppressMovable: true,
|
|
684
|
-
// Pinned: the button stays in view however far the table scrolls.
|
|
685
|
-
pinned: "left",
|
|
686
|
-
lockPinned: true,
|
|
687
|
-
lockPosition: "left",
|
|
688
|
-
cellClass: "flex items-center justify-center !px-0",
|
|
689
|
-
valueGetter: () => null,
|
|
690
|
-
cellRenderer: (p) => p.data ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
691
|
-
"button",
|
|
692
|
-
{
|
|
693
|
-
type: "button",
|
|
694
|
-
"aria-label": l.openRow,
|
|
695
|
-
title: l.openRow,
|
|
696
|
-
"data-testid": `database-open-row-${p.data.id}`,
|
|
697
|
-
onClick: (e) => {
|
|
698
|
-
e.stopPropagation();
|
|
699
|
-
if (p.data) onOpenRow(p.data);
|
|
700
|
-
},
|
|
701
|
-
onDoubleClick: (e) => e.stopPropagation(),
|
|
702
|
-
className: "flex size-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-muted hover:text-foreground",
|
|
703
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "size-3.5" })
|
|
704
|
-
}
|
|
705
|
-
) : null
|
|
706
|
-
}
|
|
707
|
-
] : [];
|
|
708
|
-
const defs = columns.map((column) => ({
|
|
709
|
-
colId: column.id,
|
|
710
|
-
headerName: column.name,
|
|
711
|
-
width: columnWidth(column),
|
|
712
|
-
minWidth: 90,
|
|
713
|
-
resizable: true,
|
|
714
|
-
sortable: true,
|
|
715
|
-
editable: !readOnly && canEditColumn(column, sources),
|
|
716
|
-
// The grid's own type inference must not second-guess the database's column type.
|
|
717
|
-
cellDataType: false,
|
|
718
|
-
headerComponentParams: {
|
|
719
|
-
innerHeaderComponent: () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
720
|
-
HeaderLabel,
|
|
721
|
-
{
|
|
722
|
-
column,
|
|
723
|
-
label: l.columnSettings(column.name),
|
|
724
|
-
computedLabel: l.computed,
|
|
725
|
-
onEdit: !readOnly && onEditColumn ? () => onEditColumn(column) : void 0
|
|
726
|
-
}
|
|
727
|
-
)
|
|
728
|
-
},
|
|
729
|
-
// An empty checkbox reads as unticked (not indeterminate).
|
|
730
|
-
valueGetter: (p) => column.type === "checkbox" ? p.data?.values[column.id] === true : p.data?.values[column.id] ?? null,
|
|
731
|
-
// Edits land in the row's values as the API would store them; the host saves them in
|
|
732
|
-
// onCellValueChanged and puts the server's normalised row back.
|
|
733
|
-
valueSetter: (p) => {
|
|
734
|
-
if (!p.data) return false;
|
|
735
|
-
const next = toApiValue(p.newValue, column.type);
|
|
736
|
-
if (sameCellValue(next, p.oldValue)) return false;
|
|
737
|
-
p.data.values = { ...p.data.values, [column.id]: next };
|
|
738
|
-
return true;
|
|
739
|
-
},
|
|
740
|
-
comparator: (a, b, nodeA, nodeB) => compareCells(a, b, column.type, nodeA?.data?.titles, nodeB?.data?.titles),
|
|
741
|
-
getQuickFilterText: (p) => formatCell(p.value, column.type, locale, p.data?.titles),
|
|
742
|
-
...editorFor(column, sources),
|
|
743
|
-
...rendererFor(column, locale, sources)
|
|
744
|
-
}));
|
|
745
|
-
defs.unshift(...openRow);
|
|
746
|
-
if (!readOnly && onAddColumn) {
|
|
747
|
-
defs.push({
|
|
748
|
-
colId: ADD_COLUMN_COL_ID,
|
|
749
|
-
width: 52,
|
|
750
|
-
minWidth: 52,
|
|
751
|
-
maxWidth: 52,
|
|
752
|
-
resizable: false,
|
|
753
|
-
sortable: false,
|
|
754
|
-
editable: false,
|
|
755
|
-
suppressMovable: true,
|
|
756
|
-
// Pinned: on a wide table the add button stays in view instead of scrolling off the right.
|
|
757
|
-
pinned: "right",
|
|
758
|
-
lockPinned: true,
|
|
759
|
-
headerComponent: () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
760
|
-
"button",
|
|
761
|
-
{
|
|
762
|
-
type: "button",
|
|
763
|
-
"aria-label": l.addColumn,
|
|
764
|
-
title: l.addColumn,
|
|
765
|
-
"data-testid": "database-add-column",
|
|
766
|
-
onClick: onAddColumn,
|
|
767
|
-
className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
768
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" })
|
|
769
|
-
}
|
|
770
|
-
),
|
|
771
|
-
valueGetter: () => null
|
|
772
|
-
});
|
|
773
|
-
}
|
|
774
|
-
return defs;
|
|
775
|
-
}
|
|
776
|
-
var DEFAULT_COLUMN_CONFIG_LABELS = {
|
|
777
|
-
relatedDatabase: "Related database",
|
|
778
|
-
pickDatabase: "Pick a database",
|
|
779
|
-
noDatabases: "There is no database to link to yet.",
|
|
780
|
-
targetFixed: "The related database can\u2019t be changed once the column has been added.",
|
|
781
|
-
thisDatabase: "this database",
|
|
782
|
-
showOnTarget: (target) => `Show on ${target}`,
|
|
783
|
-
showOnTargetHint: "Adds a column to the related database that lists the links back.",
|
|
784
|
-
pairName: "Name of the column there",
|
|
785
|
-
pairNamePlaceholder: (name) => name,
|
|
786
|
-
pairedWith: (target) => `Shown on ${target} too (two-way).`,
|
|
787
|
-
oneWay: "One-way: only this database shows the links.",
|
|
788
|
-
relation: "Relation",
|
|
789
|
-
pickRelation: "Pick a relation column",
|
|
790
|
-
noRelations: "Add a relation column first: lookups and rollups read through one.",
|
|
791
|
-
lookupColumn: "Column to show",
|
|
792
|
-
pickColumn: "Pick a column",
|
|
793
|
-
noColumns: "The related database has no column to show.",
|
|
794
|
-
rollupOp: "Calculate",
|
|
795
|
-
rollupColumn: "Of the number column",
|
|
796
|
-
noNumberColumns: "The related database has no number column.",
|
|
797
|
-
ops: { count: "Count", sum: "Sum", avg: "Average", min: "Min", max: "Max" }
|
|
798
|
-
};
|
|
799
|
-
function Field({ label, children, hint }) {
|
|
800
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
801
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: label }),
|
|
802
|
-
children,
|
|
803
|
-
hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: hint })
|
|
804
|
-
] });
|
|
805
|
-
}
|
|
806
|
-
function Hint({ children, testId }) {
|
|
807
|
-
return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", "data-testid": testId, children });
|
|
808
|
-
}
|
|
809
|
-
function ColumnSelect({
|
|
810
|
-
value,
|
|
811
|
-
onChange,
|
|
812
|
-
columns,
|
|
813
|
-
placeholder,
|
|
814
|
-
testId
|
|
815
|
-
}) {
|
|
816
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { value: value || void 0, onValueChange: onChange, children: [
|
|
817
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectTrigger, { "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx(ui.SelectValue, { placeholder }) }),
|
|
818
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectContent, { children: columns.map((c) => {
|
|
819
|
-
const Icon = COLUMN_TYPE_ICONS[c.type];
|
|
820
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: c.id, "data-testid": `${testId}-${c.id}`, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
|
|
821
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 text-muted-foreground" }),
|
|
822
|
-
c.name
|
|
823
|
-
] }) }, c.id);
|
|
824
|
-
}) })
|
|
825
|
-
] });
|
|
826
|
-
}
|
|
827
|
-
function RelationFields({
|
|
828
|
-
draft,
|
|
829
|
-
onChange,
|
|
830
|
-
databases,
|
|
831
|
-
databaseId,
|
|
832
|
-
databaseName,
|
|
833
|
-
editing,
|
|
834
|
-
column,
|
|
835
|
-
labels
|
|
836
|
-
}) {
|
|
837
|
-
const nameOf = (id) => databases.find((d) => d.id === id)?.name ?? (id === databaseId ? labels.thisDatabase : id);
|
|
838
|
-
if (editing && column?.relation) {
|
|
839
|
-
const target2 = nameOf(column.relation.database_id);
|
|
840
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label: labels.relatedDatabase, hint: labels.targetFixed, children: [
|
|
841
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", "data-testid": "database-column-relation-target", children: target2 }),
|
|
842
|
-
/* @__PURE__ */ jsxRuntime.jsx(Hint, { children: column.relation.two_way ? labels.pairedWith(target2) : labels.oneWay })
|
|
843
|
-
] });
|
|
844
|
-
}
|
|
845
|
-
if (databases.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(Hint, { children: labels.noDatabases });
|
|
846
|
-
const target = draft.database_id ? nameOf(draft.database_id) : "";
|
|
847
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
848
|
-
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: labels.relatedDatabase, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
849
|
-
ui.Select,
|
|
850
|
-
{
|
|
851
|
-
value: draft.database_id || void 0,
|
|
852
|
-
onValueChange: (v) => onChange({ ...draft, database_id: v }),
|
|
853
|
-
children: [
|
|
854
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectTrigger, { "data-testid": "database-column-relation-database", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SelectValue, { placeholder: labels.pickDatabase }) }),
|
|
855
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectContent, { children: databases.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
856
|
-
ui.SelectItem,
|
|
857
|
-
{
|
|
858
|
-
value: d.id,
|
|
859
|
-
"data-testid": `database-column-relation-database-${d.id}`,
|
|
860
|
-
children: d.id === databaseId ? `${d.name} (${labels.thisDatabase})` : d.name
|
|
861
|
-
},
|
|
862
|
-
d.id
|
|
863
|
-
)) })
|
|
864
|
-
]
|
|
865
|
-
}
|
|
866
|
-
) }),
|
|
867
|
-
draft.database_id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-border p-3", children: [
|
|
868
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center justify-between gap-3 text-sm", children: [
|
|
869
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
|
|
870
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: labels.showOnTarget(target) }),
|
|
871
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: labels.showOnTargetHint })
|
|
872
|
-
] }),
|
|
873
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
874
|
-
ui.Switch,
|
|
875
|
-
{
|
|
876
|
-
checked: draft.two_way,
|
|
877
|
-
onCheckedChange: (two_way) => onChange({ ...draft, two_way }),
|
|
878
|
-
"data-testid": "database-column-relation-two-way"
|
|
879
|
-
}
|
|
880
|
-
)
|
|
881
|
-
] }),
|
|
882
|
-
draft.two_way && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
883
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "database-column-pair-name", children: labels.pairName }),
|
|
884
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
885
|
-
ui.Input,
|
|
886
|
-
{
|
|
887
|
-
id: "database-column-pair-name",
|
|
888
|
-
value: draft.pair_name,
|
|
889
|
-
maxLength: 200,
|
|
890
|
-
placeholder: labels.pairNamePlaceholder(databaseName ?? ""),
|
|
891
|
-
onChange: (e) => onChange({ ...draft, pair_name: e.target.value }),
|
|
892
|
-
"data-testid": "database-column-pair-name"
|
|
893
|
-
}
|
|
894
|
-
)
|
|
895
|
-
] })
|
|
896
|
-
] })
|
|
897
|
-
] });
|
|
898
|
-
}
|
|
899
|
-
function relationColumnsOf(columns) {
|
|
900
|
-
return columns.filter((c) => c.type === "relation" && c.relation);
|
|
901
|
-
}
|
|
902
|
-
function targetColumnsOf(relationId, columns, databases, databaseId) {
|
|
903
|
-
const relation = columns.find((c) => c.id === relationId)?.relation;
|
|
904
|
-
if (!relation) return [];
|
|
905
|
-
if (relation.database_id === databaseId) return columns;
|
|
906
|
-
return databases.find((d) => d.id === relation.database_id)?.columns ?? [];
|
|
907
|
-
}
|
|
908
|
-
function LookupFields({
|
|
909
|
-
draft,
|
|
910
|
-
onChange,
|
|
911
|
-
columns,
|
|
912
|
-
databases,
|
|
913
|
-
databaseId,
|
|
914
|
-
labels
|
|
915
|
-
}) {
|
|
916
|
-
const relations = relationColumnsOf(columns);
|
|
917
|
-
if (relations.length === 0)
|
|
918
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Hint, { testId: "database-column-no-relations", children: labels.noRelations });
|
|
919
|
-
const shown = targetColumnsOf(draft.relation, columns, databases, databaseId).filter(
|
|
920
|
-
(c) => !isComputedColumn(c)
|
|
921
|
-
);
|
|
922
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
923
|
-
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: labels.relation, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
924
|
-
ColumnSelect,
|
|
925
|
-
{
|
|
926
|
-
value: draft.relation,
|
|
927
|
-
onChange: (relation) => onChange({ relation, column: "" }),
|
|
928
|
-
columns: relations,
|
|
929
|
-
placeholder: labels.pickRelation,
|
|
930
|
-
testId: "database-column-lookup-relation"
|
|
931
|
-
}
|
|
932
|
-
) }),
|
|
933
|
-
draft.relation && /* @__PURE__ */ jsxRuntime.jsx(Field, { label: labels.lookupColumn, children: shown.length ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
934
|
-
ColumnSelect,
|
|
935
|
-
{
|
|
936
|
-
value: draft.column,
|
|
937
|
-
onChange: (column) => onChange({ ...draft, column }),
|
|
938
|
-
columns: shown,
|
|
939
|
-
placeholder: labels.pickColumn,
|
|
940
|
-
testId: "database-column-lookup-column"
|
|
941
|
-
}
|
|
942
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(Hint, { children: labels.noColumns }) })
|
|
943
|
-
] });
|
|
944
|
-
}
|
|
945
|
-
function RollupFields({
|
|
946
|
-
draft,
|
|
947
|
-
onChange,
|
|
948
|
-
columns,
|
|
949
|
-
databases,
|
|
950
|
-
databaseId,
|
|
951
|
-
labels
|
|
952
|
-
}) {
|
|
953
|
-
const relations = relationColumnsOf(columns);
|
|
954
|
-
if (relations.length === 0)
|
|
955
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Hint, { testId: "database-column-no-relations", children: labels.noRelations });
|
|
956
|
-
const numbers = targetColumnsOf(draft.relation, columns, databases, databaseId).filter(
|
|
957
|
-
(c) => c.type === "number"
|
|
958
|
-
);
|
|
959
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
960
|
-
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: labels.relation, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
961
|
-
ColumnSelect,
|
|
962
|
-
{
|
|
963
|
-
value: draft.relation,
|
|
964
|
-
onChange: (relation) => onChange({ ...draft, relation, column: "" }),
|
|
965
|
-
columns: relations,
|
|
966
|
-
placeholder: labels.pickRelation,
|
|
967
|
-
testId: "database-column-rollup-relation"
|
|
968
|
-
}
|
|
969
|
-
) }),
|
|
970
|
-
draft.relation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[8rem_1fr] gap-2", children: [
|
|
971
|
-
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: labels.rollupOp, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
972
|
-
ui.Select,
|
|
973
|
-
{
|
|
974
|
-
value: draft.op,
|
|
975
|
-
onValueChange: (op) => onChange({ ...draft, op }),
|
|
976
|
-
children: [
|
|
977
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectTrigger, { "data-testid": "database-column-rollup-op", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SelectValue, {}) }),
|
|
978
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectContent, { children: DATABASE_ROLLUP_OPS.map((op) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op, "data-testid": `database-column-rollup-op-${op}`, children: labels.ops[op] }, op)) })
|
|
979
|
-
]
|
|
980
|
-
}
|
|
981
|
-
) }),
|
|
982
|
-
draft.op !== "count" && /* @__PURE__ */ jsxRuntime.jsx(Field, { label: labels.rollupColumn, children: numbers.length ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
983
|
-
ColumnSelect,
|
|
984
|
-
{
|
|
985
|
-
value: draft.column,
|
|
986
|
-
onChange: (column) => onChange({ ...draft, column }),
|
|
987
|
-
columns: numbers,
|
|
988
|
-
placeholder: labels.pickColumn,
|
|
989
|
-
testId: "database-column-rollup-column"
|
|
990
|
-
}
|
|
991
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(Hint, { children: labels.noNumberColumns }) })
|
|
992
|
-
] })
|
|
993
|
-
] });
|
|
994
|
-
}
|
|
995
|
-
var DEFAULT_DATABASE_ROW_DETAIL_LABELS = {
|
|
996
|
-
untitled: "Untitled",
|
|
997
|
-
fields: "Fields",
|
|
998
|
-
documents: "Linked documents",
|
|
999
|
-
noDocuments: "No document is linked to this row.",
|
|
1000
|
-
empty: "Empty",
|
|
1001
|
-
deleteRow: "Delete row",
|
|
1002
|
-
close: "Close",
|
|
1003
|
-
computed: "Computed from a relation"
|
|
1004
|
-
};
|
|
1005
|
-
function DraftInput({
|
|
1006
|
-
value,
|
|
1007
|
-
type,
|
|
1008
|
-
onCommit,
|
|
1009
|
-
testId,
|
|
1010
|
-
label
|
|
1011
|
-
}) {
|
|
1012
|
-
const [draft, setDraft] = react.useState(value);
|
|
1013
|
-
react.useEffect(() => setDraft(value), [value]);
|
|
1014
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1015
|
-
ui.Input,
|
|
1016
|
-
{
|
|
1017
|
-
type,
|
|
1018
|
-
value: draft,
|
|
1019
|
-
"aria-label": label,
|
|
1020
|
-
onChange: (e) => setDraft(e.target.value),
|
|
1021
|
-
onBlur: () => draft !== value && onCommit(draft),
|
|
1022
|
-
onKeyDown: (e) => {
|
|
1023
|
-
if (e.key === "Enter") e.currentTarget.blur();
|
|
1024
|
-
if (e.key === "Escape") {
|
|
1025
|
-
setDraft(value);
|
|
1026
|
-
requestAnimationFrame(() => e.target.blur());
|
|
1027
|
-
}
|
|
1028
|
-
},
|
|
1029
|
-
className: "h-8",
|
|
1030
|
-
"data-testid": testId
|
|
1031
|
-
}
|
|
1032
|
-
);
|
|
1033
|
-
}
|
|
1034
|
-
function PopoverField({
|
|
1035
|
-
display,
|
|
1036
|
-
emptyLabel,
|
|
1037
|
-
testId,
|
|
1038
|
-
label,
|
|
1039
|
-
renderEditor,
|
|
1040
|
-
onCommit
|
|
1041
|
-
}) {
|
|
1042
|
-
const [open, setOpen] = react.useState(false);
|
|
1043
|
-
const pending = react.useRef(null);
|
|
1044
|
-
const cancelled = react.useRef(false);
|
|
1045
|
-
const close = (keep) => {
|
|
1046
|
-
setOpen(false);
|
|
1047
|
-
const change = pending.current;
|
|
1048
|
-
pending.current = null;
|
|
1049
|
-
if (change && !cancelled.current) onCommit(change.value);
|
|
1050
|
-
cancelled.current = false;
|
|
1051
|
-
};
|
|
1052
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1053
|
-
ui.Popover,
|
|
1054
|
-
{
|
|
1055
|
-
open,
|
|
1056
|
-
onOpenChange: (next) => {
|
|
1057
|
-
if (next) {
|
|
1058
|
-
pending.current = null;
|
|
1059
|
-
cancelled.current = false;
|
|
1060
|
-
setOpen(true);
|
|
1061
|
-
} else close();
|
|
1062
|
-
},
|
|
1063
|
-
children: [
|
|
1064
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1065
|
-
"div",
|
|
1066
|
-
{
|
|
1067
|
-
role: "button",
|
|
1068
|
-
tabIndex: 0,
|
|
1069
|
-
"aria-label": label,
|
|
1070
|
-
"aria-haspopup": "dialog",
|
|
1071
|
-
onKeyDown: (e) => {
|
|
1072
|
-
if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
|
|
1073
|
-
e.preventDefault();
|
|
1074
|
-
setOpen(true);
|
|
1075
|
-
}
|
|
1076
|
-
},
|
|
1077
|
-
className: "flex min-h-8 w-full min-w-0 cursor-pointer items-center rounded-md border border-input bg-transparent px-2 py-1 text-left text-sm outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring",
|
|
1078
|
-
"data-testid": testId,
|
|
1079
|
-
children: display ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: emptyLabel })
|
|
1080
|
-
}
|
|
1081
|
-
) }),
|
|
1082
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1083
|
-
ui.PopoverContent,
|
|
1084
|
-
{
|
|
1085
|
-
align: "start",
|
|
1086
|
-
className: "w-auto border-0 bg-transparent p-0 shadow-none",
|
|
1087
|
-
onEscapeKeyDown: () => {
|
|
1088
|
-
cancelled.current = true;
|
|
1089
|
-
},
|
|
1090
|
-
children: renderEditor({
|
|
1091
|
-
onValueChange: (value) => {
|
|
1092
|
-
pending.current = { value };
|
|
1093
|
-
},
|
|
1094
|
-
stopEditing: () => close()
|
|
1095
|
-
})
|
|
1096
|
-
}
|
|
1097
|
-
)
|
|
1098
|
-
]
|
|
1099
|
-
}
|
|
1100
|
-
);
|
|
1101
|
-
}
|
|
1102
|
-
function DatabaseRowDetail({
|
|
1103
|
-
row,
|
|
1104
|
-
columns,
|
|
1105
|
-
onChange,
|
|
1106
|
-
sources,
|
|
1107
|
-
onDelete,
|
|
1108
|
-
onClose,
|
|
1109
|
-
readOnly = false,
|
|
1110
|
-
locale,
|
|
1111
|
-
labels,
|
|
1112
|
-
className,
|
|
1113
|
-
testId = "database-row-detail"
|
|
1114
|
-
}) {
|
|
1115
|
-
const l = { ...DEFAULT_DATABASE_ROW_DETAIL_LABELS, ...labels };
|
|
1116
|
-
const title = row ? rowTitle(row, columns, locale) || l.untitled : "";
|
|
1117
|
-
const commit = (column, value) => {
|
|
1118
|
-
if (!row || !onChange) return;
|
|
1119
|
-
const next = toApiValue(value, column.type);
|
|
1120
|
-
if (sameCellValue(next, row.values[column.id])) return;
|
|
1121
|
-
onChange(row, column.id, next);
|
|
1122
|
-
};
|
|
1123
|
-
const fieldEditor = (column) => {
|
|
1124
|
-
if (!row) return null;
|
|
1125
|
-
const value = row.values[column.id];
|
|
1126
|
-
const id = `${testId}-input-${column.id}`;
|
|
1127
|
-
const editable = !readOnly && Boolean(onChange) && canEditColumn(column, sources);
|
|
1128
|
-
const display = () => {
|
|
1129
|
-
switch (column.type) {
|
|
1130
|
-
case "select":
|
|
1131
|
-
return typeof value === "string" && value ? /* @__PURE__ */ jsxRuntime.jsx(SelectChip, { value }) : null;
|
|
1132
|
-
case "person":
|
|
1133
|
-
return cellIds(value).length ? /* @__PURE__ */ jsxRuntime.jsx(PersonCell, { value, titles: row.titles }) : null;
|
|
1134
|
-
case "document":
|
|
1135
|
-
case "relation":
|
|
1136
|
-
return cellIds(value).length ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1137
|
-
LinkChipsCell,
|
|
1138
|
-
{
|
|
1139
|
-
value,
|
|
1140
|
-
titles: row.titles,
|
|
1141
|
-
kind: column.type,
|
|
1142
|
-
onOpenDocument: sources?.onOpenDocument,
|
|
1143
|
-
wrap: true
|
|
1144
|
-
}
|
|
1145
|
-
) : null;
|
|
1146
|
-
case "lookup":
|
|
1147
|
-
return /* @__PURE__ */ jsxRuntime.jsx(LookupCell, { value, titles: row.titles, locale, wrap: true });
|
|
1148
|
-
default: {
|
|
1149
|
-
const text = formatCell(value, column.type, locale, row.titles);
|
|
1150
|
-
return text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "break-words", children: text }) : null;
|
|
1151
|
-
}
|
|
1152
|
-
}
|
|
1153
|
-
};
|
|
1154
|
-
if (!editable) {
|
|
1155
|
-
const shown = display();
|
|
1156
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1157
|
-
"div",
|
|
1158
|
-
{
|
|
1159
|
-
className: ui.cn(
|
|
1160
|
-
"flex min-h-8 min-w-0 items-center py-1 text-sm",
|
|
1161
|
-
isComputedColumn(column) && "text-muted-foreground"
|
|
1162
|
-
),
|
|
1163
|
-
title: isComputedColumn(column) ? l.computed : void 0,
|
|
1164
|
-
"data-testid": id,
|
|
1165
|
-
children: shown ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2014" })
|
|
1166
|
-
}
|
|
1167
|
-
);
|
|
1168
|
-
}
|
|
1169
|
-
switch (column.type) {
|
|
1170
|
-
case "checkbox":
|
|
1171
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-8 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1172
|
-
ui.Checkbox,
|
|
1173
|
-
{
|
|
1174
|
-
checked: value === true,
|
|
1175
|
-
"aria-label": column.name,
|
|
1176
|
-
onCheckedChange: (checked) => commit(column, checked === true),
|
|
1177
|
-
"data-testid": id
|
|
1178
|
-
}
|
|
1179
|
-
) });
|
|
1180
|
-
case "number":
|
|
1181
|
-
case "date":
|
|
1182
|
-
case "text": {
|
|
1183
|
-
const text = value == null ? "" : column.type === "date" ? String(value).slice(0, 10) : String(value);
|
|
1184
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1185
|
-
DraftInput,
|
|
1186
|
-
{
|
|
1187
|
-
value: text,
|
|
1188
|
-
type: column.type,
|
|
1189
|
-
label: column.name,
|
|
1190
|
-
onCommit: (next) => commit(column, next),
|
|
1191
|
-
testId: id
|
|
1192
|
-
}
|
|
1193
|
-
);
|
|
1194
|
-
}
|
|
1195
|
-
case "select":
|
|
1196
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1197
|
-
PopoverField,
|
|
1198
|
-
{
|
|
1199
|
-
display: display(),
|
|
1200
|
-
emptyLabel: l.empty,
|
|
1201
|
-
label: column.name,
|
|
1202
|
-
testId: id,
|
|
1203
|
-
onCommit: (next) => commit(column, next),
|
|
1204
|
-
renderEditor: (editor) => /* @__PURE__ */ jsxRuntime.jsx(SelectCellEditor, { ...editor, value, options: column.options ?? [] })
|
|
1205
|
-
}
|
|
1206
|
-
);
|
|
1207
|
-
case "person":
|
|
1208
|
-
case "document":
|
|
1209
|
-
case "relation": {
|
|
1210
|
-
const target = column.relation?.database_id;
|
|
1211
|
-
const searchRows = sources?.searchRows;
|
|
1212
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1213
|
-
PopoverField,
|
|
1214
|
-
{
|
|
1215
|
-
display: display(),
|
|
1216
|
-
emptyLabel: l.empty,
|
|
1217
|
-
label: column.name,
|
|
1218
|
-
testId: id,
|
|
1219
|
-
onCommit: (next) => commit(column, next),
|
|
1220
|
-
renderEditor: (editor) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1221
|
-
PickCellEditor,
|
|
1222
|
-
{
|
|
1223
|
-
...editor,
|
|
1224
|
-
value,
|
|
1225
|
-
data: row,
|
|
1226
|
-
kind: column.type,
|
|
1227
|
-
options: column.type === "person" ? sources?.members : column.type === "document" ? sources?.documents : void 0,
|
|
1228
|
-
search: column.type === "relation" && target && searchRows ? (q) => searchRows(target, q) : void 0
|
|
1229
|
-
}
|
|
1230
|
-
)
|
|
1231
|
-
}
|
|
1232
|
-
);
|
|
1233
|
-
}
|
|
1234
|
-
default:
|
|
1235
|
-
return null;
|
|
1236
|
-
}
|
|
1237
|
-
};
|
|
1238
|
-
const documents = /* @__PURE__ */ new Map();
|
|
1239
|
-
if (row) {
|
|
1240
|
-
for (const column of columns) {
|
|
1241
|
-
if (column.type !== "document") continue;
|
|
1242
|
-
for (const id of cellIds(row.values[column.id])) {
|
|
1243
|
-
documents.set(id, [...documents.get(id) ?? [], column.name]);
|
|
1244
|
-
}
|
|
1245
|
-
}
|
|
1246
|
-
}
|
|
1247
|
-
const openDocument = sources?.onOpenDocument;
|
|
1248
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1249
|
-
chunkD54JXTPG_cjs.DetailPanel,
|
|
1250
|
-
{
|
|
1251
|
-
title,
|
|
1252
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3, { className: "size-4" }),
|
|
1253
|
-
isLoading: !row,
|
|
1254
|
-
onClose,
|
|
1255
|
-
labels: { close: l.close },
|
|
1256
|
-
className,
|
|
1257
|
-
testId,
|
|
1258
|
-
actions: row && onDelete && !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1259
|
-
ui.Button,
|
|
1260
|
-
{
|
|
1261
|
-
variant: "ghost",
|
|
1262
|
-
size: "icon",
|
|
1263
|
-
className: "size-8 text-red-text",
|
|
1264
|
-
onClick: () => onDelete(row),
|
|
1265
|
-
"aria-label": l.deleteRow,
|
|
1266
|
-
title: l.deleteRow,
|
|
1267
|
-
"data-testid": `${testId}-delete`,
|
|
1268
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" })
|
|
1269
|
-
}
|
|
1270
|
-
) : void 0,
|
|
1271
|
-
children: [
|
|
1272
|
-
/* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailSection, { title: l.fields, testId: `${testId}-fields`, children: /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailFields, { children: columns.map((column) => {
|
|
1273
|
-
const Icon = COLUMN_TYPE_ICONS[column.type];
|
|
1274
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1275
|
-
chunkD54JXTPG_cjs.DetailField,
|
|
1276
|
-
{
|
|
1277
|
-
label: column.name,
|
|
1278
|
-
icon: Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5" }) : void 0,
|
|
1279
|
-
testId: `${testId}-field-${column.id}`,
|
|
1280
|
-
children: fieldEditor(column)
|
|
1281
|
-
},
|
|
1282
|
-
column.id
|
|
1283
|
-
);
|
|
1284
|
-
}) }) }),
|
|
1285
|
-
columns.some((c) => c.type === "document") && /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailSection, { title: l.documents, count: documents.size, testId: `${testId}-documents`, children: documents.size ? /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailLinkList, { children: [...documents].map(([id, via]) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1286
|
-
chunkD54JXTPG_cjs.DetailLinkItem,
|
|
1287
|
-
{
|
|
1288
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-4" }),
|
|
1289
|
-
onClick: openDocument ? () => openDocument(id) : void 0,
|
|
1290
|
-
testId: `${testId}-doc-${id}`,
|
|
1291
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
|
|
1292
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate font-medium", children: titleOf(id, row?.titles) }),
|
|
1293
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-muted-foreground", children: via.join(", ") })
|
|
1294
|
-
] })
|
|
1295
|
-
},
|
|
1296
|
-
id
|
|
1297
|
-
)) }) : /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailEmpty, { children: l.noDocuments }) })
|
|
1298
|
-
]
|
|
1299
|
-
}
|
|
1300
|
-
);
|
|
1301
|
-
}
|
|
1302
|
-
var escapeHtml = (text) => text.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
|
|
1303
|
-
var DEFAULT_DATABASE_TABLE_LABELS = {
|
|
1304
|
-
newRow: "New row",
|
|
1305
|
-
emptyTitle: "No rows yet",
|
|
1306
|
-
emptyMessage: "Add a row, or import a spreadsheet.",
|
|
1307
|
-
noColumnsTitle: "No columns yet",
|
|
1308
|
-
noColumnsMessage: "Add a column to start.",
|
|
1309
|
-
noMatches: "No rows match your search."
|
|
1310
|
-
};
|
|
1311
|
-
function DatabaseTable({
|
|
1312
|
-
columns,
|
|
1313
|
-
rows,
|
|
1314
|
-
onCellChange,
|
|
1315
|
-
onAddRow,
|
|
1316
|
-
onAddColumn,
|
|
1317
|
-
onEditColumn,
|
|
1318
|
-
onOpenRow,
|
|
1319
|
-
sources,
|
|
1320
|
-
onSelectionChange,
|
|
1321
|
-
selected,
|
|
1322
|
-
readOnly = false,
|
|
1323
|
-
isFiltered = false,
|
|
1324
|
-
isLoading,
|
|
1325
|
-
locale,
|
|
1326
|
-
gridId,
|
|
1327
|
-
height = "100%",
|
|
1328
|
-
labels,
|
|
1329
|
-
columnLabels,
|
|
1330
|
-
gridProps,
|
|
1331
|
-
testId
|
|
1332
|
-
}) {
|
|
1333
|
-
const l = { ...DEFAULT_DATABASE_TABLE_LABELS, ...labels };
|
|
1334
|
-
const columnDefs = react.useMemo(
|
|
1335
|
-
() => createDatabaseColumns(columns, {
|
|
1336
|
-
readOnly,
|
|
1337
|
-
onEditColumn,
|
|
1338
|
-
onAddColumn,
|
|
1339
|
-
onOpenRow,
|
|
1340
|
-
sources,
|
|
1341
|
-
locale,
|
|
1342
|
-
labels: columnLabels
|
|
1343
|
-
}),
|
|
1344
|
-
[columns, readOnly, onEditColumn, onAddColumn, onOpenRow, sources, locale, columnLabels]
|
|
1345
|
-
);
|
|
1346
|
-
const noColumns = columns.length === 0;
|
|
1347
|
-
const emptyState = {
|
|
1348
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table2, { className: "size-8 text-muted-foreground" }),
|
|
1349
|
-
title: l.noColumnsTitle,
|
|
1350
|
-
message: readOnly ? void 0 : l.noColumnsMessage,
|
|
1351
|
-
action: !readOnly && onAddColumn ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: onAddColumn, "data-testid": "database-empty-add-column", className: "gap-1.5", children: [
|
|
1352
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }),
|
|
1353
|
-
columnLabels?.addColumn ?? DEFAULT_DATABASE_COLUMN_LABELS.addColumn
|
|
1354
|
-
] }) : void 0
|
|
1355
|
-
};
|
|
1356
|
-
const noRowsText = isFiltered ? l.noMatches : readOnly ? l.emptyTitle : `${l.emptyTitle}. ${l.emptyMessage}`;
|
|
1357
|
-
const api = react.useRef(null);
|
|
1358
|
-
const knownColumns = react.useRef(null);
|
|
1359
|
-
react.useEffect(() => {
|
|
1360
|
-
const ids = new Set(columns.map((c) => c.id));
|
|
1361
|
-
const added = knownColumns.current ? columns.filter((c) => !knownColumns.current.has(c.id)) : [];
|
|
1362
|
-
knownColumns.current = ids;
|
|
1363
|
-
const last = added[added.length - 1];
|
|
1364
|
-
if (last && api.current) {
|
|
1365
|
-
const grid = api.current;
|
|
1366
|
-
setTimeout(() => grid.ensureColumnVisible(last.id, "end"), 0);
|
|
1367
|
-
}
|
|
1368
|
-
}, [columns]);
|
|
1369
|
-
const handleCellValueChanged = (event) => {
|
|
1370
|
-
const columnId = event.column.getColId();
|
|
1371
|
-
if (!event.data || !onCellChange) return;
|
|
1372
|
-
onCellChange(event.data, columnId, event.data.values[columnId] ?? null);
|
|
1373
|
-
};
|
|
1374
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1375
|
-
"div",
|
|
1376
|
-
{
|
|
1377
|
-
className: "flex h-full min-h-0 flex-col",
|
|
1378
|
-
"data-testid": chunkMHVNT4J3_cjs.testIdOr(testId, { testId: "database-table" }),
|
|
1379
|
-
children: [
|
|
1380
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1381
|
-
chunkLKK52DEY_cjs.GridView,
|
|
1382
|
-
{
|
|
1383
|
-
testId: "database-grid",
|
|
1384
|
-
items: rows,
|
|
1385
|
-
columnDefs,
|
|
1386
|
-
getItemId: (row) => row.id,
|
|
1387
|
-
getRowTestId: (row) => `database-row-${row.id}`,
|
|
1388
|
-
getCellTestId: (colId, row) => `database-cell-${row.id}-${colId}`,
|
|
1389
|
-
isLoading,
|
|
1390
|
-
emptyState,
|
|
1391
|
-
showEmpty: noColumns,
|
|
1392
|
-
gridId,
|
|
1393
|
-
height,
|
|
1394
|
-
rowHeight: 38,
|
|
1395
|
-
selection: onSelectionChange ? { mode: "multiple", selected: selected ?? [], onSelectionChange, controlled: true } : void 0,
|
|
1396
|
-
onCellValueChanged: handleCellValueChanged,
|
|
1397
|
-
...gridProps,
|
|
1398
|
-
onGridReady: (params) => {
|
|
1399
|
-
api.current = params.api;
|
|
1400
|
-
gridProps?.onGridReady?.(params);
|
|
1401
|
-
},
|
|
1402
|
-
gridOptions: {
|
|
1403
|
-
overlayNoRowsTemplate: `<span class="text-sm text-muted-foreground">${escapeHtml(noRowsText)}</span>`,
|
|
1404
|
-
singleClickEdit: false,
|
|
1405
|
-
stopEditingWhenCellsLoseFocus: true,
|
|
1406
|
-
enterNavigatesVerticallyAfterEdit: true,
|
|
1407
|
-
undoRedoCellEditing: false,
|
|
1408
|
-
...gridProps?.gridOptions
|
|
1409
|
-
}
|
|
1410
|
-
}
|
|
1411
|
-
) }),
|
|
1412
|
-
!readOnly && onAddRow && columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-2 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1413
|
-
ui.Button,
|
|
1414
|
-
{
|
|
1415
|
-
variant: "ghost",
|
|
1416
|
-
size: "sm",
|
|
1417
|
-
onClick: onAddRow,
|
|
1418
|
-
"data-testid": "database-add-row",
|
|
1419
|
-
className: "gap-1.5 text-muted-foreground",
|
|
1420
|
-
children: [
|
|
1421
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }),
|
|
1422
|
-
l.newRow
|
|
1423
|
-
]
|
|
1424
|
-
}
|
|
1425
|
-
) })
|
|
1426
|
-
]
|
|
1427
|
-
}
|
|
1428
|
-
);
|
|
1429
|
-
}
|
|
1430
|
-
var DEFAULT_DATABASE_TOOLBAR_LABELS = {
|
|
1431
|
-
back: "All databases",
|
|
1432
|
-
rename: "Rename database",
|
|
1433
|
-
rows: (n) => `${n.toLocaleString()} row${n === 1 ? "" : "s"}`,
|
|
1434
|
-
showing: (shown, total) => `Showing ${shown.toLocaleString()} of ${total.toLocaleString()}`,
|
|
1435
|
-
search: "Search",
|
|
1436
|
-
deleteSelected: (n) => `Delete ${n} row${n === 1 ? "" : "s"}`,
|
|
1437
|
-
more: "More actions",
|
|
1438
|
-
importRows: "Import rows from a spreadsheet\u2026",
|
|
1439
|
-
exportXlsx: "Export to Excel (.xlsx)",
|
|
1440
|
-
exportCsv: "Export to CSV",
|
|
1441
|
-
deleteDatabase: "Delete database",
|
|
1442
|
-
readOnly: "Read-only here: this database belongs to another workspace."
|
|
1443
|
-
};
|
|
1444
|
-
var SPREADSHEET_ACCEPT = ".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|
1445
|
-
function DatabaseToolbar({
|
|
1446
|
-
name,
|
|
1447
|
-
description,
|
|
1448
|
-
total,
|
|
1449
|
-
shown,
|
|
1450
|
-
search,
|
|
1451
|
-
onSearchChange,
|
|
1452
|
-
onBack,
|
|
1453
|
-
onRename,
|
|
1454
|
-
selectedCount = 0,
|
|
1455
|
-
onDeleteSelected,
|
|
1456
|
-
onImportRows,
|
|
1457
|
-
onExport,
|
|
1458
|
-
onDeleteDatabase,
|
|
1459
|
-
readOnly = false,
|
|
1460
|
-
views,
|
|
1461
|
-
labels
|
|
1462
|
-
}) {
|
|
1463
|
-
const l = { ...DEFAULT_DATABASE_TOOLBAR_LABELS, ...labels };
|
|
1464
|
-
const [title, setTitle] = react.useState(name);
|
|
1465
|
-
const fileInput = react.useRef(null);
|
|
1466
|
-
react.useEffect(() => setTitle(name), [name]);
|
|
1467
|
-
const commitTitle = () => {
|
|
1468
|
-
const next = title.trim();
|
|
1469
|
-
if (next && next !== name) onRename?.(next);
|
|
1470
|
-
else setTitle(name);
|
|
1471
|
-
};
|
|
1472
|
-
const onTitleKey = (e) => {
|
|
1473
|
-
if (e.key === "Enter") e.currentTarget.blur();
|
|
1474
|
-
if (e.key === "Escape") {
|
|
1475
|
-
setTitle(name);
|
|
1476
|
-
e.currentTarget.blur();
|
|
1477
|
-
}
|
|
1478
|
-
};
|
|
1479
|
-
const onFile = (e) => {
|
|
1480
|
-
const file = e.target.files?.[0];
|
|
1481
|
-
if (file) onImportRows?.(file);
|
|
1482
|
-
e.target.value = "";
|
|
1483
|
-
};
|
|
1484
|
-
const canRename = !readOnly && Boolean(onRename);
|
|
1485
|
-
const hasMenu = Boolean(onExport || !readOnly && (onImportRows || onDeleteDatabase));
|
|
1486
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 px-2 pb-2 pt-1", "data-testid": "database-toolbar", children: [
|
|
1487
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
|
|
1488
|
-
onBack && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1489
|
-
ui.Button,
|
|
1490
|
-
{
|
|
1491
|
-
variant: "ghost",
|
|
1492
|
-
size: "icon",
|
|
1493
|
-
onClick: onBack,
|
|
1494
|
-
"aria-label": l.back,
|
|
1495
|
-
title: l.back,
|
|
1496
|
-
"data-testid": "database-back",
|
|
1497
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "size-4" })
|
|
1498
|
-
}
|
|
1499
|
-
),
|
|
1500
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "size-5 shrink-0 text-muted-foreground", "aria-hidden": true }),
|
|
1501
|
-
canRename ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1502
|
-
"input",
|
|
1503
|
-
{
|
|
1504
|
-
value: title,
|
|
1505
|
-
"aria-label": l.rename,
|
|
1506
|
-
maxLength: 200,
|
|
1507
|
-
onChange: (e) => setTitle(e.target.value),
|
|
1508
|
-
onBlur: commitTitle,
|
|
1509
|
-
onKeyDown: onTitleKey,
|
|
1510
|
-
"data-testid": "database-title",
|
|
1511
|
-
className: "min-w-0 flex-1 truncate rounded-md bg-transparent px-1 text-xl font-semibold outline-none hover:bg-muted/60 focus:bg-muted/60"
|
|
1512
|
-
}
|
|
1513
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1514
|
-
"h2",
|
|
1515
|
-
{
|
|
1516
|
-
className: "min-w-0 flex-1 truncate px-1 text-xl font-semibold",
|
|
1517
|
-
"data-testid": "database-title",
|
|
1518
|
-
children: name
|
|
1519
|
-
}
|
|
1520
|
-
),
|
|
1521
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm text-muted-foreground", "data-testid": "database-row-count", children: shown !== void 0 && shown < total ? l.showing(shown, total) : l.rows(total) })
|
|
1522
|
-
] }),
|
|
1523
|
-
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-1 text-sm text-muted-foreground", children: description }),
|
|
1524
|
-
readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1525
|
-
"p",
|
|
1526
|
-
{
|
|
1527
|
-
className: "flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground",
|
|
1528
|
-
"data-testid": "database-read-only",
|
|
1529
|
-
children: [
|
|
1530
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "size-3.5" }),
|
|
1531
|
-
l.readOnly
|
|
1532
|
-
]
|
|
1533
|
-
}
|
|
1534
|
-
),
|
|
1535
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1536
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-sm flex-1", children: [
|
|
1537
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
|
|
1538
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1539
|
-
ui.Input,
|
|
1540
|
-
{
|
|
1541
|
-
value: search,
|
|
1542
|
-
onChange: (e) => onSearchChange(e.target.value),
|
|
1543
|
-
placeholder: l.search,
|
|
1544
|
-
"aria-label": l.search,
|
|
1545
|
-
className: "h-8 pl-8",
|
|
1546
|
-
"data-testid": "database-search"
|
|
1547
|
-
}
|
|
1548
|
-
)
|
|
1549
|
-
] }),
|
|
1550
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
|
|
1551
|
-
views,
|
|
1552
|
-
!readOnly && selectedCount > 0 && onDeleteSelected && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1553
|
-
ui.Button,
|
|
1554
|
-
{
|
|
1555
|
-
variant: "outline",
|
|
1556
|
-
size: "sm",
|
|
1557
|
-
onClick: onDeleteSelected,
|
|
1558
|
-
className: "gap-1.5 text-red-text",
|
|
1559
|
-
"data-testid": "database-delete-rows",
|
|
1560
|
-
children: [
|
|
1561
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" }),
|
|
1562
|
-
l.deleteSelected(selectedCount)
|
|
1563
|
-
]
|
|
1564
|
-
}
|
|
1565
|
-
),
|
|
1566
|
-
hasMenu && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
|
|
1567
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1568
|
-
ui.Button,
|
|
1569
|
-
{
|
|
1570
|
-
variant: "outline",
|
|
1571
|
-
size: "icon",
|
|
1572
|
-
"aria-label": l.more,
|
|
1573
|
-
title: l.more,
|
|
1574
|
-
"data-testid": "database-menu",
|
|
1575
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-4" })
|
|
1576
|
-
}
|
|
1577
|
-
) }),
|
|
1578
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "end", className: "w-64", children: [
|
|
1579
|
-
!readOnly && onImportRows && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1580
|
-
ui.DropdownMenuItem,
|
|
1581
|
-
{
|
|
1582
|
-
onSelect: () => fileInput.current?.click(),
|
|
1583
|
-
"data-testid": "database-import-rows",
|
|
1584
|
-
children: [
|
|
1585
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "size-4" }),
|
|
1586
|
-
l.importRows
|
|
1587
|
-
]
|
|
1588
|
-
}
|
|
1589
|
-
),
|
|
1590
|
-
onExport && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1591
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1592
|
-
ui.DropdownMenuItem,
|
|
1593
|
-
{
|
|
1594
|
-
onSelect: () => onExport("xlsx"),
|
|
1595
|
-
"data-testid": "database-export-xlsx",
|
|
1596
|
-
children: [
|
|
1597
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "size-4" }),
|
|
1598
|
-
l.exportXlsx
|
|
1599
|
-
]
|
|
1600
|
-
}
|
|
1601
|
-
),
|
|
1602
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1603
|
-
ui.DropdownMenuItem,
|
|
1604
|
-
{
|
|
1605
|
-
onSelect: () => onExport("csv"),
|
|
1606
|
-
"data-testid": "database-export-csv",
|
|
1607
|
-
children: [
|
|
1608
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "size-4" }),
|
|
1609
|
-
l.exportCsv
|
|
1610
|
-
]
|
|
1611
|
-
}
|
|
1612
|
-
)
|
|
1613
|
-
] }),
|
|
1614
|
-
!readOnly && onDeleteDatabase && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1615
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {}),
|
|
1616
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1617
|
-
ui.DropdownMenuItem,
|
|
1618
|
-
{
|
|
1619
|
-
onSelect: onDeleteDatabase,
|
|
1620
|
-
className: "text-red-text",
|
|
1621
|
-
"data-testid": "database-delete",
|
|
1622
|
-
children: [
|
|
1623
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" }),
|
|
1624
|
-
l.deleteDatabase
|
|
1625
|
-
]
|
|
1626
|
-
}
|
|
1627
|
-
)
|
|
1628
|
-
] })
|
|
1629
|
-
] })
|
|
1630
|
-
] }),
|
|
1631
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1632
|
-
"input",
|
|
1633
|
-
{
|
|
1634
|
-
ref: fileInput,
|
|
1635
|
-
type: "file",
|
|
1636
|
-
accept: SPREADSHEET_ACCEPT,
|
|
1637
|
-
className: "hidden",
|
|
1638
|
-
onChange: onFile,
|
|
1639
|
-
"data-testid": "database-import-rows-input"
|
|
1640
|
-
}
|
|
1641
|
-
)
|
|
1642
|
-
] })
|
|
1643
|
-
] });
|
|
1644
|
-
}
|
|
1645
|
-
var DEFAULT_DATABASE_COLUMN_DIALOG_LABELS = {
|
|
1646
|
-
addTitle: "Add a column",
|
|
1647
|
-
editTitle: "Column settings",
|
|
1648
|
-
addDescription: "Pick what the column holds; every cell in it is checked against its type.",
|
|
1649
|
-
editDescription: "Rename the column or change its options.",
|
|
1650
|
-
name: "Name",
|
|
1651
|
-
namePlaceholder: "e.g. Client, Reference, Fee",
|
|
1652
|
-
type: "Type",
|
|
1653
|
-
typeFixed: "A column\u2019s type can\u2019t be changed once it has been added.",
|
|
1654
|
-
options: "Options",
|
|
1655
|
-
optionPlaceholder: "Add an option and press Enter",
|
|
1656
|
-
addOption: "Add",
|
|
1657
|
-
removeOption: (option) => `Remove ${option}`,
|
|
1658
|
-
needsOptions: "A select column needs at least one option.",
|
|
1659
|
-
cancel: "Cancel",
|
|
1660
|
-
add: "Add column",
|
|
1661
|
-
save: "Save",
|
|
1662
|
-
saving: "Saving\u2026",
|
|
1663
|
-
delete: "Delete column",
|
|
1664
|
-
confirmDelete: "Delete this column and every value in it?"
|
|
1665
|
-
};
|
|
1666
|
-
var NO_RELATION = { database_id: "", two_way: false, pair_name: "" };
|
|
1667
|
-
var NO_LOOKUP = { relation: "", column: "" };
|
|
1668
|
-
var NO_ROLLUP = { relation: "", column: "", op: "count" };
|
|
1669
|
-
var NO_COLUMNS = [];
|
|
1670
|
-
var NO_DATABASES = [];
|
|
1671
|
-
function configComplete(type, editing, relation, lookup, rollup) {
|
|
1672
|
-
if (type === "relation") return editing || Boolean(relation.database_id);
|
|
1673
|
-
if (type === "lookup") return Boolean(lookup.relation && lookup.column);
|
|
1674
|
-
if (type === "rollup") return Boolean(rollup.relation && (rollup.op === "count" || rollup.column));
|
|
1675
|
-
return true;
|
|
1676
|
-
}
|
|
1677
|
-
function DatabaseColumnDialog({
|
|
1678
|
-
open,
|
|
1679
|
-
onOpenChange,
|
|
1680
|
-
column,
|
|
1681
|
-
databaseId,
|
|
1682
|
-
databaseName,
|
|
1683
|
-
columns = NO_COLUMNS,
|
|
1684
|
-
databases = NO_DATABASES,
|
|
1685
|
-
onSave,
|
|
1686
|
-
onDelete,
|
|
1687
|
-
isSaving = false,
|
|
1688
|
-
error,
|
|
1689
|
-
labels,
|
|
1690
|
-
typeLabels,
|
|
1691
|
-
configLabels
|
|
1692
|
-
}) {
|
|
1693
|
-
const l = { ...DEFAULT_DATABASE_COLUMN_DIALOG_LABELS, ...labels };
|
|
1694
|
-
const tl = { ...DEFAULT_DATABASE_COLUMN_TYPE_LABELS, ...typeLabels };
|
|
1695
|
-
const cl = { ...DEFAULT_COLUMN_CONFIG_LABELS, ...configLabels };
|
|
1696
|
-
const editing = Boolean(column);
|
|
1697
|
-
const [name, setName] = react.useState("");
|
|
1698
|
-
const [type, setType] = react.useState("text");
|
|
1699
|
-
const [options, setOptions] = react.useState([]);
|
|
1700
|
-
const [optionDraft, setOptionDraft] = react.useState("");
|
|
1701
|
-
const [confirmingDelete, setConfirmingDelete] = react.useState(false);
|
|
1702
|
-
const [relation, setRelation] = react.useState(NO_RELATION);
|
|
1703
|
-
const [lookup, setLookup] = react.useState(NO_LOOKUP);
|
|
1704
|
-
const [rollup, setRollup] = react.useState(NO_ROLLUP);
|
|
1705
|
-
react.useEffect(() => {
|
|
1706
|
-
if (!open) return;
|
|
1707
|
-
setName(column?.name ?? "");
|
|
1708
|
-
setType(column?.type ?? "text");
|
|
1709
|
-
setOptions(column?.options ?? []);
|
|
1710
|
-
setOptionDraft("");
|
|
1711
|
-
setConfirmingDelete(false);
|
|
1712
|
-
setRelation(NO_RELATION);
|
|
1713
|
-
setLookup(column?.lookup ? { ...column.lookup } : NO_LOOKUP);
|
|
1714
|
-
setRollup(
|
|
1715
|
-
column?.rollup ? {
|
|
1716
|
-
relation: column.rollup.relation,
|
|
1717
|
-
column: column.rollup.column ?? "",
|
|
1718
|
-
op: column.rollup.op ?? "count"
|
|
1719
|
-
} : NO_ROLLUP
|
|
1720
|
-
);
|
|
1721
|
-
}, [open, column]);
|
|
1722
|
-
const addOption = () => {
|
|
1723
|
-
const option = optionDraft.trim();
|
|
1724
|
-
if (option && !options.some((o) => o.toLowerCase() === option.toLowerCase())) {
|
|
1725
|
-
setOptions([...options, option]);
|
|
1726
|
-
}
|
|
1727
|
-
setOptionDraft("");
|
|
1728
|
-
};
|
|
1729
|
-
const pendingOptions = optionDraft.trim() ? [...options, optionDraft.trim()] : options;
|
|
1730
|
-
const missingOptions = type === "select" && pendingOptions.length === 0;
|
|
1731
|
-
const canSave = name.trim().length > 0 && !missingOptions && configComplete(type, editing, relation, lookup, rollup) && !isSaving;
|
|
1732
|
-
const submit = (e) => {
|
|
1733
|
-
e.preventDefault();
|
|
1734
|
-
if (!canSave) return;
|
|
1735
|
-
const draft = {
|
|
1736
|
-
name: name.trim(),
|
|
1737
|
-
type,
|
|
1738
|
-
options: type === "select" ? Array.from(new Set(pendingOptions)) : null
|
|
1739
|
-
};
|
|
1740
|
-
if (type === "relation" && !editing)
|
|
1741
|
-
draft.relation = {
|
|
1742
|
-
database_id: relation.database_id,
|
|
1743
|
-
two_way: relation.two_way,
|
|
1744
|
-
pair_name: relation.two_way ? relation.pair_name.trim() || null : null
|
|
1745
|
-
};
|
|
1746
|
-
if (type === "lookup") draft.lookup = { ...lookup };
|
|
1747
|
-
if (type === "rollup")
|
|
1748
|
-
draft.rollup = {
|
|
1749
|
-
relation: rollup.relation,
|
|
1750
|
-
op: rollup.op,
|
|
1751
|
-
column: rollup.op === "count" ? null : rollup.column
|
|
1752
|
-
};
|
|
1753
|
-
onSave(draft);
|
|
1754
|
-
};
|
|
1755
|
-
const onOptionKey = (e) => {
|
|
1756
|
-
if (e.key === "Enter") {
|
|
1757
|
-
e.preventDefault();
|
|
1758
|
-
addOption();
|
|
1759
|
-
}
|
|
1760
|
-
};
|
|
1761
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DialogContent, { className: "sm:max-w-md", "data-testid": "database-column-dialog", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: submit, className: "flex flex-col gap-4", children: [
|
|
1762
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.DialogHeader, { children: [
|
|
1763
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { children: editing ? l.editTitle : l.addTitle }),
|
|
1764
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.DialogDescription, { children: editing ? l.editDescription : l.addDescription })
|
|
1765
|
-
] }),
|
|
1766
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
1767
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "database-column-name", children: l.name }),
|
|
1768
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1769
|
-
ui.Input,
|
|
1770
|
-
{
|
|
1771
|
-
id: "database-column-name",
|
|
1772
|
-
autoFocus: true,
|
|
1773
|
-
value: name,
|
|
1774
|
-
maxLength: 200,
|
|
1775
|
-
placeholder: l.namePlaceholder,
|
|
1776
|
-
onChange: (e) => setName(e.target.value),
|
|
1777
|
-
"data-testid": "database-column-name"
|
|
1778
|
-
}
|
|
1779
|
-
)
|
|
1780
|
-
] }),
|
|
1781
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
1782
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: l.type }),
|
|
1783
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1784
|
-
ui.Select,
|
|
1785
|
-
{
|
|
1786
|
-
value: type,
|
|
1787
|
-
onValueChange: (v) => setType(v),
|
|
1788
|
-
disabled: editing,
|
|
1789
|
-
children: [
|
|
1790
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectTrigger, { "data-testid": "database-column-type", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SelectValue, {}) }),
|
|
1791
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.SelectContent, { children: DATABASE_COLUMN_TYPES.map((t) => {
|
|
1792
|
-
const Icon = COLUMN_TYPE_ICONS[t];
|
|
1793
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: t, "data-testid": `database-column-type-${t}`, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
|
|
1794
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 text-muted-foreground" }),
|
|
1795
|
-
tl[t]
|
|
1796
|
-
] }) }, t);
|
|
1797
|
-
}) })
|
|
1798
|
-
]
|
|
1799
|
-
}
|
|
1800
|
-
),
|
|
1801
|
-
editing && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: l.typeFixed })
|
|
1802
|
-
] }),
|
|
1803
|
-
type === "select" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
1804
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "database-column-option", children: l.options }),
|
|
1805
|
-
options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", "data-testid": "database-column-options", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
|
|
1806
|
-
/* @__PURE__ */ jsxRuntime.jsx(SelectChip, { value: option }),
|
|
1807
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1808
|
-
"button",
|
|
1809
|
-
{
|
|
1810
|
-
type: "button",
|
|
1811
|
-
"aria-label": l.removeOption(option),
|
|
1812
|
-
onClick: () => setOptions(options.filter((o) => o !== option)),
|
|
1813
|
-
className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
1814
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
|
|
1815
|
-
}
|
|
1816
|
-
)
|
|
1817
|
-
] }, option)) }),
|
|
1818
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
|
|
1819
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1820
|
-
ui.Input,
|
|
1821
|
-
{
|
|
1822
|
-
id: "database-column-option",
|
|
1823
|
-
value: optionDraft,
|
|
1824
|
-
maxLength: 200,
|
|
1825
|
-
placeholder: l.optionPlaceholder,
|
|
1826
|
-
onChange: (e) => setOptionDraft(e.target.value),
|
|
1827
|
-
onKeyDown: onOptionKey,
|
|
1828
|
-
"data-testid": "database-column-option-input"
|
|
1829
|
-
}
|
|
1830
|
-
),
|
|
1831
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1832
|
-
ui.Button,
|
|
1833
|
-
{
|
|
1834
|
-
type: "button",
|
|
1835
|
-
variant: "outline",
|
|
1836
|
-
onClick: addOption,
|
|
1837
|
-
disabled: !optionDraft.trim(),
|
|
1838
|
-
children: l.addOption
|
|
1839
|
-
}
|
|
1840
|
-
)
|
|
1841
|
-
] }),
|
|
1842
|
-
missingOptions && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: l.needsOptions })
|
|
1843
|
-
] }),
|
|
1844
|
-
type === "relation" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1845
|
-
RelationFields,
|
|
1846
|
-
{
|
|
1847
|
-
draft: relation,
|
|
1848
|
-
onChange: setRelation,
|
|
1849
|
-
databases,
|
|
1850
|
-
databaseId,
|
|
1851
|
-
databaseName,
|
|
1852
|
-
editing,
|
|
1853
|
-
column,
|
|
1854
|
-
labels: cl
|
|
1855
|
-
}
|
|
1856
|
-
),
|
|
1857
|
-
type === "lookup" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1858
|
-
LookupFields,
|
|
1859
|
-
{
|
|
1860
|
-
draft: lookup,
|
|
1861
|
-
onChange: setLookup,
|
|
1862
|
-
columns,
|
|
1863
|
-
databases,
|
|
1864
|
-
databaseId,
|
|
1865
|
-
labels: cl
|
|
1866
|
-
}
|
|
1867
|
-
),
|
|
1868
|
-
type === "rollup" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1869
|
-
RollupFields,
|
|
1870
|
-
{
|
|
1871
|
-
draft: rollup,
|
|
1872
|
-
onChange: setRollup,
|
|
1873
|
-
columns,
|
|
1874
|
-
databases,
|
|
1875
|
-
databaseId,
|
|
1876
|
-
labels: cl
|
|
1877
|
-
}
|
|
1878
|
-
),
|
|
1879
|
-
error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-red-text", "data-testid": "database-column-error", children: error }),
|
|
1880
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [
|
|
1881
|
-
editing && onDelete ? confirmingDelete ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
|
|
1882
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: l.confirmDelete }),
|
|
1883
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1884
|
-
ui.Button,
|
|
1885
|
-
{
|
|
1886
|
-
type: "button",
|
|
1887
|
-
variant: "destructive",
|
|
1888
|
-
size: "sm",
|
|
1889
|
-
onClick: onDelete,
|
|
1890
|
-
"data-testid": "database-column-delete-confirm",
|
|
1891
|
-
children: l.delete
|
|
1892
|
-
}
|
|
1893
|
-
)
|
|
1894
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1895
|
-
ui.Button,
|
|
1896
|
-
{
|
|
1897
|
-
type: "button",
|
|
1898
|
-
variant: "ghost",
|
|
1899
|
-
size: "sm",
|
|
1900
|
-
onClick: () => setConfirmingDelete(true),
|
|
1901
|
-
className: "gap-1.5 text-red-text",
|
|
1902
|
-
"data-testid": "database-column-delete",
|
|
1903
|
-
children: [
|
|
1904
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" }),
|
|
1905
|
-
l.delete
|
|
1906
|
-
]
|
|
1907
|
-
}
|
|
1908
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
|
|
1909
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex gap-2", children: [
|
|
1910
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: l.cancel }),
|
|
1911
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "submit", disabled: !canSave, "data-testid": "database-column-save", children: isSaving ? l.saving : editing ? l.save : l.add })
|
|
1912
|
-
] })
|
|
1913
|
-
] })
|
|
1914
|
-
] }) }) });
|
|
1915
|
-
}
|
|
1916
|
-
var DEFAULT_DATABASE_LIST_LABELS = {
|
|
1917
|
-
title: "Databases",
|
|
1918
|
-
subtitle: "Tables your team keeps and searches \u2014 a client database, billing records, precedents.",
|
|
1919
|
-
newDatabase: "New database",
|
|
1920
|
-
importSpreadsheet: "Import spreadsheet",
|
|
1921
|
-
importing: "Importing\u2026",
|
|
1922
|
-
ownGroup: "In this workspace",
|
|
1923
|
-
sharedGroup: "Shared with everyone",
|
|
1924
|
-
readOnly: "Read-only",
|
|
1925
|
-
rows: (n) => `${n.toLocaleString()} row${n === 1 ? "" : "s"}`,
|
|
1926
|
-
columns: (n) => `${n} column${n === 1 ? "" : "s"}`,
|
|
1927
|
-
emptyTitle: "No databases yet",
|
|
1928
|
-
emptyMessage: "Start from a blank table, or import a spreadsheet (.xlsx or .csv) \u2014 its columns and their types come with it.",
|
|
1929
|
-
loading: "Loading databases\u2026"
|
|
1930
|
-
};
|
|
1931
|
-
var SPREADSHEET_ACCEPT2 = ".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|
1932
|
-
function DatabaseCard({
|
|
1933
|
-
database,
|
|
1934
|
-
onOpen,
|
|
1935
|
-
l
|
|
1936
|
-
}) {
|
|
1937
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1938
|
-
"button",
|
|
1939
|
-
{
|
|
1940
|
-
type: "button",
|
|
1941
|
-
onClick: onOpen,
|
|
1942
|
-
"data-testid": `database-card-${database.id}`,
|
|
1943
|
-
className: ui.cn(
|
|
1944
|
-
"flex min-h-32 flex-col gap-2 rounded-lg border border-border bg-background p-4 text-left transition-colors",
|
|
1945
|
-
"hover:border-primary/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
1946
|
-
),
|
|
1947
|
-
children: [
|
|
1948
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full items-start gap-2", children: [
|
|
1949
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "mt-0.5 size-5 shrink-0 text-muted-foreground", "aria-hidden": true }),
|
|
1950
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: database.name }),
|
|
1951
|
-
!database.editable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground", children: [
|
|
1952
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "size-3" }),
|
|
1953
|
-
l.readOnly
|
|
1954
|
-
] })
|
|
1955
|
-
] }),
|
|
1956
|
-
database.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 text-sm text-muted-foreground", children: database.description }),
|
|
1957
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-auto flex w-full items-center gap-3 text-xs text-muted-foreground", children: [
|
|
1958
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: l.rows(database.row_count) }),
|
|
1959
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: l.columns(database.columns.length) }),
|
|
1960
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-1", "aria-hidden": true, children: database.columns.slice(0, 6).map((c) => {
|
|
1961
|
-
const Icon = COLUMN_TYPE_ICONS[c.type];
|
|
1962
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5" }, c.id);
|
|
1963
|
-
}) })
|
|
1964
|
-
] })
|
|
1965
|
-
]
|
|
1966
|
-
}
|
|
1967
|
-
);
|
|
1968
|
-
}
|
|
1969
|
-
function DatabaseList({
|
|
1970
|
-
databases,
|
|
1971
|
-
onOpen,
|
|
1972
|
-
onNew,
|
|
1973
|
-
onImport,
|
|
1974
|
-
isImporting = false,
|
|
1975
|
-
isLoading = false,
|
|
1976
|
-
labels
|
|
1977
|
-
}) {
|
|
1978
|
-
const l = { ...DEFAULT_DATABASE_LIST_LABELS, ...labels };
|
|
1979
|
-
const fileInput = react.useRef(null);
|
|
1980
|
-
const own = databases.filter((d) => d.editable);
|
|
1981
|
-
const shared = databases.filter((d) => !d.editable);
|
|
1982
|
-
const onFile = (e) => {
|
|
1983
|
-
const file = e.target.files?.[0];
|
|
1984
|
-
if (file) onImport?.(file);
|
|
1985
|
-
e.target.value = "";
|
|
1986
|
-
};
|
|
1987
|
-
const actions = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex gap-2", children: [
|
|
1988
|
-
onImport && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1989
|
-
ui.Button,
|
|
1990
|
-
{
|
|
1991
|
-
variant: "outline",
|
|
1992
|
-
onClick: () => fileInput.current?.click(),
|
|
1993
|
-
disabled: isImporting,
|
|
1994
|
-
className: "gap-1.5",
|
|
1995
|
-
"data-testid": "database-import",
|
|
1996
|
-
children: [
|
|
1997
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "size-4" }),
|
|
1998
|
-
isImporting ? l.importing : l.importSpreadsheet
|
|
1999
|
-
]
|
|
2000
|
-
}
|
|
2001
|
-
),
|
|
2002
|
-
onNew && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: onNew, className: "gap-1.5", "data-testid": "database-new", children: [
|
|
2003
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }),
|
|
2004
|
-
l.newDatabase
|
|
2005
|
-
] })
|
|
2006
|
-
] });
|
|
2007
|
-
const grid = (items) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3", children: items.map((d) => /* @__PURE__ */ jsxRuntime.jsx(DatabaseCard, { database: d, onOpen: () => onOpen(d), l }, d.id)) });
|
|
2008
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-2 sm:p-4", "data-testid": "database-list", children: [
|
|
2009
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
|
|
2010
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2011
|
-
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold", children: l.title }),
|
|
2012
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: l.subtitle })
|
|
2013
|
-
] }),
|
|
2014
|
-
actions
|
|
2015
|
-
] }),
|
|
2016
|
-
isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: l.loading }) : databases.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2017
|
-
"div",
|
|
2018
|
-
{
|
|
2019
|
-
className: "flex flex-col items-center gap-2 rounded-lg border border-dashed border-border px-6 py-12 text-center",
|
|
2020
|
-
"data-testid": "database-list-empty",
|
|
2021
|
-
children: [
|
|
2022
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "size-8 text-muted-foreground" }),
|
|
2023
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium", children: l.emptyTitle }),
|
|
2024
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: l.emptyMessage })
|
|
2025
|
-
]
|
|
2026
|
-
}
|
|
2027
|
-
) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2028
|
-
own.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-2", children: [
|
|
2029
|
-
shared.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: l.ownGroup }),
|
|
2030
|
-
grid(own)
|
|
2031
|
-
] }),
|
|
2032
|
-
shared.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-2", "data-testid": "database-list-shared", children: [
|
|
2033
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: l.sharedGroup }),
|
|
2034
|
-
grid(shared)
|
|
2035
|
-
] })
|
|
2036
|
-
] }),
|
|
2037
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2038
|
-
"input",
|
|
2039
|
-
{
|
|
2040
|
-
ref: fileInput,
|
|
2041
|
-
type: "file",
|
|
2042
|
-
accept: SPREADSHEET_ACCEPT2,
|
|
2043
|
-
className: "hidden",
|
|
2044
|
-
onChange: onFile,
|
|
2045
|
-
"data-testid": "database-import-input"
|
|
2046
|
-
}
|
|
2047
|
-
)
|
|
2048
|
-
] });
|
|
2049
|
-
}
|
|
2050
|
-
var DEFAULT_NEW_DATABASE_DIALOG_LABELS = {
|
|
2051
|
-
title: "New database",
|
|
2052
|
-
description: "A table your workspace keeps: add columns of the kinds you need, then rows.",
|
|
2053
|
-
name: "Name",
|
|
2054
|
-
namePlaceholder: "e.g. Client database",
|
|
2055
|
-
about: "Description",
|
|
2056
|
-
aboutPlaceholder: "Optional: what it holds and who keeps it",
|
|
2057
|
-
cancel: "Cancel",
|
|
2058
|
-
create: "Create",
|
|
2059
|
-
creating: "Creating\u2026"
|
|
2060
|
-
};
|
|
2061
|
-
function NewDatabaseDialog({
|
|
2062
|
-
open,
|
|
2063
|
-
onOpenChange,
|
|
2064
|
-
onCreate,
|
|
2065
|
-
isCreating = false,
|
|
2066
|
-
error,
|
|
2067
|
-
labels
|
|
2068
|
-
}) {
|
|
2069
|
-
const l = { ...DEFAULT_NEW_DATABASE_DIALOG_LABELS, ...labels };
|
|
2070
|
-
const [name, setName] = react.useState("");
|
|
2071
|
-
const [about, setAbout] = react.useState("");
|
|
2072
|
-
react.useEffect(() => {
|
|
2073
|
-
if (open) {
|
|
2074
|
-
setName("");
|
|
2075
|
-
setAbout("");
|
|
2076
|
-
}
|
|
2077
|
-
}, [open]);
|
|
2078
|
-
const submit = (e) => {
|
|
2079
|
-
e.preventDefault();
|
|
2080
|
-
if (!name.trim() || isCreating) return;
|
|
2081
|
-
onCreate({ name: name.trim(), description: about.trim() || null });
|
|
2082
|
-
};
|
|
2083
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DialogContent, { className: "sm:max-w-md", "data-testid": "new-database-dialog", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: submit, className: "flex flex-col gap-4", children: [
|
|
2084
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.DialogHeader, { children: [
|
|
2085
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { children: l.title }),
|
|
2086
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.DialogDescription, { children: l.description })
|
|
2087
|
-
] }),
|
|
2088
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
2089
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "new-database-name", children: l.name }),
|
|
2090
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2091
|
-
ui.Input,
|
|
2092
|
-
{
|
|
2093
|
-
id: "new-database-name",
|
|
2094
|
-
autoFocus: true,
|
|
2095
|
-
value: name,
|
|
2096
|
-
maxLength: 200,
|
|
2097
|
-
placeholder: l.namePlaceholder,
|
|
2098
|
-
onChange: (e) => setName(e.target.value),
|
|
2099
|
-
"data-testid": "new-database-name"
|
|
2100
|
-
}
|
|
2101
|
-
)
|
|
2102
|
-
] }),
|
|
2103
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
2104
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "new-database-about", children: l.about }),
|
|
2105
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2106
|
-
ui.Textarea,
|
|
2107
|
-
{
|
|
2108
|
-
id: "new-database-about",
|
|
2109
|
-
value: about,
|
|
2110
|
-
maxLength: 2e3,
|
|
2111
|
-
rows: 2,
|
|
2112
|
-
placeholder: l.aboutPlaceholder,
|
|
2113
|
-
onChange: (e) => setAbout(e.target.value),
|
|
2114
|
-
"data-testid": "new-database-description"
|
|
2115
|
-
}
|
|
2116
|
-
)
|
|
2117
|
-
] }),
|
|
2118
|
-
error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-red-text", children: error }),
|
|
2119
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.DialogFooter, { children: [
|
|
2120
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: l.cancel }),
|
|
2121
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2122
|
-
ui.Button,
|
|
2123
|
-
{
|
|
2124
|
-
type: "submit",
|
|
2125
|
-
disabled: !name.trim() || isCreating,
|
|
2126
|
-
"data-testid": "new-database-create",
|
|
2127
|
-
children: isCreating ? l.creating : l.create
|
|
2128
|
-
}
|
|
2129
|
-
)
|
|
2130
|
-
] })
|
|
2131
|
-
] }) }) });
|
|
2132
|
-
}
|
|
2133
11
|
|
|
2134
|
-
|
|
2135
|
-
exports
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
exports
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
exports
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
exports
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
exports
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
exports
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
exports
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
exports
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
exports
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
exports
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
exports
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
exports
|
|
2180
|
-
|
|
12
|
+
|
|
13
|
+
Object.defineProperty(exports, "ADD_COLUMN_COL_ID", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return chunkTQSU3I4C_cjs.ADD_COLUMN_COL_ID; }
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "COLUMN_TYPE_ICONS", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return chunkTQSU3I4C_cjs.COLUMN_TYPE_ICONS; }
|
|
20
|
+
});
|
|
21
|
+
Object.defineProperty(exports, "COMPUTED_COLUMN_TYPES", {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return chunkTQSU3I4C_cjs.COMPUTED_COLUMN_TYPES; }
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "DATABASE_COLUMN_TYPES", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () { return chunkTQSU3I4C_cjs.DATABASE_COLUMN_TYPES; }
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "DATABASE_ROLLUP_OPS", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () { return chunkTQSU3I4C_cjs.DATABASE_ROLLUP_OPS; }
|
|
32
|
+
});
|
|
33
|
+
Object.defineProperty(exports, "DEFAULT_COLUMN_CONFIG_LABELS", {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_COLUMN_CONFIG_LABELS; }
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, "DEFAULT_DATABASE_COLUMN_DIALOG_LABELS", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_DATABASE_COLUMN_DIALOG_LABELS; }
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, "DEFAULT_DATABASE_COLUMN_LABELS", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_DATABASE_COLUMN_LABELS; }
|
|
44
|
+
});
|
|
45
|
+
Object.defineProperty(exports, "DEFAULT_DATABASE_COLUMN_TYPE_LABELS", {
|
|
46
|
+
enumerable: true,
|
|
47
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_DATABASE_COLUMN_TYPE_LABELS; }
|
|
48
|
+
});
|
|
49
|
+
Object.defineProperty(exports, "DEFAULT_DATABASE_LIST_LABELS", {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_DATABASE_LIST_LABELS; }
|
|
52
|
+
});
|
|
53
|
+
Object.defineProperty(exports, "DEFAULT_DATABASE_ROW_DETAIL_LABELS", {
|
|
54
|
+
enumerable: true,
|
|
55
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_DATABASE_ROW_DETAIL_LABELS; }
|
|
56
|
+
});
|
|
57
|
+
Object.defineProperty(exports, "DEFAULT_DATABASE_TABLE_LABELS", {
|
|
58
|
+
enumerable: true,
|
|
59
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_DATABASE_TABLE_LABELS; }
|
|
60
|
+
});
|
|
61
|
+
Object.defineProperty(exports, "DEFAULT_DATABASE_TOOLBAR_LABELS", {
|
|
62
|
+
enumerable: true,
|
|
63
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_DATABASE_TOOLBAR_LABELS; }
|
|
64
|
+
});
|
|
65
|
+
Object.defineProperty(exports, "DEFAULT_NEW_DATABASE_DIALOG_LABELS", {
|
|
66
|
+
enumerable: true,
|
|
67
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_NEW_DATABASE_DIALOG_LABELS; }
|
|
68
|
+
});
|
|
69
|
+
Object.defineProperty(exports, "DEFAULT_PICK_CELL_EDITOR_LABELS", {
|
|
70
|
+
enumerable: true,
|
|
71
|
+
get: function () { return chunkTQSU3I4C_cjs.DEFAULT_PICK_CELL_EDITOR_LABELS; }
|
|
72
|
+
});
|
|
73
|
+
Object.defineProperty(exports, "DatabaseColumnDialog", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
get: function () { return chunkTQSU3I4C_cjs.DatabaseColumnDialog; }
|
|
76
|
+
});
|
|
77
|
+
Object.defineProperty(exports, "DatabaseList", {
|
|
78
|
+
enumerable: true,
|
|
79
|
+
get: function () { return chunkTQSU3I4C_cjs.DatabaseList; }
|
|
80
|
+
});
|
|
81
|
+
Object.defineProperty(exports, "DatabaseRowDetail", {
|
|
82
|
+
enumerable: true,
|
|
83
|
+
get: function () { return chunkTQSU3I4C_cjs.DatabaseRowDetail; }
|
|
84
|
+
});
|
|
85
|
+
Object.defineProperty(exports, "DatabaseTable", {
|
|
86
|
+
enumerable: true,
|
|
87
|
+
get: function () { return chunkTQSU3I4C_cjs.DatabaseTable; }
|
|
88
|
+
});
|
|
89
|
+
Object.defineProperty(exports, "DatabaseToolbar", {
|
|
90
|
+
enumerable: true,
|
|
91
|
+
get: function () { return chunkTQSU3I4C_cjs.DatabaseToolbar; }
|
|
92
|
+
});
|
|
93
|
+
Object.defineProperty(exports, "LINK_COLUMN_TYPES", {
|
|
94
|
+
enumerable: true,
|
|
95
|
+
get: function () { return chunkTQSU3I4C_cjs.LINK_COLUMN_TYPES; }
|
|
96
|
+
});
|
|
97
|
+
Object.defineProperty(exports, "LinkChip", {
|
|
98
|
+
enumerable: true,
|
|
99
|
+
get: function () { return chunkTQSU3I4C_cjs.LinkChip; }
|
|
100
|
+
});
|
|
101
|
+
Object.defineProperty(exports, "LinkChipsCell", {
|
|
102
|
+
enumerable: true,
|
|
103
|
+
get: function () { return chunkTQSU3I4C_cjs.LinkChipsCell; }
|
|
104
|
+
});
|
|
105
|
+
Object.defineProperty(exports, "LookupCell", {
|
|
106
|
+
enumerable: true,
|
|
107
|
+
get: function () { return chunkTQSU3I4C_cjs.LookupCell; }
|
|
108
|
+
});
|
|
109
|
+
Object.defineProperty(exports, "NewDatabaseDialog", {
|
|
110
|
+
enumerable: true,
|
|
111
|
+
get: function () { return chunkTQSU3I4C_cjs.NewDatabaseDialog; }
|
|
112
|
+
});
|
|
113
|
+
Object.defineProperty(exports, "OPEN_ROW_COL_ID", {
|
|
114
|
+
enumerable: true,
|
|
115
|
+
get: function () { return chunkTQSU3I4C_cjs.OPEN_ROW_COL_ID; }
|
|
116
|
+
});
|
|
117
|
+
Object.defineProperty(exports, "PersonCell", {
|
|
118
|
+
enumerable: true,
|
|
119
|
+
get: function () { return chunkTQSU3I4C_cjs.PersonCell; }
|
|
120
|
+
});
|
|
121
|
+
Object.defineProperty(exports, "PersonChip", {
|
|
122
|
+
enumerable: true,
|
|
123
|
+
get: function () { return chunkTQSU3I4C_cjs.PersonChip; }
|
|
124
|
+
});
|
|
125
|
+
Object.defineProperty(exports, "PickCellEditor", {
|
|
126
|
+
enumerable: true,
|
|
127
|
+
get: function () { return chunkTQSU3I4C_cjs.PickCellEditor; }
|
|
128
|
+
});
|
|
129
|
+
Object.defineProperty(exports, "SelectCellEditor", {
|
|
130
|
+
enumerable: true,
|
|
131
|
+
get: function () { return chunkTQSU3I4C_cjs.SelectCellEditor; }
|
|
132
|
+
});
|
|
133
|
+
Object.defineProperty(exports, "SelectChip", {
|
|
134
|
+
enumerable: true,
|
|
135
|
+
get: function () { return chunkTQSU3I4C_cjs.SelectChip; }
|
|
136
|
+
});
|
|
137
|
+
Object.defineProperty(exports, "canEditColumn", {
|
|
138
|
+
enumerable: true,
|
|
139
|
+
get: function () { return chunkTQSU3I4C_cjs.canEditColumn; }
|
|
140
|
+
});
|
|
141
|
+
Object.defineProperty(exports, "cellIds", {
|
|
142
|
+
enumerable: true,
|
|
143
|
+
get: function () { return chunkTQSU3I4C_cjs.cellIds; }
|
|
144
|
+
});
|
|
145
|
+
Object.defineProperty(exports, "cellList", {
|
|
146
|
+
enumerable: true,
|
|
147
|
+
get: function () { return chunkTQSU3I4C_cjs.cellList; }
|
|
148
|
+
});
|
|
149
|
+
Object.defineProperty(exports, "columnWidth", {
|
|
150
|
+
enumerable: true,
|
|
151
|
+
get: function () { return chunkTQSU3I4C_cjs.columnWidth; }
|
|
152
|
+
});
|
|
153
|
+
Object.defineProperty(exports, "compareCells", {
|
|
154
|
+
enumerable: true,
|
|
155
|
+
get: function () { return chunkTQSU3I4C_cjs.compareCells; }
|
|
156
|
+
});
|
|
157
|
+
Object.defineProperty(exports, "createDatabaseColumns", {
|
|
158
|
+
enumerable: true,
|
|
159
|
+
get: function () { return chunkTQSU3I4C_cjs.createDatabaseColumns; }
|
|
160
|
+
});
|
|
161
|
+
Object.defineProperty(exports, "formatCell", {
|
|
162
|
+
enumerable: true,
|
|
163
|
+
get: function () { return chunkTQSU3I4C_cjs.formatCell; }
|
|
164
|
+
});
|
|
165
|
+
Object.defineProperty(exports, "formatDateValue", {
|
|
166
|
+
enumerable: true,
|
|
167
|
+
get: function () { return chunkTQSU3I4C_cjs.formatDateValue; }
|
|
168
|
+
});
|
|
169
|
+
Object.defineProperty(exports, "formatLookupValue", {
|
|
170
|
+
enumerable: true,
|
|
171
|
+
get: function () { return chunkTQSU3I4C_cjs.formatLookupValue; }
|
|
172
|
+
});
|
|
173
|
+
Object.defineProperty(exports, "formatNumberValue", {
|
|
174
|
+
enumerable: true,
|
|
175
|
+
get: function () { return chunkTQSU3I4C_cjs.formatNumberValue; }
|
|
176
|
+
});
|
|
177
|
+
Object.defineProperty(exports, "isComputedColumn", {
|
|
178
|
+
enumerable: true,
|
|
179
|
+
get: function () { return chunkTQSU3I4C_cjs.isComputedColumn; }
|
|
180
|
+
});
|
|
181
|
+
Object.defineProperty(exports, "optionTone", {
|
|
182
|
+
enumerable: true,
|
|
183
|
+
get: function () { return chunkTQSU3I4C_cjs.optionTone; }
|
|
184
|
+
});
|
|
185
|
+
Object.defineProperty(exports, "rowTitle", {
|
|
186
|
+
enumerable: true,
|
|
187
|
+
get: function () { return chunkTQSU3I4C_cjs.rowTitle; }
|
|
188
|
+
});
|
|
189
|
+
Object.defineProperty(exports, "sameCellValue", {
|
|
190
|
+
enumerable: true,
|
|
191
|
+
get: function () { return chunkTQSU3I4C_cjs.sameCellValue; }
|
|
192
|
+
});
|
|
193
|
+
Object.defineProperty(exports, "titleOf", {
|
|
194
|
+
enumerable: true,
|
|
195
|
+
get: function () { return chunkTQSU3I4C_cjs.titleOf; }
|
|
196
|
+
});
|
|
197
|
+
Object.defineProperty(exports, "toApiValue", {
|
|
198
|
+
enumerable: true,
|
|
199
|
+
get: function () { return chunkTQSU3I4C_cjs.toApiValue; }
|
|
200
|
+
});
|
|
2181
201
|
//# sourceMappingURL=index.cjs.map
|
|
2182
202
|
//# sourceMappingURL=index.cjs.map
|