Add current state of the Vue frontend

vue/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

vue/src/views/Customer.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <div v-if="error">{{ error }}</div>
+        This is customer {{ number }} with prefix {{ prefix }}.
+        <h3>Contacts</h3>
+        <EntityList :columns="['role','contactId','id','firstName','lastName']" :entities="contacts" />
+    </div>
+</template>
+
+<script>
+    import HSAdmin from "../hsadmin";
+    import EntityList from "../components/EntityList";
+
+    export default {
+        name: "Customer",
+        components: {EntityList},
+        data () { return {
+            error: false,
+            number: undefined,
+            prefix: undefined,
+            contacts: [],
+        }},
+        props: { hsadmin: HSAdmin, id: Number },
+        created () { this.fetch() },
+        watch: { "$route": "fetch" },
+        methods: {
+            async fetch () {
+                this.fetchCustomer();
+                this.fetchContacts();
+            },
+            async fetchCustomer () {
+                const res = await this.hsadmin.get(`customers/${this.id}`);
+                this.number = res.data.number;
+                this.prefix = res.data.prefix;
+            },
+            async fetchContacts () {
+                const relationsResponse = await this.hsadmin.get('customer-contacts', { params: {
+                    "customerId.equals": this.id,
+                }});
+                const relations = relationsResponse.data;
+                // TODO: better param serializing
+                const contactIdQuery = relations.map(relation => `id.in=${relation.contactId}`).join("&");
+                const contactsResponse = await this.hsadmin.get(`contacts?${contactIdQuery}`);
+                const contactsById = {};
+                for (const contact of contactsResponse.data) {
+                    contactsById[contact.id] = contact;
+                }
+                for (const relation of relations) {
+                    Object.assign(relation, contactsById[relation.contactId]);
+                }
+                this.contacts = relations;
+            },
+        },
+    }
+</script>

vue/src/views/Customers.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <div v-if="error">{{ error }}</div>
+        <EntityList :columns="['id', 'number', 'prefix']" link-column="id" :entities="customers" />
+    </div>
+</template>
+
+<script>
+    import HSAdmin from "../hsadmin";
+    import EntityList from "../components/EntityList";
+
+    export default {
+        name: "Customers",
+        components: {EntityList},
+        data () { return {
+            error: false,
+            customers: [],
+        }},
+        props: { hsadmin: HSAdmin },
+        created () { this.fetch() },
+        watch: { "$route": "fetch" },
+        methods: {
+            async fetch () {
+                const res = await this.hsadmin.get("customers");
+                this.customers = res.data;
+            }
+        },
+    }
+</script>

vue/src/views/Home.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'home',
+  components: {
+    HelloWorld
+  }
+}
+</script>

vue/src/views/Login.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="hsa-login">
+        <!-- TODO: the <input>s need unique IDs in order to create labels, see e.g. https://stackoverflow.com/a/50121385/417040 -->
+        <input type="text" class="user" v-model="user" :disabled="working" />:<input type="password" class="pass" v-model="pass" :disabled="working" />
+        <button v-on:click="clickHandler" :disabled="working">Log In</button>
+        <div v-if="error">{{ error }}</div>
+    </div>
+</template>
+
+<script>
+    import HSAdmin from "../hsadmin";
+    export default {
+        name: "Login",
+        props: { hsadmin: HSAdmin },
+        data () { return {
+            user: "admin",
+            pass: "admin",
+            error: false,
+            working: false,
+        }},
+        methods: {
+            clickHandler: async function () {
+                this.error = false;
+                this.working = true;
+                try {
+                    await this.hsadmin.authenticate(this.user, this.pass);
+                    this.working = false;
+                } catch (error) {
+                    this.working = false;
+                    this.error = error;
+                    return;
+                }
+                this.$router.push({name: "home"});
+            }
+        },
+    }
+</script>