@devtable/settings-form 1.32.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/{api-caller → settings-form/src/api-caller}/datasource.d.ts +0 -0
- package/dist/{api-caller → settings-form/src/api-caller}/datasource.typed.d.ts +0 -0
- package/dist/{api-caller → settings-form/src/api-caller}/index.d.ts +0 -0
- package/dist/settings-form/src/datasource/add-data-source.d.ts +8 -0
- package/dist/settings-form/src/datasource/data-source-list.d.ts +7 -0
- package/dist/settings-form/src/datasource/delete-data-source.d.ts +10 -0
- package/dist/{datasource → settings-form/src/datasource}/index.d.ts +0 -0
- package/dist/settings-form/src/datasource/styles.d.ts +6 -0
- package/dist/settings-form/src/index.d.ts +1 -0
- package/dist/{vite-env.d.ts → settings-form/src/vite-env.d.ts} +0 -0
- package/dist/settings-form.es.js +39 -22
- package/dist/settings-form.umd.js +2 -2
- package/package.json +18 -17
- package/dist/datasource/add-data-source.d.ts +0 -6
- package/dist/datasource/data-source-list.d.ts +0 -2
- package/dist/datasource/delete-data-source.d.ts +0 -6
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './settings-form/src/index'
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IStyles } from "./styles";
|
|
3
|
+
interface IDeleteDataSource {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
onSuccess: () => void;
|
|
7
|
+
styles?: IStyles;
|
|
8
|
+
}
|
|
9
|
+
export declare function DeleteDataSource({ id, name, onSuccess, styles }: IDeleteDataSource): JSX.Element;
|
|
10
|
+
export {};
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './datasource';
|
|
File without changes
|
package/dist/settings-form.es.js
CHANGED
|
@@ -62,6 +62,10 @@ const datasource = {
|
|
|
62
62
|
const APICaller = {
|
|
63
63
|
datasource
|
|
64
64
|
};
|
|
65
|
+
const defaultStyles = {
|
|
66
|
+
size: "sm",
|
|
67
|
+
spacing: "md"
|
|
68
|
+
};
|
|
65
69
|
var jsxRuntime = { exports: {} };
|
|
66
70
|
var reactJsxRuntime_production_min = {};
|
|
67
71
|
/**
|
|
@@ -96,7 +100,8 @@ const jsx = jsxRuntime.exports.jsx;
|
|
|
96
100
|
const jsxs = jsxRuntime.exports.jsxs;
|
|
97
101
|
const Fragment = jsxRuntime.exports.Fragment;
|
|
98
102
|
function AddDataSourceForm({
|
|
99
|
-
postSubmit
|
|
103
|
+
postSubmit,
|
|
104
|
+
styles = defaultStyles
|
|
100
105
|
}) {
|
|
101
106
|
const {
|
|
102
107
|
control,
|
|
@@ -159,7 +164,8 @@ function AddDataSourceForm({
|
|
|
159
164
|
field
|
|
160
165
|
}) => /* @__PURE__ */ jsx(SegmentedControl, {
|
|
161
166
|
fullWidth: true,
|
|
162
|
-
mb:
|
|
167
|
+
mb: styles.spacing,
|
|
168
|
+
size: styles.size,
|
|
163
169
|
data: [{
|
|
164
170
|
label: "PostgreSQL",
|
|
165
171
|
value: "postgresql"
|
|
@@ -179,7 +185,8 @@ function AddDataSourceForm({
|
|
|
179
185
|
render: ({
|
|
180
186
|
field
|
|
181
187
|
}) => /* @__PURE__ */ jsx(TextInput, {
|
|
182
|
-
mb:
|
|
188
|
+
mb: styles.spacing,
|
|
189
|
+
size: styles.size,
|
|
183
190
|
required: true,
|
|
184
191
|
label: "Name",
|
|
185
192
|
placeholder: "A unique name",
|
|
@@ -189,7 +196,6 @@ function AddDataSourceForm({
|
|
|
189
196
|
label: "Connection Info",
|
|
190
197
|
labelPosition: "center"
|
|
191
198
|
}), /* @__PURE__ */ jsxs(Group, {
|
|
192
|
-
direction: "row",
|
|
193
199
|
grow: true,
|
|
194
200
|
children: [/* @__PURE__ */ jsx(Controller, {
|
|
195
201
|
name: "config.host",
|
|
@@ -197,7 +203,8 @@ function AddDataSourceForm({
|
|
|
197
203
|
render: ({
|
|
198
204
|
field
|
|
199
205
|
}) => /* @__PURE__ */ jsx(TextInput, {
|
|
200
|
-
mb:
|
|
206
|
+
mb: styles.spacing,
|
|
207
|
+
size: styles.size,
|
|
201
208
|
required: true,
|
|
202
209
|
label: "Host",
|
|
203
210
|
sx: {
|
|
@@ -211,7 +218,8 @@ function AddDataSourceForm({
|
|
|
211
218
|
render: ({
|
|
212
219
|
field
|
|
213
220
|
}) => /* @__PURE__ */ jsx(NumberInput, {
|
|
214
|
-
mb:
|
|
221
|
+
mb: styles.spacing,
|
|
222
|
+
size: styles.size,
|
|
215
223
|
required: true,
|
|
216
224
|
label: "Port",
|
|
217
225
|
hideControls: true,
|
|
@@ -227,7 +235,8 @@ function AddDataSourceForm({
|
|
|
227
235
|
render: ({
|
|
228
236
|
field
|
|
229
237
|
}) => /* @__PURE__ */ jsx(TextInput, {
|
|
230
|
-
mb:
|
|
238
|
+
mb: styles.spacing,
|
|
239
|
+
size: styles.size,
|
|
231
240
|
required: true,
|
|
232
241
|
label: "Username",
|
|
233
242
|
...field
|
|
@@ -238,7 +247,8 @@ function AddDataSourceForm({
|
|
|
238
247
|
render: ({
|
|
239
248
|
field
|
|
240
249
|
}) => /* @__PURE__ */ jsx(PasswordInput, {
|
|
241
|
-
mb:
|
|
250
|
+
mb: styles.spacing,
|
|
251
|
+
size: styles.size,
|
|
242
252
|
required: true,
|
|
243
253
|
label: "Password",
|
|
244
254
|
...field
|
|
@@ -249,16 +259,18 @@ function AddDataSourceForm({
|
|
|
249
259
|
render: ({
|
|
250
260
|
field
|
|
251
261
|
}) => /* @__PURE__ */ jsx(TextInput, {
|
|
252
|
-
mb:
|
|
262
|
+
mb: styles.spacing,
|
|
263
|
+
size: styles.size,
|
|
253
264
|
required: true,
|
|
254
265
|
label: "Database",
|
|
255
266
|
...field
|
|
256
267
|
})
|
|
257
268
|
}), /* @__PURE__ */ jsx(Group, {
|
|
258
269
|
position: "right",
|
|
259
|
-
mt:
|
|
270
|
+
mt: styles.spacing,
|
|
260
271
|
children: /* @__PURE__ */ jsx(Button, {
|
|
261
272
|
type: "submit",
|
|
273
|
+
size: styles.size,
|
|
262
274
|
children: "Save"
|
|
263
275
|
})
|
|
264
276
|
})]
|
|
@@ -266,7 +278,8 @@ function AddDataSourceForm({
|
|
|
266
278
|
});
|
|
267
279
|
}
|
|
268
280
|
function AddDataSource({
|
|
269
|
-
onSuccess
|
|
281
|
+
onSuccess,
|
|
282
|
+
styles = defaultStyles
|
|
270
283
|
}) {
|
|
271
284
|
const [opened, setOpened] = require$$0.useState(false);
|
|
272
285
|
const open = () => setOpened(true);
|
|
@@ -286,10 +299,11 @@ function AddDataSource({
|
|
|
286
299
|
e.stopPropagation();
|
|
287
300
|
},
|
|
288
301
|
children: /* @__PURE__ */ jsx(AddDataSourceForm, {
|
|
289
|
-
postSubmit
|
|
302
|
+
postSubmit,
|
|
303
|
+
styles
|
|
290
304
|
})
|
|
291
305
|
}), /* @__PURE__ */ jsx(Button, {
|
|
292
|
-
size:
|
|
306
|
+
size: styles.size,
|
|
293
307
|
onClick: open,
|
|
294
308
|
leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
|
|
295
309
|
size: 20
|
|
@@ -301,7 +315,8 @@ function AddDataSource({
|
|
|
301
315
|
function DeleteDataSource({
|
|
302
316
|
id,
|
|
303
317
|
name,
|
|
304
|
-
onSuccess
|
|
318
|
+
onSuccess,
|
|
319
|
+
styles = defaultStyles
|
|
305
320
|
}) {
|
|
306
321
|
const modals = useModals();
|
|
307
322
|
const doDelete = async () => {
|
|
@@ -326,7 +341,7 @@ function DeleteDataSource({
|
|
|
326
341
|
const confirmAndDelete = () => modals.openConfirmModal({
|
|
327
342
|
title: "Delete this data source?",
|
|
328
343
|
children: /* @__PURE__ */ jsx(Text, {
|
|
329
|
-
size:
|
|
344
|
+
size: styles.size,
|
|
330
345
|
children: "This action won't affect your database."
|
|
331
346
|
}),
|
|
332
347
|
labels: {
|
|
@@ -337,7 +352,7 @@ function DeleteDataSource({
|
|
|
337
352
|
onConfirm: doDelete
|
|
338
353
|
});
|
|
339
354
|
return /* @__PURE__ */ jsx(Button, {
|
|
340
|
-
size:
|
|
355
|
+
size: styles.size,
|
|
341
356
|
color: "red",
|
|
342
357
|
onClick: confirmAndDelete,
|
|
343
358
|
leftIcon: /* @__PURE__ */ jsx(Trash, {
|
|
@@ -346,7 +361,9 @@ function DeleteDataSource({
|
|
|
346
361
|
children: "Delete"
|
|
347
362
|
});
|
|
348
363
|
}
|
|
349
|
-
function DataSourceList(
|
|
364
|
+
function DataSourceList({
|
|
365
|
+
styles = defaultStyles
|
|
366
|
+
}) {
|
|
350
367
|
const {
|
|
351
368
|
data = [],
|
|
352
369
|
loading,
|
|
@@ -361,22 +378,22 @@ function DataSourceList() {
|
|
|
361
378
|
});
|
|
362
379
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
363
380
|
children: [/* @__PURE__ */ jsx(Group, {
|
|
364
|
-
pt:
|
|
381
|
+
pt: styles.spacing,
|
|
365
382
|
position: "right",
|
|
366
383
|
children: /* @__PURE__ */ jsx(AddDataSource, {
|
|
367
384
|
onSuccess: refresh
|
|
368
385
|
})
|
|
369
386
|
}), /* @__PURE__ */ jsxs(Box, {
|
|
370
|
-
mt:
|
|
387
|
+
mt: styles.spacing,
|
|
371
388
|
sx: {
|
|
372
389
|
position: "relative"
|
|
373
390
|
},
|
|
374
391
|
children: [/* @__PURE__ */ jsx(LoadingOverlay, {
|
|
375
392
|
visible: loading
|
|
376
393
|
}), /* @__PURE__ */ jsxs(Table, {
|
|
377
|
-
horizontalSpacing:
|
|
378
|
-
verticalSpacing:
|
|
379
|
-
fontSize:
|
|
394
|
+
horizontalSpacing: styles.spacing,
|
|
395
|
+
verticalSpacing: styles.spacing,
|
|
396
|
+
fontSize: styles.size,
|
|
380
397
|
highlightOnHover: true,
|
|
381
398
|
children: [/* @__PURE__ */ jsx("thead", {
|
|
382
399
|
children: /* @__PURE__ */ jsxs("tr", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(o,
|
|
1
|
+
(function(o,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("@mantine/core"),require("react-hook-form"),require("@mantine/notifications"),require("react"),require("tabler-icons-react"),require("axios"),require("ahooks"),require("@mantine/modals")):typeof define=="function"&&define.amd?define(["exports","@mantine/core","react-hook-form","@mantine/notifications","react","tabler-icons-react","axios","ahooks","@mantine/modals"],i):(o=typeof globalThis!="undefined"?globalThis:o||self,i(o["settings-form"]={},o["@mantine/core"],o["react-hook-form"],o["@mantine/notifications"],o.React,o["tabler-icons-react"],o.axios,o.ahooks,o["@mantine/modals"]))})(this,function(o,i,u,p,T,z,P,y,O){"use strict";function w(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var _=w(T),j=w(P);const S=(r=>(t,a,n={})=>{const s={"X-Requested-With":"XMLHttpRequest","Content-Type":n.string?"application/x-www-form-urlencoded":"application/json",...n.headers},d={baseURL:"http://localhost:31200",method:r,url:t,params:r==="GET"?a:n.params,headers:s};return["POST","PUT"].includes(r)&&(d.data=n.string?JSON.stringify(a):a),j.default(d).then(l=>l.data).catch(l=>Promise.reject(l))})("POST"),b={datasource:{list:async()=>await S("/datasource/list",{filter:{},sort:{field:"create_time",order:"ASC"},pagination:{page:1,pagesize:100}}),create:async(r,t,a)=>{try{return await S("/datasource/create",{type:r,key:t,config:a})}catch(n){return console.error(n),!1}},delete:async r=>{await S("/datasource/delete",{id:r})}}},m={size:"sm",spacing:"md"};var h={exports:{}},g={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.min.js
|
|
4
4
|
*
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var A=_.default,R=Symbol.for("react.element"),I=Symbol.for("react.fragment"),N=Object.prototype.hasOwnProperty,L=A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,E={key:!0,ref:!0,__self:!0,__source:!0};function q(r,t,a){var n,s={},d=null,l=null;a!==void 0&&(d=""+a),t.key!==void 0&&(d=""+t.key),t.ref!==void 0&&(l=t.ref);for(n in t)N.call(t,n)&&!E.hasOwnProperty(n)&&(s[n]=t[n]);if(r&&r.defaultProps)for(n in t=r.defaultProps,t)s[n]===void 0&&(s[n]=t[n]);return{$$typeof:R,type:r,key:d,ref:l,props:s,_owner:L.current}}g.Fragment=I,g.jsx=q,g.jsxs=q,h.exports=g;const e=h.exports.jsx,f=h.exports.jsxs,D=h.exports.Fragment;function M({postSubmit:r,styles:t=m}){const{control:a,handleSubmit:n,formState:{errors:s,isValidating:d,isValid:l}}=u.useForm({defaultValues:{type:"postgresql",key:"",config:{host:"",port:5432,username:"",password:"",database:""}}}),x=async({type:c,key:B,config:G})=>{if(p.showNotification({id:"for-creating",title:"Pending",message:"Adding data source...",loading:!0}),!await b.datasource.create(c,B,G)){p.updateNotification({id:"for-creating",title:"Failed",message:"Test connection failed with given info",color:"red"});return}p.updateNotification({id:"for-creating",title:"Successful",message:"Data source is added",color:"green"}),r()};return e(i.Box,{mx:"auto",children:f("form",{onSubmit:n(x),children:[e(u.Controller,{name:"type",control:a,render:({field:c})=>e(i.SegmentedControl,{fullWidth:!0,mb:t.spacing,size:t.size,data:[{label:"PostgreSQL",value:"postgresql"},{label:"MySQL",value:"mysql"},{label:"HTTP",value:"http",disabled:!0}],...c})}),e(u.Controller,{name:"key",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Name",placeholder:"A unique name",...c})}),e(i.Divider,{label:"Connection Info",labelPosition:"center"}),f(i.Group,{grow:!0,children:[e(u.Controller,{name:"config.host",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Host",sx:{flexGrow:1},...c})}),e(u.Controller,{name:"config.port",control:a,render:({field:c})=>e(i.NumberInput,{mb:t.spacing,size:t.size,required:!0,label:"Port",hideControls:!0,sx:{width:"8em"},...c})})]}),e(u.Controller,{name:"config.username",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Username",...c})}),e(u.Controller,{name:"config.password",control:a,render:({field:c})=>e(i.PasswordInput,{mb:t.spacing,size:t.size,required:!0,label:"Password",...c})}),e(u.Controller,{name:"config.database",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Database",...c})}),e(i.Group,{position:"right",mt:t.spacing,children:e(i.Button,{type:"submit",size:t.size,children:"Save"})})]})})}function v({onSuccess:r,styles:t=m}){const[a,n]=_.default.useState(!1),s=()=>n(!0),d=()=>n(!1),l=()=>{r(),d()};return f(D,{children:[e(i.Modal,{overflow:"inside",opened:a,onClose:()=>n(!1),title:"Add a data source",trapFocus:!0,onDragStart:x=>{x.stopPropagation()},children:e(M,{postSubmit:l,styles:t})}),e(i.Button,{size:t.size,onClick:s,leftIcon:e(z.PlaylistAdd,{size:20}),children:"Add a Data Source"})]})}function C({id:r,name:t,onSuccess:a,styles:n=m}){const s=O.useModals(),d=async()=>{!r||(p.showNotification({id:"for-deleting",title:"Pending",message:"Deleting data source...",loading:!0}),await b.datasource.delete(r),p.updateNotification({id:"for-deleting",title:"Successful",message:`Data source [${t}] is deleted`,color:"green"}),a())},l=()=>s.openConfirmModal({title:"Delete this data source?",children:e(i.Text,{size:n.size,children:"This action won't affect your database."}),labels:{confirm:"Confirm",cancel:"Cancel"},onCancel:()=>console.log("Cancel"),onConfirm:d});return e(i.Button,{size:n.size,color:"red",onClick:l,leftIcon:e(z.Trash,{size:20}),children:"Delete"})}function k({styles:r=m}){const{data:t=[],loading:a,refresh:n}=y.useRequest(async()=>{const{data:s}=await b.datasource.list();return s},{refreshDeps:[]});return f(D,{children:[e(i.Group,{pt:r.spacing,position:"right",children:e(v,{onSuccess:n})}),f(i.Box,{mt:r.spacing,sx:{position:"relative"},children:[e(i.LoadingOverlay,{visible:a}),f(i.Table,{horizontalSpacing:r.spacing,verticalSpacing:r.spacing,fontSize:r.size,highlightOnHover:!0,children:[e("thead",{children:f("tr",{children:[e("th",{children:"Type"}),e("th",{children:"Name"}),e("th",{children:"Action"})]})}),e("tbody",{children:t.map(({id:s,key:d,type:l})=>f("tr",{children:[e("td",{width:200,children:l}),e("td",{children:d}),e("td",{width:200,children:e(i.Group,{position:"left",children:e(C,{id:s,name:d,onSuccess:n})})})]},d))})]})]})]})}o.AddDataSource=v,o.DataSourceList=k,o.DeleteDataSource=C,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devtable/settings-form",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -22,32 +22,33 @@
|
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
"scripts": {
|
|
25
|
-
"dev": "vite",
|
|
25
|
+
"dev-build": "tsc && vite build --watch",
|
|
26
26
|
"build": "tsc && vite build",
|
|
27
27
|
"preview": "vite preview"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {},
|
|
30
|
-
"devDependencies": {
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@types/lodash": "^4.14.182",
|
|
32
|
+
"@types/react": "^18.0.0",
|
|
33
|
+
"@types/react-dom": "^18.0.0",
|
|
34
|
+
"@types/react-grid-layout": "^1.3.2",
|
|
35
|
+
"@vitejs/plugin-react": "^1.3.0",
|
|
36
|
+
"rollup-plugin-visualizer": "5.6.0",
|
|
37
|
+
"typescript": "^4.6.3",
|
|
38
|
+
"vite": "^2.9.9",
|
|
39
|
+
"vite-plugin-dts": "^1.1.1"
|
|
40
|
+
},
|
|
31
41
|
"peerDependencies": {
|
|
32
|
-
"@
|
|
33
|
-
"@mantine/
|
|
34
|
-
"@mantine/
|
|
35
|
-
"@mantine/
|
|
36
|
-
"@mantine/
|
|
37
|
-
"@mantine/notifications": "^4.2.12",
|
|
38
|
-
"@mantine/prism": "^4.2.12",
|
|
39
|
-
"@mantine/rte": "^4.2.12",
|
|
42
|
+
"@emotion/react": "11.10.0",
|
|
43
|
+
"@mantine/core": "^5.0.2",
|
|
44
|
+
"@mantine/hooks": "^5.0.2",
|
|
45
|
+
"@mantine/modals": "^5.0.2",
|
|
46
|
+
"@mantine/notifications": "^5.0.2",
|
|
40
47
|
"ahooks": "^3.3.11",
|
|
41
48
|
"axios": "^0.27.2",
|
|
42
|
-
"echarts": "^5.3.2",
|
|
43
|
-
"echarts-for-react": "^3.0.2",
|
|
44
|
-
"echarts-gl": "^2.0.9",
|
|
45
|
-
"echarts-stat": "1.2.0",
|
|
46
49
|
"lodash": "^4.17.21",
|
|
47
|
-
"numbro": "^2.3.6",
|
|
48
50
|
"react": "^16.8.0 || 17.x || 18.x",
|
|
49
51
|
"react-dom": "^16.8.0 || 17.x || 18.x",
|
|
50
|
-
"react-grid-layout": "^1.3.4",
|
|
51
52
|
"react-hook-form": "^7.31.2",
|
|
52
53
|
"tabler-icons-react": "^1.48.0"
|
|
53
54
|
}
|