parcelvoy/platform
1
0
Fork 0
mirror of https://fast.feibisi.com/https://github.com/parcelvoy/platform.git synced 2025-09-04 12:56:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 2

journey details edit modal

Browse source
This commit is contained in:
Chris Hills 2023-03-12 20:16:50 -05:00
parent e10af9ca83
commit ada8821ede
3 changed files with 55 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/ui/src/ui/Button.tsx
View file

@ -46,6 +46,7 @@ const Button = forwardRef(function Button(props: ButtonProps, ref: Ref<HTMLButto
children,
isLoading = false,
disabled,
style,
} = props
return (
<button
@ -60,6 +61,7 @@ const Button = forwardRef(function Button(props: ButtonProps, ref: Ref<HTMLButto
)}
ref={ref}
disabled={disabled ?? isLoading}
style={style}
>
{icon && (<span className="button-icon">{icon}</span>)}
{children}

22
apps/ui/src/ui/Sidebar.tsx
View file

@ -24,15 +24,23 @@ export default function Sidebar({ children, links }: PropsWithChildren<SidebarPr
const [preferences, setPreferences] = useContext(PreferencesContext)
const [recents] = useResolver(useCallback(async () => {
const recentIds = getRecentProjects().filter(p => p.id !== project.id).map(p => p.id)
const recents: Array<typeof project> = []
if (recentIds.length) {
const projects = await api.projects.search({
page: 0,
itemsPerPage: recentIds.length,
id: recentIds,
}).then(r => r.results ?? [])
for (const id of recentIds) {
const recent = projects.find(p => p.id === id)
if (recent) {
recents.push(recent)
}
}
}
return [
project,
...recentIds.length
? await api.projects.search({
page: 0,
itemsPerPage: recentIds.length,
id: recentIds,
}).then(r => r.results ?? [])
: [],
...recents,
{
id: 0,
name: 'View All',

49
apps/ui/src/views/journey/JourneyEditor.tsx
View file

@ -40,6 +40,7 @@ import Button from '../../ui/Button'
import Alert from '../../ui/Alert'
import Modal from '../../ui/Modal'
import { toast } from 'react-hot-toast'
import { JourneyForm } from './JourneyForm'
const getStepType = (type: string) => (type ? journeySteps[type as keyof typeof journeySteps] as JourneyStepType : null) ?? null
@ -315,16 +316,18 @@ export default function JourneyEditor() {
const wrapper = useRef<HTMLDivElement>(null)
const [project] = useContext(ProjectContext)
const [journey] = useContext(JourneyContext)
const [journey, setJourney] = useContext(JourneyContext)
const [nodes, setNodes, onNodesChange] = useNodesState([])
const [edges, setEdges, onEdgesChange] = useEdgesState([])
const journeyId = journey.id
const loadSteps = useCallback(async () => {
const [steps, stats] = await Promise.all([
api.journeys.steps.get(project.id, journey.id),
api.journeys.steps.stats(project.id, journey.id),
api.journeys.steps.get(project.id, journeyId),
api.journeys.steps.stats(project.id, journeyId),
])
const { edges, nodes } = stepsToNodes(steps, stats)
@ -332,7 +335,7 @@ export default function JourneyEditor() {
setNodes(nodes)
setEdges(edges)
}, [project, journey])
}, [project, journeyId])
useEffect(() => {
void loadSteps()
@ -408,6 +411,8 @@ export default function JourneyEditor() {
}, [setNodes, flowInstance, project, journey])
const [editOpen, setEditOpen] = useState(false)
return (
<Modal
size="fullscreen"
@ -415,13 +420,22 @@ export default function JourneyEditor() {
open={true}
onClose={() => navigate('../journeys')}
actions={
<Button
onClick={saveSteps}
isLoading={saving}
variant="primary"
>
{'Save'}
</Button>
<>
<Button
variant="secondary"
style={{ marginRight: 5 }}
onClick={() => setEditOpen(true)}
>
{'Edit Details'}
</Button>
<Button
onClick={saveSteps}
isLoading={saving}
variant="primary"
>
{'Save'}
</Button>
</>
}
>
<div className="journey">
@ -470,6 +484,19 @@ export default function JourneyEditor() {
</ReactFlow>
</div>
</div>
<Modal
open={editOpen}
onClose={setEditOpen}
title="Edit Journey Details"
>
<JourneyForm
journey={journey}
onSaved={async journey => {
setEditOpen(false)
setJourney(journey)
}}
/>
</Modal>
</Modal>
)
}