ux: allow to create custom list views

models/baseModels/SidebarEntry/SidebarEntry.ts

@@ -0,0 +1,21 @@
+import { Doc } from 'fyo/model/doc';
+
+export class SidebarEntry extends Doc {
+  section?: string;
+  route?: string;
+  model?: string;
+  filters?: string;
+
+  fullRoute() {
+    switch (this.route) {
+      case '/list':
+        return `/list/${this.model}/${this.name}`;
+      default:
+        return this.route;
+    }
+  }
+
+  parsedFilters() {
+    return JSON.parse(this.filters);
+  }
+}

models/index.ts

@@ -30,6 +30,7 @@ import { SalesInvoiceItem } from './baseModels/SalesInvoiceItem/SalesInvoiceItem
 import { SalesQuote } from './baseModels/SalesQuote/SalesQuote';
 import { SalesQuoteItem } from './baseModels/SalesQuoteItem/SalesQuoteItem';
 import { SetupWizard } from './baseModels/SetupWizard/SetupWizard';
+import { SidebarEntry } from `./baseModels/SidebarEntry/SidebarEntry`;
 import { Tax } from './baseModels/Tax/Tax';
 import { TaxSummary } from './baseModels/TaxSummary/TaxSummary';
 import { Batch } from './inventory/Batch';
@@ -83,6 +84,7 @@ export const models = {
   SalesQuoteItem,
   SerialNumber,
   SetupWizard,
+  SidebarEntry,
   PrintTemplate,
   Tax,
   TaxSummary,

models/types.ts

@@ -23,6 +23,7 @@ export enum ModelNameEnum {
   LoyaltyPointEntry = 'LoyaltyPointEntry',
   CollectionRulesItems = 'CollectionRulesItems',
   CouponCode = 'CouponCode',
+  SidebarEntry = 'SidebarEntry',
 
   AppliedCouponCodes = 'AppliedCouponCodes',
   Payment = 'Payment',

schemas/app/SidebarEntry.json

@@ -0,0 +1,46 @@
+{
+  "name": "SidebarEntry",
+  "label": "Sidebar Entry",
+  "naming": "manual",
+  "fields": [
+    {
+      "fieldname": "name",
+      "section": "Default",
+      "label": "Name",
+      "fieldtype": "Data",
+      "required": true,
+      "placeholder": "Entry Name"
+    },
+    {
+      "fieldname": "section",
+      "section": "Default",
+      "label": "Section",
+      "fieldtype": "Data",
+      "required": false
+    },
+    {
+      "fieldname": "route",
+      "section": "Default",
+      "label": "Route",
+      "fieldtype": "Data",
+      "required": true,
+      "default": "/list"
+    },
+    {
+      "fieldname": "model",
+      "section": "Default",
+      "label": "Document Type",
+      "fieldtype": "Data",
+      "required": true,
+      "default": "JournalEntry"
+    },
+    {
+      "fieldname": "filters",
+      "section": "Default",
+      "label": "Filters",
+      "fieldtype": "Data",
+      "required": true,
+      "default": "{}"
+    }
+  ]
+}

schemas/schemas.ts

@@ -48,6 +48,7 @@ import PurchaseReceiptItem from './app/inventory/PurchaseReceiptItem.json';
 import SerialNumber from './app/inventory/SerialNumber.json';
 import Shipment from './app/inventory/Shipment.json';
 import ShipmentItem from './app/inventory/ShipmentItem.json';
+import SidebarEntry from './app/SidebarEntry.json';
 import StockLedgerEntry from './app/inventory/StockLedgerEntry.json';
 import StockMovement from './app/inventory/StockMovement.json';
 import StockMovementItem from './app/inventory/StockMovementItem.json';
@@ -92,6 +93,7 @@ export const appSchemas: Schema[] | SchemaStub[] = [
   SetupWizard as Schema,
   GetStarted as Schema,
   PrintTemplate as Schema,
+  SidebarEntry as Schema,
 
   Color as Schema,
   Currency as Schema,

src/components/Sidebar.vue

@@ -315,6 +315,9 @@ export default defineComponent({
     });
     this.shortcuts?.set(COMPONENT_NAME, ['F1'], () => this.openDocumentation());
 
+    fyo.doc.observer.on('sync:SidebarEntry', async () => await this.refreshSidebar())
+    fyo.doc.observer.on('delete:SidebarEntry', async () => await this.refreshSidebar())
+
     this.showDevMode = this.fyo.store.isDevelopment;
   },
   unmounted() {
@@ -324,6 +327,9 @@ export default defineComponent({
     routeTo,
     reportIssue,
     toggleSidebar,
+    async refreshSidebar(){
+      this.groups = await getSidebarConfig()
+    },
     async toggleProvisionalMode() {
       let title, detail, provisionalModeSince, showUnlimited;
       if (fyo.singles.SystemSettings?.provisionalModeSince != null) {

src/pages/ListView/ListView.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col">
     <PageHeader :title="title">
+      <Button ref="saveViewButton" :icon="false" @click="saveView">
+        {{ t`Save view` }}
+      </Button>
       <Button ref="exportButton" :icon="false" @click="openExportModal = true">
         {{ t`Export` }}
       </Button>
@@ -44,6 +47,8 @@
 </template>
 <script lang="ts">
 import { Field } from 'schemas/types';
+import { ModelNameEnum } from 'models/types';
+import { SidebarEntry } from 'models/baseModels/SidebarEntry/SidebarEntry';
 import Button from 'src/components/Button.vue';
 import ExportWizard from 'src/components/ExportWizard.vue';
 import FilterDropdown from 'src/components/FilterDropdown.vue';
@@ -167,6 +172,23 @@ export default defineComponent({
     applyFilter(filters: QueryFilter) {
       this.list?.updateData(filters);
     },
+    async saveView() {
+      const data = {
+        route: '/list',
+        model: this.schemaName,
+        filters: JSON.stringify(this.listFilters),
+      };
+      let entry = fyo.doc.getNewDoc(
+        ModelNameEnum.SidebarEntry,
+        data
+      ) as SidebarEntry;
+
+      const { openQuickEdit } = await import('src/utils/ui');
+      await openQuickEdit({
+        doc: entry,
+        showFields: ['section'],
+      });
+    },
   },
 });
 

src/utils/sidebarConfig.ts

@@ -3,8 +3,9 @@ import { routeFilters } from 'src/utils/filters';
 import { fyo } from '../initFyo';
 import { SidebarConfig, SidebarItem, SidebarRoot } from './types';
 
-export function getSidebarConfig(): SidebarConfig {
-  const sideBar = getCompleteSidebar();
+export async function getSidebarConfig(): SidebarConfig {
+  let sideBar = await getCompleteSidebar();
+  sideBar = await addCustomSidebarEntries(sideBar);
   return getFilteredSidebar(sideBar);
 }
 
@@ -146,7 +147,7 @@ function getReportSidebar() {
   };
 }
 
-function getCompleteSidebar(): SidebarConfig {
+async function getCompleteSidebar(): SidebarConfig {
   return [
     {
       label: t`Get Started`,
@@ -341,6 +342,11 @@ function getCompleteSidebar(): SidebarConfig {
           hidden: () =>
             !fyo.singles.AccountingSettings?.enableFormCustomization,
         },
+        {
+          label: t`Extra Sidebar Entries`,
+          name: 'sidebar-entries',
+          route: `/list/SidebarEntry`,
+        },
         {
           label: t`Settings`,
           name: 'settings',
@@ -350,3 +356,72 @@ function getCompleteSidebar(): SidebarConfig {
     },
   ].flat();
 }
+
+async function addCustomSidebarEntries(sidebar: SidebarConfig): SidebarConfig {
+  const entries = await fyo.db.getAll('SidebarEntry', {
+    fields: ['name', 'section', 'route'],
+  });
+
+  for (const [i, _ent] of Object.entries(entries)) {
+    if (_ent.section) continue;
+
+    const ent = (await fyo.doc.getDoc(
+      'SidebarEntry',
+      _ent.name
+    )) as SidebarEntry;
+
+    sidebar = [
+      {
+        label: ent.name,
+        route: ent.fullRoute() || `/list/JournalEntry/${ent.name}`,
+        name: `section-${i}`,
+        icon: 'common-entries',
+        filters: ent.parsedFilters(),
+        items: [],
+      } as SidebarItem,
+      ...sidebar,
+    ];
+  }
+
+  for (const [i, _ent] of Object.entries(entries)) {
+    if (!_ent.section) continue;
+
+    const ent = (await fyo.doc.getDoc(
+      'SidebarEntry',
+      _ent.name
+    )) as SidebarEntry;
+
+    const item: SidebarItem = {
+      label: ent.name,
+      route: ent.fullRoute() || `/list/JournalEntry/${ent.name}`,
+      filters: ent.parsedFilters(),
+    } as SidebarItem;
+
+    let inserted = false;
+    for (const section of sidebar) {
+      if (section.label == ent.section || section.name == ent.section) {
+        inserted = true;
+        item.name = `${section.name}-entry-${i}`;
+        section.items = [...section.items, item];
+        continue;
+      }
+    }
+
+    if (!inserted) {
+      item.name = `section-${i}-entry-${i}`;
+      sidebar = [
+        {
+          label: ent.section,
+          name: `section-${i}`,
+          icon: 'common-entries',
+          route: item.route,
+          filters: item.filters,
+          items: [item],
+        } as SidebarItem,
+        ...sidebar,
+      ];
+    }
+  }
+
+  return sidebar;
+}