initial value script configuration

2026-07-12 13:28:48 +02:00 · 2021-01-17 23:13:10 +08:00
parent ee1aa6b17d
commit 9cb288ddb9
28 changed files with 113 additions and 104 deletions
--- a/www/src/components/SideDrawer/Form/index.tsx
+++ b/www/src/components/SideDrawer/Form/index.tsx
@@ -31,9 +31,9 @@ export default function Form({ values }: IFormProps) {

  // Get initial values from fields config
  const initialValues = fields.reduce(
-    (a, { key, type }) => ({
+    (a, { key, type,config }) => ({
      ...a,
-      [key]: getFieldProp("initialValue", type),
+      [key]:config.initialValue?? getFieldProp("initialValue", type),
    }),
    {}
  );
--- a/www/src/components/Table/ColumnMenu/Settings/InitialValueInput.tsx
+++ b/www/src/components/Table/ColumnMenu/Settings/InitialValueInput.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import SettingsHeading from "./SettingsHeading";
+import {
+    Typography,
+  } from "@material-ui/core";
+import { getFieldProp } from "components/fields";
+//import { useForm } from "react-hook-form";
+import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import CodeEditor from 'components/CodeEditor';
+const InitialValueInput =({config,handleChange,fieldType})=>{
+
+    const customFieldInput = getFieldProp("SideDrawerField", fieldType);
+
+    const [tab, setTab] = React.useState(1);
+
+    const handleChangeTable = (event: React.ChangeEvent<{}>, newValue: number) => {
+      setTab(newValue);
+    
+    };
+  
+    
+
+
+    return <>
+       <SettingsHeading>Default value</SettingsHeading>
+          <Typography color="textSecondary" paragraph>
+            The default value will be the initial value of the cells, whenever a
+            new row is added.
+          </Typography> 
+
+          <Paper square>
+      <Tabs
+        value={tab}
+        indicatorColor="primary"
+        textColor="primary"
+        onChange={handleChangeTable}
+        aria-label="disabled tabs example"
+      >
+        <Tab label="Static" disabled />
+        <Tab label="Dynamic" />
+      </Tabs>
+      <CodeEditor
+                      height={120}
+                      value={config["initialValue.script"]}
+                      onChange={handleChange("initialValue.script")}
+                      editorOptions={{ 
+                        minimap: {
+                        enabled: false,
+                      }
+                    }}
+                    />
+    </Paper>
+          {/* <>render field component here</> */} 
+          {/* {customFieldInput && 
+          <form>
+              {React.createElement(customFieldInput, {
+            column: {},
+            control,
+            docRef:{},
+            disabled: false,
+          })}
+          </form>} */}
+    </>
+}
+
+export default InitialValueInput
--- a/www/src/components/Table/ColumnMenu/Settings/index.tsx
+++ b/www/src/components/Table/ColumnMenu/Settings/index.tsx
@@ -17,6 +17,7 @@ import OptionsInput from "./ConfigFields/OptionsInput";
 import _sortBy from "lodash/sortBy";
 import { getFieldProp } from "components/fields";
 import SettingsHeading from "./SettingsHeading";
+import InitialValueInput from "./InitialValueInput"
 const ConfigFields = ({ fieldType, config, handleChange }) => {
  switch (fieldType) {
    case FieldType.longText:
@@ -137,6 +138,10 @@ export default function FormDialog({
 }) {
  const [newConfig, setNewConfig] = useState(config ?? {});
  const customFieldSettings = getFieldProp("settings", type);
+  const initializable = getFieldProp("initializable", type);
+  const handleChange = (key) => (update) => {
+    setNewConfig({ ...newConfig, [key]: update });
+  }
  return (
    <div>
      <Dialog
@@ -165,7 +170,7 @@ export default function FormDialog({
            </IconButton>
          </Grid>

-          <SettingsHeading style={{ marginTop: 0 }}>Required?</SettingsHeading>
+          {initializable && <><SettingsHeading style={{ marginTop: 0 }}>Required?</SettingsHeading>
          <Typography color="textSecondary" paragraph>
            The row will not be created or updated unless all required values
            are set.
@@ -184,19 +189,12 @@ export default function FormDialog({
              name="required"
            />
          </Grid>
-
-          {/* <SettingsHeading>Default value</SettingsHeading>
-          <Typography color="textSecondary" paragraph>
-            The default value will be the initial value of the cells, whenever a
-            new row is added.
-          </Typography> */}
-          {/* <>render field component here</> */}
-
-          {React.createElement(customFieldSettings, {
+          <InitialValueInput fieldType={type} config={newConfig} handleChange={handleChange}/>
+              </>}
+              
+          {customFieldSettings && React.createElement(customFieldSettings, {
            config: newConfig,
-            handleChange: (key) => (update) => {
-              setNewConfig({ ...newConfig, [key]: update });
-            },
+            handleChange
          })}

          {/* {
--- a/www/src/components/Table/ColumnMenu/index.tsx
+++ b/www/src/components/Table/ColumnMenu/index.tsx
@@ -100,7 +100,7 @@ export default function ColumnMenu() {
    setTimeout(() => setSelectedColumnHeader(null), 300);
  };

-  const isConfigurable = Boolean(getFieldProp("settings", column?.type));
+  const isConfigurable = Boolean(getFieldProp("settings", column?.type) || getFieldProp("initializable", column?.type));
  if (!column) return null;
  const isSorted = orderBy?.[0]?.key === (column.key as string);
  const isAsc = isSorted && orderBy?.[0]?.direction === "asc";
--- a/www/src/components/fields/Action/index.tsx
+++ b/www/src/components/fields/Action/index.tsx
@@ -19,13 +19,13 @@ export const config: IFieldConfig = {
  type: FieldType.action,
  name: "Action",
  dataType: "any",
-  initialValue: null,
+  initialValue: undefined,
  icon: <ActionIcon />,
  description:
    "A button with a pre-defined action. Triggers a Cloud Function. 3 different states: Disabled, Enabled, Active (Clicked). Supports Undo and Redo.",
  TableCell: withCustomCell(TableCell, BasicCell),
  TableEditor: NullEditor,
  SideDrawerField,
-  settings:Settings
+  settings:Settings,
 };
 export default config;
--- a/www/src/components/fields/Aggregate/index.tsx
+++ b/www/src/components/fields/Aggregate/index.tsx
@@ -10,10 +10,10 @@ export const config: IFieldConfig = {
  type: FieldType.aggregate,
  name: "Aggregate",
  dataType: "string",
-  initialValue:
-    "Value aggregated from a specified sub-table of the row. Displayed using any other field type. Requires Cloud Function setup.",
+  initialValue: undefined,
+  initializable:false,
  icon: <AggregateIcon />,
-  description: "Numeric data.",
+  description: "Value aggregated from a specified sub-table of the row. Displayed using any other field type. Requires Cloud Function setup.",
  TableCell: withCustomCell(BasicCell as any, BasicCell),
  TableEditor: NullEditor,
  SideDrawerField: BasicCell as any,
--- a/www/src/components/fields/Checkbox/index.tsx
+++ b/www/src/components/fields/Checkbox/index.tsx
@@ -22,6 +22,7 @@ export const config: IFieldConfig = {
  name: "Checkbox",
  dataType: "boolean",
  initialValue: false,
+  initializable: true,
  icon: <CheckboxIcon />,
  description: "Either checked or unchecked. Unchecked by default.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/Code/index.tsx
+++ b/www/src/components/fields/Code/index.tsx
@@ -19,6 +19,7 @@ export const config: IFieldConfig = {
  name: "Code",
  dataType: "string",
  initialValue: undefined,
+  initializable: true,
  icon: <CodeIcon />,
  description: "Raw code editable with Monaco Editor.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/Color/index.tsx
+++ b/www/src/components/fields/Color/index.tsx
@@ -19,6 +19,7 @@ export const config: IFieldConfig = {
  name: "Color",
  dataType: "Record<string, any>",
  initialValue: undefined,
+  initializable: true,
  icon: <ColorIcon />,
  description: "Visual color picker. Supports Hex, RGBA, HSLA.",
  TableCell: withPopoverCell(PopoverCell, PopoverBasicCell, {
--- a/www/src/components/fields/Date/index.tsx
+++ b/www/src/components/fields/Date/index.tsx
@@ -19,7 +19,8 @@ export const config: IFieldConfig = {
  type: FieldType.date,
  name: "Date",
  dataType: "firebase.firestore.Timestamp",
-  initialValue: null,
+  initialValue: undefined,
+  initializable: true,
  icon: <DateIcon />,
  description:
    "Date displayed and input as YYYY/MM/DD or input using a picker module.",
--- a/www/src/components/fields/DateTime/index.tsx
+++ b/www/src/components/fields/DateTime/index.tsx
@@ -21,7 +21,8 @@ export const config: IFieldConfig = {
  type: FieldType.dateTime,
  name: "Time & Date",
  dataType: "firebase.firestore.Timestamp",
-  initialValue: null,
+  initialValue: undefined,
+  initializable: true,
  icon: <DateTimeIcon />,
  description:
    "Time and Date can be written as YYYY/MM/DD hh:mm (am/pm) or input using a picker module.",
--- a/www/src/components/fields/Derivative/index.tsx
+++ b/www/src/components/fields/Derivative/index.tsx
@@ -10,10 +10,10 @@ export const config: IFieldConfig = {
  type: FieldType.derivative,
  name: "Derivative",
  dataType: "string",
-  initialValue:
-    "Value derived from the rest of the row’s values. Displayed using any other field type. Requires Cloud Function setup.",
+  initialValue:undefined,
+  initializable: true,
  icon: <DerivativeIcon />,
-  description: "Numeric data.",
+  description: "Value derived from the rest of the row’s values. Displayed using any other field type. Requires Cloud Function setup.",
  TableCell: withCustomCell(BasicCell as any, BasicCell),
  TableEditor: NullEditor,
  SideDrawerField: BasicCell as any,
--- a/www/src/components/fields/Duration/index.tsx
+++ b/www/src/components/fields/Duration/index.tsx
@@ -21,7 +21,7 @@ export const config: IFieldConfig = {
  name: "Duration",
  dataType:
    "{ start: firebase.firestore.Timestamp, end?: firebase.firestore.Timestamp }",
-  initialValue: null,
+  initialValue: undefined,
  icon: <DurationIcon />,
  description: "Duration calculated from two timestamps.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/Email/index.tsx
+++ b/www/src/components/fields/Email/index.tsx
@@ -19,6 +19,7 @@ export const config: IFieldConfig = {
  name: "Email",
  dataType: "string",
  initialValue: "",
+  initializable:true,
  icon: <EmailIcon />,
  description: "Email address. Firetable does not validate emails.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/Json/index.tsx
+++ b/www/src/components/fields/Json/index.tsx
@@ -24,6 +24,7 @@ export const config: IFieldConfig = {
  name: "JSON",
  dataType: "any",
  initialValue: undefined,
+  initializable:true,
  icon: <JsonIcon />,
  description: "JSON object editable with a visual JSON editor.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/LongText/index.tsx
+++ b/www/src/components/fields/LongText/index.tsx
@@ -21,6 +21,7 @@ export const config: IFieldConfig = {
  name: "Short Text",
  dataType: "string",
  initialValue: "",
+  initializable:true,
  icon: <LongTextIcon />,
  description: "Large amount of text, such as sentences and paragraphs.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/MultiSelect/index.tsx
+++ b/www/src/components/fields/MultiSelect/index.tsx
@@ -22,6 +22,7 @@ export const config: IFieldConfig = {
  name: "Multi Select",
  dataType: "string[]",
  initialValue: [],
+  initializable:true,
  icon: <MultiSelectIcon />,
  description:
    "Dropdown selector with searchable options and check box behavior. Optionally allows users to input custom values. Max selection: all options.",
--- a/www/src/components/fields/Number/index.tsx
+++ b/www/src/components/fields/Number/index.tsx
@@ -19,6 +19,7 @@ export const config: IFieldConfig = {
  name: "Number",
  dataType: "number",
  initialValue: undefined,
+  initializable:true,
  icon: <NumberIcon />,
  description: "Numeric data.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/Percentage/index.tsx
+++ b/www/src/components/fields/Percentage/index.tsx
@@ -21,6 +21,7 @@ export const config: IFieldConfig = {
  name: "Percentage",
  dataType: "number",
  initialValue: undefined,
+  initializable:true,
  icon: <PercentageIcon />,
  description: "Percentage stored as a number between 0 and 1.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/Phone/index.tsx
+++ b/www/src/components/fields/Phone/index.tsx
@@ -19,6 +19,7 @@ export const config: IFieldConfig = {
  name: "Phone",
  dataType: "string",
  initialValue: "",
+  initializable:true,
  icon: <PhoneIcon />,
  description:
    "Phone numbers stored as text. Firetable does not validate phone numbers.",
--- a/www/src/components/fields/Rating/index.tsx
+++ b/www/src/components/fields/Rating/index.tsx
@@ -22,6 +22,7 @@ export const config: IFieldConfig = {
  name: "Rating",
  dataType: "number",
  initialValue: undefined,
+  initializable: true,
  icon: <RatingIcon />,
  description:
    "Rating displayed as stars from 0 to configurable number of stars. Default: 5 stars.",
--- a/www/src/components/fields/RichText/index.tsx
+++ b/www/src/components/fields/RichText/index.tsx
@@ -21,6 +21,7 @@ export const config: IFieldConfig = {
  name: "Rich Text",
  dataType: "string",
  initialValue: undefined,
+  initializable:true,
  icon: <RichTextIcon />,
  description: "Rich text editor with predefined HTML text styles.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/ShortText/index.tsx
+++ b/www/src/components/fields/ShortText/index.tsx
@@ -24,6 +24,7 @@ export const config: IFieldConfig = {
  name: "Short Text",
  dataType: "string",
  initialValue: "",
+  initializable:true,
  icon: <ShortTextIcon />,
  description: "Small amount of text, such as names and taglines.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/SingleSelect/index.tsx
+++ b/www/src/components/fields/SingleSelect/index.tsx
@@ -22,6 +22,7 @@ export const config: IFieldConfig = {
  name: "Single Select",
  dataType: "string | null",
  initialValue: null,
+  initializable:true,
  icon: <SingleSelectIcon />,
  description:
    "Dropdown selector with searchable options and radio button behavior. Optionally allows users to input custom values. Max selection: 1 option.",
--- a/www/src/components/fields/Slider/index.tsx
+++ b/www/src/components/fields/Slider/index.tsx
@@ -22,6 +22,7 @@ export const config: IFieldConfig = {
  name: "Slider",
  dataType: "number",
  initialValue: undefined,
+  initializable:true,
  icon: <SliderIcon />,
  description: "Slider with adjustable range. Returns a numeric value.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/SubTable/Settings.tsx
+++ b/www/src/components/fields/SubTable/Settings.tsx
@@ -1,77 +0,0 @@
-import React , { useState, lazy, Suspense } from 'react';
-import {
-    Typography,
-    IconButton,
-    TextField,
-    Switch,
-    FormControlLabel,
-    Divider,
-  } from "@material-ui/core"
-import MultiSelect from "@antlerengineering/multiselect";
-import FieldSkeleton from "components/SideDrawer/Form/FieldSkeleton";
-import { FieldType } from "constants/fields";
-import FieldsDropdown from "components/Table/ColumnMenu/FieldsDropdown";
-const CodeEditor = lazy(
-    () => import("components/Table/editors/CodeEditor" /* webpackChunkName: "CodeEditor" */)
-  );
-
-const Settings = ({
-  fieldType,
-  config,
-  handleChange,
-  tables,
-  columns,
-  roles,
-})=>{
-
-  return (
-    <>
-
-      <MultiSelect
-            label={"Listener fields (this script runs when these fields change)"}
-            options={columns//.filter(column => column.key)
-            }
-            value={config.listenerFields ?? []}
-            onChange={handleChange("listenerFields")}
-          />
-      <Typography variant="overline">derivative script</Typography>
-      <Suspense fallback={<FieldSkeleton height={200} />}>
-        <CodeEditor
-          script={config.script}
-          handleChange={handleChange("script")}
-        />
-      </Suspense>
-
-      <Typography variant="overline">Field type of the output</Typography>
-      <FieldsDropdown
-        value={config.renderFieldType}
-        options={Object.values(FieldType).filter(
-          (f) =>
-            ![
-              FieldType.derivative,
-              FieldType.aggregate,
-              FieldType.subTable,
-              FieldType.action,
-            ].includes(f)
-        )}
-        onChange={(newType: any) => {
-          handleChange("renderFieldType")(newType.target.value);
-        }}
-      />
-      {config.renderFieldType && (
-        <>
-          <Typography variant="overline"> Rendered field config</Typography>
-          {/* <ConfigFields
-            fieldType={config.renderFieldType}
-            config={config}
-            handleChange={handleChange}
-            tables={tables}
-            columns={columns}
-            roles={roles}
-          /> */}
-        </>
-      )}
-    </>
-  );
-}
-export default Settings
--- a/www/src/components/fields/Url/index.tsx
+++ b/www/src/components/fields/Url/index.tsx
@@ -19,6 +19,7 @@ export const config: IFieldConfig = {
  name: "URL",
  dataType: "string",
  initialValue: "",
+  initializable:true,
  icon: <UrlIcon />,
  description: "Web address. Firetable does not validate URLs.",
  TableCell: withCustomCell(TableCell, BasicCell),
--- a/www/src/components/fields/types.ts
+++ b/www/src/components/fields/types.ts
@@ -10,6 +10,7 @@ export interface IFieldConfig {
  type: FieldType;
  name: string;
  dataType: string;
+  initializable?:Boolean;
  initialValue: any;
  icon?: React.ReactNode;
  description?: string;
@@ -20,6 +21,7 @@ export interface IFieldConfig {
  settings?: React.ComponentType<ISettingsProps>;
  csvExport?: (value: any) => string;
  csvImportParser?: (value: string) => any;
+  
 }

 export interface ICustomCellProps extends FormatterProps<any> {