Adding collapsed Menus to Reports

src/views/ReportsView.vue

@@ -3,9 +3,11 @@
     <!-- Report picker -->
     <v-card class="span-4 panel-pad">
       <h2 class="section-title mb-2">Reports</h2>
-      <v-list density="compact" nav>
-        <template v-for="group in groupedReports" :key="group.name">
-          <v-list-subheader>{{ group.name }}</v-list-subheader>
+      <v-list v-model:opened="openGroups" density="compact" nav>
+        <v-list-group v-for="group in groupedReports" :key="group.name" :value="group.name">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" :title="group.label" class="report-group-header" />
+          </template>
           <v-list-item
             v-for="report in group.reports"
             :key="report.key"
@@ -14,7 +16,7 @@
             rounded="sm"
             @click="selectReport(report.key)"
           />
-        </template>
+        </v-list-group>
       </v-list>
 
       <template v-if="savedReports.length">
@@ -181,6 +183,7 @@ export default {
     return {
       reports: [],
       params: {},
+      openGroups: [],
       selectedType: null,
       options: {},
       report: null,
@@ -198,12 +201,18 @@ export default {
   },
   computed: {
     groupedReports() {
+      // Desired display order, and friendlier labels for two catalog groups.
+      const order = ['Depreciation', 'Activity', 'Journal entries', 'Tax', 'Maintenance', 'Detail', 'Journals & registers', 'Transactions', 'Summaries'];
+      const labels = { 'Journal entries': 'Journal Entries', Maintenance: 'Preventative Maintenance', 'Journals & registers': 'Journals and Registers' };
+      const rank = (name) => { const i = order.indexOf(name); return i === -1 ? order.length : i; };
       const groups = {};
       for (const report of this.reports) {
         groups[report.group] = groups[report.group] || [];
         groups[report.group].push(report);
       }
-      return Object.entries(groups).map(([name, reports]) => ({ name, reports }));
+      return Object.keys(groups)
+        .sort((a, b) => rank(a) - rank(b) || a.localeCompare(b))
+        .map((name) => ({ name, label: labels[name] || name, reports: groups[name] }));
     },
     currentParams() {
       return this.reports.find((report) => report.key === this.selectedType)?.params || [];
@@ -262,9 +271,14 @@ export default {
       this.options = this.defaultOptions(type);
       this.run();
     },
+    openGroupFor(type) {
+      const report = this.reports.find((item) => item.key === type);
+      if (report && !this.openGroups.includes(report.group)) this.openGroups.push(report.group);
+    },
     applySaved(saved) {
       this.selectedType = saved.report_type;
       this.options = { ...this.defaultOptions(saved.report_type), ...(saved.options_json || {}) };
+      this.openGroupFor(saved.report_type);
       this.run();
     },
     async run() {
@@ -306,3 +320,9 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.report-group-header :deep(.v-list-item-title) {
+  font-weight: 600;
+}
+</style>