WIP on app layout

.gitignore

@@ -256,7 +256,7 @@ paket-files/
 .ionide
 
 # Compiled files / application
-src/build
+src/MyPrayerJournal/Api/*.db
 src/MyPrayerJournal/Api/wwwroot/favicon.ico
 src/MyPrayerJournal/Api/wwwroot/index.html
 src/MyPrayerJournal/Api/wwwroot/*.js
@@ -264,5 +264,3 @@ src/MyPrayerJournal/Api/wwwroot/*.js.map
 src/MyPrayerJournal/Api/wwwroot/css
 src/MyPrayerJournal/Api/wwwroot/js
 src/MyPrayerJournal/Api/appsettings.Development.json
-/build
-src/*.exe

src/MyPrayerJournal/Api/Program.fs

@@ -18,8 +18,8 @@ module Configure =
   let appConfiguration (bldr : WebApplicationBuilder) =
     bldr.Configuration
       .SetBasePath(bldr.Environment.ContentRootPath)
-      .AddJsonFile("appsettings.json", optional = true, reloadOnChange = true)
+      .AddJsonFile("appsettings.json", optional = false, reloadOnChange = true)
-      .AddJsonFile($"appsettings.{bldr.Environment.EnvironmentName}.json")
+      .AddJsonFile($"appsettings.{bldr.Environment.EnvironmentName}.json", optional = true, reloadOnChange = true)
       .AddEnvironmentVariables ()
     |> ignore
     bldr

src/MyPrayerJournal/Api/appsettings.json

@@ -1,4 +1,7 @@
 {
+  "ConnectionStrings": {
+    "db": "Filename=./mpj.db"
+  },
   "Kestrel": {
     "EndPoints": {
       "Http": {

src/MyPrayerJournal/App/package.json

@@ -10,7 +10,7 @@
     "lint": "vue-cli-service lint",
     "apistart": "cd ../Api && dotnet run",
     "publish": "vue-cli-service build --modern && cd ../Api && dotnet publish -c Release -r linux-x64 --self-contained false",
-    "vue": "vue-cli-service build --modern && cd ../Api && dotnet run"
+    "vue": "vue-cli-service build --development && cd ../Api && dotnet run"
   },
   "dependencies": {
     "@vueuse/core": "^6.4.1",

src/MyPrayerJournal/App/src/App.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
 .mpj-app
-  #nav
+  navigation-bar
-    router-link(to="/") Home
-    | |
-    router-link(to="/about") About
   router-view
 </template>
 
 <script setup lang="ts">
 import "bootstrap/dist/css/bootstrap.min.css"
+
+import NavigationBar from "@/components/NavigationBar.vue"
+
 </script>
 
 <style lang="sass">
@@ -16,7 +16,6 @@ import "bootstrap/dist/css/bootstrap.min.css"
   font-family: Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
-  text-align: center
   color: #2c3e50
 #nav
   padding: 30px

src/MyPrayerJournal/App/src/components/NavigationBar.vue

@@ -1,33 +1,32 @@
 <template lang="pug">
-.md-toolbar-row
+nav.navbar
-  md-tabs(md-sync-route).md-primary
+  .container-fluid
+    router-link.navbar-brand(to="/") myPrayerJournal
+    ul.navbar-nav.me-auto.d-flex.flex-row
       template(v-if="isAuthenticated")
-      md-tab(md-label="Journal" to="/journal")
+        li.nav-item: router-link(to="/journal") Journal
-      md-tab(md-label="Active" to="/requests/active")
+        li.nav-item: router-link(to="/requests/active") Active
-      md-tab(v-if="hasSnoozed" md-label="Snoozed" to="/requests/snoozed")
+        li.nav-item(v-if="hasSnoozed"): router-link(to="/requests/snoozed") Snoozed
-      md-tab(md-label="Answered" to="/requests/answered")
+        li.nav-item: router-link(to="/requests/answered") Answered
-      md-tab(md-label="Log Off" href="/user/log-off" @click.prevent="logOff()")
+        li.nav-item: a(href="/user/log-off" @click.prevent="logOff()") Log Off
       template(v-else)
-      md-tab(md-label="Log On" href="/user/log-on" @click.prevent="logOn()")
+        li.nav-item: a(href="/user/log-on" @click.prevent="logOn()") Log On
-    md-tab(md-label="Docs" href="https://docs.prayerjournal.me" @click.prevent="showHelp()")
+      li.nav-item: a(href="https://docs.prayerjournal.me" target="_blank") Docs
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from "vue"
+import { computed } from "vue"
 import { useRouter } from "vue-router"
 
+import { useAuth } from "@/plugins/auth"
 import { useStore } from "@/store"
-import { AuthService } from "@/auth"
-import { AuthSymbol } from "@/App.vue"
 
 const store = useStore()
 const router = useRouter()
-
+const auth = useAuth()
-/** The auth service */
-const auth = inject(AuthSymbol) as AuthService
 
 /** Whether a user is authenticated */
-const isAuthenticated = computed(() => store.state.isAuthenticated)
+const isAuthenticated = computed(() => store?.state.isAuthenticated ?? false)
 
 /** Whether the user has any snoozed requests */
 const hasSnoozed = computed(() =>
@@ -43,7 +42,4 @@ const logOff = () => {
   auth.logout(store)
   router.push("/")
 }
-
-/** Open a new window/tab with help */
-const showHelp = () => { window.open("https://docs.prayerjournal.me", "_blank") }
 </script>

src/MyPrayerJournal/App/src/store/index.ts

@@ -3,7 +3,7 @@ import { createStore, Store, useStore as baseUseStore } from "vuex"
 import { useTitle } from "@vueuse/core"
 
 import api, { JournalRequest } from "@/api"
-import auth from "@/auth"
+import { useAuth } from "@/plugins/auth"
 
 import * as Actions from "./actions"
 import * as Mutations from "./mutations"
@@ -59,11 +59,14 @@ const sortValue = (it : JournalRequest) => it.showAfter === 0 ? it.asOf : it.sho
  */
 const journalSort = (a : JournalRequest, b : JournalRequest) => sortValue(a) - sortValue(b)
 
+/** The authentication service */
+const auth = useAuth()
+
 export default createStore({
   state: () : State => ({
     pageTitle: appName,
-    user: auth.session.profile,
+    user: auth?.session.profile ?? {},
-    isAuthenticated: auth.isAuthenticated(),
+    isAuthenticated: auth?.isAuthenticated() ?? false,
     journal: [],
     isLoadingJournal: false
   }),

src/MyPrayerJournal/App/vue.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   lintOnSave: false,
+  outputDir: "../Api/wwwroot",
   configureWebpack: {
     module: {
       rules: [{

src/MyPrayerJournal/Migrate/Program.fs

@@ -49,9 +49,7 @@ let migrated =
         history      = Subdocs.history r?history
         notes        = Subdocs.notes r?notes
       })
-  |> Seq.iter (fun req ->
+  |> db.GetCollection<Request>("request").Insert
-      printfn "%A" req
-      db.GetCollection<Request>("request").Insert req |> ignore)
 
 db.Checkpoint ()