groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add primitive substeps in flow editor

Browse Source
This commit is contained in:
Ali BARIN
2022-01-31 01:07:14 +01:00
committed by Ömer Faruk Aydın
parent 90aac874bf
commit 7740529a2a
2 changed files with 72 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
packages/web/src/components/FlowStep/index.tsx
View File

@@ -75,13 +75,15 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
}, [step, onChange]); }, [step, onChange]);
const appAndEventOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]); const appAndEventOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]);
const actionOptions = React.useMemo(() => app?.triggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]); const actionsOrTriggers = isTrigger ? app?.triggers : app?.actions;
const actionOptions = React.useMemo(() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]);
const substeps = React.useMemo(() => actionsOrTriggers?.find(({ key }) => key === step.key)?.subSteps, [actionsOrTriggers, step?.key]);
const onAppChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => { const onAppChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
if (typeof selectedOption === 'object') { if (typeof selectedOption === 'object') {
const typedSelectedOption = selectedOption as { value: string; }; const typedSelectedOption = selectedOption as { value: string; };
const option: { value: string } = typedSelectedOption; const option: { value: string } = typedSelectedOption;
const appKey = option.value as string; const appKey = option?.value as string;
setStep((step) => ({ ...step, appKey, parameters: {} })); setStep((step) => ({ ...step, appKey, parameters: {} }));
} }
}, []); }, []);
@@ -90,13 +92,11 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
if (typeof selectedOption === 'object') { if (typeof selectedOption === 'object') {
const typedSelectedOption = selectedOption as { value: string; }; const typedSelectedOption = selectedOption as { value: string; };
const option: { value: string } = typedSelectedOption; const option: { value: string } = typedSelectedOption;
const eventKey = option.value as string; const eventKey = option?.value as string;
setStep((step) => ({ setStep((step) => ({
...step, ...step,
parameters: { key: eventKey,
...step.parameters, parameters: {},
eventKey,
}
})); }));
} }
}, []); }, []);
@@ -145,52 +145,65 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
</Stack> </Stack>
</Header> </Header>
{true && ( <Collapse in={!collapsed}>
<Collapse in={!collapsed}> <Content>
<Content> <List>
<List> <ListItemButton onClick={() => toggleSubstep(0)} selected={currentSubstep === 0} divider>
<ListItemButton onClick={() => toggleSubstep(0)}> <Typography variant="body2">
Choose app & event Choose app & event
</ListItemButton> </Typography>
<Collapse in={currentSubstep === 0} timeout="auto" unmountOnExit> </ListItemButton>
<ListItem sx={{ pt: 2 }}> <Collapse in={currentSubstep === 0} timeout="auto" unmountOnExit>
<Autocomplete <ListItem sx={{ pt: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
disablePortal <Autocomplete
id="combo-box-demo" fullWidth
options={appAndEventOptions} disablePortal
sx={{ width: 300 }} options={appAndEventOptions}
renderInput={(params) => <TextField {...params} label="Choose app & event" />} renderInput={(params) => <TextField {...params} label="Choose app" />}
value={getOption(appAndEventOptions, step.appKey)} value={getOption(appAndEventOptions, step.appKey)}
onChange={onAppChange} onChange={onAppChange}
/> />
</ListItem>
</Collapse>
{step.appKey && (
<Box display="flex" width="100%" pt={2} flexDirection="column">
<Typography variant="subtitle2" pb={2} gutterBottom>
Action event
</Typography>
<ListItemButton onClick={() => toggleSubstep(1)}> <Autocomplete
Action event fullWidth
</ListItemButton> disablePortal
<Collapse in={currentSubstep === 1} timeout="auto" unmountOnExit> options={actionOptions}
<ListItem sx={{ pt: 2 }}> renderInput={(params) => <TextField {...params} label="Choose an event" />}
<Autocomplete value={getOption(actionOptions, step.key)}
disablePortal onChange={onEventChange}
id="combo-box-demo" />
options={actionOptions} </Box>
sx={{ width: 300 }} )}
renderInput={(params) => <TextField {...params} label="Choose app & event" />} </ListItem>
value={getOption(actionOptions, step?.parameters?.eventKey)} </Collapse>
onChange={onEventChange}
/>
</ListItem>
</Collapse>
</List>
</Content>
<Button onClick={onClose}> {substeps?.length > 0 && substeps.map((substep: Record<string, unknown>, index: number) => (
Close <React.Fragment key={substep?.key as string}>
</Button> <ListItemButton onClick={() => toggleSubstep(index + 1)} selected={currentSubstep === (index + 1)} divider>
</Collapse> <Typography variant="body2">
)} {substep.name as string}
</Typography>
</ListItemButton>
<Collapse in={currentSubstep === (index + 1)} timeout="auto" unmountOnExit>
<ListItem sx={{ pt: 2 }}>
</ListItem>
</Collapse>
</React.Fragment>
))}
</List>
</Content>
<Button onClick={onClose}>
Close
</Button>
</Collapse>
{anchorEl && <FlowStepContextMenu {anchorEl && <FlowStepContextMenu
stepId={step.id} stepId={step.id}

10
packages/web/src/graphql/queries/get-apps.ts
View File

@@ -58,6 +58,11 @@ export const GET_APPS = gql`
description description
subSteps { subSteps {
name name
arguments {
name
type
required
}
} }
} }
actions { actions {
@@ -66,6 +71,11 @@ export const GET_APPS = gql`
description description
subSteps { subSteps {
name name
arguments {
name
type
required
}
} }
} }
} }