From 4e57e7a19abd2170c7f80f6bb928177b6ff7c0b6 Mon Sep 17 00:00:00 2001
From: Claudia Beresford <claudiaberesford@gmail.com>
Date: Sat, 13 Feb 2021 11:52:49 +0000
Subject: [PATCH 1/2] Add switch to exclude new category weight

The weight exclusion of custom categories is not grouped with "Worn" or
"Consumable" in the view's "Weight Breakdown" but added to a "Other excluded"
count which is only shown when pack has items in custom excluded category.
---
 api/controllers/item.js                         | 13 +++++++------
 .../src/app/components/CategoryTable/index.tsx  | 12 ++++++++++--
 frontend/src/app/components/FormFields/index.js |  3 ++-
 .../src/app/components/ItemForm/ItemForm.tsx    | 17 ++++++++++++++---
 frontend/src/lib/utils/categories.ts            |  7 ++++++-
 frontend/src/types/item.ts                      |  1 +
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/api/controllers/item.js b/api/controllers/item.js
index 8933258..221acc3 100644
--- a/api/controllers/item.js
+++ b/api/controllers/item.js
@@ -89,9 +89,9 @@ router.get('', async (req, res) => {
 });
 
 // create or retrieve category
-async function fetchCategory(categoryId) {
+async function fetchCategory(categoryId, excludeWeight) {
     let newCat = null;
-    const category = { name: categoryId, level: 'USER' };
+    const category = { name: categoryId, level: 'USER', exclude_weight: excludeWeight };
     try {
         newCat = await models.Category.create(category);
     } catch (err) {
@@ -106,12 +106,12 @@ async function fetchCategory(categoryId) {
 
 // Create
 router.post('', authenticate, async (req, res) => {
-    const { newCategory } = req.body;
+    const { newCategory, excludeWeight } = req.body;
     const { payload } = itemPayload(req.body);
 
     let newCat = null;
     if (newCategory) {
-        const { category, err } = await fetchCategory(payload.categoryId);
+        const { category, err } = await fetchCategory(payload.categoryId, excludeWeight);
         if (err) {
             return res.status(400).json(err);
         }
@@ -132,7 +132,8 @@ router.put('', authenticate, async (req, res) => {
 
     let newCat = null;
     if (newCategory) {
-        const { category, err } = await fetchCategory(payload.categoryId);
+        // hardcoding false here while I figure out how to do update
+        const { category, err } = await fetchCategory(payload.categoryId, false);
         if (err) {
             return res.status(400).json(err);
         }
@@ -162,4 +163,4 @@ router.post('/delete', authenticate, (req, res) => {
 });
 
 
-module.exports = router;
\ No newline at end of file
+module.exports = router;
diff --git a/frontend/src/app/components/CategoryTable/index.tsx b/frontend/src/app/components/CategoryTable/index.tsx
index 6ee1b44..b8ec323 100644
--- a/frontend/src/app/components/CategoryTable/index.tsx
+++ b/frontend/src/app/components/CategoryTable/index.tsx
@@ -25,8 +25,10 @@ const CategoryChart: React.FC<CategoryTableProps> = ({ data, unit }) => {
     const totalWeight = data.reduce((acc: number, cur: CategoryItemSpecs) => acc + cur.total.value, 0);
     const excludedWeight = data.reduce((acc: number, cur: CategoryItemSpecs) => acc + cur.excluded.value, 0);
     const consumables = data.find(c => c.name === 'Consumables');
+    const customExcludedCategories = data.find(c => c.level === 'USER' && c.exclude_weight === true);
+    const customExcludedWeight = customExcludedCategories ? customExcludedCategories.total.value : 0;
     const consumablesWeight = consumables ? consumables.total.value : 0;
-    const wornWeight = excludedWeight - consumablesWeight;
+    const wornWeight = excludedWeight - consumablesWeight - customExcludedWeight;
     const baseWeight = totalWeight - excludedWeight;
 
     return (
@@ -47,6 +49,12 @@ const CategoryChart: React.FC<CategoryTableProps> = ({ data, unit }) => {
                 <div>Worn</div>
                 <div>{wornWeight.toFixed(2)} {unit}</div>
             </CatRow>
+            {customExcludedCategories &&
+            <CatRow className="totals">
+                <div>Other Excluded</div>
+                <div>{customExcludedWeight.toFixed(2)} {unit}</div>
+            </CatRow>
+            }
             <CatRow className="totals highlight">
                 <div>Base Weight</div>
                 <div>{baseWeight.toFixed(2)} {unit}</div>
@@ -55,4 +63,4 @@ const CategoryChart: React.FC<CategoryTableProps> = ({ data, unit }) => {
     )
 };
 
-export default React.memo(CategoryChart);
\ No newline at end of file
+export default React.memo(CategoryChart);
diff --git a/frontend/src/app/components/FormFields/index.js b/frontend/src/app/components/FormFields/index.js
index 0b03d77..087591d 100644
--- a/frontend/src/app/components/FormFields/index.js
+++ b/frontend/src/app/components/FormFields/index.js
@@ -2,5 +2,6 @@ export { default as Input } from './Input';
 export { default as Textarea } from './Textarea';
 export { default as Select } from './Select'
 export { default as SelectCreatable } from './SelectCreatable'
+export { default as SwitchInput } from './SwitchInput'
 export { Option } from './types';
-export { Label } from './styles';
\ No newline at end of file
+export { Label } from './styles';
diff --git a/frontend/src/app/components/ItemForm/ItemForm.tsx b/frontend/src/app/components/ItemForm/ItemForm.tsx
index 8b5cbf4..88c57ed 100644
--- a/frontend/src/app/components/ItemForm/ItemForm.tsx
+++ b/frontend/src/app/components/ItemForm/ItemForm.tsx
@@ -3,7 +3,7 @@ import * as Yup from 'yup';
 import FileDownload from 'js-file-download';
 import { Formik, FormikProps } from "formik";
 import { Row, Col, Button } from "antd";
-import { Input, Select, SelectCreatable, Option } from '../FormFields';
+import { Input, Select, SelectCreatable, Option, SwitchInput } from "../FormFields";
 
 import { AppContext } from 'AppContext';
 import { CreateItem, ItemConstants } from "types/item";
@@ -11,7 +11,7 @@ import { FormSpecs } from "./types";
 
 import withApi from 'app/components/higher-order/with-api';
 import { categoryOptions, weightUnitOptions } from "lib/utils/form";
-import { categorySelectValue } from "lib/utils/categories";
+import { categorySelectValue, categoryCheckIfNew } from "lib/utils/categories";
 
 import UploadModal from 'app/Inventory/UploadModal';
 import { alertError, alertSuccess } from "../Notifications";
@@ -42,6 +42,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                 price: undefined,
                 product_url: '',
                 newCategory: false,
+                excludeWeight: false,
                 notes: ''
             }}
             validationSchema={Yup.object().shape({
@@ -70,6 +71,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                 const wasSubmitted = submitCount > 0;
                 const weightUnit = values.weight_unit;
                 const categoryValue = categorySelectValue(app.categories, values.categoryId);
+                let isNewCategory = categoryCheckIfNew(app.categories, values.categoryId);
 
                 return (
                     <SidebarContainer>
@@ -88,7 +90,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                             value={categoryValue || null}
                             onChange={(option: Option<number>) => {
                                 const value = option ? option.value : undefined;
-                                const isNewCategory = Boolean(option && option.__isNew__);
+                                isNewCategory = Boolean(option && option.__isNew__);
                                 setFieldValue('categoryId', value);
                                 setFieldValue('newCategory', isNewCategory);
                             }}
@@ -96,6 +98,15 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                             errorMsg={errors.categoryId}
                             clearable={true}
                         />
+                        {isNewCategory &&
+                           <SwitchInput
+                                    label="Exclude category from base weight"
+                                    checked = {values.excludeWeight}
+                                    checkedText="Yes"
+                                    uncheckedText="No"
+                                    tip="All items added to this category will be excluded from base weight"
+                                    onChange={v => setFieldValue('excludeWeight', v)}/>
+                        }
                         <Input
                             label="Product Name"
                             value={values.product_name || ''}
diff --git a/frontend/src/lib/utils/categories.ts b/frontend/src/lib/utils/categories.ts
index a65bdeb..f47014f 100644
--- a/frontend/src/lib/utils/categories.ts
+++ b/frontend/src/lib/utils/categories.ts
@@ -29,4 +29,9 @@ export const categorySelectValue = (categories: Category[], value: number | stri
         value: currentCategory ? currentCategory.id : value,
         label: currentCategory ? currentCategory.name : value.toString()
     };
-};
\ No newline at end of file
+};
+
+export const categoryCheckIfNew = (categories: Category[], value: number | string | undefined): boolean => {
+    if (!value) return false;
+    return categories.find(cat => cat.id === value) ? false : true;
+};
diff --git a/frontend/src/types/item.ts b/frontend/src/types/item.ts
index c9076e6..9fd861a 100644
--- a/frontend/src/types/item.ts
+++ b/frontend/src/types/item.ts
@@ -22,6 +22,7 @@ export interface Item extends BaseItem {
 export type CreateItem = Omit<BaseItem, 'categoryId'> & {
     categoryId?: number;
     newCategory: boolean;
+    excludeWeight: boolean;
 }
 
 export type UpdateItem = Omit<BaseItem, 'categoryId'> & {

From a8494cbd36404c7d8064fe58eb882d4005ca150a Mon Sep 17 00:00:00 2001
From: Claudia Beresford <claudiaberesford@gmail.com>
Date: Sun, 14 Feb 2021 12:14:53 +0000
Subject: [PATCH 2/2] Add tooltip marker to category headings

If category is excluded from weight, there is a help icon and a hover message
---
 frontend/src/app/Inventory/Table.tsx           | 18 +++++++++++++++---
 frontend/src/app/Pack/Items.tsx                | 12 ++++++++++--
 .../app/components/FormFields/SwitchInput.tsx  |  6 +++---
 .../src/app/components/ItemForm/ItemForm.tsx   |  2 +-
 .../src/app/components/PackItems/index.tsx     | 13 +++++++++++--
 5 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/Inventory/Table.tsx b/frontend/src/app/Inventory/Table.tsx
index 51bded9..a9095cc 100644
--- a/frontend/src/app/Inventory/Table.tsx
+++ b/frontend/src/app/Inventory/Table.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Icon, Tooltip } from 'antd';
 
 import { Category } from "types/category";
 import { Item as ItemType } from 'types/item';
@@ -6,6 +7,7 @@ import { Update } from "types/api/item";
 
 import Item from './Item';
 import ExpandablePanel from "../components/ExpandablePanel";
+import { helpIconStyles } from "styles/common";
 
 interface TableProps {
     category: Category;
@@ -22,15 +24,25 @@ const Table: React.FC<TableProps> = ({ category, items, updateItem, fetchItems }
               fetchItems={fetchItems}/>
     );
 
-    const Header = <h3>{category.name}</h3>;
+    function setHeader(category: Category): JSX.Element {
+        if (category.exclude_weight) {
+            return <h3> {category.name}
+                <Tooltip title={"Items in this category will be excluded from base weight"}
+                                 mouseEnterDelay={.1}>
+                    <Icon type="stop-o" style={helpIconStyles}/>
+                </Tooltip>
+            </h3>;
+        }
+        return <h3>{category.name}</h3>
+    }
 
     return (
         <div key={category.id} style={{ marginBottom: '24px' }}>
-            <ExpandablePanel Header={Header}>
+            <ExpandablePanel Header={setHeader(category)}>
                 {itemList}
             </ExpandablePanel>
         </div>
     )
 };
 
-export default Table;
\ No newline at end of file
+export default Table;
diff --git a/frontend/src/app/Pack/Items.tsx b/frontend/src/app/Pack/Items.tsx
index 0ab7618..3cd9e7c 100644
--- a/frontend/src/app/Pack/Items.tsx
+++ b/frontend/src/app/Pack/Items.tsx
@@ -10,6 +10,7 @@ import { getItemWeight, getWeightByCategory } from "lib/utils/weight";
 import { getCategories } from "lib/utils/categories";
 
 import { ItemList, ItemName, ItemNotes, ItemDescription, ItemQuantity, ItemWeight, CategorySection } from "./styles";
+import { helpIconStyles } from "styles/common";
 import ExpandablePanel from 'app/components/ExpandablePanel';
 
 interface ItemsProps {
@@ -42,7 +43,14 @@ const Items: React.FC<ItemsProps> = ({ items, unit }) => {
 
                 const Header = (
                     <>
-                        <h3>{cat.name}</h3>
+                        <h3>
+                            {cat.name}
+                            {cat.exclude_weight &&
+                            <Tooltip title={"Items in this category are excluded from base weight"}
+                                             mouseEnterDelay={.1}>
+                                <Icon type="stop-o" style={helpIconStyles}/>
+                            </Tooltip>}
+                        </h3>
                         <strong>{catWeight!.total.label} {unit}</strong>
                     </>
                 )
@@ -99,4 +107,4 @@ const Items: React.FC<ItemsProps> = ({ items, unit }) => {
 
 };
 
-export default Items;
\ No newline at end of file
+export default Items;
diff --git a/frontend/src/app/components/FormFields/SwitchInput.tsx b/frontend/src/app/components/FormFields/SwitchInput.tsx
index bb04b1a..cb1909b 100644
--- a/frontend/src/app/components/FormFields/SwitchInput.tsx
+++ b/frontend/src/app/components/FormFields/SwitchInput.tsx
@@ -15,13 +15,13 @@ const SwitchInput: React.FC<SwitchProps> = ({ checked, checkedText, uncheckedTex
     return (
         <InputContainer {...{ label, tip, style }} labelStyle = {{display:"inline", paddingRight: '8px'}}>
             <Switch
-                checked = {checked}   
+                checked={checked}
                 checkedChildren={checkedText}
-                unCheckedChildren={uncheckedText} 
+                unCheckedChildren={uncheckedText}
                 onChange={handleChange}
             />
         </InputContainer>
     );
 };
 
-export default SwitchInput;
\ No newline at end of file
+export default SwitchInput;
diff --git a/frontend/src/app/components/ItemForm/ItemForm.tsx b/frontend/src/app/components/ItemForm/ItemForm.tsx
index 88c57ed..12363b7 100644
--- a/frontend/src/app/components/ItemForm/ItemForm.tsx
+++ b/frontend/src/app/components/ItemForm/ItemForm.tsx
@@ -101,7 +101,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                         {isNewCategory &&
                            <SwitchInput
                                     label="Exclude category from base weight"
-                                    checked = {values.excludeWeight}
+                                    checked={values.excludeWeight}
                                     checkedText="Yes"
                                     uncheckedText="No"
                                     tip="All items added to this category will be excluded from base weight"
diff --git a/frontend/src/app/components/PackItems/index.tsx b/frontend/src/app/components/PackItems/index.tsx
index f2f1420..3a14822 100644
--- a/frontend/src/app/components/PackItems/index.tsx
+++ b/frontend/src/app/components/PackItems/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Icon, Tooltip } from 'antd';
 
 import { WeightUnit } from "enums";
 import { PackItem } from "types/item";
@@ -9,6 +10,7 @@ import Item from './Item';
 
 import { getCategories } from "lib/utils/categories";
 import { getWeightByCategory } from "lib/utils/weight";
+import { helpIconStyles } from "styles/common";
 
 import { CategoryGroup } from "styles/common";
 import ExpandablePanel from '../ExpandablePanel';
@@ -42,7 +44,14 @@ const PackItems: React.FC<PackItemProps> = ({ items, removeItem, updateItem, wei
             const catWeight = weightByCategory.find(c => c.id === cat.id);
             const Header = (
                 <>
-                    <h3>{cat.name}</h3>
+                    <h3>
+                        {cat.name}
+                        {cat.exclude_weight &&
+                        <Tooltip title={"Items in this category are excluded from base weight"}
+                                         mouseEnterDelay={.1}>
+                            <Icon type="stop-o" style={helpIconStyles}/>
+                        </Tooltip>}
+                    </h3>
                     <strong>{catWeight!.total.label} {weightUnit}</strong>
                 </>
             );
@@ -71,4 +80,4 @@ const PackItems: React.FC<PackItemProps> = ({ items, removeItem, updateItem, wei
     )
 };
 
-export default PackItems;
\ No newline at end of file
+export default PackItems;