Partial implementation (#216)

.devcontainer/compose.extend.yml

@@ -1,6 +1,6 @@
 services:
   web:
-    image: node:22-bookworm
+    image: node:22.5.1-bookworm
     depends_on:
       - db
     restart: unless-stopped

.devcontainer/devcontainer.json

@@ -14,7 +14,7 @@
     // Use 'forwardPorts' to make a list of ports inside the container available locally.
     // "forwardPorts": [],
     // Use 'postCreateCommand' to run commands after the container is created.
-    "postCreateCommand": "npm install",
+    "postCreateCommand": "npm install --verbose --no-progress",
     // https://www.kenmuse.com/blog/avoiding-dubious-ownership-in-dev-containers/
     "postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
     // Configure tool-specific properties.

.env.example

@@ -2,4 +2,8 @@ POSTGRES_USER: postgres
 POSTGRES_PASSWORD: postgres
 POSTGRES_HOST: localhost
 POSTGRES_PORT: 5432
-POSTGRES_DB: cathedral
+POSTGRES_DB: cathedral
+GITHUB_CLIENT_ID: Ov23lij8q5YhcosEjIzQ
+GITHUB_CLIENT_SECRET: 27c98b69344086c13bc15290e1a8b8c86a910d58
+AUTH_SECRET: e792b76a-2573-45d4-a39b-3b8db5712f9c
+AUTH_ORIGIN: http://localhost:3000

.npmrc

@@ -0,0 +1,2 @@
+# Set the registry URL
+registry=https://registry.npmjs.org/

components/TopNavigation.vue

@@ -21,16 +21,46 @@ let getCrumbs = () => {
 const crumbs = ref(getCrumbs());
 
 router.afterEach(() => { crumbs.value = getCrumbs(); });
+
+const op = ref();
+
+const toggle = (event: Event) => op.value.toggle(event)
+
+const { data, getSession, signOut, signIn } = useAuth(),
+    session = await getSession();
 </script>
 
 <template>
-    <Breadcrumb :model="crumbs">
-        <template #item="{ item, props }">
-            <NuxtLink v-slot="{ href, navigate }" :to="item.route">
-                {{ item.label }}
-            </NuxtLink>
+    <Menubar class="top-nav">
+        <template #start>
+            <div class="inline-flex flex-row align-items-center">
+                <NuxtLink to="/" class="h-2rem">
+                    <img src="/logo.png" alt="Cathedral Logo" title="Cathedral" class="h-full" />
+                </NuxtLink>
+                <Breadcrumb :model="crumbs" class="h-full py-0">
+                    <template #item="{ item, props }">
+                        <NuxtLink v-slot="{ href, navigate }" :to="item.route">
+                            {{ item.label }}
+                        </NuxtLink>
+                    </template>
+                </Breadcrumb>
+            </div>
         </template>
-    </Breadcrumb>
+        <template #end>
+            <Button type="button" @click="toggle" link>
+                <Avatar v-if="session?.user?.image" :image="session?.user?.image ?? undefined" shape="circle" />
+                <Avatar v-else icon="pi pi-user" shape="circle" />
+            </Button>
+        </template>
+    </Menubar>
+
+    <OverlayPanel ref="op">
+        <p> {{ data?.user?.name }} </p>
+        <small> {{ data?.user?.email }} </small>
+        <hr>
+        <Button v-if="!data?.user" type="button" @click="signIn(undefined)" label="Sign In" icon="pi pi-sign-in" />
+        <Button v-else type="button" @click="signOut()" label="Sign Out" icon="pi pi-sign-out" />
+    </OverlayPanel>
 </template>
 
 <style scoped>

components/XDataTable.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import { type Uuid, emptyUuid } from '~/server/domain/Uuid'
+import { NIL as emptyUuid } from 'uuid'
 
-// export type RowType = { id: Uuid, name: string }
 export type RowType = any
 
 const props = defineProps<{
     datasource: RowType[] | null,
     filters: Record<string, { value: any, matchMode: string }>,
-    emptyRecord: { id: Uuid, name: string },
+    emptyRecord: { id: string, name: string },
     onCreate: (data: RowType) => Promise<void>,
-    onDelete: (id: Uuid) => Promise<void>,
+    onDelete: (id: string) => Promise<void>,
     onUpdate: (data: RowType) => Promise<void>,
     onRowExpand?: (event: { data: RowType }) => void,
     onRowCollapse?: (event: { data: RowType }) => void

layouts/default.vue

@@ -1,9 +1,12 @@
 <template>
-    <GlobalNavigation />
     <TopNavigation />
     <section id="content" class="surface-ground">
         <slot />
     </section>
+    <footer>
+        &copy; Final Hill 2024. All rights reserved. |
+        Warning: This is Pre-release software. Use at your own risk. Data may be lost.
+    </footer>
 </template>
 
 <style>
@@ -13,27 +16,29 @@
     color: var(--font-color);
     display: grid;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
-    grid-template-columns: fit-content(1.5in) 1fr;
-    grid-template-rows: 0.5in 1fr;
-    grid-template-areas: "global-nav breadcrumb" "global-nav content";
+    grid-template-columns: 1fr;
+    grid-template-rows: 0.6in 1fr 0.6in;
+    grid-template-areas: "top-nav" "content" "footer";
     height: 100vh;
     line-height: 1.5;
     overflow: hidden;
     width: 100vw;
 
-    &>.p-menu {
-        grid-area: global-nav;
-        height: 100vh;
-    }
-
-    &>.p-breadcrumb {
-        grid-area: breadcrumb;
+    &>.top-nav {
+        grid-area: top-nav;
     }
 
     &>#content {
         grid-area: content;
         overflow: auto;
-        padding: 1em 2em;
+        padding: 2em;
+    }
+
+    &>footer {
+        grid-area: footer;
+        padding: 1em;
+        color: red;
+        text-align: center;
     }
 }
 </style>

middleware/org-solution-check.global.ts

@@ -0,0 +1,20 @@
+/**
+ * Check if the solution exists. If not, redirect to the parent organization page.
+ * Check if the organization exists. If notm redirect to the home page.
+ */
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    // FIXME: some type of bug in the login flow tries to navigate to /sw.js
+    if (to.path === '/sw.js')
+        return navigateTo('/')
+
+    // const [{ data: solutions }, { data: organizations }] = await Promise.all([
+    //     to.params.solutionSlug ? useFetch(`/api/solutions?slug=${to.params.solutionSlug}`, { cache: 'default' }) : { data: null },
+    //     to.params.organizationslug ? useFetch(`/api/organizations?slug=${to.params.organizationslug}`, { cache: 'default' }) : { data: null }
+    // ])
+
+    // if (!(solutions?.value ?? []).length)
+    //     return navigateTo(`/${to.params.organizationslug}`)
+
+    // if (!(organizations?.value ?? []).length)
+    //     return navigateTo('/')
+})