travaux intégration UI

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

client/src/components/AppFooter.vue

@@ -36,7 +36,7 @@
   </v-footer>
 </template>
 
-<script setup>
+<script setup lang="ts">
   const items = [
     {
       title: 'Vuetify Documentation',

client/src/components/HelloWorld.vue

@@ -1,90 +0,0 @@
-<template>
-  <v-container class="fill-height" max-width="900">
-    <div>
-      <v-img
-        class="mb-4"
-        height="150"
-        src="@/assets/logo.png"
-      />
-
-      <div class="mb-8 text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-      </div>
-
-      <v-row>
-        <v-col cols="12">
-          <v-card
-            class="py-4"
-            color="surface-variant"
-            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
-            prepend-icon="mdi-rocket-launch-outline"
-            rounded="lg"
-            variant="tonal"
-          >
-            <template #image>
-              <v-img position="top right" />
-            </template>
-
-            <template #title>
-              <h2 class="text-h5 font-weight-bold">
-                Get started
-              </h2>
-            </template>
-
-            <template #subtitle>
-              <div class="text-subtitle-1">
-                Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
-              </div>
-            </template>
-          </v-card>
-        </v-col>
-
-        <v-col v-for="link in links" :key="link.href" cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            :href="link.href"
-            :prepend-icon="link.icon"
-            rel="noopener noreferrer"
-            rounded="lg"
-            :subtitle="link.subtitle"
-            target="_blank"
-            :title="link.title"
-            variant="tonal"
-          />
-        </v-col>
-      </v-row>
-    </div>
-  </v-container>
-</template>
-
-<script setup>
-  const links = [
-    {
-      href: 'https://vuetifyjs.com/',
-      icon: 'mdi-text-box-outline',
-      subtitle: 'Learn about all things Vuetify in our documentation.',
-      title: 'Documentation',
-    },
-    {
-      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
-      icon: 'mdi-star-circle-outline',
-      subtitle: 'Explore available framework Features.',
-      title: 'Features',
-    },
-    {
-      href: 'https://vuetifyjs.com/components/all',
-      icon: 'mdi-widgets-outline',
-      subtitle: 'Discover components in the API Explorer.',
-      title: 'Components',
-    },
-    {
-      href: 'https://discord.vuetifyjs.com',
-      icon: 'mdi-account-group-outline',
-      subtitle: 'Connect with Vuetify developers.',
-      title: 'Community',
-    },
-  ]
-</script>

client/src/layouts/default.vue

@@ -1,11 +1,60 @@
 <template>
+  <v-app-bar>
+
+    <v-app-bar-nav-icon @click="drawer = !drawer" />
+
+    <v-app-bar-title>Application</v-app-bar-title>
+
+    <v-spacer />
+
+    <span v-if="app.userInfo">
+      <v-btn
+        color="primary"
+      >
+        Parent activator
+
+        <v-menu activator="parent">
+          <v-list>
+            <v-list-item
+              v-for="(item, index) in items"
+              :key="index"
+              :value="index"
+            >
+              <v-list-item-title>{{ item.title }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-btn>
+    </span>
+    <span v-else>
+      <v-btn text="Login" to="/login" />
+    </span>
+  </v-app-bar>
+
+  <v-navigation-drawer v-model="drawer">
+    <!--  -->
+  </v-navigation-drawer>
+
   <v-main>
     <router-view />
   </v-main>
 
-  <AppFooter />
+  <!--  <AppFooter />-->
 </template>
 
-<script setup>
+<script setup lang="ts">
-  //
+// import AppFooter from "@/components/AppFooter.vue";
+
+  import {ref} from 'vue'
+  import {useAppStore} from '@/stores/app'
+
+  const app = useAppStore()
+
+  const drawer = ref(false)
+  const items =  ref([
+    { title: 'Click Me' },
+    { title: 'Click Me' },
+    { title: 'Click Me' },
+    { title: 'Click Me 2' },
+  ])
 </script>

client/src/layouts/none.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+<script setup lang="ts">
+</script>

client/src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <HelloWorld />
+
 </template>
 
 <script setup>

client/src/pages/login.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-container class="fill-height" fluid>
+    <v-row align="center" justify="center">
+      <v-col cols="12" lg="4" md="6" sm="8">
+        <v-card class="elevation-12">
+          <v-card-title class="text-h5">
+            Login 🔒
+          </v-card-title>
+          <v-card-text>
+            <v-form>
+              <v-text-field
+                label="Email"
+                name="email"
+                prepend-icon="mdi-account"
+                type="text"
+              />
+              <v-text-field
+                id="password"
+                label="Password"
+                name="password"
+                prepend-icon="mdi-lock"
+                type="password"
+              />
+            </v-form>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn color="primary" @click="onLogin">Login</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+  import {useRouter} from "vue-router";
+  import {useAppStore} from '@/stores/app'
+
+  definePage({
+    meta: {
+      layout: 'none'
+    }
+  })
+
+  const app = useAppStore()
+  const router = useRouter()
+
+  function onLogin () {
+    app.userInfo = { email: "john@test.com", name: "John Doe" }
+    router.push('/')
+  }
+</script>

client/src/plugins/index.js

@@ -4,10 +4,10 @@
  * Automatically included in `./src/main.js`
  */
 
+import router from '@/router'
+import pinia from '@/stores'
 // Plugins
 import vuetify from './vuetify'
-import pinia from '@/stores'
-import router from '@/router'
 
 export function registerPlugins (app) {
   app

client/src/plugins/vuetify.js

@@ -4,12 +4,12 @@
  * Framework documentation: https://vuetifyjs.com`
  */
 
-// Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
-
 // Composables
 import { createVuetify } from 'vuetify'
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+
+import 'vuetify/styles'
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({

client/src/router/index.js

@@ -4,9 +4,9 @@
  * Automatic routes for `./src/pages/*.vue`
  */
 
+import { setupLayouts } from 'virtual:generated-layouts'
 // Composables
 import { createRouter, createWebHistory } from 'vue-router'
-import { setupLayouts } from 'virtual:generated-layouts'
 import { routes } from 'vue-router/auto-routes'
 
 const router = createRouter({

client/src/stores/app.js

@@ -3,6 +3,6 @@ import { defineStore } from 'pinia'
 
 export const useAppStore = defineStore('app', {
   state: () => ({
-    //
+    userInfo: null,
   }),
 })

src/main/java/dev/mduchene/Db.java

@@ -4,14 +4,13 @@ import com.zaxxer.hikari.HikariConfig;
 import com.zaxxer.hikari.HikariDataSource;
 import java.sql.Connection;
 import java.sql.SQLException;
-import java.sql.Statement;
-
 import org.jooq.SQLDialect;
 import org.jooq.conf.RenderQuotedNames;
 import org.jooq.conf.Settings;
 import org.jooq.impl.DSL;
 
 public class Db implements AutoCloseable {
+
     private HikariDataSource dataSource;
     private org.jooq.DSLContext dsl;
 
@@ -22,6 +21,7 @@ public class Db implements AutoCloseable {
     }
 
     public static class Builder {
+
         private String url;
         private String user;
         private String password;
@@ -57,11 +57,11 @@ public class Db implements AutoCloseable {
             config.addDataSourceProperty("prepStmtCacheSqlLimit", "2048");
             config.setMaximumPoolSize(64);
             db.dataSource = new HikariDataSource(config);
-      db.dsl =
+            db.dsl = DSL.using(
-          DSL.using(
                 db.dataSource,
                 SQLDialect.MARIADB,
-              new Settings().withRenderQuotedNames(RenderQuotedNames.NEVER));
+                new Settings().withRenderQuotedNames(RenderQuotedNames.NEVER)
+            );
             return db;
         }
     }