Add and edit size of item.

website/assets/sass/style.sass

@@ -1148,7 +1148,7 @@ footer
  height: auto
  display: block
  padding: 1.2rem 1.5rem
- line-height: 1
+ line-height: 1.3
  font-size: $size-7
 
  &.is-checkbox
@@ -1160,6 +1160,9 @@ footer
  font-size: $size-7
  font-weight: normal
 
+ i
+ font-size: inherit
+
 .oh 
  overflow: hidden
 

website/pages/merchant/items/create.vue

@@ -30,6 +30,9 @@
  </div>
  <div class="field" v-if="warehouse.dimensions">
  <label class="label">Position:</label>
+ <p class="help is-size-8">
+ X and Y specify the row and column respectively and Z specifies which shelf the product will be on.
+ </p>
  <div class="control columns">
  <div class="column is-4">
  <select 
@@ -84,7 +87,25 @@
  </div>
  </div>
  </div>
- <div class="field" v-if="warehouse.dimensions">
+ <div class="field">
+ <div class="control">
+ <label class="label">Size:</label>
+ <p class="help is-size-8">
+ <i>Tiny</i> - 3 of these can fit in the robots basket, <i>Small</i> - 2 can fit, <i>Large</i> - 1 can fit.
+ </p>
+ <select 
+ name="size" 
+ id="size" 
+ class="input"
+ v-model="size">
+
+ <option value="tiny">Tiny</option>
+ <option value="small">Small</option>
+ <option value="large">Large</option>
+ </select>
+ </div>
+ </div>
+ <div class="field">
  <div class="control">
  <label class="label">Price:</label>
  <input class="input" type="number" placeholder="Enter item price" v-model.number="price">
@@ -134,6 +155,7 @@ export default {
  },
  quantity: null,
  unit: null,
+ size: 'tiny',
  price: null
  }
  },
@@ -177,6 +199,7 @@ export default {
  position: this.position,
  quantity: this.quantity,
  unit: this.unit,
+ size: this.size,
  price: this.price,
  }, {
  headers: {

website/pages/merchant/items/edit/_id.vue

@@ -84,6 +84,24 @@
  </div>
  </div>
  </div>
+ <div class="field">
+ <div class="control">
+ <label class="label">Size:</label>
+ <p class="help is-size-8">
+ <i>Tiny</i> - 3 of these can fit in the robots basket, <i>Small</i> - 2 can fit, <i>Large</i> - 1 can fit.
+ </p>
+ <select 
+ name="size" 
+ id="size" 
+ class="input"
+ v-model="item.size">
+
+ <option value="tiny">Tiny</option>
+ <option value="small">Small</option>
+ <option value="large">Large</option>
+ </select>
+ </div>
+ </div>
  <div class="field" v-if="warehouse.dimensions">
  <div class="control">
  <label class="label">Price:</label>

website/pages/merchant/items/index.vue

@@ -43,6 +43,7 @@
  <td>Quantity</td>
  <td>Unit</td>
  <td>Price</td>
+ <td>Size</td>
  <td>Edit items</td>
  <td>Delete items</td>
  </tr>
@@ -64,7 +65,10 @@
  {{ item.quantity }}
  </td>
  <td>
- {{ item.unit }}
+ {{ item.unit ? item.unit : '-' }}
+ </td>
+ <td>
+ {{ item.size }}
  </td>
  <td>
  {{ item.price }} GBP

website/pages/merchant/warehouses/_id.vue

@@ -117,6 +117,7 @@
  <td>Position</td>
  <td>Quantity</td>
  <td>Unit</td>
+ <td>Size</td>
  <td>Price</td>
  <td>Edit items</td>
  <td>Delete items</td>
@@ -139,7 +140,10 @@
  {{ item.quantity }}
  </td>
  <td>
- {{ item.unit }}
+ {{ item.unit ? item.unit : '-' }}
+ </td>
+ <td>
+ {{ item.size }}
  </td>
  <td>
  {{ item.price }} GBP

website/pages/merchant/warehouses/create.vue

@@ -38,7 +38,7 @@
  <div class="field">
  <label class="label">Warehouse schema:</label>
  <p class="help is-size-8">
- Enter the dimensions of the warehouse. X and Y values are the amount of rows and columns that the warehouse phisically has for the robot.
+ Enter the dimensions of the warehouse. X and Y values are the amount of rows and columns that the warehouse physically has for the robot.
  </p>
  <div class="control columns">
  <div class="column is-6">