Add initial "inventory" component, for updating row counts

src/components/index.js

@@ -5,6 +5,7 @@ import ByjoveFeedback from './feedback'
 import ByjoveAutocomplete from './autocomplete'
 import ByjoveModelIndex from './model-index'
 import ByjoveModelCrud from './model-crud'
+import ByjoveInventory from './inventory'
 import ByjoveReceiving from './receiving'
 
 export {
@@ -15,5 +16,6 @@ export {
     ByjoveAutocomplete,
     ByjoveModelIndex,
     ByjoveModelCrud,
+    ByjoveInventory,
     ByjoveReceiving,
 }

src/components/inventory/ByjoveInventory.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="inventory">
+
+    <nav class="breadcrumb">
+      <ul>
+        <li>
+          <router-link :to="getIndexUrl()">
+            Inventory
+          </router-link>
+        </li>
+        <li>
+          <router-link :to="getBatchUrl()">
+            {{ row.batch_id_str }}
+          </router-link>
+        </li>
+        <li>
+          &nbsp; {{ row[productKey] }}
+        </li>
+      </ul>
+    </nav>
+
+    <div style="display: flex;">
+      <div style="flex-grow: 1;">
+        <p class="has-text-weight-bold">
+          {{ row.brand_name }}
+        </p>
+
+        <p class="has-text-weight-bold">
+          {{ row.description }} {{ row.size }}
+        </p>
+
+        <p class="has-text-weight-bold">
+          <br />
+          1 CS = {{ row.case_quantity || 1 }} {{ row.unit_uom }}
+        </p>
+      </div>
+      <div>
+        <img :src="row.image_url" />
+      </div>
+    </div>
+
+    <b-field grouped>
+      <b-field label="Cases" expanded>
+        <b-input v-model="row.cases"
+                 type="number"
+                 :disabled="!shouldAllowCases()">
+        </b-input>
+      </b-field>
+      <b-field label="Units" expanded>
+        <b-input v-model="row.units"
+                 type="number">
+        </b-input>
+      </b-field>
+    </b-field>
+
+    <div class="buttons">
+      <b-button type="is-primary"
+                icon-left="save"
+                @click="saveCounts()">
+        Save Counts
+      </b-button>
+      <b-button tag="router-link"
+                :to="`/inventory/rows/${row.uuid}`">
+        Cancel
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ByjoveInventory',
+    props: {
+        productKey: {
+            type: String,
+            default: 'upc_pretty',
+        },
+        allowCases: {
+            type: Boolean,
+            default: true,
+        },
+        allowEdit: {
+            type: Boolean,
+            default: false,
+        },
+        allowDelete: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            row: {},
+        }
+    },
+
+    created() {
+        this.fetch(this.$route.params.uuid)
+    },
+
+    methods: {
+
+        getIndexUrl() {
+            return '/inventory/'
+        },
+
+        getBatchUrl() {
+            return `/inventory/${this.row.batch_uuid}`
+        },
+
+        getViewUrl() {
+            return `/inventory/rows/${this.row.uuid}`
+        },
+
+        getDeleteUrl() {
+            return `/inventory/rows/${this.row.uuid}/delete`
+        },
+
+        getApiUrl(uuid) {
+            if (!uuid) {
+                uuid = this.row.uuid
+            }
+            return `/api/inventory-batch-row/${uuid}`
+        },
+
+        shouldAllowCases() {
+            if (!this.allowCases) {
+                return false
+            }
+            return this.row.allow_cases
+        },
+
+        shouldAllowEdit() {
+            if (!this.allowEdit) {
+                return false
+            }
+            return true
+        },
+
+        shouldAllowDelete() {
+            if (!this.allowDelete) {
+                return false
+            }
+            return true
+        },
+
+        fetch(uuid) {
+            let url = this.getApiUrl(uuid)
+            this.$http.get(url).then(response => {
+                this.row = response.data.data
+                if (this.row.batch_executed || this.row.batch_complete) {
+                    // cannot edit this row, so view it instead
+                    this.$router.push(this.getViewUrl())
+                }
+            }, response => {
+                if (response.status == 403) { // forbidden; redirect to model index
+                    this.$buefy.toast.open({
+                        message: "You do not have permission to access that page.",
+                        type: 'is-danger',
+                    })
+                    this.$router.push(this.getIndexUrl())
+                } else {
+                    this.$buefy.toast.open({
+                        message: "Failed to fetch page data!",
+                        type: 'is-danger',
+                    })
+                }
+            })
+
+        },
+
+        saveCounts() {
+            let url = this.getApiUrl()
+            let params = {
+                row: this.row.uuid,
+                units: this.row.units,
+            }
+            if (this.shouldAllowCases()) {
+                params.cases = this.row.cases
+            }
+            this.$http.post(url, params).then(response => {
+                if (response.data.data) {
+                    // return to batch view
+                    this.$router.push(this.getBatchUrl())
+                } else {
+                    this.$buefy.toast.open({
+                        message: response.data.error || "Failed to save counts!",
+                        type: 'is-danger',
+                    })
+                }
+            }, response => {
+                this.$buefy.toast.open({
+                    message: "Failed to save counts (server error)!",
+                    type: 'is-danger',
+                })
+            })
+        },
+    },
+}
+</script>

src/components/inventory/index.js

@@ -0,0 +1,28 @@
+// Import vue component
+import ByjoveInventory from './ByjoveInventory.vue'
+
+// Declare install function executed by Vue.use()
+export function install(Vue) {
+    if (install.installed) return;
+    install.installed = true;
+    Vue.component('ByjoveInventory', ByjoveInventory);
+}
+
+// Create module definition for Vue.use()
+const plugin = {
+    install,
+};
+
+// Auto-install when vue is found (eg. in browser via <script> tag)
+let GlobalVue = null;
+if (typeof window !== 'undefined') {
+    GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+    GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+    GlobalVue.use(plugin);
+}
+
+// To allow use as module (npm/webpack/etc.) export component
+export default ByjoveInventory