Add Notes field to Inventory Items

When creating a new Item in the inventory there is an option to add
notes.
These notes Item carry over as the default entry to the PackItem notes
when added to a Pack.
To save space on the Inventory list, a blue dot at the start
of the line item shows that notes are attached. A grey dot
shows that no notes have been written on the item. When
hovering over the dot, the notes are shown if present.

Author: Callisto13

api/migrations/20210103153722-add-item-notes.js

@@ -0,0 +1,15 @@
+'use strict';
+
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+      return queryInterface.addColumn('items', 'notes', {
+                  type: Sequelize.STRING(500),
+                  defaultValue: ''
+              }
+      })
+  },
+
+  down: (queryInterface, Sequelize) => {
+        return queryInterface.removeColumn('items', 'notes'),
+  }
+};

api/models/item.js

@@ -66,6 +66,9 @@ const item = (sequelize, DataTypes) => {
             allowNull: false,
             defaultValue: false
         },
+        notes: {
+            type: DataTypes.STRING(500)
+        },
     });
 
     Item.associate = models => {
@@ -88,4 +91,4 @@ const item = (sequelize, DataTypes) => {
     return Item;
 };
 
-export default item;
+export default item;

frontend/src/app/Inventory/Item.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { isEqual } from 'lodash';
+import { Icon, Tooltip } from 'antd';
 
 import { Item as ItemType } from "types/item";
 import { Update } from "types/api/item";
@@ -8,11 +9,12 @@ import { AppContext } from "AppContext";
 import { Input, Option, SelectCreatable, Select } from "app/components/FormFields";
 import { alertSuccess, alertWarn } from "app/components/Notifications";
 import EditItem from "app/components/EditItem";
+import { DotIcon } from "app/components/Icons";
 
 import { categoryOptions, weightUnitOptions } from "lib/utils/form";
 import { categorySelectValue } from "lib/utils/categories";
 
-import { Grid, PairGrid, inlineStyles } from "styles/grid";
+import { Grid, PairGrid, NotesIndicator, inlineStyles } from "styles/grid";
 
 interface ItemProps {
     item: ItemType;
@@ -55,24 +57,32 @@ const Item: React.FC<ItemProps> = ({item, updateItem, fetchItems}) => {
             .catch(() => alertWarn({message: 'Error updating item.'}));
     }
 
+
     const categoryValue = categorySelectValue(app.categories, copy.categoryId);
-    const {product_name, name, weight_unit, weight, price} = copy;
+    const {product_name, name, weight_unit, weight, price, notes} = copy;
+    const hasNotes = notes !== "";
     return (
         <>
             <Grid>
+                <div className="align-center">
+                    <NotesIndicator className={hasNotes ? 'active' : ''}>
+                        <Tooltip title={hasNotes ? notes : "No notes on this item"}
+                                 mouseEnterDelay={.1} placement="right">
+                            <Icon component={DotIcon}/>
+                        </Tooltip>
+                    </NotesIndicator>
+                </div>
                 <div>
                     <Input value={name || ''}
                            onChange={v => update('name', v)}
                            onBlur={handleSave}
                            style={inlineStyles}/>
                 </div>
-                <div>
                     <Input value={product_name || ''}
                            placeholder="product name"
                            onChange={v => update('product_name', v)}
                            onBlur={handleSave}
                            style={inlineStyles}/>
-                </div>
                 <div>
                     <SelectCreatable
                         options={categoryOptions(app.categories)}
@@ -130,4 +140,4 @@ const Item: React.FC<ItemProps> = ({item, updateItem, fetchItems}) => {
     )
 };
 
-export default React.memo(Item);
+export default React.memo(Item);

frontend/src/app/PackForm/PackForm.tsx

@@ -62,7 +62,7 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
     }
 
     const addItem = (item: Item) => {
-        const items = Object.assign([], [...packItems, { ...item, packItem: { notes: '', quantity: 1, worn: false } }]);
+        const items = Object.assign([], [...packItems, { ...item, packItem: { notes: item.notes, quantity: 1, worn: false } }]);
         setPackItems(items);
     };
 
@@ -259,4 +259,4 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
     );
 };
 
-export default PackForm;
+export default PackForm;

frontend/src/app/components/EditItem/index.tsx

@@ -53,7 +53,7 @@ const EditForm: React.FC<FormSpecs.Props> = (
         </ButtonGroup>
     );
 
-    const { product_name, name, weight_unit, weight, price, product_url } = record;
+    const { product_name, name, weight_unit, weight, price, product_url, notes } = record;
     return (
         <Modal
             title={<ModalTitle>Edit Item</ModalTitle>}
@@ -109,6 +109,12 @@ const EditForm: React.FC<FormSpecs.Props> = (
                    type="url"
                    value={product_url || ''}
                    onChange={v => updateItem('product_url', v)}
+                   />
+
+            <Input label="Notes"
+                   value={notes || ''}
+                   placeholder="Care instructions, further details, etc..."
+                   onChange={v => updateItem('notes', v)}
                    last={true}/>
         </Modal>
     )
@@ -118,4 +124,4 @@ const EditWithApi = withApi<FormSpecs.ApiProps>(api => ({
     deleteItem: api.ItemService.delete
 }))(EditForm);
 
-export default EditWithApi;
+export default EditWithApi;

frontend/src/app/components/Icons/index.tsx

@@ -1,5 +1,15 @@
 import * as React from 'react';
 
+export const DotIcon = () => (
+    <svg x="0px" y="0px" width="32px" height="30px" viewBox="0 0 20 20" xmlSpace="preserve">
+        <g>
+            <g>
+                <path d="M7.8 10c0 1.215 0.986 2.2 2.201 2.2s2.199-0.986 2.199-2.2c0-1.215-0.984-2.199-2.199-2.199s-2.201 0.984-2.201 2.199z"></path>
+            </g>
+        </g>
+    </svg>
+);
+
 export const ShirtIcon = () => (
     <svg x="0px" y="0px" width="42px" height="40px" viewBox="0 0 40.143 40.143" xmlSpace="preserve">
         <g>
@@ -69,4 +79,4 @@ export const TempIcon = () => (
         <ellipse cx="4.33332" cy="17.5" rx="1" ry="0.5" transform="rotate(-28.5335 4.33332 17.5)" fill="#FF8C8C"/>
     </svg>
 
-);
+);

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

@@ -41,7 +41,8 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                 weight_unit: default_weight_unit,
                 price: undefined,
                 product_url: '',
-                newCategory: false
+                newCategory: false,
+                notes: ''
             }}
             validationSchema={Yup.object().shape({
                 name: Yup.string().required('Item name is required'),
@@ -138,6 +139,12 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                             onChange={v => setFieldValue('product_url', v)}
                             allowedLength={ItemConstants.product_url}
                         />
+                        <Input
+                            label="Notes"
+                            value={values.notes || ''}
+                            placeholder="Care instructions, further details, etc..."
+                            onChange={v => setFieldValue('notes', v)}
+                        />
                         <Button onClick={submitForm}
                                 disabled={isSubmitting}
                                 block={true}
@@ -172,4 +179,4 @@ const ItemFormWithProps = withApi<FormSpecs.ApiProps>(api => ({
     exportCsv: api.ItemService.exportCSV
 }))(ItemForm);
 
-export default ItemFormWithProps;
+export default ItemFormWithProps;

frontend/src/styles/grid.ts

@@ -3,11 +3,14 @@ import styled from "styled-components";
 
 export const Grid = styled.div`
   display: grid;
-  grid-template-columns: 160px minmax(200px, auto) 160px 140px 60px 30px;
+  grid-template-columns: 2px 160px minmax(200px, auto) 160px 140px 60px 30px;
   grid-template-rows: auto;
   grid-column-gap: 16px;
   align-items: center;
-    
+
+  .align-center {
+    justify-self: center;
+  }
   .align-right {
     justify-self: end;
   }
@@ -32,12 +35,27 @@ export const PackItemGrid = styled.div`
   grid-column-gap: 16px;
   align-items: center;
   line-height: 1.25em;
-  
+
   .align-right {
     justify-self: end;
   }
-  
+
   .align-center {
     justify-self: center;
   }
 `;
+
+export const NotesIndicator = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  svg {
+    fill: #CCC;
+    width: 20px;
+  }
+
+  &.active svg {
+    fill: #34ACD4;
+    width: 20px;
+  }
+`;

frontend/src/styles/style.less

@@ -52,7 +52,7 @@ body {
     padding: 8px;
     text-align: center;
     line-height: 1.25rem;
-    max-width: 180px;
+    width: fit-content;
   }
 
   .ant-spin-dot {

frontend/src/types/item.ts

@@ -9,6 +9,7 @@ export interface BaseItem {
     weight_unit?: WeightUnit;
     price?: number;
     product_url?: string;
+    notes?: string;
 }
 
 export interface Item extends BaseItem {
@@ -57,4 +58,4 @@ export enum ItemConstants {
     name = 200,
     product_name = 500,
     product_url = 500
-}
+}