Просмотр исходного кода

docs(dashboard): Add docs on history entries

Michael Bromley 3 месяцев назад
Родитель
Сommit
f70f285b42

+ 43 - 0
docs/docs/guides/extending-the-dashboard/customizing-pages/history-entries.md

@@ -0,0 +1,43 @@
+---
+title: 'History Entries'
+---
+
+The Customer and Order detail pages have a special history timeline, which show a summary of all significant changes and
+activity relating to that customer or order.
+
+History entries are defined by [DashboardHistoryEntryComponent](/reference/dashboard/extensions-api/history-entries#dashboardhistoryentrycomponent),
+and the component should be wrapped in [HistoryEntry](/reference/dashboard/extensions-api/history-entries#historyentry).
+
+## Example
+
+Following the backend example of a custom history entry given in the [HistoryService docs](/reference/typescript-api/services/history-service),
+we can define a corresponding component to render this entry in the customer history timeline:
+
+```tsx
+import { defineDashboardExtension, HistoryEntry } from '@vendure/dashboard';
+import { IdCard } from 'lucide-react';
+
+defineDashboardExtension({
+    historyEntries: [
+        {
+            type: 'CUSTOMER_TAX_ID_VERIFICATION',
+            component: ({ entry, entity }) => {
+                return (
+                    <HistoryEntry
+                        entry={entry}
+                        title={'Tax ID verified'}
+                        timelineIconClassName={'bg-success text-success-foreground'}
+                        timelineIcon={<IdCard />}
+                    >
+                        <div className="text-xs">Approval reference: {entry.data.ref}</div>
+                    </HistoryEntry>
+                );
+            },
+        },
+    ],
+});
+```
+
+This will then appear in the customer history timeline:
+
+![History entry](./history-entry.webp)

BIN
docs/docs/guides/extending-the-dashboard/customizing-pages/history-entry.webp


+ 1 - 0
docs/sidebars.js

@@ -162,6 +162,7 @@ const sidebars = {
                         'guides/extending-the-dashboard/customizing-pages/page-blocks',
                         'guides/extending-the-dashboard/customizing-pages/action-bar-items',
                         'guides/extending-the-dashboard/customizing-pages/insights-widgets',
+                        'guides/extending-the-dashboard/customizing-pages/history-entries',
                     ],
                 },
                 {