feat: added flow to js

Author: lvargas

src/app/shared/components/tool-bar/ToolBar.tsx

@@ -5,12 +5,14 @@ import { useHistory } from 'react-router-dom';
 
 import { PropertiesTab } from '../../../pages/editor/properties-tab/PropertiesTab';
 import { tabListStore } from '../../stores';
-import { DownloadService, openContextMenu, ProjectsStorage } from '../../services';
+import { DownloadService, FlowToJs, openContextMenu, ProjectsStorage } from '../../services';
 import { useEditorContext } from '../../hooks';
 import { TabButtonSimple } from '../tabs';
 import { TabList } from '../tab-list';
 import { Modal } from '../modal';
 import './ToolBar.css';
+import { ProjectParser } from '../../models';
+import { EComponentType } from '../../enuns';
 
 export const ToolBar: React.FC = memo(() => {
     const [isOpenModalProps, setIsOpenModalProps] = useState(false);
@@ -58,8 +60,27 @@ export const ToolBar: React.FC = memo(() => {
     }, []);
 
     const handleExport = useCallback(() => {
-        DownloadService.downloadFilesAsZip([{ name: 'src', isFolder: true, children: [] }]);
-    }, []);
+        DownloadService.downloadFilesAsZip([
+            { name: '.codeeasy', isFolder: true, children: [{ name: 'config', type: 'json', isFolder: false, content: ProjectParser.stringify(project) }] },
+            { name: 'package', type: 'json', isFolder: false, content: '{}' },
+            { name: 'Routes', type: 'js', isFolder: false, content: '' },
+            { name: 'index', type: 'js', isFolder: false, content: '' },
+            {
+                name: 'src',
+                isFolder: true,
+                children: project.tabs.value.map(tab => ({
+                    name: tab.label.value,
+                    isFolder: true,
+                    children: tab.items.value.map(treeItem => ({
+                        isFolder: treeItem.type.value === EComponentType.grouper,
+                        content: FlowToJs(treeItem, treeItem.items.value),
+                        name: treeItem.label.value,
+                        type: 'js',
+                    }))
+                }))
+            },
+        ]);
+    }, [project]);
 
     const openMoreOption = useCallback((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         openContextMenu(e.clientX, 35, [

src/app/shared/services/flow-to-js/FlowToJs.ts

@@ -0,0 +1,9 @@
+import { IFlowItemComponent, ITreeItemComponent } from "../../interfaces";
+
+export const FlowToJs = (treeItem: ITreeItemComponent, flowItems: IFlowItemComponent[]) => {
+    let result = `export const ${treeItem.label.value} = () => {\n`;
+
+    result = result + flowItems.map(flowItem => `// ${flowItem.name.value}${flowItem.label.value} -  - ${flowItem.type.value} - ${flowItem.flowItemType.value} - `).join('\n');
+
+    return result + '\n}\n';
+}

src/app/shared/services/index.ts

@@ -5,5 +5,6 @@ export * from './storage/IdeConfigStorage';
 export * from './storage/ProjectsStorage';
 export * from './helpers/ProblemsHelper';
 export * from './helpers/OutputHelper';
+export * from './flow-to-js/FlowToJs';
 export * from './text-conversion';
 export * from './AssetsService';