Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-24 23:49:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

FieldsDropdown: add grouping

Browse Source
This commit is contained in:
Sidney Alcantara
2021-09-09 23:31:31 +10:00
parent f1ba1030bc
commit c3cf46656a
41 changed files with 98 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Modal/index.tsx
View File

@@ -83,7 +83,10 @@ export default function Modal({
}
>
<Stack direction="row" alignItems="flex-start">
<DialogTitle id="modal-title" style={{ flexGrow: 1 }}>
<DialogTitle
id="modal-title"
style={{ flexGrow: 1, userSelect: "none" }}
>
{title}
</DialogTitle>

95
src/components/Table/ColumnMenu/FieldsDropdown.tsx
View File

@@ -1,34 +1,13 @@
import { makeStyles, createStyles } from "@material-ui/styles";
import {
TextField,
MenuItem,
ListItemIcon,
TextFieldProps,
} from "@material-ui/core";
import MultiSelect from "@antlerengineering/multiselect";
import { ListItemIcon } from "@material-ui/core";
import { FIELDS } from "components/fields";
import { FieldType } from "constants/fields";
import { getFieldProp } from "components/fields";
const useStyles = makeStyles((theme) =>
createStyles({
helperText: {
...theme.typography.body2,
marginTop: theme.spacing(1),
},
listItemIcon: {
verticalAlign: "text-bottom",
minWidth: theme.spacing(5),
"& svg": { margin: theme.spacing(-0.5, 0) },
},
})
);
export interface IFieldsDropdownProps {
value: FieldType;
onChange: TextFieldProps["onChange"];
className?: string;
onChange: (value: FieldType) => void;
hideLabel?: boolean;
options?: FieldType[];
}
@@ -39,42 +18,58 @@ export interface IFieldsDropdownProps {
export default function FieldsDropdown({
value,
onChange,
className,
hideLabel = false,
options: optionsProp,
}: IFieldsDropdownProps) {
const classes = useStyles();
const options = optionsProp
? FIELDS.filter((fieldConfig) => optionsProp.indexOf(fieldConfig.type) > -1)
: FIELDS;
return (
<TextField
fullWidth
select
<MultiSelect
multiple={false}
value={value ? value : ""}
onChange={onChange}
inputProps={{ name: "type", id: "type" }}
label={!hideLabel ? "Field Type" : ""}
aria-label="Field Type"
hiddenLabel={hideLabel}
helperText={value && getFieldProp("description", value)}
FormHelperTextProps={{ classes: { root: classes.helperText } }}
className={className}
>
{options.map((fieldConfig) => (
<MenuItem
key={`select-field-${fieldConfig.type}`}
id={`select-field-${fieldConfig.type}`}
value={fieldConfig.type}
>
<ListItemIcon className={classes.listItemIcon}>
{fieldConfig.icon}
options={options.map((fieldConfig) => ({
label: fieldConfig.name,
value: fieldConfig.type,
}))}
{...({
AutocompleteProps: {
groupBy: (option) => getFieldProp("group", option.value),
},
} as any)}
itemRenderer={(option) => (
<>
<ListItemIcon style={{ minWidth: 40 }}>
{getFieldProp("icon", option.value as FieldType)}
</ListItemIcon>
{fieldConfig.name}
</MenuItem>
))}
</TextField>
{option.label}
</>
)}
label="Field Type"
labelPlural="Field Types"
TextFieldProps={{
hiddenLabel: hideLabel,
helperText: value && getFieldProp("description", value),
SelectProps: {
displayEmpty: true,
renderValue: () => (
<>
<ListItemIcon
sx={{
minWidth: 40,
verticalAlign: "text-bottom",
"& svg": { my: -0.5 },
}}
>
{getFieldProp("icon", value as FieldType)}
</ListItemIcon>
{getFieldProp("name", value as FieldType)}
</>
),
},
}}
/>
);
}

5
src/components/Table/ColumnMenu/NewColumn.tsx
View File

@@ -89,10 +89,7 @@ export default function FormDialog({
</section>
<section>
<FieldsDropdown
value={type}
onChange={(newType) => setType(newType.target.value as FieldType)}
/>
<FieldsDropdown value={type} onChange={setType} />
</section>
</>
}

13
src/components/Table/ColumnMenu/TypeChange.tsx
View File

@@ -19,14 +19,7 @@ export default function FormDialog({
<Modal
onClose={handleClose}
title="Change Column Type"
children={
<FieldsDropdown
value={newType}
onChange={(newType: any) => {
setType(newType.target.value);
}}
/>
}
children={<FieldsDropdown value={newType} onChange={setType} />}
actions={{
primary: {
onClick: () => {
@@ -39,10 +32,6 @@ export default function FormDialog({
},
children: "Update",
},
secondary: {
onClick: handleClose,
children: "Cancel",
},
}}
maxWidth="xs"
/>

4
src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
View File

@@ -43,9 +43,9 @@ export default function Step2NewColumns({
const [fieldToEdit, setFieldToEdit] = useState(0);
const handleChange = (e) => {
const handleChange = (v) => {
const newColumns = [...config.newColumns];
newColumns[fieldToEdit].type = e.target.value;
newColumns[fieldToEdit].type = v;
setConfig((config) => ({ ...config, newColumns }));
};

3
src/components/Wizards/ImportWizard/Step3Types.tsx
View File

@@ -37,8 +37,7 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
const [fieldToEdit, setFieldToEdit] = useState(Object.keys(config)[0]);
const handleChange = (e) =>
updateConfig({ [fieldToEdit]: { type: e.target.value } });
const handleChange = (v) => updateConfig({ [fieldToEdit]: { type: v } });
const { tableState } = useProjectContext();

1
src/components/fields/Action/index.tsx
View File

@@ -19,6 +19,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.action,
name: "Action",
group: "Cloud Function",
dataType: "any",
initialValue: {},
icon: <ActionIcon />,

4
src/components/fields/Aggregate/Settings.tsx
View File

@@ -67,8 +67,8 @@ switch (triggerType){
FieldType.action,
].includes(f)
)}
onChange={(newType: any) => {
handleChange("renderFieldType")(newType.target.value);
onChange={(value) => {
handleChange("renderFieldType")(value);
}}
/>
</>

1
src/components/fields/Aggregate/index.tsx
View File

@@ -8,6 +8,7 @@ import NullEditor from "components/Table/editors/NullEditor";
export const config: IFieldConfig = {
type: FieldType.aggregate,
name: "Aggregate",
group: "Cloud Function",
dataType: "string",
initialValue: "",
initializable: false,

1
src/components/fields/Checkbox/index.tsx
View File

@@ -19,6 +19,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.checkbox,
name: "Toggle",
group: "Numeric",
dataType: "boolean",
initialValue: false,
initializable: true,

1
src/components/fields/Code/index.tsx
View File

@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.code,
name: "Code",
group: "Code",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/Color/index.tsx
View File

@@ -18,6 +18,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.color,
name: "Color",
group: "Numeric",
dataType: "Record<string, any>",
initialValue: {},
initializable: true,

1
src/components/fields/ConnectService/index.tsx
View File

@@ -24,6 +24,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.connectService,
name: "Connect Service",
group: "Connection",
dataType: "{ docPath: string; snapshot: Record<string, any>; }",
initialValue: [],
icon: <ConnectServiceIcon />,

1
src/components/fields/ConnectTable/index.tsx
View File

@@ -24,6 +24,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.connectTable,
name: "Connect Table",
group: "Connection",
dataType: "{ docPath: string; snapshot: Record<string, any>; }",
initialValue: [],
icon: <ConnectTableIcon />,

1
src/components/fields/Date/index.tsx
View File

@@ -21,6 +21,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.date,
name: "Date",
group: "Date & Time",
dataType: "firebase.firestore.Timestamp",
initialValue: null,
initializable: true,

1
src/components/fields/DateTime/index.tsx
View File

@@ -20,6 +20,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.dateTime,
name: "Time & Date",
group: "Date & Time",
dataType: "firebase.firestore.Timestamp",
initialValue: null,
initializable: true,

4
src/components/fields/Derivative/Settings.tsx
View File

@@ -50,8 +50,8 @@ const Settings = ({ config, handleChange }) => {
FieldType.action,
].includes(f)
)}
onChange={(newType: any) => {
handleChange("renderFieldType")(newType.target.value);
onChange={(value) => {
handleChange("renderFieldType")(value);
}}
/>
</Grid>

1
src/components/fields/Derivative/index.tsx
View File

@@ -9,6 +9,7 @@ import Settings from "./Settings";
export const config: IFieldConfig = {
type: FieldType.derivative,
name: "Derivative",
group: "Cloud Function",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/Duration/index.tsx
View File

@@ -19,6 +19,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.duration,
name: "Duration",
group: "Date & Time",
dataType:
"{ start: firebase.firestore.Timestamp, end?: firebase.firestore.Timestamp }",
initialValue: {},

1
src/components/fields/Email/index.tsx
View File

@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.email,
name: "Email",
group: "Text",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/File/index.tsx
View File

@@ -17,6 +17,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.file,
name: "File",
group: "File",
dataType:
"{ downloadURL: string, lastModifiedTS: number, name: string, type, ref }[]",
initialValue: [],

1
src/components/fields/Id/index.tsx
View File

@@ -16,6 +16,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.id,
name: "ID",
group: "Metadata",
dataType: "undefined",
initialValue: "",
icon: <IdIcon />,

1
src/components/fields/Image/index.tsx
View File

@@ -17,6 +17,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.image,
name: "Image",
group: "File",
dataType:
"{ downloadURL: string, lastModifiedTS: number, name: string, type, ref }[]",
initialValue: [],

1
src/components/fields/Json/index.tsx
View File

@@ -18,6 +18,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.json,
name: "JSON",
group: "Code",
dataType: "any",
initialValue: {},
initializable: true,

1
src/components/fields/LongText/index.tsx
View File

@@ -16,6 +16,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.longText,
name: "Long Text",
group: "Text",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/MultiSelect/index.tsx
View File

@@ -27,6 +27,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.multiSelect,
name: "Multi Select",
group: "Select",
dataType: "string[]",
initialValue: [],
initializable: true,

1
src/components/fields/Number/index.tsx
View File

@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.number,
name: "Number",
group: "Numeric",
dataType: "number",
initialValue: 0,
initializable: true,

1
src/components/fields/Percentage/index.tsx
View File

@@ -16,6 +16,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.percentage,
name: "Percentage",
group: "Numeric",
dataType: "number",
initialValue: 0,
initializable: true,

1
src/components/fields/Phone/index.tsx
View File

@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.phone,
name: "Phone",
group: "Text",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/Rating/index.tsx
View File

@@ -20,6 +20,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.rating,
name: "Rating",
group: "Numeric",
dataType: "number",
initialValue: 0,
initializable: true,

1
src/components/fields/RichText/index.tsx
View File

@@ -19,6 +19,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.richText,
name: "Rich Text",
group: "Code",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/ShortText/index.tsx
View File

@@ -19,6 +19,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.shortText,
name: "Short Text",
group: "Text",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/SingleSelect/index.tsx
View File

@@ -24,6 +24,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.singleSelect,
name: "Single Select",
group: "File",
dataType: "string | null",
initialValue: null,
initializable: true,

1
src/components/fields/Slider/index.tsx
View File

@@ -20,6 +20,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.slider,
name: "Slider",
group: "Numeric",
dataType: "number",
initialValue: 0,
initializable: true,

1
src/components/fields/Status/index.tsx
View File

@@ -20,6 +20,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.status,
name: "Status",
group: "Cloud Function",
dataType: "any",
initialValue: undefined,
initializable: true,

1
src/components/fields/SubTable/index.tsx
View File

@@ -21,6 +21,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.subTable,
name: "SubTable",
group: "Connection",
dataType: "undefined",
initialValue: null,
icon: <SubTableIcon />,

1
src/components/fields/Url/index.tsx
View File

@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.url,
name: "URL",
group: "Text",
dataType: "string",
initialValue: "",
initializable: true,

1
src/components/fields/User/index.tsx
View File

@@ -17,6 +17,7 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.user,
name: "User",
group: "Metadata",
dataType:
"{ displayName: string, email: string, emailVerified: boolean, isAnonymous: boolean, photoURL: string, timestamp: firebase.firestore.Timestamp, uid: string }",
initialValue: null,

8
src/components/fields/index.tsx
View File

@@ -44,6 +44,9 @@ export const FIELDS: IFieldConfig[] = [
Email,
Phone,
Url,
// SELECT
SingleSelect,
MultiSelect,
// NUMERIC
Checkbox,
Number_,
@@ -58,9 +61,6 @@ export const FIELDS: IFieldConfig[] = [
// FILE
Image_,
File_,
// SELECT
SingleSelect,
MultiSelect,
// CONNECTION
SubTable,
ConnectTable,
@@ -74,7 +74,7 @@ export const FIELDS: IFieldConfig[] = [
Derivative,
Aggregate,
Status,
// INTERNAL
// METADATA
User,
Id,
];

1
src/components/fields/types.ts
View File

@@ -9,6 +9,7 @@ export { FieldType };
export interface IFieldConfig {
type: FieldType;
name: string;
group: string;
dataType: string;
initializable?: boolean;
requireConfiguration?: boolean;

10
src/constants/fields.ts
View File

@@ -6,6 +6,9 @@ export enum FieldType {
email = "EMAIL",
phone = "PHONE_NUMBER",
url = "URL",
// SELECT
singleSelect = "SINGLE_SELECT",
multiSelect = "MULTI_SELECT",
// NUMERIC
checkbox = "CHECK_BOX",
number = "NUMBER",
@@ -20,9 +23,6 @@ export enum FieldType {
// FILE
image = "IMAGE",
file = "FILE",
// SELECT
singleSelect = "SINGLE_SELECT",
multiSelect = "MULTI_SELECT",
// CONNECTION
subTable = "SUB_TABLE",
connectTable = "DOCUMENT_SELECT",
@@ -35,9 +35,9 @@ export enum FieldType {
action = "ACTION",
derivative = "DERIVATIVE",
aggregate = "AGGREGATE",
// INTERNAL
status = "STATUS",
// METADATA
user = "USER",
id = "ID",
last = "LAST",
status = "STATUS",
}