Users can exclude custom categories from base weight

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;
+module.exports = router;

frontend/src/app/Inventory/Table.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { Icon, Tooltip } from 'antd';
 
 import { Category } from "types/category";
 import { Item as ItemType } from 'types/item';
 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;
+export default Table;

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;
+export default Items;

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);
+export default React.memo(CategoryChart);

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;
+export default SwitchInput;

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';
+export { Label } from './styles';

frontend/src/app/components/ItemForm/ItemForm.tsx

@@ -3,15 +3,15 @@ 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";
 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,14 +90,23 @@ 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);
                             }}
                             error={wasSubmitted && !!errors.categoryId}
                             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 || ''}

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;
+export default PackItems;

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()
     };
-};
+};
+
+export const categoryCheckIfNew = (categories: Category[], value: number | string | undefined): boolean => {
+    if (!value) return false;
+    return categories.find(cat => cat.id === value) ? false : true;
+};

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'> & {