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

Add Field Key input field to CSV import step 1, next to Column Select

Browse Source 
field

 - Update key and fieldName properties onChange
This commit is contained in:
Vishnu Nithin Reddy
2023-10-03 11:01:40 +05:30
parent 0099bd1dac
commit 9f52e09064
1 changed files with 144 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/components/TableModals/ImportCsvWizard/Step1Columns.tsx
View File

@@ -257,8 +257,16 @@ export default function Step1Columns({
const isNewColumn = !!find(config.newColumns, { key: columnKey });
return (
<Grid container key={field} component="li" wrap="nowrap">
<Grid item xs>
<Grid
container
key={field}
component="li"
wrap="nowrap"
sx={{
marginTop: "36px !important",
}}
>
<Grid container item xs alignItems={"center"}>
<FormControlLabel
key={field}
control={
@@ -291,88 +299,145 @@ export default function Step1Columns({
<ArrowIcon color="disabled" sx={{ color: "secondary.main" }} />
</Grid>
<Grid item xs>
<Grid item container spacing={4} xs alignItems={"center"}>
{selected && (
<ColumnSelect
multiple={false}
value={columnKey}
onChange={handleChange(field) as any}
TextFieldProps={{
hiddenLabel: true,
SelectProps: {
renderValue: () => {
if (!columnKey) return "Select or add column";
else
return (
<Stack
direction="row"
gap={1}
alignItems="center"
>
<Box sx={{ width: 24, height: 24 }}>
{!isNewColumn ? (
getFieldProp("icon", matchingColumn?.type)
) : (
<TableColumnIcon color="disabled" />
)}
</Box>
{matchingColumn?.name}
{isNewColumn && (
<Chip
label="New"
color="primary"
size="small"
variant="outlined"
style={{
marginLeft: "auto",
pointerEvents: "none",
height: 24,
fontWeight: "normal",
}}
/>
)}
</Stack>
);
},
sx: [
{
backgroundColor: "background.default",
border: (theme) =>
`1px solid ${theme.palette.divider}`,
borderRadius: 0,
boxShadow: "none",
"& .MuiSelect-select": {
boxSizing: "border-box",
height: COLUMN_HEADER_HEIGHT - 2,
typography: "caption",
fontWeight: "medium",
lineHeight: "28px",
<>
<Grid item xs>
<ColumnSelect
multiple={false}
value={columnKey}
onChange={handleChange(field) as any}
TextFieldProps={{
hiddenLabel: true,
SelectProps: {
renderValue: () => {
if (!columnKey) return "Select or add column";
else
return (
<Stack
direction="row"
gap={1}
alignItems="center"
>
<Box sx={{ width: 24, height: 24 }}>
{!isNewColumn ? (
getFieldProp(
"icon",
matchingColumn?.type
)
) : (
<TableColumnIcon color="disabled" />
)}
</Box>
{matchingColumn?.name}
{isNewColumn && (
<Chip
label="New"
color="primary"
size="small"
variant="outlined"
style={{
marginLeft: "auto",
pointerEvents: "none",
height: 24,
fontWeight: "normal",
}}
/>
)}
</Stack>
);
},
sx: [
{
backgroundColor: "background.default",
border: (theme) =>
`1px solid ${theme.palette.divider}`,
borderRadius: 0,
boxShadow: "none",
"& .MuiSelect-select": {
boxSizing: "border-box",
height: COLUMN_HEADER_HEIGHT - 2,
typography: "caption",
fontWeight: "medium",
lineHeight: "28px",
},
color: "text.secondary",
"&:hover": {
backgroundColor: "background.default",
color: "text.primary",
boxShadow: "none",
},
color: "text.secondary",
"&:hover": {
backgroundColor: "background.default",
color: "text.primary",
boxShadow: "none",
},
"&::before": { content: "none" },
"&::after": { pointerEvents: "none" },
"&::before": { content: "none" },
"&::after": { pointerEvents: "none" },
},
!columnKey && { color: "text.disabled" },
],
},
!columnKey && { color: "text.disabled" },
],
},
sx: { "& .MuiInputLabel-root": { display: "none" } },
}}
clearable={false}
displayEmpty
freeText
AddButtonProps={{ children: "Create column…" }}
AddDialogProps={{
title: "Create column",
textFieldLabel: "Column name",
}}
/>
sx: { "& .MuiInputLabel-root": { display: "none" } },
}}
clearable={false}
displayEmpty
freeText
AddButtonProps={{ children: "Create column…" }}
AddDialogProps={{
title: "Create column",
textFieldLabel: "Column name",
}}
/>
</Grid>
<Grid item>
<TextField
label="Field key"
value={
config.pairs.find(
(pair) => pair.columnKey === columnKey
)?.columnKey ??
config.newColumns.find(
(pair) => pair.key === columnKey
)?.key
}
onChange={(e) => {
const newKey = e.target.value;
const newPairs = config.pairs.map((pair) => {
if (pair.columnKey === columnKey) {
return { ...pair, columnKey: newKey };
} else {
return pair;
}
});
const newColumns = config.newColumns.map((column) => {
if (column.key === columnKey) {
return {
...column,
key: newKey,
fieldName: newKey,
};
} else {
return column;
}
});
setConfig((config) => ({
...config,
pairs: newPairs,
newColumns,
}));
}}
sx={{
"& .MuiInputLabel-root": {
position: "absolute",
transform: "translateY(-100%)",
},
"& .MuiInputBase-root": {
height: 40,
},
}}
/>
</Grid>
</>
)}
</Grid>
</Grid>