35 add a button on the gui to export the framing as file

web/src/components/header.jsx

@@ -15,11 +15,13 @@ import {
   help_outline,
   file_description,
   download,
+  file,
 } from "@equinor/eds-icons";
 import { Link, Outlet } from "react-router-dom";
 import { useProjectContext } from "./context";
 import { readProject } from "../services/project_api";
 import { handleExport } from "./handleExport";
+import ReportDialog from "../components/reportDialog";
 
 function Header() {
   const [isOpen, setIsOpen] = useState(false);
@@ -29,6 +31,19 @@ function Header() {
   const closePopover = () => setIsOpen(false);
   const [project, setProjectContext] = useProjectContext();
 
+  const [isReportDialogOpen, setIsReportDialogOpen] = useState(false); // State to control dialog visibility
+  const [reportDialogArgs, setReportDialogArgs] = useState({}); // State to store dialog arguments
+
+  const openReportDialog = (args) => {
+    setReportDialogArgs(args); // Store the arguments in state
+    setIsReportDialogOpen(true); // Open the dialog with the UUID
+  };
+
+  const closeReportDialog = () => {
+    setIsReportDialogOpen(false); // Close the dialog
+    setReportDialogArgs({}); // Clear the arguments
+  };
+
   const fetchData = async () => {
     if (project) {
       const project_read = await readProject(project);
@@ -98,6 +113,22 @@ function Header() {
                     >
                       <Icon data={download} />
                     </Button>
+                    <Button
+                      className="reportButton"
+                      variant="ghost_icon"
+                      onClick={async (event) => {
+                        event.preventDefault();
+                        openReportDialog({ uuid: project_data.uuid });
+                      }}
+                    >
+                      <Icon data={file} />
+                    </Button>
+                    {isReportDialogOpen && (
+                      <ReportDialog
+                        uuid={reportDialogArgs.uuid}
+                        onClose={closeReportDialog}
+                      />
+                    )}
                   </div>
                 ) : null}
               </div>
@@ -130,7 +161,7 @@ function Header() {
               variant="ghost_icon"
               as={Link}
               target="_blank"
-              to="https://fictional-adventure-eyq51g5.pages.github.io/"
+              to="https://equinor.github.io/dot/"
             >
               <Icon data={help_outline} />
             </Button>

web/src/components/reportDialog.jsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  TextField,
+  Dialog,
+  Typography,
+  NativeSelect,
+} from "@equinor/eds-core-react";
+import { readProject, reportProject } from "../services/project_api";
+
+// Dialog Component
+const ReportDialog = ({ uuid, onClose }) => {
+  console.log("ReportDialog - uuid/onClose", uuid, onClose);
+  const [projectData, setProjectData] = useState(null);
+  const [fileFormat, setFileFormat] = useState("docx");
+  const [filePath, setFilePath] = useState("");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      console.log("ReportDialog - useEffect");
+      if (!uuid) return;
+      try {
+        const project_data = await readProject(uuid);
+        console.log("ReportDialog - fetchData", project_data);
+        setProjectData(project_data);
+        setFilePath(project_data.name);
+      } catch (error) {
+        console.error("reportProject - Error:: ", error);
+      }
+    };
+    fetchData(uuid);
+  }, [uuid]);
+
+  const handleReport = () => {
+    console.log("handleReport - Reporting Project:");
+    console.log("handleReport - Format:", fileFormat);
+    console.log("handleReport - Filepath:", filePath);
+    console.log("handleReport - Project Data:", projectData);
+
+    try {
+      const project_data = reportProject(uuid);
+      console.log("handleReport - ReportDialog - reportProject", project_data);
+    } catch (error) {
+      console.error("handleReport - reportProject - Error:: ", error);
+    }
+    onClose(); // Close the dialog after saving
+  };
+
+  const addExtensionToFilepath = (path, ext) => {
+    return path + "." + ext;
+  };
+
+  return (
+    <>
+      <div>
+        {projectData && (
+          <Dialog
+            className="idReportDialog"
+            id="idReportDialog"
+            open={true}
+            onClose={onClose}
+            style={{ minWidth: "500px" }}
+          >
+            <Dialog.Header>
+              <Dialog.Title>Reporting of project </Dialog.Title>
+            </Dialog.Header>
+            <Dialog.CustomContent>
+              <Typography>
+                <div className="ReportMenu" id="ReportMenu">
+                  <div id="FormatField" style={{ marginTop: "10px" }}>
+                    <NativeSelect
+                      id="native-select"
+                      label="Output file format"
+                      value={fileFormat}
+                      onChange={(event) => setFileFormat(event.target.value)}
+                    >
+                      <option>md</option>
+                      <option>docx</option>
+                      <option>odt</option>
+                      <option>pptx</option>
+                    </NativeSelect>
+                  </div>
+                  <div id="FilePathField" style={{ marginTop: "10px" }}>
+                    <TextField
+                      id="FilePathTextField"
+                      placeholder={projectData.name}
+                      label="Output filepath"
+                      autoComplete="off"
+                      value={addExtensionToFilepath(filePath, fileFormat)}
+                      onChange={(event) => setFilePath(event.target.value)}
+                    ></TextField>
+                  </div>
+                  <br />
+                </div>
+              </Typography>
+            </Dialog.CustomContent>
+
+            <Dialog.Actions>
+              <div id="Buttons">
+                <Button
+                  className="saveButton"
+                  onClick={handleReport}
+                  disabled={!projectData || !filePath}
+                >
+                  Create report
+                </Button>{" "}
+                <Button id="cancelButton" onClick={onClose}>
+                  Cancel
+                </Button>
+              </div>
+            </Dialog.Actions>
+          </Dialog>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ReportDialog;

web/src/pages/home.jsx

@@ -7,7 +7,7 @@ import {
   Typography,
   Chip,
 } from "@equinor/eds-core-react";
-import { add, lock, lock_open, download } from "@equinor/eds-icons";
+import { add, lock, lock_open, download, file } from "@equinor/eds-icons";
 import { Link, Outlet } from "react-router-dom";
 import { allProjects, removeProject } from "../services/project_api";
 import "../styles/home.css";
@@ -16,6 +16,7 @@ import { ProjectContext } from "../components/context";
 import ProjectDeleteCheck from "../components/deleteCheck";
 import ImportDialog from "../components/importDialog";
 import { handleExport } from "../components/handleExport";
+import ReportDialog from "../components/reportDialog";
 
 function HomeScreen() {
   const [projects, setProjects] = useState(null);
@@ -36,13 +37,27 @@ function HomeScreen() {
   const handlePageChange = (event, newPage) => {
     setPage(newPage);
   };
+
   const itemsPerPage = 12;
   const startIndex = (page - 1) * itemsPerPage;
   const endIndex = startIndex + itemsPerPage;
   const visibleProjects = Array.isArray(projects)
     ? projects.slice(startIndex, endIndex)
     : [];
 
+  const [isReportDialogOpen, setIsReportDialogOpen] = useState(false); // State to control dialog visibility
+  const [reportDialogArgs, setReportDialogArgs] = useState({}); // State to store dialog arguments
+
+  const openReportDialog = (args) => {
+    setReportDialogArgs(args); // Store the arguments in state
+    setIsReportDialogOpen(true); // Open the dialog with the UUID
+  };
+
+  const closeReportDialog = () => {
+    setIsReportDialogOpen(false); // Close the dialog
+    setReportDialogArgs({}); // Clear the arguments
+  };
+
   return (
     <>
       <div>
@@ -126,6 +141,25 @@ function HomeScreen() {
                   >
                     <Icon data={download}></Icon>
                   </Button>
+                  <Button
+                    data-tag={project.uuid}
+                    id="reportButton"
+                    variant="ghost"
+                    aria-label="report action"
+                    onClick={async (event) => {
+                      event.preventDefault();
+                      const uuid = event.target.getAttribute("data-tag");
+                      openReportDialog({ uuid: uuid });
+                    }}
+                  >
+                    <Icon data={file}></Icon>
+                  </Button>
+                  {isReportDialogOpen && (
+                    <ReportDialog
+                      uuid={reportDialogArgs.uuid}
+                      onClose={closeReportDialog}
+                    />
+                  )}
                 </Card.Actions>
                 <Card.Content style={{ display: "flex" }}>
                   <div

web/src/services/project_api.jsx

@@ -86,3 +86,14 @@ export const updateProject = async (project_uuid, project) => {
     console.error(error.response);
   }
 };
+
+//report project
+export const reportProject = async (projectID) => {
+  try {
+    const result = await BaseAPIServices.get("/projects/" + projectID); // BaseAPIServices.get("/projects/" + projectID + "/report");
+    return result;
+  } catch (error) {
+    console.log("Failed Exporting");
+    console.error(error);
+  }
+};