@devtable/settings-form 1.32.0

package/README.md

@@ -0,0 +1 @@
+# Settings Form

package/dist/api-caller/datasource.d.ts

@@ -0,0 +1,7 @@
+import { DataSourceType, IDataSource, IDataSourceConfig } from "./datasource.typed";
+import { PaginationResponse } from "../../../website/src/api-caller/types";
+export declare const datasource: {
+    list: () => Promise<PaginationResponse<IDataSource>>;
+    create: (type: DataSourceType, key: string, config: IDataSourceConfig) => Promise<PaginationResponse<IDataSource> | false>;
+    delete: (id: string) => Promise<void>;
+};

package/dist/api-caller/datasource.typed.d.ts

@@ -0,0 +1,13 @@
+export declare type DataSourceType = 'postgresql' | 'mysql' | 'http';
+export interface IDataSource {
+    id: string;
+    type: DataSourceType;
+    key: string;
+}
+export interface IDataSourceConfig {
+    host: string;
+    port: number;
+    username: string;
+    password: string;
+    database: string;
+}

package/dist/api-caller/index.d.ts

@@ -0,0 +1,7 @@
+export declare const APICaller: {
+    datasource: {
+        list: () => Promise<import("../../../website/src/api-caller/types").PaginationResponse<import("./datasource.typed").IDataSource>>;
+        create: (type: import("./datasource.typed").DataSourceType, key: string, config: import("./datasource.typed").IDataSourceConfig) => Promise<false | import("../../../website/src/api-caller/types").PaginationResponse<import("./datasource.typed").IDataSource>>;
+        delete: (id: string) => Promise<void>;
+    };
+};

package/dist/datasource/add-data-source.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IAddDataSource {
+    onSuccess: () => void;
+}
+export declare function AddDataSource({ onSuccess }: IAddDataSource): JSX.Element;
+export {};

package/dist/datasource/data-source-list.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DataSourceList(): JSX.Element;

package/dist/datasource/delete-data-source.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function DeleteDataSource({ id, name, onSuccess }: {
+    id: string;
+    name: string;
+    onSuccess: () => void;
+}): JSX.Element;

package/dist/datasource/index.d.ts

@@ -0,0 +1,3 @@
+export * from './add-data-source';
+export * from './data-source-list';
+export * from './delete-data-source';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './datasource';

package/dist/settings-form.es.js

@@ -0,0 +1,419 @@
+import { Modal, Button, Box, SegmentedControl, TextInput, Divider, Group, NumberInput, PasswordInput, Text, LoadingOverlay, Table } from "@mantine/core";
+import { useForm, Controller } from "react-hook-form";
+import { showNotification, updateNotification } from "@mantine/notifications";
+import require$$0 from "react";
+import { PlaylistAdd, Trash } from "tabler-icons-react";
+import axios from "axios";
+import { useRequest } from "ahooks";
+import { useModals } from "@mantine/modals";
+const getRequest = (method) => {
+  return (url, data, options = {}) => {
+    const headers = {
+      "X-Requested-With": "XMLHttpRequest",
+      "Content-Type": options.string ? "application/x-www-form-urlencoded" : "application/json",
+      ...options.headers
+    };
+    const conf = {
+      baseURL: "http://localhost:31200",
+      method,
+      url,
+      params: method === "GET" ? data : options.params,
+      headers
+    };
+    if (["POST", "PUT"].includes(method)) {
+      conf.data = options.string ? JSON.stringify(data) : data;
+    }
+    return axios(conf).then((res) => {
+      return res.data;
+    }).catch((err) => {
+      return Promise.reject(err);
+    });
+  };
+};
+const post = getRequest("POST");
+const datasource = {
+  list: async () => {
+    const res = await post("/datasource/list", {
+      filter: {},
+      sort: {
+        field: "create_time",
+        order: "ASC"
+      },
+      pagination: {
+        page: 1,
+        pagesize: 100
+      }
+    });
+    return res;
+  },
+  create: async (type, key, config) => {
+    try {
+      const res = await post("/datasource/create", { type, key, config });
+      return res;
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+  },
+  delete: async (id) => {
+    await post("/datasource/delete", { id });
+  }
+};
+const APICaller = {
+  datasource
+};
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production_min = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f = require$$0, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
+function q(c, a, g) {
+  var b, d = {}, e = null, h = null;
+  void 0 !== g && (e = "" + g);
+  void 0 !== a.key && (e = "" + a.key);
+  void 0 !== a.ref && (h = a.ref);
+  for (b in a)
+    m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps)
+    for (b in a = c.defaultProps, a)
+      void 0 === d[b] && (d[b] = a[b]);
+  return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+}
+reactJsxRuntime_production_min.Fragment = l;
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
+function AddDataSourceForm({
+  postSubmit
+}) {
+  const {
+    control,
+    handleSubmit,
+    formState: {
+      errors,
+      isValidating,
+      isValid
+    }
+  } = useForm({
+    defaultValues: {
+      type: "postgresql",
+      key: "",
+      config: {
+        host: "",
+        port: 5432,
+        username: "",
+        password: "",
+        database: ""
+      }
+    }
+  });
+  const addDataSource = async ({
+    type,
+    key,
+    config
+  }) => {
+    showNotification({
+      id: "for-creating",
+      title: "Pending",
+      message: "Adding data source...",
+      loading: true
+    });
+    const result = await APICaller.datasource.create(type, key, config);
+    if (!result) {
+      updateNotification({
+        id: "for-creating",
+        title: "Failed",
+        message: "Test connection failed with given info",
+        color: "red"
+      });
+      return;
+    }
+    updateNotification({
+      id: "for-creating",
+      title: "Successful",
+      message: "Data source is added",
+      color: "green"
+    });
+    postSubmit();
+  };
+  return /* @__PURE__ */ jsx(Box, {
+    mx: "auto",
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: handleSubmit(addDataSource),
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: "type",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(SegmentedControl, {
+          fullWidth: true,
+          mb: "md",
+          data: [{
+            label: "PostgreSQL",
+            value: "postgresql"
+          }, {
+            label: "MySQL",
+            value: "mysql"
+          }, {
+            label: "HTTP",
+            value: "http",
+            disabled: true
+          }],
+          ...field
+        })
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "key",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, {
+          mb: "md",
+          required: true,
+          label: "Name",
+          placeholder: "A unique name",
+          ...field
+        })
+      }), /* @__PURE__ */ jsx(Divider, {
+        label: "Connection Info",
+        labelPosition: "center"
+      }), /* @__PURE__ */ jsxs(Group, {
+        direction: "row",
+        grow: true,
+        children: [/* @__PURE__ */ jsx(Controller, {
+          name: "config.host",
+          control,
+          render: ({
+            field
+          }) => /* @__PURE__ */ jsx(TextInput, {
+            mb: "md",
+            required: true,
+            label: "Host",
+            sx: {
+              flexGrow: 1
+            },
+            ...field
+          })
+        }), /* @__PURE__ */ jsx(Controller, {
+          name: "config.port",
+          control,
+          render: ({
+            field
+          }) => /* @__PURE__ */ jsx(NumberInput, {
+            mb: "md",
+            required: true,
+            label: "Port",
+            hideControls: true,
+            sx: {
+              width: "8em"
+            },
+            ...field
+          })
+        })]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "config.username",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, {
+          mb: "md",
+          required: true,
+          label: "Username",
+          ...field
+        })
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "config.password",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(PasswordInput, {
+          mb: "md",
+          required: true,
+          label: "Password",
+          ...field
+        })
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "config.database",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, {
+          mb: "md",
+          required: true,
+          label: "Database",
+          ...field
+        })
+      }), /* @__PURE__ */ jsx(Group, {
+        position: "right",
+        mt: "md",
+        children: /* @__PURE__ */ jsx(Button, {
+          type: "submit",
+          children: "Save"
+        })
+      })]
+    })
+  });
+}
+function AddDataSource({
+  onSuccess
+}) {
+  const [opened, setOpened] = require$$0.useState(false);
+  const open = () => setOpened(true);
+  const close = () => setOpened(false);
+  const postSubmit = () => {
+    onSuccess();
+    close();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Modal, {
+      overflow: "inside",
+      opened,
+      onClose: () => setOpened(false),
+      title: "Add a data source",
+      trapFocus: true,
+      onDragStart: (e) => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsx(AddDataSourceForm, {
+        postSubmit
+      })
+    }), /* @__PURE__ */ jsx(Button, {
+      size: "sm",
+      onClick: open,
+      leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
+        size: 20
+      }),
+      children: "Add a Data Source"
+    })]
+  });
+}
+function DeleteDataSource({
+  id,
+  name,
+  onSuccess
+}) {
+  const modals = useModals();
+  const doDelete = async () => {
+    if (!id) {
+      return;
+    }
+    showNotification({
+      id: "for-deleting",
+      title: "Pending",
+      message: "Deleting data source...",
+      loading: true
+    });
+    await APICaller.datasource.delete(id);
+    updateNotification({
+      id: "for-deleting",
+      title: "Successful",
+      message: `Data source [${name}] is deleted`,
+      color: "green"
+    });
+    onSuccess();
+  };
+  const confirmAndDelete = () => modals.openConfirmModal({
+    title: "Delete this data source?",
+    children: /* @__PURE__ */ jsx(Text, {
+      size: "sm",
+      children: "This action won't affect your database."
+    }),
+    labels: {
+      confirm: "Confirm",
+      cancel: "Cancel"
+    },
+    onCancel: () => console.log("Cancel"),
+    onConfirm: doDelete
+  });
+  return /* @__PURE__ */ jsx(Button, {
+    size: "sm",
+    color: "red",
+    onClick: confirmAndDelete,
+    leftIcon: /* @__PURE__ */ jsx(Trash, {
+      size: 20
+    }),
+    children: "Delete"
+  });
+}
+function DataSourceList() {
+  const {
+    data = [],
+    loading,
+    refresh
+  } = useRequest(async () => {
+    const {
+      data: data2
+    } = await APICaller.datasource.list();
+    return data2;
+  }, {
+    refreshDeps: []
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Group, {
+      pt: "md",
+      position: "right",
+      children: /* @__PURE__ */ jsx(AddDataSource, {
+        onSuccess: refresh
+      })
+    }), /* @__PURE__ */ jsxs(Box, {
+      mt: "xl",
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+        visible: loading
+      }), /* @__PURE__ */ jsxs(Table, {
+        horizontalSpacing: "md",
+        verticalSpacing: "md",
+        fontSize: "md",
+        highlightOnHover: true,
+        children: [/* @__PURE__ */ jsx("thead", {
+          children: /* @__PURE__ */ jsxs("tr", {
+            children: [/* @__PURE__ */ jsx("th", {
+              children: "Type"
+            }), /* @__PURE__ */ jsx("th", {
+              children: "Name"
+            }), /* @__PURE__ */ jsx("th", {
+              children: "Action"
+            })]
+          })
+        }), /* @__PURE__ */ jsx("tbody", {
+          children: data.map(({
+            id,
+            key,
+            type
+          }) => /* @__PURE__ */ jsxs("tr", {
+            children: [/* @__PURE__ */ jsx("td", {
+              width: 200,
+              children: type
+            }), /* @__PURE__ */ jsx("td", {
+              children: key
+            }), /* @__PURE__ */ jsx("td", {
+              width: 200,
+              children: /* @__PURE__ */ jsx(Group, {
+                position: "left",
+                children: /* @__PURE__ */ jsx(DeleteDataSource, {
+                  id,
+                  name: key,
+                  onSuccess: refresh
+                })
+              })
+            })]
+          }, key))
+        })]
+      })]
+    })]
+  });
+}
+export { AddDataSource, DataSourceList, DeleteDataSource };

package/dist/settings-form.umd.js

@@ -0,0 +1,9 @@
+(function(o,a){typeof exports=="object"&&typeof module!="undefined"?a(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"],a):(o=typeof globalThis!="undefined"?globalThis:o||self,a(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,a,c,m,v,b,C,T,P){"use strict";function y(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var x=y(v),O=y(C);const g=(t=>(r,i,n={})=>{const s={"X-Requested-With":"XMLHttpRequest","Content-Type":n.string?"application/x-www-form-urlencoded":"application/json",...n.headers},l={baseURL:"http://localhost:31200",method:t,url:r,params:t==="GET"?i:n.params,headers:s};return["POST","PUT"].includes(t)&&(l.data=n.string?JSON.stringify(i):i),O.default(l).then(u=>u.data).catch(u=>Promise.reject(u))})("POST"),S={datasource:{list:async()=>await g("/datasource/list",{filter:{},sort:{field:"create_time",order:"ASC"},pagination:{page:1,pagesize:100}}),create:async(t,r,i)=>{try{return await g("/datasource/create",{type:t,key:r,config:i})}catch(n){return console.error(n),!1}},delete:async t=>{await g("/datasource/delete",{id:t})}}};var p={exports:{}},h={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var j=x.default,A=Symbol.for("react.element"),R=Symbol.for("react.fragment"),I=Object.prototype.hasOwnProperty,N=j.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,L={key:!0,ref:!0,__self:!0,__source:!0};function w(t,r,i){var n,s={},l=null,u=null;i!==void 0&&(l=""+i),r.key!==void 0&&(l=""+r.key),r.ref!==void 0&&(u=r.ref);for(n in r)I.call(r,n)&&!L.hasOwnProperty(n)&&(s[n]=r[n]);if(t&&t.defaultProps)for(n in r=t.defaultProps,r)s[n]===void 0&&(s[n]=r[n]);return{$$typeof:A,type:t,key:l,ref:u,props:s,_owner:N.current}}h.Fragment=R,h.jsx=w,h.jsxs=w,p.exports=h;const e=p.exports.jsx,f=p.exports.jsxs,_=p.exports.Fragment;function z({postSubmit:t}){const{control:r,handleSubmit:i,formState:{errors:n,isValidating:s,isValid:l}}=c.useForm({defaultValues:{type:"postgresql",key:"",config:{host:"",port:5432,username:"",password:"",database:""}}}),u=async({type:d,key:M,config:k})=>{if(m.showNotification({id:"for-creating",title:"Pending",message:"Adding data source...",loading:!0}),!await S.datasource.create(d,M,k)){m.updateNotification({id:"for-creating",title:"Failed",message:"Test connection failed with given info",color:"red"});return}m.updateNotification({id:"for-creating",title:"Successful",message:"Data source is added",color:"green"}),t()};return e(a.Box,{mx:"auto",children:f("form",{onSubmit:i(u),children:[e(c.Controller,{name:"type",control:r,render:({field:d})=>e(a.SegmentedControl,{fullWidth:!0,mb:"md",data:[{label:"PostgreSQL",value:"postgresql"},{label:"MySQL",value:"mysql"},{label:"HTTP",value:"http",disabled:!0}],...d})}),e(c.Controller,{name:"key",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Name",placeholder:"A unique name",...d})}),e(a.Divider,{label:"Connection Info",labelPosition:"center"}),f(a.Group,{direction:"row",grow:!0,children:[e(c.Controller,{name:"config.host",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Host",sx:{flexGrow:1},...d})}),e(c.Controller,{name:"config.port",control:r,render:({field:d})=>e(a.NumberInput,{mb:"md",required:!0,label:"Port",hideControls:!0,sx:{width:"8em"},...d})})]}),e(c.Controller,{name:"config.username",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Username",...d})}),e(c.Controller,{name:"config.password",control:r,render:({field:d})=>e(a.PasswordInput,{mb:"md",required:!0,label:"Password",...d})}),e(c.Controller,{name:"config.database",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Database",...d})}),e(a.Group,{position:"right",mt:"md",children:e(a.Button,{type:"submit",children:"Save"})})]})})}function q({onSuccess:t}){const[r,i]=x.default.useState(!1),n=()=>i(!0),s=()=>i(!1),l=()=>{t(),s()};return f(_,{children:[e(a.Modal,{overflow:"inside",opened:r,onClose:()=>i(!1),title:"Add a data source",trapFocus:!0,onDragStart:u=>{u.stopPropagation()},children:e(z,{postSubmit:l})}),e(a.Button,{size:"sm",onClick:n,leftIcon:e(b.PlaylistAdd,{size:20}),children:"Add a Data Source"})]})}function D({id:t,name:r,onSuccess:i}){const n=P.useModals(),s=async()=>{!t||(m.showNotification({id:"for-deleting",title:"Pending",message:"Deleting data source...",loading:!0}),await S.datasource.delete(t),m.updateNotification({id:"for-deleting",title:"Successful",message:`Data source [${r}] is deleted`,color:"green"}),i())},l=()=>n.openConfirmModal({title:"Delete this data source?",children:e(a.Text,{size:"sm",children:"This action won't affect your database."}),labels:{confirm:"Confirm",cancel:"Cancel"},onCancel:()=>console.log("Cancel"),onConfirm:s});return e(a.Button,{size:"sm",color:"red",onClick:l,leftIcon:e(b.Trash,{size:20}),children:"Delete"})}function E(){const{data:t=[],loading:r,refresh:i}=T.useRequest(async()=>{const{data:n}=await S.datasource.list();return n},{refreshDeps:[]});return f(_,{children:[e(a.Group,{pt:"md",position:"right",children:e(q,{onSuccess:i})}),f(a.Box,{mt:"xl",sx:{position:"relative"},children:[e(a.LoadingOverlay,{visible:r}),f(a.Table,{horizontalSpacing:"md",verticalSpacing:"md",fontSize:"md",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:n,key:s,type:l})=>f("tr",{children:[e("td",{width:200,children:l}),e("td",{children:s}),e("td",{width:200,children:e(a.Group,{position:"left",children:e(D,{id:n,name:s,onSuccess:i})})})]},s))})]})]})]})}o.AddDataSource=q,o.DataSourceList=E,o.DeleteDataSource=D,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@devtable/settings-form",
+  "version": "1.32.0",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/settings-form.umd.js",
+  "module": "./dist/settings-form.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/settings-form.es.js",
+      "require": "./dist/settings-form.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "peerDependencies": {
+    "@mantine/core": "^4.2.12",
+    "@mantine/dates": "^4.2.12",
+    "@mantine/form": "^4.2.12",
+    "@mantine/hooks": "^4.2.12",
+    "@mantine/modals": "^4.2.12",
+    "@mantine/notifications": "^4.2.12",
+    "@mantine/prism": "^4.2.12",
+    "@mantine/rte": "^4.2.12",
+    "ahooks": "^3.3.11",
+    "axios": "^0.27.2",
+    "echarts": "^5.3.2",
+    "echarts-for-react": "^3.0.2",
+    "echarts-gl": "^2.0.9",
+    "echarts-stat": "1.2.0",
+    "lodash": "^4.17.21",
+    "numbro": "^2.3.6",
+    "react": "^16.8.0 || 17.x || 18.x",
+    "react-dom": "^16.8.0 || 17.x || 18.x",
+    "react-grid-layout": "^1.3.4",
+    "react-hook-form": "^7.31.2",
+    "tabler-icons-react": "^1.48.0"
+  }
+}