From 1ae349bc7315bc31c0e690b011f22a472f2d07cc Mon Sep 17 00:00:00 2001
From: Grady Ward <grady.b.ward@gmail.com>
Date: Tue, 23 Jan 2024 13:31:48 -0700
Subject: [PATCH] WIP

---
 frontend/components/DownloadButton.vue     |   2 +-
 frontend/components/portfolio/ListView.vue | 166 +++++++++++++--------
 frontend/components/standard/Debug.vue     |  16 +-
 frontend/lang/en.json                      |   3 +-
 4 files changed, 123 insertions(+), 64 deletions(-)

diff --git a/frontend/components/DownloadButton.vue b/frontend/components/DownloadButton.vue
index d286b1d..026c962 100644
--- a/frontend/components/DownloadButton.vue
+++ b/frontend/components/DownloadButton.vue
@@ -5,7 +5,7 @@ const { t } = useI18n()
 
 interface Props {
   value: string
-  cta: string
+  cta?: string | undefined
   fileName: string
 }
 const props = defineProps<Props>()
diff --git a/frontend/components/portfolio/ListView.vue b/frontend/components/portfolio/ListView.vue
index 41c0592..8f6cf6d 100644
--- a/frontend/components/portfolio/ListView.vue
+++ b/frontend/components/portfolio/ListView.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { portfolioEditor } from '@/lib/editor'
-import { type Portfolio, type PortfolioGroup, type Initiative, type Analysis } from '@/openapi/generated/pacta'
+import { type Portfolio, AuditLogQuerySortBy, type PortfolioGroup, type Initiative, type Analysis } from '@/openapi/generated/pacta'
 import { selectedCountSuffix } from '@/lib/selection'
+import { createURLAuditLogQuery } from '@/lib/auditlogquery'
 
 const { linkToPortfolioGroup } = useMyDataURLs()
 const { humanReadableTimeFromStandardString } = useTime()
@@ -37,6 +38,7 @@ const expandedPortfolioIdsModel = computed({
   get: () => props.expandedPortfolioIds ?? [],
   set: (value: string[]) => { emit('update:expandedPortfolioIds', value) },
 })
+const expendedPortfolioSections = useState<Map<string, number[]>>('ListView.expandedPortfolioSections', () => new Map())
 
 interface EditorObject extends ReturnType<typeof portfolioEditor> {
   id: string
@@ -101,15 +103,21 @@ const deletePortfolio = (id: string) => withLoading(
 )
 const deleteThisPortfolio = (id: string) => deletePortfolio(id).then(refresh)
 const deleteSelected = () => Promise.all([selectedRows.value.map((row) => deletePortfolio(row.id))]).then(refresh)
+
+const auditLogURL = (id: string) => {
+  return createURLAuditLogQuery(
+    localePath,
+    {
+      sorts: [{ by: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_CREATED_AT, ascending: false }],
+      wheres: [{ inTargetId: [id] }],
+    },
+  )
+}
 </script>
 
 <template>
   <div class="flex flex-column gap-3">
     <div class="flex gap-2 flex-wrap">
-      <StandardDebug
-        :value="props.expandedPortfolioIds"
-        label="Expanded Portfolio IDs"
-      />
       <PVButton
         icon="pi pi-refresh"
         class="p-button-outlined p-button-secondary p-button-sm"
@@ -209,63 +217,101 @@ const deleteSelected = () => Promise.all([selectedRows.value.map((row) => delete
         #expansion="slotProps"
       >
         <div class="surface-100 p-3">
-          <h2 class="mt-0">
-            {{ tt('Metadata') }}
-          </h2>
-          <StandardDebug
-            always
-            :value="slotProps.data.currentValue.value"
-            label="Raw Data"
-          />
-          <h2 class="mt-5">
-            {{ tt('Memberships') }}
-          </h2>
-          <div class="flex flex-column gap-2">
-            <PortfolioGroupMembershipMenuButton
-              :selected-portfolios="[slotProps.data.currentValue.value]"
-              :portfolio-groups="props.portfolioGroups"
-              @changed-memberships="refresh"
-              @changed-groups="refresh"
-            />
-            <PortfolioInitiativeMembershipMenuButton
-              :selected-portfolios="[slotProps.data.currentValue.value]"
-              :initiatives="props.initiatives"
-              @changed-memberships="refresh"
-            />
-          </div>
-          <h2 class="mt-5">
-            {{ tt('Analysis') }}
+          <h2 class="mb-3">
+            {{ tt('Portfolio') }}: {{ slotProps.data.currentValue.value.name }}
           </h2>
-          <AnalysisContextualListView
-            :analyses="slotProps.data.analyses"
-            :name="slotProps.data.currentValue.value.name"
-            :portfolio-id="slotProps.data.id"
-            @refresh="refresh"
-          />
-          <h2 class="mt-5">
-            {{ tt('Editable Properties') }}
-          </h2>
-          <PortfolioEditor
-            v-model:editor-values="slotProps.data.editorValues.value"
-            :editor-fields="slotProps.data.editorFields.value"
-          />
-          <div class="flex gap-3 justify-content-between">
-            <PVButton
-              icon="pi pi-trash"
-              class="p-button-danger p-button-outlined"
-              :label="tt('Delete')"
-              @click="() => deleteThisPortfolio(slotProps.data.id)"
-            />
-            <div v-tooltip.bottom="slotProps.data.saveTooltip">
-              <PVButton
-                :disabled="!slotProps.data.canSave.value"
-                :label="tt('Save Changes')"
-                icon="pi pi-save"
-                icon-pos="right"
-                @click="() => saveChanges(slotProps.data.id)"
+          <PVAccordion
+            v-model:activeIndex="expendedPortfolioSections[slotProps.data.id]"
+            :multiple="true"
+          >
+            <PVAccordionTab
+              :header="tt('Edit Portfolio')"
+            >
+              <PortfolioEditor
+                v-model:editor-values="slotProps.data.editorValues.value"
+                :editor-fields="slotProps.data.editorFields.value"
               />
-            </div>
-          </div>
+              <div class="flex gap-2">
+                <PVButton
+                  :disabled="!slotProps.data.canSave.value"
+                  :label="tt('Discard Changes')"
+                  icon="pi pi-refresh"
+                  class="p-button-secondary p-button-outlined"
+                  @click="slotProps.data.resetEditor"
+                />
+                <div v-tooltip.bottom="slotProps.data.saveTooltip">
+                  <PVButton
+                    :disabled="!slotProps.data.canSave.value"
+                    :label="tt('Save Changes')"
+                    icon="pi pi-save"
+                    icon-pos="right"
+                    @click="() => saveChanges(slotProps.data.id)"
+                  />
+                </div>
+              </div>
+            </PVAccordionTab>
+            <PVAccordionTab
+              :header="tt('Memberships')"
+            >
+              <div class="flex flex-column gap-2">
+                <PortfolioGroupMembershipMenuButton
+                  :selected-portfolios="[slotProps.data.currentValue.value]"
+                  :portfolio-groups="props.portfolioGroups"
+                  @changed-memberships="refresh"
+                  @changed-groups="refresh"
+                />
+                <PortfolioInitiativeMembershipMenuButton
+                  :selected-portfolios="[slotProps.data.currentValue.value]"
+                  :initiatives="props.initiatives"
+                  @changed-memberships="refresh"
+                />
+              </div>
+            </PVAccordionTab>
+            <PVAccordionTab :header="tt('Analysis')">
+              <AnalysisContextualListView
+                :analyses="slotProps.data.analyses"
+                :name="slotProps.data.currentValue.value.name"
+                :portfolio-id="slotProps.data.id"
+                @refresh="refresh"
+              />
+            </PVAccordionTab>
+
+            <PVAccordionTab :header="tt('More Options')">
+              <FormField
+                :label="tt('Audit Logs')"
+                :help-text="tt('AuditLogsHelpText')"
+              >
+                <LinkButton
+                  :label="tt('View Audit Logs')"
+                  :to="auditLogURL(slotProps.data.id)"
+                  icon="pi pi-arrow-right"
+                  class="p-button-outlined align-self-start"
+                  icon-pos="right"
+                />
+              </FormField>
+              <FormField
+                :label="tt('Raw Portfolio Metadata')"
+                :help-text="tt('RawPortfolioMetadataHelpText')"
+              >
+                <StandardDebug
+                  always
+                  :value="slotProps.data.currentValue.value"
+                  :label="`${tt('Portfolio Metadata')}: ${slotProps.data.currentValue.value.name}`"
+                />
+              </FormField>
+              <FormField
+                :label="tt('Delete Portfolio')"
+                :help-text="tt('DeletePortfolioHelpText')"
+              >
+                <PVButton
+                  icon="pi pi-trash"
+                  class="p-button-danger p-button-outlined align-self-start"
+                  :label="tt('Delete')"
+                  @click="() => deleteThisPortfolio(slotProps.data.id)"
+                />
+              </FormField>
+            </PVAccordionTab>
+          </PVAccordion>
         </div>
       </template>
     </PVDataTable>
diff --git a/frontend/components/standard/Debug.vue b/frontend/components/standard/Debug.vue
index de113ba..828b317 100644
--- a/frontend/components/standard/Debug.vue
+++ b/frontend/components/standard/Debug.vue
@@ -8,6 +8,7 @@ const tt = (s: string) => t(`${prefix}.${s}`)
 interface Props {
   label?: string
   always?: boolean
+  noAccordion?: boolean
   value: unknown
 }
 const props = withDefaults(defineProps<Props>(), { always: false, label: undefined })
@@ -31,7 +32,7 @@ function createCircularReplacer (): (this: any, key: string, value: any) => any
 
 <template>
   <PVAccordion
-    v-if="showStandardDebug || props.always"
+    v-if="(showStandardDebug || props.always) && !props.noAccordion"
     class="standard-debug"
   >
     <PVAccordionTab
@@ -40,8 +41,19 @@ function createCircularReplacer (): (this: any, key: string, value: any) => any
       header-class="surface-800"
     >
       <div
-        class="code-block surface-50"
+        class="code-block surface-50 relative"
       >
+        <div class="absolute top-0 right-0 flex gap-0">
+          <CopyToClipboardButton
+            :value="valueAsStr"
+            class="p-button-text p-button-secondary"
+          />
+          <DownloadButton
+            :value="valueAsStr"
+            :file-name="`${props.label ?? 'pacta-metadata'}.json`"
+            class="p-button-text p-button-secondary"
+          />
+        </div>
         {{ valueAsStr }}
       </div>
     </PVAccordionTab>
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index f6c2586..6a4882a 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -193,7 +193,7 @@
     "Groups": "Groups",
     "How To Run a Report": "How To Run a Report",
     "Initiatives": "Initiatives",
-    "Memberships": "Groups",
+    "Memberships": "Portfolio Groups and Initiative Participation",
     "Name": "Name",
     "Upload New Portfolios": "Upload New Portfolios",
     "Delete": "Delete",
@@ -208,6 +208,7 @@
     "Run Report": "Run Report",
     "AnalysisTypeREPORT": "Report",
     "AnalysisTypeAUDIT": "Audit",
+    "Portfolio":"Portfolio",
     "Type": "Type",
     "Access": "Access",
     "Analysis": "Analysis"