[#9] Add breadcrumbs

akvo · Sep 1, 2023 · 6341928 · 6341928
1 parent bf63743
commit 6341928
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -32,4 +32,10 @@
     justify-content: center;
     align-content: center;
   }
+
+  // Akvo React Form Editor
+  .arfe-container {
+    font: inherit;
+    font-size: inherit;
+  }
 }
diff --git a/frontend/src/pages/forms/Editor.js b/frontend/src/pages/forms/Editor.js
@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import WebformEditor from "akvo-react-form-editor";
 import "akvo-react-form-editor/dist/index.css"; /* REQUIRED */
 import { api } from "../../lib";
 
 const Editor = () => {
   const { formId } = useParams();
+  const history = useNavigate();
   const [formDef, setFormDef] = useState({});
 
   useEffect(() => {
@@ -21,7 +22,17 @@ const Editor = () => {
   };
   return (
     <div>
-      <h1>Form Editor</h1>
+      <h1>
+        <a
+          onClick={() => {
+            history("/forms");
+          }}
+        >
+          {" "}
+          Form
+        </a>{" "}
+        / Edit / {formId}
+      </h1>
       <WebformEditor initialValue={formDef} onSave={onSave} />
     </div>
   );

diff --git a/frontend/src/pages/forms/Form.js b/frontend/src/pages/forms/Form.js
@@ -1,11 +1,12 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { Webform } from "akvo-react-form";
 import { api } from "../../lib";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { Spin, notification } from "antd";
 
 const Form = () => {
   const { formId } = useParams();
+  const history = useNavigate();
   const [formDef, setFormDef] = useState({});
 
   useEffect(() => {
@@ -68,6 +69,17 @@ const Form = () => {
 
   return (
     <div>
+      <h1>
+        <a
+          onClick={() => {
+            history("/forms");
+          }}
+        >
+          {" "}
+          Form
+        </a>{" "}
+        / Submission / {formId}
+      </h1>
       {Object.keys(formDef).length > 0 ? (
         <Webform forms={formDef} onChange={onChange} onFinish={onFinish} />
       ) : (

diff --git a/frontend/src/pages/forms/Forms.js b/frontend/src/pages/forms/Forms.js
@@ -25,21 +25,21 @@ const Forms = () => {
     },
     {
       title: "Actions",
-      width: 200,
+      width: 300,
       render: (form) => {
         return (
           <Row>
-            <Col span={12}>
+            <Col span={16}>
               <Link to={`/form/${form.id}`}>
                 <Button icon={<ProfileOutlined />} type="primary" size="small">
-                  Open
+                  New Submission
                 </Button>
               </Link>
             </Col>
-            <Col span={12}>
+            <Col span={8}>
               <Link to={`/forms/edit/${form.id}`}>
                 <Button icon={<FormOutlined />} type="primary" size="small">
-                  Edit
+                  Editor
                 </Button>
               </Link>
             </Col>