Add components for login form and customer field

src/components/customers/ByjoveCustomerField.vue

@@ -0,0 +1,154 @@
+<template>
+  <b-field :label="label" expanded
+           :type="fieldType">
+
+    <byjove-autocomplete v-if="!readonly && !useDropdown"
+                         v-model="customerUUID"
+                         :service-url="autocompleteUrl"
+                         @input="customerChanged">
+    </byjove-autocomplete>
+
+    <b-select v-if="!readonly && useDropdown"
+              v-model="customerUUID"
+              @input="customerChanged">
+
+      <option v-for="customer in customers"
+              :key="customer.uuid"
+              :value="customer.uuid">
+        {{ customer.name }}
+      </option>
+
+    </b-select>
+
+    <router-link v-if="readonly"
+                 :to="`/customers/${value}`">
+      {{ readonlyDisplay || value }}
+    </router-link>
+
+  </b-field>
+</template>
+
+<script>
+import ByjoveAutocomplete from '../autocomplete'
+export default {
+    name: 'ByjoveCustomerField',
+
+    components: {
+        ByjoveAutocomplete,
+    },
+
+    props: {
+        name: {
+            type: String,
+        },
+        label: {
+            type: String,
+            default: "Customer",
+        },
+        value: {
+            type: String,
+        },
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+        readonlyDisplay: {
+            type: String,
+        },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        dropdown: {
+            type: Boolean,
+            default: null,
+        },
+        autocompleteUrl: {
+            type: String,
+            // TODO: should not hard-code the "full" api endpoint url here
+            default: '/api/customers/autocomplete',
+        },
+    },
+
+    data() {
+        return {
+            inited: false,
+            customerUUID: null,
+            customers: [],
+        }
+    },
+
+    computed: {
+
+        fieldType() {
+            if (this.required && !this.customerUUID) {
+                return 'is-danger'
+            }
+        },
+
+        useDropdown() {
+
+            // use whatever caller specified, if they did so
+            if (this.dropdown !== null) {
+                return this.dropdown
+            }
+
+            // use setting, provided session is loaded
+            if (this.$store.state.session_established) {
+                return this.$store.state.settings['customer_field_dropdown']
+            }
+
+            // otherwise assume false by default
+            return false
+        },
+
+    },
+
+    created() {
+        this.init()
+    },
+
+    watch: {
+        '$store.state.session_established': 'init',
+    },
+
+    methods: {
+
+        init() {
+            // only need to init once
+            if (this.inited) {
+                return
+            }
+
+            // cannot init until session is established
+            if (!this.$store.state.session_established) {
+                return
+            }
+
+            this.inited = true
+
+            // fetch any needed data
+            this.fetchData()
+        },
+
+        fetchData() {
+
+            // nothing to fetch if not using dropdown
+            if (!this.useDropdown) {
+                return
+            }
+
+            // get all customers for dropdown
+            this.$http.get('/api/customers?sort=name|asc').then(response => {
+                this.customers = response.data.customers
+            })
+        },
+
+        customerChanged(value) {
+            this.$emit('input', value)
+        },
+
+    },
+
+}
+</script>

src/components/customers/index.js

@@ -0,0 +1,27 @@
+import ByjoveCustomerField from './ByjoveCustomerField.vue'
+
+// Declare install function executed by Vue.use()
+export function install(Vue) {
+    if (install.installed) return;
+    install.installed = true;
+    Vue.component('ByjoveCustomerField', ByjoveCustomerField);
+}
+
+// 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 ByjoveCustomerField