feat(admin-ui): Add support for dashboard widgets

Relates to #334
vendure-ecommerce · Nov 18, 2020 · aa835e8 · aa835e8
1 parent 70e14f2
commit aa835e8
Show file tree

Hide file tree

Showing 44 changed files with 729 additions and 61 deletions.
diff --git a/packages/admin-ui/scripts/build-public-api.js b/packages/admin-ui/scripts/build-public-api.js
@@ -8,7 +8,7 @@ const path = require('path');
 console.log('Generating public apis...');
 const SOURCES_DIR = path.join(__dirname, '/../src/lib');
 const APP_SOURCE_FILE_PATTERN = /\.ts$/;
-const EXCLUDED_PATTERN = /(public_api|spec|mock)\.ts$/;
+const EXCLUDED_PATTERNS = [/(public_api|spec|mock)\.ts$/];
 
 const MODULES = [
     'catalog',
@@ -26,15 +26,16 @@ for (const moduleDir of MODULES) {
     const modulePath = path.join(SOURCES_DIR, moduleDir, 'src');
 
     const files = [];
-    forMatchingFiles(modulePath, APP_SOURCE_FILE_PATTERN, (filename) => {
-        if (!EXCLUDED_PATTERN.test(filename)) {
+    forMatchingFiles(modulePath, APP_SOURCE_FILE_PATTERN, filename => {
+        const excluded = EXCLUDED_PATTERNS.reduce((result, re) => result || re.test(filename), false);
+        if (!excluded) {
             const relativeFilename =
                 '.' + filename.replace(modulePath, '').replace(/\\/g, '/').replace(/\.ts$/, '');
             files.push(relativeFilename);
         }
     });
     const header = `// This file was generated by the build-public-api.ts script\n`;
-    const fileContents = header + files.map((f) => `export * from '${f}';`).join('\n') + '\n';
+    const fileContents = header + files.map(f => `export * from '${f}';`).join('\n') + '\n';
     const publicApiFile = path.join(modulePath, 'public_api.ts');
     fs.writeFileSync(publicApiFile, fileContents, 'utf8');
     console.log(`Created ${publicApiFile}`);

diff --git a/packages/admin-ui/src/app/app.module.ts b/packages/admin-ui/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { routes } from './app.routes';
 @NgModule({
     declarations: [],
     imports: [AppComponentModule, RouterModule.forRoot(routes, { useHash: false })],
+    providers: [],
     bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
@@ -4314,6 +4314,14 @@ export type AdministratorFragment = (
   ) }
 );
 
+export type GetActiveAdministratorQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetActiveAdministratorQuery = { activeAdministrator?: Maybe<(
+    { __typename?: 'Administrator' }
+    & AdministratorFragment
+  )> };
+
 export type GetAdministratorsQueryVariables = Exact<{
   options?: Maybe<AdministratorListOptions>;
 }>;
@@ -5389,6 +5397,21 @@ export type TransitionFulfillmentToStateMutation = { transitionFulfillmentToStat
     & ErrorResult_FulfillmentStateTransitionError_Fragment
   ) };
 
+export type GetOrderSummaryQueryVariables = Exact<{
+  start: Scalars['DateTime'];
+  end: Scalars['DateTime'];
+}>;
+
+
+export type GetOrderSummaryQuery = { orders: (
+    { __typename?: 'OrderList' }
+    & Pick<OrderList, 'totalItems'>
+    & { items: Array<(
+      { __typename?: 'Order' }
+      & Pick<Order, 'id' | 'total' | 'currencyCode'>
+    )> }
+  ) };
+
 export type AssetFragment = (
   { __typename?: 'Asset' }
   & Pick<Asset, 'id' | 'createdAt' | 'updatedAt' | 'name' | 'fileSize' | 'mimeType' | 'type' | 'preview' | 'source' | 'width' | 'height'>
@@ -7141,6 +7164,12 @@ export namespace Administrator {
   export type Roles = NonNullable<(NonNullable<(NonNullable<AdministratorFragment['user']>)['roles']>)[number]>;
 }
 
+export namespace GetActiveAdministrator {
+  export type Variables = GetActiveAdministratorQueryVariables;
+  export type Query = GetActiveAdministratorQuery;
+  export type ActiveAdministrator = (NonNullable<GetActiveAdministratorQuery['activeAdministrator']>);
+}
+
 export namespace GetAdministrators {
   export type Variables = GetAdministratorsQueryVariables;
   export type Query = GetAdministratorsQuery;
@@ -7695,6 +7724,13 @@ export namespace TransitionFulfillmentToState {
   export type FulfillmentStateTransitionErrorInlineFragment = (DiscriminateUnion<(NonNullable<TransitionFulfillmentToStateMutation['transitionFulfillmentToState']>), { __typename?: 'FulfillmentStateTransitionError' }>);
 }
 
+export namespace GetOrderSummary {
+  export type Variables = GetOrderSummaryQueryVariables;
+  export type Query = GetOrderSummaryQuery;
+  export type Orders = (NonNullable<GetOrderSummaryQuery['orders']>);
+  export type Items = NonNullable<(NonNullable<(NonNullable<GetOrderSummaryQuery['orders']>)['items']>)[number]>;
+}
+
 export namespace Asset {
   export type Fragment = AssetFragment;
   export type FocalPoint = (NonNullable<AssetFragment['focalPoint']>);

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/administrator-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/administrator-definitions.ts
@@ -36,6 +36,15 @@ export const ADMINISTRATOR_FRAGMENT = gql`
     ${ROLE_FRAGMENT}
 `;
 
+export const GET_ACTIVE_ADMINISTRATOR = gql`
+    query GetActiveAdministrator {
+        activeAdministrator {
+            ...Administrator
+        }
+    }
+    ${ADMINISTRATOR_FRAGMENT}
+`;
+
 export const GET_ADMINISTRATORS = gql`
     query GetAdministrators($options: AdministratorListOptions) {
         administrators(options: $options) {

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts
@@ -359,3 +359,16 @@ export const TRANSITION_FULFILLMENT_TO_STATE = gql`
     ${FULFILLMENT_FRAGMENT}
     ${ERROR_RESULT_FRAGMENT}
 `;
+
+export const GET_ORDER_SUMMARY = gql`
+    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
+        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
+            totalItems
+            items {
+                id
+                total
+                currencyCode
+            }
+        }
+    }
+`;
diff --git a/packages/admin-ui/src/lib/core/src/data/providers/administrator-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/administrator-data.service.ts
@@ -1,10 +1,13 @@
+import { FetchPolicy } from '@apollo/client';
+
 import {
     CreateAdministrator,
     CreateAdministratorInput,
     CreateRole,
     CreateRoleInput,
     DeleteAdministrator,
     DeleteRole,
+    GetActiveAdministrator,
     GetAdministrator,
     GetAdministrators,
     GetRole,
@@ -19,6 +22,7 @@ import {
     CREATE_ROLE,
     DELETE_ADMINISTRATOR,
     DELETE_ROLE,
+    GET_ACTIVE_ADMINISTRATOR,
     GET_ADMINISTRATOR,
     GET_ADMINISTRATORS,
     GET_ROLE,
@@ -44,6 +48,14 @@ export class AdministratorDataService {
         );
     }
 
+    getActiveAdministrator(fetchPolicy: FetchPolicy = 'cache-first') {
+        return this.baseDataService.query<GetActiveAdministrator.Query>(
+            GET_ACTIVE_ADMINISTRATOR,
+            {},
+            fetchPolicy,
+        );
+    }
+
     getAdministrator(id: string) {
         return this.baseDataService.query<GetAdministrator.Query, GetAdministrator.Variables>(
             GET_ADMINISTRATOR,

diff --git a/packages/admin-ui/src/lib/core/src/data/providers/order-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/order-data.service.ts
@@ -9,7 +9,9 @@ import {
     GetOrder,
     GetOrderHistory,
     GetOrderList,
+    GetOrderSummary,
     HistoryEntryListOptions,
+    OrderListOptions,
     RefundOrder,
     RefundOrderInput,
     SettlePayment,
@@ -28,8 +30,9 @@ import {
     CREATE_FULFILLMENT,
     DELETE_ORDER_NOTE,
     GET_ORDER,
-    GET_ORDER_HISTORY,
     GET_ORDERS_LIST,
+    GET_ORDER_HISTORY,
+    GET_ORDER_SUMMARY,
     REFUND_ORDER,
     SETTLE_PAYMENT,
     SETTLE_REFUND,
@@ -44,12 +47,9 @@ import { BaseDataService } from './base-data.service';
 export class OrderDataService {
     constructor(private baseDataService: BaseDataService) {}
 
-    getOrders(take: number = 10, skip: number = 0) {
+    getOrders(options: OrderListOptions = { take: 10 }) {
         return this.baseDataService.query<GetOrderList.Query, GetOrderList.Variables>(GET_ORDERS_LIST, {
-            options: {
-                take,
-                skip,
-            },
+            options,
         });
     }
 
@@ -155,4 +155,14 @@ export class OrderDataService {
             input,
         });
     }
+
+    getOrderSummary(start: Date, end: Date) {
+        return this.baseDataService.query<GetOrderSummary.Query, GetOrderSummary.Variables>(
+            GET_ORDER_SUMMARY,
+            {
+                start: start.toISOString(),
+                end: end.toISOString(),
+            },
+        );
+    }
 }
diff --git a/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget-types.ts b/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget-types.ts
@@ -0,0 +1,30 @@
+import { Type } from '@angular/core';
+
+export interface DashboardWidgetConfig {
+    /**
+     * Used to specify the widget component. Supports both eager- and lazy-loading.
+     * @example
+     * ```TypeScript
+     * // eager-loading
+     * loadComponent: () => MyWidgetComponent,
+     *
+     * // lazy-loading
+     * loadComponent: () => import('./path-to/widget.component').then(m => m.MyWidgetComponent),
+     * ```
+     */
+    loadComponent: () => Promise<Type<any>> | Type<any>;
+    /**
+     * The title of the widget. Can be a translation token as it will get passed
+     * through the `translate` pipe.
+     */
+    title?: string;
+    /**
+     * The width of the widget, in terms of a Bootstrap-style 12-column grid.
+     */
+    width: 3 | 4 | 6 | 12;
+    /**
+     * If set, the widget will only be displayed if the current user has all the
+     * specified permissions.
+     */
+    requiresPermissions?: string[];
+}
diff --git a/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget.service.ts b/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget.service.ts
@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+
+import { DashboardWidgetConfig } from './dashboard-widget-types';
+
+/**
+ * Registers a component to be used as a dashboard widget.
+ */
+@Injectable({
+    providedIn: 'root',
+})
+export class DashboardWidgetService {
+    private registry = new Map<string, DashboardWidgetConfig>();
+    private layout: ReadonlyArray<string> = [];
+
+    registerWidget(id: string, config: DashboardWidgetConfig) {
+        if (this.registry.has(id)) {
+            throw new Error(`A dashboard widget with the id "${id}" already exists`);
+        }
+
+        this.registry.set(id, config);
+    }
+
+    setDefaultLayout(ids: string[] | ReadonlyArray<string>) {
+        this.layout = ids;
+    }
+
+    getDefaultLayout(): ReadonlyArray<string> {
+        return this.layout;
+    }
+
+    getWidgets(): DashboardWidgetConfig[] {
+        return this.layout
+            .map(id => {
+                const config = this.registry.get(id);
+                if (!config) {
+                    // tslint:disable-next-line:no-console
+                    console.error(
+                        `No dashboard widget was found with the id "${id}"\nAvailable ids: ${[
+                            ...this.registry.keys(),
+                        ]
+                            .map(_id => `"${_id}"`)
+                            .join(', ')}`,
+                    );
+                }
+                return config;
+            })
+            .filter(notNullOrUndefined);
+    }
+}
diff --git a/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/register-dashboard-widget.ts b/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/register-dashboard-widget.ts
@@ -0,0 +1,26 @@
+import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
+
+import { DashboardWidgetConfig } from './dashboard-widget-types';
+import { DashboardWidgetService } from './dashboard-widget.service';
+
+export function registerDashboardWidget(id: string, config: DashboardWidgetConfig): FactoryProvider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (dashboardWidgetService: DashboardWidgetService) => () => {
+            dashboardWidgetService.registerWidget(id, config);
+        },
+        deps: [DashboardWidgetService],
+    };
+}
+
+export function setDashboardWidgetLayout(ids: string[] | ReadonlyArray<string>): FactoryProvider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (dashboardWidgetService: DashboardWidgetService) => () => {
+            dashboardWidgetService.setDefaultLayout(ids);
+        },
+        deps: [DashboardWidgetService],
+    };
+}
diff --git a/packages/admin-ui/src/lib/core/src/public_api.ts b/packages/admin-ui/src/lib/core/src/public_api.ts
@@ -68,6 +68,9 @@ export * from './data/utils/remove-readonly-custom-fields';
 export * from './providers/auth/auth.service';
 export * from './providers/component-registry/component-registry.service';
 export * from './providers/custom-field-component/custom-field-component.service';
+export * from './providers/dashboard-widget/dashboard-widget-types';
+export * from './providers/dashboard-widget/dashboard-widget.service';
+export * from './providers/dashboard-widget/register-dashboard-widget';
 export * from './providers/guard/auth.guard';
 export * from './providers/health-check/health-check.service';
 export * from './providers/i18n/custom-http-loader';