spring-petclinic · Haprog · Sep 30, 2021 · Sep 17, 2021 · Sep 17, 2021 · Sep 16, 2021
diff --git a/.editorconfig b/.editorconfig
@@ -17,5 +17,5 @@ tab_width = 4
 indent_size = 2
 indent_style = space
 
-[*.{html,sql,less}]
+[*.{html,sql,less,css,js,ts}]
 indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,15 @@ target/*
 .attach_pid*
 .idea
 *.iml
+*.ipr
+*.iws
 /target
 .sts4-cache/
 .vscode
 _site/
+
+# The following files are generated/updated by vaadin-maven-plugin
+node_modules/
+frontend/generated/
+pnpmfile.js
+webpack.generated.js
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,6 @@
+#
+# NOTICE: this is an auto-generated file
+#
+# This file sets the default parameters for manual `pnpm install`.
+#
+shamefully-hoist=true
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="shortcut icon" type="image/x-icon" href="/resources/images/favicon.png">
+
+  <title>PetClinic :: a Spring Framework demonstration</title>
+
+  <style>
+    body, #outlet {
+      height: 100vh;
+      width: 100%;
+      margin: 0;
+    }
+    body {
+      background-color: #f1f1f1;
+    }
+  </style>
+  <!-- index.ts is included here automatically (either by the dev server or during the build) -->
+</head>
+<body>
+  <!-- vaadin-router in index.ts needs an outlet for displaying the views -->
+  <div id="outlet"></div>
+</body>
+</html>
diff --git a/frontend/index.ts b/frontend/index.ts
@@ -0,0 +1,25 @@
+import { Router, RouterLocation } from '@vaadin/router';
+import { routes } from './routes';
+import { appStore } from './stores/app-store';
+
+export const router = new Router(document.querySelector('#outlet'));
+
+router.setRoutes(routes);
+
+type RouterLocationChangedEvent = CustomEvent<{
+  router: Router;
+  location: RouterLocation;
+}>;
+
+window.addEventListener(
+  'vaadin-router-location-changed',
+  (e: RouterLocationChangedEvent) => {
+    appStore.setLocation(e.detail.location);
+    const title = appStore.currentViewTitle;
+    if (title) {
+      document.title = title + ' | ' + appStore.applicationName;
+    } else {
+      document.title = appStore.applicationName;
+    }
+  }
+);
diff --git a/frontend/routes.ts b/frontend/routes.ts
@@ -0,0 +1,108 @@
+import { Route } from '@vaadin/router';
+import './views/error-view';
+import './views/home-view';
+import './views/main-layout';
+import './views/owners/create-or-update-owner-view';
+import './views/owners/find-owners-view';
+import './views/owners/owners-list-view';
+import './views/owners/owner-details-view';
+import './views/vets-view';
+
+export type ViewRoute = Route & {
+  title?: string;
+  icon?: string;
+  children?: ViewRoute[];
+};
+
+export const views: ViewRoute[] = [
+  // place routes below (more info https://vaadin.com/docs/latest/fusion/routing/overview)
+  {
+    path: '/',
+    component: 'home-view',
+    icon: '',
+    title: '',
+  },
+  {
+    path: '/home-fusion',
+    name: 'home',
+    component: 'home-view',
+    icon: 'la la-home',
+    title: 'Home',
+  },
+  {
+    // Included on root level to include in navigation menu. Otherwise this
+    // could be as a child of the '/owners-fusion' item below.
+    path: '/owners-fusion/find',
+    name: 'find-owners',
+    component: 'find-owners-view',
+    icon: 'la la-search',
+    title: 'Find owners',
+  },
+  {
+    path: '/owners-fusion',
+    name: 'owners-base',
+    children: [
+      {
+        path: '/',
+        name: 'owners-list',
+        component: 'owners-list-view',
+      },
+      {
+        path: '/new',
+        name: 'new-owner',
+        component: 'create-or-update-owner-view',
+      },
+      {
+        path: '/([0-9]+)',
+        children: [
+          {
+            path: '/',
+            name: 'owner-details',
+            component: 'owner-details-view',
+          },
+          {
+            path: '/edit',
+            name: 'edit-owner',
+            component: 'create-or-update-owner-view',
+          },
+          {
+            path: '/pets/new',
+            name: 'add-pet',
+            component: '',
+          },
+          {
+            path: '/pets/([0-9]+)/edit',
+            name: 'edit-pet',
+            component: '',
+          },
+          {
+            path: '/pets/([0-9]+)/visits/new',
+            name: 'add-visit',
+            component: '',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: '/vets-fusion',
+    name: 'vets-list',
+    component: 'vets-view',
+    icon: 'la la-th-list',
+    title: 'Veterinarians',
+  },
+  {
+    path: '/error-fusion',
+    component: 'error-view',
+    icon: 'la la-exclamation-triangle',
+    title: 'Error',
+  },
+];
+
+export const routes: ViewRoute[] = [
+  {
+    path: '/',
+    component: 'main-layout',
+    children: [...views],
+  },
+];
diff --git a/frontend/stores/app-store.ts b/frontend/stores/app-store.ts
@@ -0,0 +1,27 @@
+import { RouterLocation } from '@vaadin/router';
+import { makeAutoObservable } from 'mobx';
+
+export class AppStore {
+    applicationName = 'Fusion PetClinic';
+
+    // The location, relative to the base path, e.g. "hello" when viewing "/hello"
+    location = '';
+
+    currentViewTitle = '';
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    setLocation(location: RouterLocation) {
+        if (location.route) {
+            this.location = location.route.path;
+        } else if (location.pathname.startsWith(location.baseUrl)) {
+            this.location = location.pathname.substr(location.baseUrl.length);
+        } else {
+            this.location = location.pathname;
+        }
+        this.currentViewTitle = (location?.route as any)?.title || '';
+    }
+}
+export const appStore = new AppStore();
diff --git a/frontend/themes/petclinic/main-layout.css b/frontend/themes/petclinic/main-layout.css
@@ -0,0 +1,36 @@
+[slot='navbar'] {
+  background-image: linear-gradient(0deg, var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+}
+
+[slot='navbar'] nav a {
+  text-decoration: none;
+  transition: color 140ms;
+}
+
+[slot='navbar'] nav a .la {
+  margin-top: calc(var(--lumo-space-xs) * 0.5);
+}
+
+[slot='navbar'] nav a::before {
+  border-radius: var(--lumo-border-radius);
+  bottom: calc(var(--lumo-space-xs) * 0.5);
+  content: '';
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: calc(var(--lumo-space-xs) * 0.5);
+  transition: background-color 140ms;
+}
+
+[slot='navbar'] nav a[highlight] {
+  color: var(--lumo-primary-text-color);
+}
+
+[slot='navbar'] nav a[highlight]::before {
+  background-color: var(--lumo-primary-color-10pct);
+}
+
+[slot='navbar'] footer vaadin-context-menu {
+  align-items: center;
+  display: flex;
+}
diff --git a/frontend/themes/petclinic/styles.css b/frontend/themes/petclinic/styles.css
@@ -0,0 +1,2 @@
+@import url('./main-layout.css');
+@import url('line-awesome/dist/line-awesome/css/line-awesome.min.css');
diff --git a/frontend/themes/petclinic/theme.json b/frontend/themes/petclinic/theme.json
@@ -0,0 +1 @@
+{"lumoImports":["typography","color","spacing","badge","utility"]}
diff --git a/frontend/views/error-view.ts b/frontend/views/error-view.ts
@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { View } from '../views/view';
+import { CrashEndpoint } from 'Frontend/generated/endpoints';
+
+@customElement('error-view')
+export class ErrorView extends View {
+  @state()
+  result?: string;
+
+  async firstUpdated(changedProperties: any) {
+    super.firstUpdated(changedProperties);
+
+    this.result = await CrashEndpoint.triggerException();
+  }
+
+  render() {
+    return html`
+      <p>See JS console for errors.</p>
+      <p>For more information see the Fusion <a href="https://vaadin.com/docs/latest/fusion/application/error-handling">Error Handling</a> documentation.</p>
+    `;
+  }
+}
diff --git a/frontend/views/home-view.ts b/frontend/views/home-view.ts
@@ -0,0 +1,17 @@
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { View } from '../views/view';
+
+@customElement('home-view')
+export class HomeView extends View {
+  render() {
+    return html`
+      <h2>Welcome</h2>
+      <div class="row">
+        <div class="col-md-12">
+          <img class="img-responsive" src="/resources/images/pets.png"/>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/frontend/views/main-layout.ts b/frontend/views/main-layout.ts
@@ -0,0 +1,86 @@
+import '@vaadin/vaadin-app-layout';
+import '@vaadin/vaadin-avatar/vaadin-avatar';
+import '@vaadin/vaadin-context-menu';
+import '@vaadin/vaadin-lumo-styles/utility';
+import '@vaadin/vaadin-tabs';
+import '@vaadin/vaadin-tabs/vaadin-tab';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { router } from '../index';
+import { views } from '../routes';
+import { appStore } from '../stores/app-store';
+import { Layout } from './view';
+import type { RouterLocation } from '@vaadin/router';
+
+interface RouteInfo {
+  path: string;
+  title: string;
+  icon: string;
+}
+
+@customElement('main-layout')
+export class MainLayout extends Layout {
+  render() {
+    return html`
+      <vaadin-app-layout>
+        <header class="bg-base border-b border-contrast-10 box-border flex flex-col w-full" slot="navbar">
+          <nav class="flex gap-s overflow-auto px-m">
+            <a href="/" router-ignore class="flex mx-s p-s relative text-secondary">
+              <span class="la la-home me-s text-l"></span>
+              <span class="font-medium text-s">Original Home</span>
+            </a>
+            ${this.getMenuRoutes().map(
+      (viewRoute) => html`
+                <a
+                  ?highlight=${this.highlightNav(viewRoute.path)}
+                  class="flex 
+                  h-m items-center px-s relative text-secondary"
+                  href=${router.urlForPath(viewRoute.path)}
+                >
+                  <span class="${viewRoute.icon} me-s text-l"></span>
+                  <span class="font-medium text-s whitespace-nowrap">${viewRoute.title}</span>
+                </a>
+              `
+    )}
+          </nav>
+        </header>
+        <div class="px-m">
+          <div class="mx-auto max-w-screen-lg my-xl">
+            <main>
+              <slot></slot>
+            </main>
+
+            <footer class="mt-xl text-center">
+              <img src="/resources/images/spring-pivotal-logo.png" alt="Sponsored by Pivotal" />
+            </footer>
+          </div>
+        </div>
+      </vaadin-app-layout>
+    `;
+  }
+
+  isSubRoute(location: RouterLocation, parentRouteName: string) {
+    return location.routes.find((r) => r.name === parentRouteName) !== undefined;
+  }
+
+  highlightNav(routePath: string) {
+    if (appStore.location.startsWith(routePath)) {
+      return true;
+    }
+    // Highlight "Find owners" if this is any view under the owners-base route
+    if (routePath === router.urlForName('find-owners')
+        && this.isSubRoute(router.location, 'owners-base')) {
+      return true;
+    }
+    return false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add('block', 'h-full');
+  }
+
+  private getMenuRoutes(): RouteInfo[] {
+    return views.filter((route) => route.title) as RouteInfo[];
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import url('./main-layout.css');
		@import url('line-awesome/dist/line-awesome/css/line-awesome.min.css');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"lumoImports":["typography","color","spacing","badge","utility"]}