jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

download flow for each tab implemented, tabs bug not solved yet

Browse source
This commit is contained in:
anovazzi1 2023-02-26 15:39:58 -03:00
commit 48083791ce
2 changed files with 89 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

13
space_flow/src/contexts/tabsContext.tsx
View file

@ -10,6 +10,7 @@ type TabsContextType={
addFlow:(flowData?:any)=>void;
updateFlow:(newFlow:flow)=>void;
incrementNodeId:()=>number,
downloadFlow:()=>void
}
const TabsContextInitialValue = {
@ -20,7 +21,7 @@ const TabsContextInitialValue = {
addFlow:(flowData?:any)=>{},
updateFlow:(newFlow:flow)=>{},
incrementNodeId:()=>0,
downloadFlow:()=>{}
}
@ -53,6 +54,14 @@ export function TabsProvider({children}){
newNodeId.current= cookieObject.nodeId;
}
}, [])
function downloadFlow(){
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(flows[tabIndex]))}`
const link = document.createElement('a')
link.href = jsonString
link.download = `${flows[tabIndex].name}.json`
link.click()
}
function removeFlow(id:string){
setFlows(prevState=>{
@ -97,7 +106,7 @@ export function TabsProvider({children}){
}
return(
<TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}>
<TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow}}>
{children}
</TabsContext.Provider>
)

150
space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
View file

@ -1,3 +1,4 @@
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useContext, useRef, useState } from "react";
import { TabsContext } from "../../../../contexts/tabsContext";
@ -5,76 +6,81 @@ import { TabsContext } from "../../../../contexts/tabsContext";
var _ = require("lodash");
export default function TabComponent({ selected, flow, onClick }) {
const { removeFlow, updateFlow,flows } = useContext(TabsContext);
const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState("");
return (
<>
{flow ? (
!selected ? (
<div
className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
onClick={onClick}
>
{flow.name}
<button
onClick={(e) => {
e.stopPropagation();
removeFlow(flow.id);
}}
>
<XMarkIcon className="h-4 hover:bg-white rounded-full" />
</button>
</div>
) : (
<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
{isRename ? (
<input
autoFocus
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
onBlur={() => {
setIsRename(false);
if (value !== "") {
let newFlow = _.cloneDeep(flow);
newFlow.name = value;
updateFlow(newFlow);
}
}}
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
) : (
<span
className="text-left truncate"
onDoubleClick={() => {
setIsRename(true);
setValue(flow.name);
}}
>
{flow.name}
</span>
)}
<button
onClick={() => {
removeFlow(flow.id);
}}
>
{flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />}
</button>
</div>
)
) : (
<div className="h-full py-1.5 flex justify-center items-center">
<button
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
onClick={onClick}
>
<PlusIcon className="h-5 rounded-full hover:bg-white" />
</button>
</div>
)}
</>
);
const { removeFlow, updateFlow, flows, downloadFlow } = useContext(TabsContext);
const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState("");
return (
<>
{flow ? (
!selected ? (
<div
className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
onClick={onClick}
>
{flow.name}
<button
onClick={(e) => {
e.stopPropagation();
removeFlow(flow.id);
}}
>
<XMarkIcon className="h-4 hover:bg-white rounded-full" />
</button>
</div>
) : (
<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
{isRename ? (
<input
autoFocus
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
onBlur={() => {
setIsRename(false);
if (value !== "") {
let newFlow = _.cloneDeep(flow);
newFlow.name = value;
updateFlow(newFlow);
}
}}
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
) : (
<div className="flex items-center gap-2">
<span
className="text-left truncate"
onDoubleClick={() => {
setIsRename(true);
setValue(flow.name);
}}
>
{flow.name}
</span>
<ArrowDownTrayIcon onClick={()=>downloadFlow()} className="w-4 h-4 hover:text-blue-500 cursor-pointer"/>
</div>
)}
<button
onClick={() => {
removeFlow(flow.id);
}}
>
{flows.length > 1 && (
<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
)}
</button>
</div>
)
) : (
<div className="h-full py-1.5 flex justify-center items-center">
<button
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
onClick={onClick}
>
<PlusIcon className="h-5 rounded-full hover:bg-white" />
</button>
</div>
)}
</>
);
}