@genesislcap/pbc-reporting-ui 1.0.6 → 1.0.7

package/dist/esm/constants/grid-config.js

@@ -2,8 +2,7 @@
 export const defaultRowConfig = {
     rowHeight: 52,
     rowStyle: {
-        // TODO: use var for colors; allow styling through design system
-        backgroundColor: 'RGB(34, 39, 44)',
+        backgroundColor: 'var(--neutral-layer-3)',
         border: 'none',
         borderRadius: '6px',
         maxHeight: '42px',

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export * from './main/index';
-export * from './routes/config';
+export * from './config';
+export * from './main';

package/dist/esm/layouts/default.js

@@ -1,6 +1,5 @@
-import { css, html } from '@microsoft/fast-element';
-import { FASTElementLayout } from '@microsoft/fast-router';
-export const defaultLayout = new FASTElementLayout(html `
+import { css, GenesisElementLayout, html } from '@genesislcap/web-core';
+export const defaultLayout = new GenesisElementLayout(html `
     <div class="container">
       <div class="content">
         <slot></slot>

package/dist/esm/layouts/two-pane-horizontal.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
-import { attr, css, customElement, FASTElement, html, when } from '@microsoft/fast-element';
-import { ColorHEX } from '../styles';
-const { cyan } = ColorHEX;
+import { attr, css, customElement, GenesisElement, html, when } from '@genesislcap/web-core';
+import { iconTag } from '../tags';
 var Divider;
 (function (Divider) {
     Divider["equal"] = "hyphen";
@@ -41,7 +40,7 @@ const styles = css `
     right: -4rem;
     top: 50%;
     width: 4rem;
-    color: ${cyan};
+    color: var(--neutral-foreground-hint);
   }
 `;
 const template = html `
@@ -52,7 +51,7 @@ const template = html `
       ${when((x) => !x.hideDivider, html `
           <div class="divider" part="divider">
             <slot name="divider">
-              <zero-icon name="chevron-right"></zero-icon>
+              <${iconTag} name="chevron-right"></${iconTag}>
             </slot>
           </div>
         `)}
@@ -63,7 +62,7 @@ const template = html `
     </section>
   </div>
 `;
-let LayoutTwoPaneHorizontal = class LayoutTwoPaneHorizontal extends FASTElement {
+let LayoutTwoPaneHorizontal = class LayoutTwoPaneHorizontal extends GenesisElement {
     constructor() {
         super(...arguments);
         this.hideDivider = false;

package/dist/esm/main/index.js

@@ -1,2 +1,3 @@
 export * from './main.template';
 export * from './main';
+export * from './main.styles';

package/dist/esm/main/main.js

@@ -1,80 +1,234 @@
 import { __awaiter, __decorate } from "tslib";
-import { Session } from '@genesislcap/foundation-comms';
-import { customElement, FASTElement, observable } from '@microsoft/fast-element';
-import { Container, inject, Registration } from '@microsoft/fast-foundation';
-import { DefaultRouteRecognizer } from '@microsoft/fast-router';
-import * as Components from '../components';
-import { MainRouterConfig } from '../routes';
-import { logger } from '../utils';
+import { Connect, DatasourceDefaults } from '@genesislcap/foundation-comms';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import { MainStyles as styles } from './main.styles';
-import { LoadingTemplate, MainTemplate, MainTemplate as template } from './main.template';
-const name = 'foundation-reporting';
-let Reporting = class Reporting extends FASTElement {
+import { MainTemplate as template } from './main.template';
+import { ReportingEventListeners } from './types';
+import { ReportingConfig } from '../config/config';
+/**
+ * FoundationReporting.
+ *
+ * @remarks
+ * Base MF export used by host application `configure` calls. It does not set up a design system or components. Both are
+ * expected to be registered in the host application, which should provide the details of which to the MF via
+ * TemplateOptions.
+ *
+ * See the {@link configure} hook for more information on how to set up and use this micro frontend in your application.
+ *
+ * @public
+ */
+let FoundationReporting = class FoundationReporting extends GenesisElement {
     constructor() {
         super(...arguments);
-        this.ready = false;
-        this.data = null;
+        this.fields = [];
+        this.selectedRows = [];
+        this.activeReport = {};
+        this.notifications = [];
+    }
+    enter(phase) {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.datasourceSettings = {
+                maxRows: (_b = (_a = phase.route.settings) === null || _a === void 0 ? void 0 : _a.maxRows) !== null && _b !== void 0 ? _b : DatasourceDefaults.MAX_ROWS_250,
+                maxView: (_d = (_c = phase.route.settings) === null || _c === void 0 ? void 0 : _c.maxView) !== null && _d !== void 0 ? _d : DatasourceDefaults.MAX_VIEW_1000,
+            };
+        });
     }
     connectedCallback() {
-        this.container.register(Registration.transient(DefaultRouteRecognizer, DefaultRouteRecognizer));
-        super.connectedCallback();
-        logger.debug(`${name} is now connected to the DOM`);
-        this.loadRemotes();
-        this.checkForSSOToken();
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            console.log('reporting config', this.config);
+            this.reportsGrid.addEventListener('rowSelectionEvent', (e) => {
+                this.selectedRows = e.detail.selectedRows();
+            });
+            this.addEventListener(ReportingEventListeners.notify, (e) => {
+                this.notifications = [...this.notifications, e.detail];
+            });
+            this.addEventListener(ReportingEventListeners.listReports, (e) => {
+                this.setPageTab('list-reports');
+                this.activeReport = {};
+            });
+            this.reportsGrid.addEventListener(ReportingEventListeners.runReport, (e) => {
+                this.run(e.detail);
+            });
+            this.reportsGrid.addEventListener(ReportingEventListeners.editReport, (e) => {
+                this.edit(e.detail);
+            });
+        });
     }
-    checkForSSOToken() {
-        const queryParams = new URLSearchParams(window.location.search);
-        const ssoToken = queryParams.get('SSO_TOKEN');
-        if (ssoToken) {
-            this.session.setSessionStorageItem('ssoToken', ssoToken);
-        }
+    // TODO: use const for tab identifiers
+    create() {
+        this.activeReport = {};
+        this.setPageTab('create-edit-report');
     }
-    loadRemotes() {
+    edit(rowData) {
+        this.activeReport = Object.assign(Object.assign({}, rowData), { REPORT_COLUMNS: JSON.parse(rowData['REPORT_COLUMNS']) });
+        this.setPageTab('create-edit-report');
+    }
+    run(rowData) {
         return __awaiter(this, void 0, void 0, function* () {
-            /**
-             * Send event to indicate some async work is happening. Will be picked up by overlay micro frontend.
-             */
-            const remoteComponents = yield Components.loadRemotes({});
-            /**
-             * Simulate loading delay, TODO: Remove
-             *
-             * await new Promise(resolve => setTimeout(resolve, 3000));
-             */
-            this.ready = true;
+            this.activeReport = Object.assign(Object.assign({}, rowData), { REPORT_COLUMNS: JSON.parse(rowData['REPORT_COLUMNS']) });
+            this.setPageTab('run-report');
         });
     }
-    selectTemplate() {
-        return this.ready ? MainTemplate : LoadingTemplate;
+    setPageTab(tab) {
+        this.tabs.activeid = tab;
     }
-    providerChanged() {
-        /**
-         * Configure foundation ui design system provider if needed
-         */
+    getFields(resourceName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const temp = yield this.connect.getMetadata(resourceName);
+            for (let i = 0; i < temp.FIELD.length; i += 1) {
+                this.fields.push(temp.FIELD[i].NAME);
+            }
+            this.listBox.hidden = false;
+        });
     }
 };
 __decorate([
-    inject(MainRouterConfig)
-], Reporting.prototype, "config", void 0);
+    Connect
+], FoundationReporting.prototype, "connect", void 0);
 __decorate([
-    Container
-], Reporting.prototype, "container", void 0);
+    observable
+], FoundationReporting.prototype, "fields", void 0);
 __decorate([
-    Session
-], Reporting.prototype, "session", void 0);
+    observable
+], FoundationReporting.prototype, "selectedRows", void 0);
 __decorate([
     observable
-], Reporting.prototype, "provider", void 0);
+], FoundationReporting.prototype, "activeReport", void 0);
 __decorate([
     observable
-], Reporting.prototype, "ready", void 0);
+], FoundationReporting.prototype, "notifications", void 0);
 __decorate([
     observable
-], Reporting.prototype, "data", void 0);
-Reporting = __decorate([
+], FoundationReporting.prototype, "datasourceSettings", void 0);
+__decorate([
+    ReportingConfig
+], FoundationReporting.prototype, "config", void 0);
+FoundationReporting = __decorate([
+    customElement({
+        name: 'foundation-reporting',
+        template,
+        styles,
+    })
+], FoundationReporting);
+export { FoundationReporting };
+/**
+ * RapidReporting.
+ *
+ * @remarks
+ * A rapid version that pre-registers rapid components and uses the rapid design system.
+ *
+ * @example
+ * ```ts
+ * import { RapidReporting } from '@genesislcap/pbc-reporting-ui';
+ * ...
+ * RapidReporting
+ * ```
+ *
+ * @example Load the micro frontend on-demand
+ * ```ts
+
+ *   const { RapidReporting } = await import('@genesislcap/pbc-reporting-ui');
+ *   return RapidReporting;
+ * },
+ * ```
+ *
+ * @public
+ */
+let RapidReporting = class RapidReporting extends FoundationReporting {
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            yield this.loadRemotes();
+        });
+    }
+    /**
+     * @internal
+     */
+    loadRemotes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { registerCommonRapidComponents } = yield import('../components/rapid-components');
+            yield registerCommonRapidComponents();
+        });
+    }
+};
+RapidReporting = __decorate([
+    customElement({
+        name: 'rapid-reporting',
+        template,
+        styles,
+    })
+], RapidReporting);
+export { RapidReporting };
+/**
+ * ZeroReporting.
+ *
+ * @remarks
+ * A zero version that pre-registers zero components and uses the zero design system.
+ *
+ * @example
+ * ```ts
+ * import { ZeroReporting } from '@genesislcap/pbc-reporting-ui';
+ * ...
+ * ZeroReporting
+ * ```
+ *
+ * @example Load the micro frontend on-demand
+ * ```ts
+
+ *   const { ZeroReporting } = await import('@genesislcap/pbc-reporting-ui');
+ *   return ZeroReporting;
+ * },
+ * ```
+ *
+ * @public
+ */
+let ZeroReporting = class ZeroReporting extends FoundationReporting {
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            yield this.loadRemotes();
+        });
+    }
+    /**
+     * @internal
+     */
+    loadRemotes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { registerCommonZeroComponents } = yield import('../components/zero-components');
+            yield registerCommonZeroComponents();
+        });
+    }
+};
+ZeroReporting = __decorate([
     customElement({
-        name,
+        name: 'zero-reporting',
         template,
         styles,
     })
-], Reporting);
-export { Reporting };
+], ZeroReporting);
+export { ZeroReporting };
+/**
+ * @privateRemarks
+ * Keeps backwards compatability with original export.
+ *
+ * @public
+ */
+export class Reporting extends ZeroReporting {
+}

package/dist/esm/main/main.styles.js

@@ -1,15 +1,68 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@genesislcap/web-core';
+import { helperStyles } from '../styles';
+import { designSystemProviderTag, tabPanelTag } from '../tags';
 export const MainStyles = css `
+  ${helperStyles}
   :host {
-    contain: content;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  ${designSystemProviderTag} {
+    height: 100%;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .notification-container {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 10;
+    right: calc(var(--design-unit) * 10px);
+    bottom: calc(var(--design-unit) * 10px);
+    color: var(--neutral-foreground-rest);
   }
 
-  :host,
-  zero-design-system-provider,
-  .dynamic-template,
-  fast-router {
+  .header {
     display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--design-unit) * 4px) 0;
+  }
+
+  .title {
+    font-size: var(--type-ramp-plus-4-font-size);
+    font-weight: 700;
+  }
+
+  .tabs {
     width: 100%;
     height: 100%;
+    background-color: var(--neutral-layer-4);
+  }
+
+  ::part(tablist),
+  .tabs .tablist {
+    height: 37;
+  }
+
+  ${tabPanelTag} {
+    background-color: var(--neutral-layer-4);
+    height: calc(100% - 110px);
+    padding: 0 calc(var(--design-unit) * 4px);
+  }
+
+  .controls {
+    align-items: center;
+    display: flex;
+    gap: calc(var(--design-unit) * 2px);
   }
 `;

package/dist/esm/main/main.template.js

@@ -1,12 +1,99 @@
-import { html, ref } from '@microsoft/fast-element';
-export const DynamicTemplate = html `
-  <zero-design-system-provider ${ref('provider')}>
-    <div class="dynamic-template">${(x) => x.selectTemplate()}</div>
-  </zero-design-system-provider>
+import { html, repeat, ref, when } from "@genesislcap/web-core";
+import { List } from "../components/list";
+import { Wizard } from "../components/wizard";
+import { Preview } from "../components/preview";
+import { SelectFields } from "../components/select-fields";
+import { SelectFilters } from "../components/select-filters";
+import { CreateEdit } from "../components/create-edit";
+import { LayoutTwoPaneHorizontal } from "../layouts";
+import { buttonTag, tabPanelTag, tabTag, tabsTag, toastTag, } from "../tags";
+List;
+Preview;
+SelectFields;
+SelectFilters;
+Wizard;
+CreateEdit;
+LayoutTwoPaneHorizontal;
+const notificationToast = html `
+  <div class="notification-container" data-test-id="notification-container">
+    ${repeat((x) => x.notifications, html `
+        <${toastTag}
+          notify=${(notification) => notification.type}
+          auto-close=${(notification) => notification.autoClose}
+          data-test-id="toast"
+        >
+          <div slot="top" data-test-id="toast-title">${(notification) => notification.title}</div>
+          <p slot="content" data-test-id="toast-message">
+            ${(notification) => notification.message}
+          </p>
+        </${toastTag}>
+      `)}
+  </div>
 `;
-export const LoadingTemplate = html `
-  <fast-progress-ring></fast-progress-ring>
+const header = html `
+  <div class="header" data-test-id="header">
+    <h1 id="title" class="title" data-test-id="report-title">All Reports</h1>
+    <div class="controls" data-test-id="controls">
+      <${buttonTag}
+        appearance="neutral-grey"
+        class="button"
+        ?disabled=${(x) => !x.selectedRows.length}
+        @click=${(x) => x.reportsGrid.batchDelete()}
+        data-test-id="delete-reports-button"
+      >
+        Delete Reports
+      </${buttonTag}>
+
+      <${buttonTag}
+        appearance="${(x) => x.config.buttonAppearance}"
+        class="button"
+        @click=${(x) => x.create()}
+        data-test-id="add-report-button"
+      >
+        Add new report
+      </${buttonTag}>
+    </div>
+  </div>
 `;
 export const MainTemplate = html `
-  <fast-router :config=${(x) => x.config}></fast-router>
+  ${when((x) => x.notifications.length, notificationToast)}
+  <div class="container" data-test-id="reporting-home">
+
+      <${tabsTag} ${ref("tabs")} class="tabs" data-test-id="tabs">
+        <span part="start" class="start" slot="start" data-test-id="reporting-tab">Reporting</span>
+        <${tabTag} id="list-reports" slot="tab" data-test-id="list-reports-tab">
+          All Reports
+        </${tabTag}>
+        <${tabTag} id="create-edit-report" slot="tab" data-test-id="create-edit-report-tab">
+          Create Report
+        </${tabTag}>
+        ${when((x) => Object.keys(x.activeReport).length > 0, html `
+            <${tabTag} id="run-report" slot="tab" data-test-id="run-report-tab">Run Report</${tabTag}>
+          `)}
+
+        <${tabPanelTag} slot="tabpanel" class="tab-panel" data-test-id="list-reports-panel">
+          ${header}
+          <reporting-list ${ref("reportsGrid")} data-test-id="report-list"></reporting-list>
+        </${tabPanelTag}>
+
+        <${tabPanelTag} slot="tabpanel" class="tab-panel" data-test-id="create-edit-report-panel">
+          <reporting-create-edit
+            :report=${(x) => x.activeReport}
+            :setPageTab=${(x) => x.setPageTab}
+            :datasourceSettings=${(x) => x.datasourceSettings}
+            data-test-id="create-edit-report-component"
+          />
+        </${tabPanelTag}>
+        ${when((x) => Object.keys(x.activeReport).length > 0, html `
+            <${tabPanelTag} slot="tabpanel" class="tab-panel" data-test-id="report-preview-panel">
+              <reporting-preview
+                :report=${(x) => x.activeReport}
+                :datasourceSettings=${(x) => x.datasourceSettings}
+                data-test-id="report-preview-component"
+              />
+            </${tabPanelTag}>
+          `)}
+      </${tabsTag}>
+
+  </div>
 `;

package/dist/esm/styles/helpers.js

@@ -1,11 +1,19 @@
-import { neutralForegroundHint, neutralForegroundRest, neutralLayer3, } from '@microsoft/fast-components';
-import { css } from '@microsoft/fast-element';
-import { ColorHEX } from './colors';
-const { lightGrey, lightGrey1 } = ColorHEX;
+import { css } from "@genesislcap/web-core";
 /**
  * Helper classes
  */
 export const helperStyles = css `
+  ::-webkit-scrollbar {
+    width: calc((var(--base-height-multiplier) + var(--design-unit)) * 1px);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--neutral-layer-1);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--neutral-fill-rest);
+  }
   .text-center {
     text-align: center;
   }
@@ -19,8 +27,8 @@ export const helperStyles = css `
   }
 
   .my-20 {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-top: calc(var(--design-unit) * 5px);
+    margin-bottom: calc(var(--design-unit) * 5px);
   }
 
   .h-full {
@@ -80,7 +88,7 @@ export const helperStyles = css `
   }
 
   .gap-1 {
-    gap: 1rem;
+    gap: calc(var(--design-unit) * 4px);
   }
 
   .gap-2 {
@@ -96,11 +104,11 @@ export const helperStyles = css `
   }
 
   .mt-1 {
-    margin-top: 1rem;
+    margin-top: calc(var(--design-unit) * 4px);
   }
 
   .mt-15px {
-    margin-top: 15px;
+    margin-top: calc(var(--design-unit) * 4px);
   }
 
   .mt-2 {
@@ -120,9 +128,10 @@ export const helperStyles = css `
   }
 
   .card {
-    padding: 1rem;
+    padding: calc(var(--design-unit) * 4px);
     width: 100%;
-    background-color: ${neutralLayer3};
+    background-color: var(--neutral-layer-3);
+    border: none;
   }
 
   .overflow-auto {
@@ -130,50 +139,42 @@ export const helperStyles = css `
   }
 
   .section-title {
-    font-size: 18px;
+    font-size: var(--type-ramp-plus-4-font-size);
     font-weight: 700;
     line-height: normal;
   }
 
   .card-title {
-    color: ${neutralForegroundRest};
-    font-size: 14px;
+    color: var(--neutral-foreground-rest);
+    font-size: var(--type-ramp-base-font-size);
     font-weight: 700;
     line-height: normal;
     margin-top: 0;
-    text-align: 'left';
-    color: ${lightGrey1};
+    text-align: "left";
   }
 
   .step-title {
-    font-size: 14px;
+    font-size: var(--type-ramp-base-font-size);
     line-height: 22px;
   }
 
   .card-description {
-    color: ${neutralForegroundHint};
+    color: var(--neutral-foreground-hint);
     line-height: normal;
-    font-size: 14px;
+    font-size: var(--type-ramp-base-font-size);
     font-weight: 700;
-    margin-top: -5px;
-    color: ${lightGrey};
   }
 
   .spacer-3 {
     height: 1.3rem;
-    margin: 1rem 0 1rem;
+    margin: calc(var(--design-unit) * 4px) 0 calc(var(--design-unit) * 4px);
   }
 
   .light-grey {
-    color: ${neutralForegroundRest};
+    color: var(--neutral-foreground-rest);
   }
 
   .dark-grey {
-    color: ${neutralForegroundHint};
-  }
-
-  .button + .button,
-  zero-button + zero-button {
-    margin-left: 1rem;
+    color: var(--neutral-foreground-hint);
   }
 `;

package/dist/esm/styles/normalize.js

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@genesislcap/web-core';
 /**
  * Normalize styles
  */
@@ -8,6 +8,6 @@ export const normalizeStyles = css `
   h3,
   h4,
   h5 {
-    margin: 0 0 1rem 0;
+    margin: 0 0 calc(var(--design-unit) * 4px) 0;
   }
 `;