From 9b62c36127d50a722d6c26835b20cd5b79b516ca Mon Sep 17 00:00:00 2001
From: Grady Berry Ward <grady@siliconally.org>
Date: Sun, 21 Jan 2024 22:04:58 -0700
Subject: [PATCH 1/2] Fixes Minor Holdings Date Bugs (#155)

---
 cmd/server/pactasrv/portfolio.go                          | 7 +++++++
 frontend/components/form/FieldHeader.vue                  | 2 +-
 .../inputs/{HoldingDate.vue => HoldingsDate.vue}          | 0
 frontend/components/portfolio/Editor.vue                  | 8 ++++++++
 frontend/lang/en.json                                     | 4 +++-
 frontend/pages/upload.vue                                 | 2 +-
 6 files changed, 20 insertions(+), 3 deletions(-)
 rename frontend/components/inputs/{HoldingDate.vue => HoldingsDate.vue} (100%)

diff --git a/cmd/server/pactasrv/portfolio.go b/cmd/server/pactasrv/portfolio.go
index b93f5a2..41adde6 100644
--- a/cmd/server/pactasrv/portfolio.go
+++ b/cmd/server/pactasrv/portfolio.go
@@ -90,6 +90,13 @@ func (s *Server) UpdatePortfolio(ctx context.Context, request api.UpdatePortfoli
 	if request.Body.Description != nil {
 		mutations = append(mutations, db.SetPortfolioDescription(*request.Body.Description))
 	}
+	if request.Body.PropertyHoldingsDate != nil {
+		hd, err := conv.HoldingsDateFromOAPI(request.Body.PropertyHoldingsDate)
+		if err != nil {
+			return nil, err
+		}
+		mutations = append(mutations, db.SetPortfolioPropertyHoldingsDate(hd))
+	}
 	if request.Body.PropertyESG != nil {
 		mutations = append(mutations, db.SetPortfolioPropertyESG(conv.OptionalBoolFromOAPI(*request.Body.PropertyESG)))
 	}
diff --git a/frontend/components/form/FieldHeader.vue b/frontend/components/form/FieldHeader.vue
index d7a2d18..5289171 100644
--- a/frontend/components/form/FieldHeader.vue
+++ b/frontend/components/form/FieldHeader.vue
@@ -66,7 +66,7 @@ const helpTextTextClass = computed(() => helpTextExpanded.value ? 'mb-2' : 'h-0'
     <div
       v-if="helpTextExists"
       :class="helpTextTextClass"
-      class="overflow-hidden ml-1 text-sm help-text-animate"
+      class="overflow-hidden text-sm help-text-animate"
     >
       <slot name="help-text" />
       {{ props.helpText }}
diff --git a/frontend/components/inputs/HoldingDate.vue b/frontend/components/inputs/HoldingsDate.vue
similarity index 100%
rename from frontend/components/inputs/HoldingDate.vue
rename to frontend/components/inputs/HoldingsDate.vue
diff --git a/frontend/components/portfolio/Editor.vue b/frontend/components/portfolio/Editor.vue
index 05bb713..db5b55e 100644
--- a/frontend/components/portfolio/Editor.vue
+++ b/frontend/components/portfolio/Editor.vue
@@ -40,6 +40,14 @@ const evs = computed({
         auto-resize
       />
     </FormEditorField>
+    <FormEditorField
+      :editor-field="efs.propertyHoldingsDate"
+      :editor-value="evs.propertyHoldingsDate"
+    >
+      <InputsHoldingsDate
+        v-model:value="evs.propertyHoldingsDate.currentValue"
+      />
+    </FormEditorField>
     <FormEditorField
       :editor-field="efs.propertyESG"
       :editor-value="evs.propertyESG"
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index 9feec45..53ae04a 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -314,7 +314,9 @@
     "External": "External",
     "ExternalHelpText": "If enabled, this portfolio represents external data. If disabled, this portfolio represents internal data.",
     "Engagement Strategy": "Engagement Strategy",
-    "EngagementStrategyHelpText": "If enabled, this portfolio represents engagement strategy data. If disabled, this portfolio represents non-engagement strategy data."
+    "EngagementStrategyHelpText": "If enabled, this portfolio represents engagement strategy data. If disabled, this portfolio represents non-engagement strategy data.",
+    "Holdings Date": "Holdings Date",
+    "HoldingsDateHelpText": "The date that the holdings in this portfolio are being evaluated at."
   },
   "lib/editor/portfolio_group": {
     "Created At": "Created At",
diff --git a/frontend/pages/upload.vue b/frontend/pages/upload.vue
index dd87348..07b3d49 100644
--- a/frontend/pages/upload.vue
+++ b/frontend/pages/upload.vue
@@ -374,7 +374,7 @@ const cleanUpIncompleteUploads = async () => {
             label="Holdings Date"
             help-text="The holdings date for the portfolio"
           >
-            <InputsHoldingDate
+            <InputsHoldingsDate
               v-model:value="holdingsDate"
               :disabled="isProcessing"
             />

From 8b1a5afdbc48e60032fb2d974e9126b9f20be2a3 Mon Sep 17 00:00:00 2001
From: Grady Berry Ward <grady@siliconally.org>
Date: Mon, 22 Jan 2024 08:37:22 -0700
Subject: [PATCH 2/2] Improves Nav Organization (#154)

---
 frontend/components/standard/Avatar.vue |  20 ++++
 frontend/components/standard/Nav.vue    | 129 +++++++++++++++++++++---
 frontend/lang/en.json                   |   5 +-
 frontend/plugins/primevue.ts            |   2 +
 4 files changed, 141 insertions(+), 15 deletions(-)
 create mode 100644 frontend/components/standard/Avatar.vue

diff --git a/frontend/components/standard/Avatar.vue b/frontend/components/standard/Avatar.vue
new file mode 100644
index 0000000..b5f8623
--- /dev/null
+++ b/frontend/components/standard/Avatar.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name?: string | undefined
+}>()
+
+const singleCharacter = computed(() => {
+  return props.name?.[0] || 'U'
+})
+</script>
+
+<template>
+  <div
+    class="flex align-items-center justify-content-center border-circle bg-teal-400"
+    style="height: 2.5rem; width: 2.5rem;"
+  >
+    <span class="text-2xl text-white font-bold">
+      {{ singleCharacter }}
+    </span>
+  </div>
+</template>
diff --git a/frontend/components/standard/Nav.vue b/frontend/components/standard/Nav.vue
index cb2d0e8..7ac8b7c 100644
--- a/frontend/components/standard/Nav.vue
+++ b/frontend/components/standard/Nav.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type MenuItem } from 'primevue/menuitem'
+import type * as PrimeVueMenu from 'primevue/menu'
 
 const { t } = useI18n()
 const localePath = useLocalePath()
@@ -15,6 +16,14 @@ const { isAdmin, maybeMe } = await getMaybeMe()
 const prefix = 'components/standard/Nav'
 const tt = (s: string) => t(`${prefix}.${s}`)
 const menuHidden = useState<boolean>(`${prefix}.menuHidden`, () => false)
+const userMenu = useState<{ toggle: (e: Event) => void } | null>(`${prefix}.userMenu`, () => null)
+const userMenuVisible = useState<boolean>(`${prefix}.userMenuVisible`, () => false)
+
+const toggleUserMenu = (e: Event) => {
+  if (userMenu.value) {
+    userMenu.value.toggle(e)
+  }
+}
 
 const menuStyles = computed(() => {
   return {
@@ -44,17 +53,11 @@ const menuItems = computed(() => {
       to: localePath('/admin'),
     })
   }
-  if (maybeMe.value) {
+  if (isAuthenticated.value) {
     result.push({
       label: tt('My Data'),
       to: localePath('/my-data'),
     })
-  }
-  if (isAuthenticated.value) {
-    result.push({
-      label: tt('Sign Out'),
-      command: () => { void signOut() },
-    })
   } else {
     result.push({
       label: tt('Sign In'),
@@ -63,6 +66,26 @@ const menuItems = computed(() => {
   }
   return result
 })
+const userMenuItems = computed(() => {
+  const result: MenuItem[] = [{
+    label: tt('Account'),
+    icon: 'pi pi-cog',
+    to: localePath('/user/me'),
+  }, {
+    label: tt('My Data'),
+    icon: 'pi pi-list',
+    to: localePath('/my-data'),
+  }, {
+    label: tt('Audit Logs'),
+    icon: 'pi pi-lock',
+    to: localePath('/audit-logs'),
+  }, {
+    label: tt('Sign Out'),
+    icon: 'pi pi-sign-out',
+    command: () => { void signOut() },
+  }]
+  return result
+})
 </script>
 
 <template>
@@ -74,15 +97,26 @@ const menuItems = computed(() => {
         class="h-3rem pb-2"
         @click="() => router.push(localePath('/'))"
       />
-      <PVButton
-        :icon="menuHidden ? 'pi pi-bars' : 'pi pi-times'"
-        :class="menuHidden ? 'p-button-text' : 'border-bottom-noround p-button-primary'"
-        class="sm:hidden p-button-lg h-3rem"
-        @click="() => menuHidden = !menuHidden"
-      />
+      <div class="flex gap-1 align-items-center">
+        <PVButton
+          v-show="maybeMe !== undefined"
+          v-tooltip="tt('Settings')"
+          icon="pi pi-user"
+          class="sm:hidden ml-2 flex-shrink-0"
+          rounded
+          :class="userMenuVisible ? 'p-button-primary' : 'p-button-text'"
+          @click="toggleUserMenu"
+        />
+        <PVButton
+          :icon="menuHidden ? 'pi pi-bars' : 'pi pi-times'"
+          :class="menuHidden ? 'p-button-text' : 'border-bottom-noround p-button-primary'"
+          class="sm:hidden p-button-lg h-3rem"
+          @click="() => menuHidden = !menuHidden"
+        />
+      </div>
     </div>
     <div
-      class="flex gap-2 sm:p-1 flex-1 flex-column sm:flex-row border-primary sm:border-none sm:max-h-full border-round justify-content-end"
+      class="flex gap-2 sm:p-1 flex-1 flex-column sm:flex-row border-primary sm:border-none sm:max-h-full border-round justify-content-end align-items-center"
       :style="menuStyles"
     >
       <template
@@ -93,6 +127,7 @@ const menuItems = computed(() => {
           :key="index"
           :class="mi.to === router.currentRoute.value.fullPath ? 'border-noround sm:border-round' : 'p-button-text'"
           :to="mi.to"
+          :external="mi.external"
           :label="`${mi.label}`"
         />
         <PVButton
@@ -103,6 +138,72 @@ const menuItems = computed(() => {
           @click="mi.command"
         />
       </template>
+      <PVButton
+        v-show="maybeMe !== undefined"
+        v-tooltip.left="tt('Settings')"
+        icon="pi pi-user"
+        class="hidden sm:flex ml-2 flex-shrink-0"
+        rounded
+        :class="userMenuVisible ? 'p-button-primary' : 'p-button-outlined'"
+        @click="toggleUserMenu"
+      />
+      <PVOverlayPanel
+        ref="userMenu"
+        :pt="{
+          content: 'p-0',
+        }"
+        class="caret-primary"
+        @hide="() => userMenuVisible = false"
+        @show="() => userMenuVisible = true"
+      >
+        <div class="bg-primary p-3">
+          <div class="flex gap-3 align-items-center">
+            <StandardAvatar :name="maybeMe?.name" />
+            <div class="flex flex-column gap-1">
+              <span class="font-bold text-lg text-white">
+                {{ maybeMe?.name }}
+              </span>
+              <span class="text-sm text-white">
+                {{ maybeMe?.enteredEmail }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex flex-column gap-1 p-2"
+          @click="toggleUserMenu"
+        >
+          <template
+            v-for="(mi, index) in userMenuItems"
+          >
+            <LinkButton
+              v-if="mi.to"
+              :key="index"
+              :class="mi.to === router.currentRoute.value.fullPath ? 'border-noround sm:border-round' : 'p-button-text'"
+              :to="mi.to"
+              :external="mi.external"
+              :icon="mi.icon"
+              :label="`${mi.label}`"
+            />
+            <PVButton
+              v-else
+              :key="mi.label"
+              :label="mi.label"
+              :icon="mi.icon"
+              class="p-button-text"
+              @click="mi.command"
+            />
+          </template>
+        </div>
+      </PVOverlayPanel>
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.caret-primary.p-overlaypanel{
+  &::before, &::after {
+    border-bottom-color: var(--primary-color)
+  }
+}
+</style>
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index 53ae04a..4805e5f 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -267,7 +267,10 @@
     "Home": "Portfolio Analysis Tool",
     "My Data": "My Data",
     "Sign In": "Sign In",
-    "Sign Out": "Sign Out"
+    "Sign Out": "Sign Out",
+    "Account": "Account",
+    "Audit Logs": "Audit Logs",
+    "Settings": "Settings"
   },
   "components/user/Editor": {
     "The name that will be associated with": "The name that will be associated with ",
diff --git a/frontend/plugins/primevue.ts b/frontend/plugins/primevue.ts
index 6353731..bb77250 100644
--- a/frontend/plugins/primevue.ts
+++ b/frontend/plugins/primevue.ts
@@ -22,6 +22,7 @@ import Textarea from 'primevue/textarea'
 import Tooltip from 'primevue/tooltip'
 import TriStateCheckbox from 'primevue/tristatecheckbox'
 import Message from 'primevue/message'
+import Menu from 'primevue/menu'
 import MultiSelect from 'primevue/multiselect'
 import OverlayPanel from 'primevue/overlaypanel'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -48,6 +49,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.component('PVInputText', InputText)
   vueApp.component('PVInputSwitch', InputSwitch)
   vueApp.component('PVMessage', Message)
+  vueApp.component('PVMenu', Menu)
   vueApp.component('PVMultiSelect', MultiSelect)
   vueApp.component('PVOverlayPanel', OverlayPanel)
   vueApp.component('PVProgressSpinner', ProgressSpinner)