From c343f9819e99acc16f643db06e9bdfb7e80d90c5 Mon Sep 17 00:00:00 2001
From: Grady Ward <grady.b.ward@gmail.com>
Date: Tue, 23 Jan 2024 16:40:29 -0700
Subject: [PATCH] Initial Redesign of Portfolio List View

---
 frontend/assets/css/overrides.css             |   4 +
 frontend/components/CommonAccordionHeader.vue |  29 +++++
 frontend/components/portfolio/ListView.vue    | 103 +++++++++++++++---
 frontend/lang/en.json                         |  17 +++
 frontend/lib/mydata/index.ts                  |   1 +
 frontend/pages/my-data.vue                    |  22 ++++
 frontend/plugins/primevue.ts                  |   2 +
 7 files changed, 160 insertions(+), 18 deletions(-)
 create mode 100644 frontend/components/CommonAccordionHeader.vue

diff --git a/frontend/assets/css/overrides.css b/frontend/assets/css/overrides.css
index e769930..007eef0 100644
--- a/frontend/assets/css/overrides.css
+++ b/frontend/assets/css/overrides.css
@@ -54,3 +54,7 @@ div.p-chips .p-chips-multiple-container {
 div.p-chips .p-chips-multiple-container .p-chips-token {
   margin-right: 0;
 }
+
+div.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+  background-color: #f5f5f5
+}
\ No newline at end of file
diff --git a/frontend/components/CommonAccordionHeader.vue b/frontend/components/CommonAccordionHeader.vue
new file mode 100644
index 0000000..6af2243
--- /dev/null
+++ b/frontend/components/CommonAccordionHeader.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface Props {
+  heading: string
+  subHeading?: string | undefined
+  icon?: string | undefined
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex justify-content-between align-items-center w-full flex-wrap px-2">
+    <div class="flex gap-1 flex-column">
+      <div class="text-lg font-bold">
+        {{ props.heading }}
+      </div>
+      <div
+        v-if="props.subHeading"
+        class="text-sm font-light"
+      >
+        {{ props.subHeading }}
+      </div>
+    </div>
+    <i
+      v-if="props.icon"
+      :class="props.icon"
+    />
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/portfolio/ListView.vue b/frontend/components/portfolio/ListView.vue
index 8f6cf6d..453f9de 100644
--- a/frontend/components/portfolio/ListView.vue
+++ b/frontend/components/portfolio/ListView.vue
@@ -3,6 +3,7 @@ import { portfolioEditor } from '@/lib/editor'
 import { type Portfolio, AuditLogQuerySortBy, type PortfolioGroup, type Initiative, type Analysis } from '@/openapi/generated/pacta'
 import { selectedCountSuffix } from '@/lib/selection'
 import { createURLAuditLogQuery } from '@/lib/auditlogquery'
+import { type WritableComputedRef } from 'vue'
 
 const { linkToPortfolioGroup } = useMyDataURLs()
 const { humanReadableTimeFromStandardString } = useTime()
@@ -19,11 +20,13 @@ interface Props {
   analyses: Analysis[]
   selectedPortfolioIds: string[]
   expandedPortfolioIds: string[]
+  expandedSections: Map<string, number[]>
 }
 const props = defineProps<Props>()
 interface Emits {
   (e: 'update:selectedPortfolioIds', value: string[]): void
   (e: 'update:expandedPortfolioIds', value: string[]): void
+  (e: 'update:expandedSections', value: Map<string, number[]>): void
   (e: 'refresh'): void
 }
 const emit = defineEmits<Emits>()
@@ -38,11 +41,15 @@ const expandedPortfolioIdsModel = computed({
   get: () => props.expandedPortfolioIds ?? [],
   set: (value: string[]) => { emit('update:expandedPortfolioIds', value) },
 })
-const expendedPortfolioSections = useState<Map<string, number[]>>('ListView.expandedPortfolioSections', () => new Map())
+const expandedSectionsModel = computed({
+  get: () => props.expandedSections ?? new Map<string, number[]>(),
+  set: (value: Map<string, number[]>) => { emit('update:expandedSections', value) },
+})
 
 interface EditorObject extends ReturnType<typeof portfolioEditor> {
   id: string
   analyses: Analysis[]
+  expandedSections: WritableComputedRef<number[]>
 }
 
 const prefix = 'components/portfolio/ListView'
@@ -70,7 +77,6 @@ const expandedRows = computed<EditorObject[]>({
     }
     const ids = expandedPortfolioIdsModel.value
     const result = editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
-    console.log('expandedRows = ', result.length)
     return result
   },
   set: (value: EditorObject[]) => {
@@ -80,11 +86,22 @@ const expandedRows = computed<EditorObject[]>({
   },
 })
 
-const editorObjects = computed<EditorObject[]>(() => props.portfolios.map((item) => ({
-  id: item.id,
-  ...portfolioEditor(item, i18n),
-  analyses: props.analyses.filter((a) => a.portfolioSnapshot.portfolio?.id === item.id),
-})))
+const editorObjects = computed<EditorObject[]>(() => props.portfolios.map((item) => {
+  const expandedSectionSuffix = item.id.substring(item.id.length - 4)
+  return ({
+    ...portfolioEditor(item, i18n),
+    id: item.id,
+    analyses: props.analyses.filter((a) => a.portfolioSnapshot.portfolio?.id === item.id),
+    expandedSections: computed<number[]>({
+      get: () => expandedSectionsModel.value.get(expandedSectionSuffix) ?? [],
+      set: (value: number[]) => {
+        const m = new Map<string, number[]>(expandedSectionsModel.value)
+        m.set(expandedSectionSuffix, value)
+        expandedSectionsModel.value = m
+      },
+    }),
+  })
+}))
 
 const selectedPortfolios = computed<Portfolio[]>(() => selectedRows.value.map((row) => row.currentValue.value))
 
@@ -217,16 +234,21 @@ const auditLogURL = (id: string) => {
         #expansion="slotProps"
       >
         <div class="surface-100 p-3">
-          <h2 class="mb-3">
+          <h2 class="mb-3 mt-0">
             {{ tt('Portfolio') }}: {{ slotProps.data.currentValue.value.name }}
           </h2>
           <PVAccordion
-            v-model:activeIndex="expendedPortfolioSections[slotProps.data.id]"
+            v-model:activeIndex="slotProps.data.expandedSections.value"
             :multiple="true"
           >
-            <PVAccordionTab
-              :header="tt('Edit Portfolio')"
-            >
+            <PVAccordionTab>
+              <template #header>
+                <CommonAccordionHeader
+                  :heading="tt('EditHeading')"
+                  :sub-heading="tt('EditSubHeading')"
+                  icon="pi pi-pencil"
+                />
+              </template>
               <PortfolioEditor
                 v-model:editor-values="slotProps.data.editorValues.value"
                 :editor-fields="slotProps.data.editorFields.value"
@@ -250,9 +272,28 @@ const auditLogURL = (id: string) => {
                 </div>
               </div>
             </PVAccordionTab>
-            <PVAccordionTab
-              :header="tt('Memberships')"
-            >
+            <PVAccordionTab>
+              <template #header>
+                <CommonAccordionHeader
+                  :heading="tt('MembershipsHeading')"
+                  :sub-heading="tt('MembershipsSubHeading')"
+                >
+                  <div class="flex gap-1 justify-content-center">
+                    <PVInlineMessage
+                      severity="info"
+                      icon="pi pi-table"
+                    >
+                      {{ slotProps.data.currentValue.value.groups.length }}
+                    </PVInlineMessage>
+                    <PVInlineMessage
+                      severity="info"
+                      icon="pi pi-sitemap"
+                    >
+                      {{ slotProps.data.currentValue.value.initiatives.length }}
+                    </PVInlineMessage>
+                  </div>
+                </CommonAccordionHeader>
+              </template>
               <div class="flex flex-column gap-2">
                 <PortfolioGroupMembershipMenuButton
                   :selected-portfolios="[slotProps.data.currentValue.value]"
@@ -267,7 +308,27 @@ const auditLogURL = (id: string) => {
                 />
               </div>
             </PVAccordionTab>
-            <PVAccordionTab :header="tt('Analysis')">
+            <PVAccordionTab>
+              <template #header>
+                <CommonAccordionHeader
+                  :heading="tt('AnalysesHeading')"
+                  :sub-heading="tt('AnalysesSubHeading')"
+                >
+                  <PVInlineMessage
+                    v-if="slotProps.data.analyses.length === 0"
+                    severity="success"
+                    icon="pi pi-copy"
+                  >
+                    {{ tt('AnalysesComeHereChip') }}
+                  </PVInlineMessage>
+                  <div
+                    v-else
+                    class="bg-red-500"
+                  >
+                    {{ slotProps.data.analyses.map((a: Analysis) => a.analysisType) }}
+                  </div>
+                </CommonAccordionHeader>
+              </template>
               <AnalysisContextualListView
                 :analyses="slotProps.data.analyses"
                 :name="slotProps.data.currentValue.value.name"
@@ -275,8 +336,14 @@ const auditLogURL = (id: string) => {
                 @refresh="refresh"
               />
             </PVAccordionTab>
-
-            <PVAccordionTab :header="tt('More Options')">
+            <PVAccordionTab>
+              <template #header>
+                <CommonAccordionHeader
+                  :heading="tt('MoreHeading')"
+                  :sub-heading="tt('MoreSubHeading')"
+                  icon="pi pi-plus"
+                />
+              </template>
               <FormField
                 :label="tt('Audit Logs')"
                 :help-text="tt('AuditLogsHelpText')"
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index 6a4882a..dd5d267 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -193,6 +193,23 @@
     "Groups": "Groups",
     "How To Run a Report": "How To Run a Report",
     "Initiatives": "Initiatives",
+    "EditHeading": "Edit Portfolio",
+    "EditSubHeading": "Modify portfolio metadata, for organization and to change how it is analyzed.",
+    "MembershipsHeading": "Portfolio Groups and Initiative Participation",
+    "MembershipsSubHeading": "Manage which portfolio groups this portfolio is a part of, and which initiatives it is a member of.",
+    "AnalysesHeading": "Reports and Audits",
+    "AnalysesSubHeading": "View and create reports and audits about this portfolio.",
+    "AnalysesComeHereChip": "Running an audit is recommended",
+    "MoreHeading": "Settings and More",
+    "MoreSubHeading": "View audit logs, delete this portfolio, view debugging information",
+    "Audit Logs": "Audit Logs",
+    "View Audit Logs": "View Audit Logs For Portfolio",
+    "AuditLogsHelpText": "Audit logs are a record of who has accessed or modified this analysis, and when. This is useful for debugging, for understanding who has seen this analysis, and for establishing peace of mind that your data's security is being upheld.",
+    "Raw Portfolio Metadata": "Raw Portfolio Metadata",
+    "RawPortfolioMetadataHelpText": "This is the raw metadata for this portfolio. It is not editable, and is only shown for reference and technical debugging. If you're having a problem with this portfolio, attaching the metadata here to a bug report may be helpful.",
+    "Portfolio Metadata": "Portfolio Metadata",
+    "Delete Portfolio": "Delete Portfolio",
+    "DeletePortfolioHelpText": "This will delete this portfolio from the platform, including all of the analyses that it has been a part of. It will also remove the portfolio from all initiatives and portfolio groups. This action cannot be undone, proceed with caution.",
     "Memberships": "Portfolio Groups and Initiative Participation",
     "Name": "Name",
     "Upload New Portfolios": "Upload New Portfolios",
diff --git a/frontend/lib/mydata/index.ts b/frontend/lib/mydata/index.ts
index 931425f..ea679b9 100644
--- a/frontend/lib/mydata/index.ts
+++ b/frontend/lib/mydata/index.ts
@@ -5,6 +5,7 @@ export const QueryParamSelectedPortfolioGroupIds = 'sg'
 export const QueryParamExpandedPortfolioGroupIds = 'eg'
 export const QueryParamSelectedAnalysisIds = 'sa'
 export const QueryParamExpandedAnalysisIds = 'ea'
+export const QueryParamExpandedSections = 'es'
 
 export enum Tab {
   Portfolio = 'p',
diff --git a/frontend/pages/my-data.vue b/frontend/pages/my-data.vue
index cf48c63..9d86386 100644
--- a/frontend/pages/my-data.vue
+++ b/frontend/pages/my-data.vue
@@ -9,6 +9,7 @@ import {
   QueryParamExpandedPortfolioGroupIds,
   QueryParamSelectedAnalysisIds,
   QueryParamExpandedAnalysisIds,
+  QueryParamExpandedSections,
 } from '@/lib/mydata'
 
 const prefix = 'pages/my-data'
@@ -31,6 +32,26 @@ const expandedPortfolioGroupIds = joinedWithCommas(fromQueryReactiveWithDefault(
 const selectedAnalysisIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamSelectedAnalysisIds, ''))
 const expandedAnalysisIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamExpandedAnalysisIds, ''))
 const tabQP = fromQueryReactiveWithDefault(QueryParamTab, 'p')
+const expandedSectionsArray = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamExpandedSections, ''))
+const expandedSections = computed<Map<string, number[]>>({
+  get: () => {
+    const result = new Map<string, number[]>()
+    expandedSectionsArray.value.forEach((v) => {
+      const [k, ...vv] = v.split(':')
+      result.set(k, vv.map((vvv) => parseInt(vvv)))
+    })
+    return result
+  },
+  set: (v: Map<string, number[]>) => {
+    const result: string[] = []
+    v.forEach((vv, k) => {
+      if (vv.length > 0) {
+        result.push(`${k}:${vv.join(':')}`)
+      }
+    })
+    expandedSectionsArray.value = result
+  },
+})
 
 const [
   { data: incompleteUploadsData, refresh: refreshIncompleteUploadsApi },
@@ -149,6 +170,7 @@ const activeIndex = computed<number>({
           v-if="portfolioData && portfolioGroupData && initiativeData"
           v-model:selected-portfolio-ids="selectedPortfolioIds"
           v-model:expanded-portfolio-ids="expandedPortfolioIds"
+          v-model:expanded-sections="expandedSections"
           :portfolios="portfolioData.items"
           :portfolio-groups="portfolioGroupData.items"
           :analyses="analysesData.items"
diff --git a/frontend/plugins/primevue.ts b/frontend/plugins/primevue.ts
index e80e3ee..c74301f 100644
--- a/frontend/plugins/primevue.ts
+++ b/frontend/plugins/primevue.ts
@@ -16,6 +16,7 @@ import Dialog from 'primevue/dialog'
 import Dropdown from 'primevue/dropdown'
 import FileUpload from 'primevue/fileupload'
 import Image from 'primevue/image'
+import InlineMessage from 'primevue/inlinemessage'
 import InputNumber from 'primevue/inputnumber'
 import InputSwitch from 'primevue/inputswitch'
 import InputText from 'primevue/inputtext'
@@ -50,6 +51,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.component('PVDropdown', Dropdown)
   vueApp.component('PVFileUpload', FileUpload)
   vueApp.component('PVImage', Image)
+  vueApp.component('PVInlineMessage', InlineMessage)
   vueApp.component('PVInputNumber', InputNumber)
   vueApp.component('PVInputSwitch', InputSwitch)
   vueApp.component('PVInputText', InputText)