Initial version of vue frontend.

frontend-angular/src/app/app.component.html

@@ -16,7 +16,7 @@
   <div id="navbarBasicExample" class="navbar-menu">
     <div class="navbar-start">
       <a class="navbar-item" routerLink="/" i18n="app-home-link-label">
-        Home
+        PeopleIndex
       </a>
 
       <a class="navbar-item" routerLink="/people/add" i18="app-add-person-link-label">

frontend-angular/src/locale/messages.de.xlf

@@ -11,7 +11,7 @@
         <note priority="1" from="description">app-people-management-limited-label</note>
       </trans-unit>
       <trans-unit id="815cad6a13eee2edfed8a43dc3a64d88b1b2db27" datatype="html">
-        <source> Home </source>
+        <source> PeopleIndex </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.html</context>
           <context context-type="linenumber">19,20</context>

frontend-vue/package.json

@@ -8,8 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bulma": "^0.9.1",
+    "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
+    "vue-i18n": "^9.0.0-beta.18",
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
@@ -20,7 +23,10 @@
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0"
+    "eslint-plugin-vue": "^7.0.0-0",
+    "node-sass": "^5.0.0",
+    "sass": "^1.32.0",
+    "sass-loader": "^10.1.0"
   },
   "eslintConfig": {
     "root": true,

frontend-vue/src/App.vue

@@ -1,30 +1,66 @@
 <template>
-  <div id="nav">
+  <nav class="navbar" role="navigation" aria-label="main navigation">
-    <router-link to="/">Home</router-link> |
+    <div class="navbar-brand">
-    <router-link to="/about">About</router-link>
+      <a class="navbar-item" href="/">
+        <h2 id="logo" class="is-uppercase bold">
+          {{ $t('app.navbar.banner') }}
+        </h2>
+      </a>
+
+      <a href="#logo" role="button" class="navbar-burger" aria-label="menu"
+         aria-expanded="false"
+         data-target="mainNavbar">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
     </div>
+
+    <div id="mainNavbar" class="navbar-menu">
+      <div class="navbar-start">
+        <router-link class="navbar-item" to="/">
+          {{ $t('app.navbar.home.label') }}
+        </router-link>
+
+        <router-link class="navbar-item" to="/people/add">
+          {{ $t('app.navbar.addPerson.label') }}
+        </router-link>
+
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a href="#logo" class="button is-primary">
+              <strong>
+                {{ $t('app.navbar.signup') }}
+              </strong>
+            </a>
+            <a href="#logo" class="button is-light">
+              <strong>
+                {{ $t('app.navbar.login') }}
+              </strong>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
   <router-view/>
 </template>
 
 <style>
-#app {
+@import "~bulma";
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>
+<script>
+import {provide} from 'vue';
+import {PeopleServiceDIKey} from "./utils/constants";
+import RestPeopleService from "./services/RestPeopleService";
+
+export default {
+  setup() {
+    provide(PeopleServiceDIKey, new RestPeopleService());
+    return {};
+  }
+};
+</script>

frontend-vue/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

frontend-vue/src/components/PersonForm.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="field is-horizontal">
+    <div class="field-label is-medium">
+      <label for="firstName"
+             class="label">{{ $t('app.people.form.firstName.label') }}</label>
+    </div>
+    <div class="field-body">
+      <div class="field">
+        <div class="control">
+          <input
+              id="firstName"
+              name="firstName"
+              type="text"
+              :class="{'input': true, 'is-danger': errors.firstName}"
+              v-model="formData.firstName"
+              :placeholder="$t('app.people.form.firstName.label')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="field is-horizontal">
+    <div class="field-label is-medium">
+      <label for="lastName"
+             class="label">{{ $t('app.people.form.lastName.label') }}</label>
+    </div>
+    <div class="field-body">
+      <div class="field">
+        <div class="control">
+          <input
+              id="lastName"
+              name="lastName"
+              type="text"
+              :class="{'input': true, 'is-danger': errors.lastName}"
+              v-model="formData.lastName"
+              :placeholder="$t('app.people.form.lastName.label')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="field is-horizontal">
+    <div class="field-label is-medium">
+      <label for="email"
+             class="label">{{ $t('app.people.form.email.label') }}</label>
+    </div>
+    <div class="field-body">
+      <div class="field">
+        <div class="control">
+          <input
+              id="email"
+              name="email"
+              type="text"
+              :class="{'input': true, 'is-danger': errors.email}"
+              v-model="formData.email"
+              :placeholder="$t('app.people.form.email.label')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="field is-horizontal">
+    <div class="field-label is-medium">
+      <label for="status"
+             class="label">{{ $t('app.people.form.status.label') }}</label>
+    </div>
+    <div class="field-body">
+      <div class="field">
+        <div class="control">
+          <div class="select is-fullwidth">
+            <select
+                id="status"
+                name="status"
+                :class="{'input': true, 'is-danger': errors.status}"
+                v-model="formData.status">
+              <option
+                  value="0">{{ $t('app.people.form.status.value.active') }}
+              </option>
+              <option
+                  value="1">{{ $t('app.people.form.status.value.inactive') }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="field">
+    <div class="control">
+      <button type="button" class="button is-primary" @click="submitPerson()">
+        {{ $t('app.people.form.submit.label') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {computed, reactive, toRefs, watch, watchEffect, inject, toRaw} from 'vue';
+import {useRouter} from 'vue-router';
+import {isValidEmail} from "../utils/validators";
+import {PeopleServiceDIKey} from "../utils/constants";
+
+export default {
+  props: {
+    id: Number
+  },
+  setup: function (props) {
+    const {id} = toRefs(props);
+    const peopleService = inject(PeopleServiceDIKey);
+    const router = useRouter();
+
+    const formData = reactive({
+      firstName: '',
+      lastName: '',
+      email: '',
+      status: 0
+    });
+
+    const errors = reactive({
+      firstName: null,
+      lastName: null,
+      email: isValidEmail(formData.email),
+      status: null
+    });
+
+    const formHasSomeErrors = computed(() => {
+      return errors.firstName
+          || errors.lastName
+          || errors.email
+          || errors.status;
+    });
+
+    const submitPerson = () => {
+      if (formHasSomeErrors.value) {
+        console.log('Form has some errors', errors)
+        return;
+      }
+
+      const person = toRaw(formData);
+
+      console.log('Submitting person', toRaw(formData));
+      if (id?.value) {
+        // updating person
+        peopleService.updatePerson(id.value, person)
+            .then(updated => {
+              console.log(`Successfully updated person ${id.value}. New data: `, updated);
+              router.push('/');
+            });
+      } else {
+        // creating person
+        peopleService.createPerson(person)
+            .then(created => {
+              console.log('Successfully create person with data: ', created);
+              router.push('/');
+            });
+      }
+    };
+
+    const updatePersonStateWithData = person => {
+      formData.firstName = person.firstName;
+      formData.lastName = person.lastName;
+      formData.email = person.email;
+      formData.status = person.status;
+    };
+
+    watch(
+        () => formData.email,
+        (curr) => {
+          errors.email = isValidEmail(curr);
+        }
+    )
+
+    if (id?.value) {
+      watchEffect(() => {
+        peopleService.getPersonById(id.value)
+            .then(person => {
+              updatePersonStateWithData(person);
+            });
+      });
+    }
+
+    return {formData, personId: id, errors, submitPerson, formHasSomeErrors};
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~bulma";
+</style>

frontend-vue/src/locales/en.json

@@ -0,0 +1,21 @@
+{
+  "app.navbar.banner": "People Management Limited",
+  "app.navbar.home.label": "Home",
+  "app.navbar.addPerson.label": "Add person",
+  "app.people.index.table.id.header": "Id",
+  "app.people.index.table.firstName.header": "First name",
+  "app.people.index.table.lastName.header": "Last name",
+  "app.people.index.table.email.header": "E-mail",
+  "app.people.index.table.status.header": "Status",
+  "app.people.index.table.status.value.active": "Active",
+  "app.people.index.table.status.value.inactive": "Inactive",
+  "app.people.form.firstName.label": "First name",
+  "app.people.form.lastName.label": "Last name",
+  "app.people.form.email.label": "E-mail",
+  "app.people.form.status.label": "Status",
+  "app.people.form.status.value.active": "Active",
+  "app.people.form.status.value.inactive": "Inactive",
+  "app.people.form.submit.label": "Submit",
+  "app.navbar.signup": "Sign up",
+  "app.navbar.login": "Log in"
+}

frontend-vue/src/locales/messages.js

@@ -0,0 +1,7 @@
+import enMessages from './en.json';
+
+const messages = {
+    en: enMessages
+};
+
+export default messages;

frontend-vue/src/main.js

@@ -1,5 +1,16 @@
-import { createApp } from 'vue'
+import {createApp} from 'vue'
+import {createI18n} from 'vue-i18n'
 import App from './App.vue'
 import router from './router'
+import messages from './locales/messages';
 
-createApp(App).use(router).mount('#app')
+const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: messages
+});
+
+createApp(App)
+    .use(router)
+    .use(i18n)
+    .mount('#app')

frontend-vue/src/router/index.js

@@ -1,19 +1,29 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
-import Home from '../views/Home.vue'
+import PeopleIndex from '../views/PeopleIndex.vue'
+import PersonEdit from "../views/PersonEdit";
+import NotFound from "../views/NotFound";
+import PersonAdd from "../views/PersonAdd";
 
 const routes = [
     {
         path: '/',
-    name: 'Home',
+        name: 'PeopleIndex',
-    component: Home
+        component: PeopleIndex
     },
     {
-    path: '/about',
+        path: '/people/edit/:personId',
-    name: 'About',
+        name: 'PersonEdit',
-    // route level code-splitting
+        component: PersonEdit
-    // this generates a separate chunk (about.[hash].js) for this route
+    },
-    // which is lazy-loaded when the route is visited.
+    {
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+        path: '/people/add',
+        name: 'PersonAdd',
+        component: PersonAdd
+    },
+    {
+        path: '/:pathMatch(.*)',
+        name: '404',
+        component: NotFound
     }
 ]
 

frontend-vue/src/services/RestPeopleService.js

@@ -0,0 +1,55 @@
+import {REST_CONTENT_TYPE_HEADERS} from "../utils/constants";
+
+export default class RestPeopleService {
+    getAllPeople() {
+        return fetch('/api/people', {
+            headers: {...REST_CONTENT_TYPE_HEADERS}
+        }).then(resp => {
+            if (resp.status === 200) {
+                return resp.json();
+            } else {
+                return Promise.reject(`Got invalid response code when fetching people: ${resp.status}`);
+            }
+        });
+    }
+
+    getPersonById(personId) {
+        return fetch(`/api/people/${personId}`, {
+            headers: {...REST_CONTENT_TYPE_HEADERS}
+        }).then(resp => {
+            if (resp.status === 200) {
+                return resp.json();
+            } else {
+                return Promise.reject(`Got invalid response code while fetching person data ${resp.status}`);
+            }
+        })
+    }
+
+    updatePerson(personId, person) {
+        return fetch(`/api/people/${personId}`, {
+            headers: {...REST_CONTENT_TYPE_HEADERS},
+            method: 'POST',
+            body: JSON.stringify(person)
+        }).then(resp => {
+            if (resp.status === 200) {
+                return resp.json();
+            } else {
+                return Promise.reject(`Got invalid response code while updating person data ${resp.status}`);
+            }
+        });
+    }
+
+    createPerson(person) {
+        return fetch(`/api/people`, {
+            headers: {...REST_CONTENT_TYPE_HEADERS},
+            method: 'PUT',
+            body: JSON.stringify(person)
+        }).then(resp => {
+            if (resp.status === 200) {
+                return resp.json();
+            } else {
+                return Promise.reject(`Got invalid response code while creating person data ${resp.status}`);
+            }
+        });
+    }
+}

frontend-vue/src/utils/constants.js

@@ -0,0 +1,6 @@
+export const PeopleServiceDIKey = 'people.service';
+
+export const REST_CONTENT_TYPE_HEADERS = {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+};

frontend-vue/src/utils/validators.js

@@ -0,0 +1,5 @@
+export function isValidEmail(s) {
+    return !s.match(/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/)
+        ? {invalidEmail: true}
+        : null;
+}

frontend-vue/src/views/About.vue

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

frontend-vue/src/views/Home.vue

@@ -1,18 +0,0 @@
-<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>

frontend-vue/src/views/NotFound.vue

@@ -0,0 +1,13 @@
+<template>
+  There is no such page, sorry.
+</template>
+
+<script>
+export default {
+  name: "NotFound"
+}
+</script>
+
+<style scoped>
+
+</style>

frontend-vue/src/views/PeopleIndex.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="container">
+    <table class="table is-striped is-fullwidth">
+      <thead>
+      <tr>
+        <th>{{ $t('app.people.index.table.id.header') }}</th>
+        <th>{{ $t('app.people.index.table.firstName.header') }}</th>
+        <th>{{ $t('app.people.index.table.lastName.header') }}</th>
+        <th>{{ $t('app.people.index.table.email.header') }}</th>
+        <th>{{ $t('app.people.index.table.status.header') }}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr @dblclick="routeToPersonEdit(person.id)" v-for="person of people" :key="person.id">
+        <td>{{ person.id }}</td>
+        <td>{{ person.firstName }}</td>
+        <td>{{ person.lastName }}</td>
+        <td>{{ person.email }}</td>
+        <td>{{
+            person.status === 0
+                ? $t('app.people.index.table.status.value.active')
+                : $t('app.people.index.table.status.value.inactive')
+          }}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style lang="scss">
+@import "~bulma";
+</style>
+
+<script>
+import {inject, watchEffect, ref} from 'vue';
+import {useRouter} from 'vue-router';
+import {PeopleServiceDIKey} from '../utils/constants';
+
+export default {
+  setup() {
+    const peopleService = inject(PeopleServiceDIKey);
+    const people = ref([]);
+    const router = useRouter();
+    const routeToPersonEdit = (personId) => {
+      router.push(`/people/edit/${personId}`);
+    };
+
+    watchEffect(() => {
+      peopleService.getAllPeople()
+          .then(peopleData => {
+            people.value = peopleData;
+          });
+    });
+    return {people, routeToPersonEdit};
+  }
+}
+</script>

frontend-vue/src/views/PersonAdd.vue

@@ -0,0 +1,16 @@
+<template>
+  <PersonForm/>
+</template>
+
+<script>
+import PersonForm from "../components/PersonForm";
+
+export default {
+  name: "PersonAdd",
+  components: {PersonForm}
+}
+</script>
+
+<style scoped>
+
+</style>

frontend-vue/src/views/PersonEdit.vue

@@ -0,0 +1,23 @@
+<template>
+  <PersonForm :id="personId"/>
+</template>
+
+<script>
+import {computed} from 'vue';
+import {useRouter} from 'vue-router';
+import PersonForm from "../components/PersonForm";
+
+export default {
+  components: {PersonForm},
+  setup() {
+    const router = useRouter();
+    const personId = computed(() => Number.parseInt(router.currentRoute.value.params.personId, 10));
+    return {personId};
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

frontend-vue/vue.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    devServer: {
+        proxy: {
+            '^/api': {
+                target: 'http://localhost:8123',
+                changeOrigin: false,
+                secure: false,
+                pathRewrite: {
+                    "^/api": ""
+                },
+                logLevel: "debug"
+            }
+        }
+    }
+};