Merge pull request #23 from Terraform-GUI/feature/drag-and-drop

feature(front): #22 - drag and drop ressource

Author: PIERRONMarc

web/package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",

web/package.json

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import BuilderPage from "../pages/BuilderPage";
+
+function App() {
+  return (
+    <>
+        <BuilderPage />
+    </>
+
+  );
+}
+
+export default App;

web/src/App.css

@@ -0,0 +1,17 @@
+import React, { useState, useRef, useCallback } from 'react';
+import './index.css';
+
+const Description = () => {
+
+
+  return (
+    <div className="description">
+      <h1>Description</h1>
+    </div>
+  );
+};
+
+export default Description;
+
+
+

web/src/App.test.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
+
+import RessourceList from "./ressourceList";
+
+
+const Header = ({ saves }: any) => {
+
+  const save = () => {
+    saves(true);
+  };
+
+  return (
+    <div>
+      <AppBar style={{ backgroundColor: "brown" }} position="static">
+        <Container maxWidth="xl">
+          <Toolbar disableGutters>
+                <RessourceList /> 
+              <Button onClick={() => save()}>SAVE</Button>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </div>
+  );
+};
+export default Header;

web/src/App.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import Chip from "@mui/material/Chip";
+import Stack from "@mui/material/Stack";
+
+const RessourceList = () => {
+  const onDragStart = (event: any, nodeType: any) => {
+    event.dataTransfer.setData("application/reactflow", nodeType);
+    event.dataTransfer.effectAllowed = "move";
+  };
+
+  const handleClicks = () => {
+    console.info("You clicked the Chip.");
+  };
+
+  return (
+    <aside>
+      <Stack direction="row" spacing={1}>
+        <div onDragStart={(event) => onDragStart(event, "RDS")} draggable>
+          <Chip label="RDS" variant="outlined" onClick={handleClicks} />
+        </div>
+        <div onDragStart={(event) => onDragStart(event, "EC2")} draggable>
+          <Chip label="EC2" variant="outlined" onClick={handleClicks} />
+        </div>
+        <div onDragStart={(event) => onDragStart(event, "SQS")} draggable>
+          <Chip label="SQS" variant="outlined" onClick={handleClicks} />
+        </div>
+        <div onDragStart={(event) => onDragStart(event, "Lambda")} draggable>
+          <Chip label="Lambda" variant="outlined" onClick={handleClicks} />
+        </div>
+        <div onDragStart={(event) => onDragStart(event, "VPC")} draggable>
+          <Chip label="VPC" variant="outlined" onClick={handleClicks} />
+        </div>
+        <div onDragStart={(event) => onDragStart(event, "secretManager")} draggable>
+          <Chip label="secretManager" variant="outlined" onClick={handleClicks} />
+        </div>
+      </Stack>
+    </aside>
+  );
+};
+
+export default RessourceList;