Feature: Add part name

jest.config.js

@@ -6,4 +6,7 @@ module.exports = {
   testEnvironmentOptions: {
     customExportConditions: ["node", "node-addons"],
   },
+  moduleNameMapper: {
+    '^axios$': require.resolve('axios'),
+  },
 }

package.json

@@ -10,28 +10,28 @@
   },
   "dependencies": {
     "@sum.cumo/vue-browserupdate": "^3.0.1",
-    "axios": "^0.21.4",
-    "bootstrap": "^4.6.0",
-    "bootstrap-vue": "^2.21.2",
-    "core-js": "^3.13.0",
+    "axios": "^1.6.5",
+    "bootstrap": "^4.6.2",
+    "bootstrap-vue": "^2.23.1",
+    "core-js": "^3.35.0",
     "raw-loader": "^4.0.2",
     "vue": "^2.6.12",
     "vue-showdown": "^2.4.1",
-    "webpack": "^5.74.0"
+    "webpack": "^5.89.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-unit-jest": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/test-utils": "^1.2.0",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/test-utils": "^1.3.6",
     "@vue/vue2-jest": "^27.0.0-alpha.3",
     "babel-eslint": "^10.0.3",
-    "eslint": "^7.27.0",
-    "eslint-plugin-vue": "^7.9.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^7.20.0",
     "jest": "^27.1.0",
     "jest-raw-loader": "^1.0.1",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.7.16"
   },
   "eslintConfig": {
     "root": true,

src/components/DataTable.vue

@@ -1,7 +1,8 @@
 <template>
     <b-table
         id="table-input"
-        :fields="[{key: 'quantity', sortable:true},
+        :fields="[{key: 'name', sortable:true},
+                  {key: 'quantity', sortable:true},
                   {key: 'length', sortable:true},
                   {key: 'delete', label: '', thStyle: { width: '60px'}}
         ]"
@@ -25,6 +26,13 @@
                 <b-icon-trash-fill/>
             </b-button>
         </template>
+        <template #cell(name)="row">
+            <b-form-input
+                v-model="row.item.name"
+                lazy
+                :placeholder="'Part' + (row.index + 1)"
+            />
+        </template>
         <template #cell(quantity)="row">
             <b-form-input
                 v-model="row.item.quantity"
@@ -59,6 +67,14 @@
 
         <!-- can't extract into component (not trivial, component can't have multiple root children) -->
         <template #custom-foot>
+            <b-th>
+                <b-form-input
+                    ref="input_new_name"
+                    v-model="new_name"
+                    placeholder="enter new name (optional)"
+                    @keydown.enter="addRow()"
+                />
+            </b-th>
             <b-th>
                 <b-form-input
                     ref="input_new_quantity"
@@ -119,6 +135,7 @@
         },
         data() {
             return {
+                new_name: '',
                 new_length: '',
                 new_quantity: '',
 
@@ -143,11 +160,12 @@
                     return
                 }
 
-                let target = {quantity: this.new_quantity, length: this.new_length};
+                let target = {name: this.new_name, quantity: this.new_quantity, length: this.new_length};
 
                 target.id = this.target_sizes.length;
                 this.target_sizes.push(target);
 
+                this.new_name = '';
                 this.new_quantity = '';
                 this.new_length = '';
                 this.$refs["input_new_quantity"].focus();
@@ -176,4 +194,4 @@
     table#table-input .flip-list-move {
         transition: transform 0.5s;
     }
-</style>
+</style>

src/components/LengthsList.vue

@@ -6,18 +6,21 @@
         >
             <b-progress
                 :max="maxLength"
-                height="2rem"
+                height="2.5rem"
             >
                 <template v-for="(length, index) in stock">
                     <b-progress-bar
                         :key="index"
-                        :value="length"
+                        :value="length[0]"
                         class="bar_label"
                         show-value
                         variant="secondary"
-                    />
+                    >
+                        <span>{{ length[0] }}</span>
+                        <span class="bar_label_name">{{ length[1] }}</span>
+                    </b-progress-bar>
                     <b-progress-bar
-                        :key="-1-index"
+                        :key="-1 - index"
                         :value="cutWidth"
                         striped
                         variant="dark"
@@ -28,30 +31,35 @@
     </b-list-group>
 </template>
 <script>
-    import {Result} from "@/components/data/Result";
+import { Result } from "@/components/data/Result";
 
-    export default {
-        name: 'LengthsList',
-        props: {
-            // use internal job for values
-            maxLength: {
-                type: Number,
-                required: true
-            },
-            cutWidth: {
-                type: Number,
-                required: true
-            },
-            result: {
-                type: Result,
-                required: true
-            }
-        }
-    }
+export default {
+  name: "LengthsList",
+  props: {
+    // use internal job for values
+    maxLength: {
+      type: Number,
+      required: true,
+    },
+    cutWidth: {
+      type: Number,
+      required: true,
+    },
+    result: {
+      type: Result,
+      required: true,
+    },
+  },
+};
 </script>
 <style scoped>
-
-    .bar_label {
-        font-size: large;
-    }
-</style>
+.bar_label {
+  font-size: large;
+  padding-top: 0.2rem;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.bar_label_name {
+  font-size: 0.75rem;
+}
+</style>

src/components/SolverInput.vue

@@ -80,39 +80,15 @@
         },
         computed: {
             job() {
-                return new Job(Number(this.max_length), Number(this.cut_width), this.list_to_sizes(this.target_sizes));
+                return new Job(Number(this.max_length), Number(this.cut_width), this.target_sizes);
             },
             valid() {
                 return this.job.valid();
             }
         },
         methods: {
             sizes_as_list(target_sizes) {
-                let out = [];
-
-                for (const [key, value] of Object.entries(target_sizes)) {
-                    // json won't allow numbers as keys
-                    out.push({"length": parseInt(key), "quantity": value})
-                }
-
-                return out
-            },
-            list_to_sizes(sizes_list) {
-                let out = {};
-
-                for (const entry of sizes_list) {
-                    // json won't allow numerical keys
-                    const length = entry["length"].toString();
-                    const quantity = entry["quantity"];
-
-                    // json won't allow numbers as keys
-                    let saved_quantity = out[length];
-                    if (saved_quantity === undefined) saved_quantity = 0;
-                    saved_quantity += quantity;
-                    out[length] = saved_quantity;
-                }
-
-                return out
+                return target_sizes.map((size) => ({"name": size.name, "quantity": parseInt(size.quantity), "length": parseInt(size.length)}));
             },
             validCut(width) {
                 return (Number.isInteger(width) && width >= 0 && width <= this.max_length / 10);

src/tests/data/testjob.json

@@ -1,8 +1,16 @@
 {
   "cut_width": 2,
   "max_length": 1500,
-  "target_sizes": {
-    "500": 2,
-    "200": 4
-  }
+  "target_sizes": [
+    {
+      "length": "200",
+      "name": "Part1",
+      "quantity": "4"
+    },
+    {
+      "length": "500",
+      "name": "Part2",
+      "quantity": "2"
+    }
+  ]
 }

vue.config.js

@@ -1,20 +1,20 @@
 // const webpack = require('webpack');
 
-process.env.VUE_APP_VERSION = require('./package.json').version;
+process.env.VUE_APP_VERSION = require("./package.json").version;
 
 module.exports = {
-    lintOnSave: false,
-    publicPath: './',
+  lintOnSave: false,
+  publicPath: "./",
 
-    configureWebpack: {
-        // everything for webpack.config.js
-        module: {
-            rules: [
-                {
-                    test: /\.md$/,
-                    use: 'raw-loader',
-                }
-            ]
-        }
-    }
-}
+  configureWebpack: {
+    // everything for webpack.config.js
+    module: {
+      rules: [
+        {
+          test: /\.md$/,
+          use: "raw-loader",
+        },
+      ],
+    },
+  },
+};