3 files changed, 48 insertions, 6 deletions
diff --git a/src/views/manage/brands.js b/src/views/manage/brands.js
index 61afe16..dad21e2 100644
--- a/src/views/manage/brands.js
+++ b/src/views/manage/brands.js
@@ -18,11 +18,12 @@
 import { useState, useEffect } from 'react';
 
 import './scss/management-page.scss'
-import { getAllBrands } from '../../classes/brand';
+import { Brand, getAllBrands } from '../../classes/brand';
 import BrandEditor from './../../components/editors/brand-editor';
 import BrandTable from './../../components/tables/brand-table';
 
 const ManageBrandsPage = () => {
+  const [brandToEdit, setBrandToEdit] = useState(new Brand());
   const [allBrands, setAllBrands] = useState([]);
   // TODO: handle error
   const updateList = () =>
@@ -34,9 +35,27 @@ const ManageBrandsPage = () => {
 
   return (
     <>
-      <BrandEditor heading={"Add New Brand"} callback={updateList}/>
+      <BrandEditor
+        heading={"Add New Brand"}
+        brand={new Brand()}
+        callback={updateList}/>
       <hr/>
-      <BrandTable refresh={updateList} brands={allBrands}/>
+      <BrandTable
+        refresh={updateList}
+        brands={allBrands}
+        setBrandToEdit={setBrandToEdit}/>
+
+      {JSON.stringify(brandToEdit) !== JSON.stringify(new Brand()) &&
+        <div className={"floating-wrapper"}>
+          <BrandEditor
+            className={"floating-window"}
+            heading={`Edit ${brandToEdit.Name ? brandToEdit.Name : 'Brand'}:`}
+            brand={brandToEdit}
+            hide={() => setBrandToEdit(new Brand())}
+            editing={true}
+            callback={updateList}/>
+        </div>
+      }
     </>
   );
 }
diff --git a/src/views/manage/items.js b/src/views/manage/items.js
index b9bf339..567be7c 100644
--- a/src/views/manage/items.js
+++ b/src/views/manage/items.js
@@ -22,11 +22,12 @@
 import { useState, useEffect } from 'react';
 
 import './scss/management-page.scss'
-import { getAllItems } from '../../classes/item';
+import { Item, getAllItems } from '../../classes/item';
 import ItemEditor from './../../components/editors/item-editor';
 import ItemTable from './../../components/tables/item-table';
 
 const ManageItemsPage = () => {
+  const [itemToEdit, setItemToEdit] = useState(new Item());
   const [allItems, setAllItems] = useState([]);
   // TODO: handle error
   const updateList = () =>
@@ -38,9 +39,27 @@ const ManageItemsPage = () => {
 
   return (
     <>
-      <ItemEditor heading={"Add New Item"} callback={updateList}/>
+      <ItemEditor
+        heading={"Add New Item"}
+        item={new Item()}
+        callback={updateList}/>
       <hr/>
-      <ItemTable refresh={updateList} items={allItems}/>
+      <ItemTable
+        refresh={updateList}
+        items={allItems}
+        setItemToEdit={setItemToEdit}/>
+
+      {JSON.stringify(itemToEdit) !== JSON.stringify(new Item()) &&
+        <div className={"floating-wrapper"}>
+          <ItemEditor
+            className={"floating-window"}
+            heading={`Edit ${itemToEdit.Name ? itemToEdit.Name : 'Item'}:`}
+            item={itemToEdit}
+            hide={() => setItemToEdit(new Item())}
+            editing={true}
+            callback={updateList}/>
+        </div>
+      }
     </>
   );
 }
diff --git a/src/views/manage/scss/management-page.scss b/src/views/manage/scss/management-page.scss
index df26819..656d224 100644
--- a/src/views/manage/scss/management-page.scss
+++ b/src/views/manage/scss/management-page.scss
@@ -15,6 +15,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+@import "../../../styles";
+
+@include floating-window;
+
 hr {
   margin: 0.8rem auto 1rem auto;
 }