@genesislcap/pbc-reporting-ui 1.0.1

package/dist/esm/layouts/default.js

@@ -0,0 +1,27 @@
+import { css, html } from '@microsoft/fast-element';
+import { FASTElementLayout } from '@microsoft/fast-router';
+export const defaultLayout = new FASTElementLayout(html `
+    <div class="container">
+      <div class="content">
+        <slot></slot>
+      </div>
+    </div>
+  `, css `
+    :host {
+    }
+
+    .container {
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: relative;
+    }
+
+    .content {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  `);

package/dist/esm/layouts/index.js

@@ -0,0 +1,2 @@
+export * from './default';
+export * from './two-pane-horizontal';

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

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { attr, css, customElement, FASTElement, html, when } from '@microsoft/fast-element';
+import { ColorHEX } from '../styles';
+const { cyan } = ColorHEX;
+var Divider;
+(function (Divider) {
+    Divider["equal"] = "hyphen";
+    Divider["leftMain"] = "";
+    Divider["rightMain"] = "hyphen";
+})(Divider || (Divider = {}));
+const name = 'layout-two-pane-horizontal';
+const styles = css `
+  .container {
+    align-items: stretch;
+    column-gap: 4rem;
+    display: grid;
+    height: 100%;
+  }
+
+  .container.equal {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .container.left-main {
+    grid-template-columns: 3fr 1fr;
+  }
+
+  .container.right-main {
+    grid-template-columns: 1fr 3fr;
+  }
+
+  .left {
+    position: relative;
+  }
+
+  .left .divider {
+    display: flex;
+    font-size: 3.2rem;
+    justify-content: center;
+    position: absolute;
+    right: -4rem;
+    top: 50%;
+    width: 4rem;
+    color: ${cyan};
+  }
+`;
+const template = html `
+  <div class="container ${(x) => x.splitRatio}" part="split-container">
+    <section class="left" part="left-section">
+      <slot name="left-section"></slot>
+
+      ${when((x) => !x.hideDivider, html `
+          <div class="divider" part="divider">
+            <slot name="divider">
+              <zero-icon name="chevron-right"></zero-icon>
+            </slot>
+          </div>
+        `)}
+    </section>
+
+    <section class="right" part="right-section">
+      <slot name="right-section"></slot>
+    </section>
+  </div>
+`;
+let LayoutTwoPaneHorizontal = class LayoutTwoPaneHorizontal extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.hideDivider = false;
+        this.splitRatio = 'equal';
+    }
+};
+__decorate([
+    attr({ mode: 'boolean' })
+], LayoutTwoPaneHorizontal.prototype, "hideDivider", void 0);
+__decorate([
+    attr
+], LayoutTwoPaneHorizontal.prototype, "splitRatio", void 0);
+LayoutTwoPaneHorizontal = __decorate([
+    customElement({
+        name,
+        styles,
+        template,
+    })
+], LayoutTwoPaneHorizontal);
+export { LayoutTwoPaneHorizontal };

package/dist/esm/main/index.js

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

package/dist/esm/main/main.js

@@ -0,0 +1,80 @@
+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 { 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 {
+    constructor() {
+        super(...arguments);
+        this.ready = false;
+        this.data = null;
+    }
+    connectedCallback() {
+        this.container.register(Registration.transient(DefaultRouteRecognizer, DefaultRouteRecognizer));
+        super.connectedCallback();
+        logger.debug(`${name} is now connected to the DOM`);
+        this.loadRemotes();
+        this.checkForSSOToken();
+    }
+    checkForSSOToken() {
+        const queryParams = new URLSearchParams(window.location.search);
+        const ssoToken = queryParams.get('SSO_TOKEN');
+        if (ssoToken) {
+            this.session.setSessionStorageItem('ssoToken', ssoToken);
+        }
+    }
+    loadRemotes() {
+        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;
+        });
+    }
+    selectTemplate() {
+        return this.ready ? MainTemplate : LoadingTemplate;
+    }
+    providerChanged() {
+        /**
+         * Configure foundation ui design system provider if needed
+         */
+    }
+};
+__decorate([
+    inject(MainRouterConfig)
+], Reporting.prototype, "config", void 0);
+__decorate([
+    Container
+], Reporting.prototype, "container", void 0);
+__decorate([
+    Session
+], Reporting.prototype, "session", void 0);
+__decorate([
+    observable
+], Reporting.prototype, "provider", void 0);
+__decorate([
+    observable
+], Reporting.prototype, "ready", void 0);
+__decorate([
+    observable
+], Reporting.prototype, "data", void 0);
+Reporting = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], Reporting);
+export { Reporting };

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

@@ -0,0 +1,15 @@
+import { css } from '@microsoft/fast-element';
+export const MainStyles = css `
+  :host {
+    contain: content;
+  }
+
+  :host,
+  zero-design-system-provider,
+  .dynamic-template,
+  fast-router {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+`;

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

@@ -0,0 +1,12 @@
+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>
+`;
+export const LoadingTemplate = html `
+  <fast-progress-ring></fast-progress-ring>
+`;
+export const MainTemplate = html `
+  <fast-router :config=${(x) => x.config}></fast-router>
+`;

package/dist/esm/routes/config.js

@@ -0,0 +1,84 @@
+import { __decorate, __param } from "tslib";
+import { Auth, Session, FoundationAnalytics, FoundationAnalyticsEventType, } from '@genesislcap/foundation-comms';
+import { Container } from '@microsoft/fast-foundation';
+import { RouterConfiguration, Route } from '@microsoft/fast-router';
+import { defaultLayout } from '../layouts';
+import { NotFound } from './not-found/not-found';
+import { Protected } from './protected/protected';
+import { ReportingHome } from './reporting-home/reporting-home';
+let MainRouterConfig = class MainRouterConfig extends RouterConfiguration {
+    constructor(auth, container, analytics, session) {
+        super();
+        this.auth = auth;
+        this.container = container;
+        this.analytics = analytics;
+        this.session = session;
+    }
+    configure() {
+        this.title = 'Reporting';
+        this.defaultLayout = defaultLayout;
+        this.routes.map({
+            path: '',
+            element: ReportingHome,
+            title: 'Reporting',
+            name: 'reporting-home',
+            settings: {
+                public: true,
+                resetPassword: true,
+                forgotPassword: true,
+                requestAccount: true,
+            },
+        }, { path: 'protected', element: Protected, title: 'Protected', name: 'protected' }, { path: 'not-found', element: NotFound, title: 'Not Found', name: 'not-found' });
+        const session = this.session;
+        const auth = this.auth;
+        const analytics = this.analytics;
+        /**
+         * Example of a FallbackRouteDefinition
+         */
+        this.routes.fallback(() => auth.isLoggedIn ? { redirect: 'not-found' } : { redirect: 'reporting-home' });
+        /**
+         * Example of a NavigationContributor
+         */
+        this.contributors.push({
+            navigate: (phase) => {
+                const settings = phase.route.settings;
+                /**
+                 * TODO: Centralise
+                 * Suspect this should be done via createEventSink, but it's not fully clear how-to do that as no docs
+                 */
+                analytics.trackEvent(FoundationAnalyticsEventType.routeChanged, {
+                    path: phase.route.endpoint.path,
+                });
+                /**
+                 * If public route don't block
+                 */
+                if (settings && settings.public) {
+                    return;
+                }
+                /**
+                 * If logged in don't block
+                 */
+                if (auth.isLoggedIn) {
+                    return;
+                }
+                /**
+                 * Otherwise route them to login
+                 */
+                phase.cancel(() => {
+                    session.captureReturnUrl();
+                    Route.name.replace(phase.router, 'reporting-home');
+                });
+            },
+        });
+    }
+    construct(Type) {
+        return this.container.get(Type);
+    }
+};
+MainRouterConfig = __decorate([
+    __param(0, Auth),
+    __param(1, Container),
+    __param(2, FoundationAnalytics),
+    __param(3, Session)
+], MainRouterConfig);
+export { MainRouterConfig };

package/dist/esm/routes/index.js

@@ -0,0 +1 @@
+export * from './config';

package/dist/esm/routes/not-found/not-found.js

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { mixinScreen } from '../../styles';
+const template = html `
+  <h1>Not found! 404</h1>
+`;
+const styles = css `
+  :host {
+    ${mixinScreen()}
+  }
+  :host {
+    contain: content;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+  }
+`;
+let NotFound = class NotFound extends FASTElement {
+};
+NotFound = __decorate([
+    customElement({
+        name: 'foundation-reporting-not-found',
+        template,
+        styles,
+    })
+], NotFound);
+export { NotFound };

package/dist/esm/routes/protected/protected.js

@@ -0,0 +1,32 @@
+import { __awaiter, __decorate } from "tslib";
+import { Auth, Connect } from '@genesislcap/foundation-comms';
+import { customElement, FASTElement } from '@microsoft/fast-element';
+import { Route } from '@microsoft/fast-router';
+import { ProtectedStyles as styles } from './protected.styles';
+import { ProtectedTemplate as template } from './protected.template';
+const name = 'foundation-reporting-protected';
+let Protected = class Protected extends FASTElement {
+    logout() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.auth.logout();
+            if (!result.success) {
+                return;
+            }
+            Route.path.push('/');
+        });
+    }
+};
+__decorate([
+    Connect
+], Protected.prototype, "connect", void 0);
+__decorate([
+    Auth
+], Protected.prototype, "auth", void 0);
+Protected = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], Protected);
+export { Protected };

package/dist/esm/routes/protected/protected.styles.js

@@ -0,0 +1,18 @@
+import { css } from '@microsoft/fast-element';
+export const ProtectedStyles = css `
+  :host {
+    contain: content;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .protected-page {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+  }
+`;

package/dist/esm/routes/protected/protected.template.js

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+export const ProtectedTemplate = html `
+  <div class="protected-page">
+    Login successful
+    <zero-button @click=${(x) => x.logout()}>Logout</zero-button>
+  </div>
+`;

package/dist/esm/routes/reporting-home/reporting-home-styles.js

@@ -0,0 +1,74 @@
+import { neutralForegroundRest, neutralLayer4 } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { helperStyles } from '../../styles';
+import { ColorHEX } from '../../styles/colors';
+const { blackPearl, lightBlue, dark } = ColorHEX;
+export const ReportingHomeStyles = css `
+  ${helperStyles}
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    --design-unit: 3.5;
+    --zero-fill-color: ${blackPearl};
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    color: white;
+    background-color: ${blackPearl};
+  }
+
+  .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: ${neutralForegroundRest};
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .tabs {
+    width: 100%;
+    height: 100%;
+
+    --zero-card-fill-color: ${neutralLayer4};
+    --accent-foreground-rest: ${lightBlue};
+    --type-ramp-base-font-size: 13px;
+  }
+
+  ::part(tablist),
+  .tabs .tablist {
+    height: 37;
+  }
+
+  zero-tab-panel {
+    background-color: ${neutralLayer4};
+    height: calc(100% - 110px);
+    padding: 1px 1rem;
+  }
+
+  .controls {
+    align-items: center;
+    display: flex;
+  }
+`;

package/dist/esm/routes/reporting-home/reporting-home-template.js

@@ -0,0 +1,85 @@
+import { html, repeat, ref, when } from '@microsoft/fast-element';
+const notificationToast = html `
+  <div class="notification-container" data-test-id="notification-container">
+    ${repeat((x) => x.notifications, html `
+        <zero-toast
+          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>
+        </zero-toast>
+      `)}
+  </div>
+`;
+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">
+      <zero-button
+        appearance="neutral-grey"
+        class="button"
+        ?disabled=${(x) => !x.selectedRows.length}
+        @click=${(x) => x.reportsGrid.batchDelete()}
+        data-test-id="delete-reports-button"
+      >
+        Delete Reports
+      </zero-button>
+
+      <zero-button
+        appearance="primary-gradient"
+        class="button"
+        @click=${(x) => x.create()}
+        data-test-id="add-report-button"
+      >
+        Add new report
+      </zero-button>
+    </div>
+  </div>
+`;
+export const ReportingHomeTemplate = html `
+  ${when((x) => x.notifications.length, notificationToast)}
+
+  <div class="container" data-test-id="reporting-home">
+    <zero-design-system-provider>
+      <zero-tabs ${ref('tabs')} class="tabs" data-test-id="tabs">
+        <span part="start" class="start" slot="start" data-test-id="reporting-tab">Reporting</span>
+        <zero-tab id="list-reports" slot="tab" data-test-id="list-reports-tab">
+          All Reports
+        </zero-tab>
+        <zero-tab id="create-edit-report" slot="tab" data-test-id="create-edit-report-tab">
+          Create Report
+        </zero-tab>
+        ${when((x) => Object.keys(x.activeReport).length > 0, html `
+            <zero-tab id="run-report" slot="tab" data-test-id="run-report-tab">Run Report</zero-tab>
+          `)}
+
+        <zero-tab-panel slot="tabpanel" class="tab-panel" data-test-id="list-reports-panel">
+          ${header}
+          <reporting-list ${ref('reportsGrid')} data-test-id="report-list"></reporting-list>
+        </zero-tab-panel>
+
+        <zero-tab-panel 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"
+          />
+        </zero-tab-panel>
+        ${when((x) => Object.keys(x.activeReport).length > 0, html `
+            <zero-tab-panel 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"
+              />
+            </zero-tab-panel>
+          `)}
+      </zero-tabs>
+    </zero-design-system-provider>
+  </div>
+`;

package/dist/esm/routes/reporting-home/reporting-home.js

@@ -0,0 +1,103 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect, DatasourceDefaults } from '@genesislcap/foundation-comms';
+import { customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ReportingHomeStyles as styles } from './reporting-home-styles';
+import { ReportingHomeTemplate as template } from './reporting-home-template';
+import { ReportingEventListeners } from './types';
+const name = 'reporting-home';
+let ReportingHome = class ReportingHome extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        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() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            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);
+            });
+        });
+    }
+    // TODO: use const for tab identifiers
+    create() {
+        this.activeReport = {};
+        this.setPageTab('create-edit-report');
+    }
+    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* () {
+            this.activeReport = Object.assign(Object.assign({}, rowData), { REPORT_COLUMNS: JSON.parse(rowData['REPORT_COLUMNS']) });
+            this.setPageTab('run-report');
+        });
+    }
+    setPageTab(tab) {
+        this.tabs.activeid = tab;
+    }
+    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([
+    Connect
+], ReportingHome.prototype, "connect", void 0);
+__decorate([
+    observable
+], ReportingHome.prototype, "fields", void 0);
+__decorate([
+    observable
+], ReportingHome.prototype, "selectedRows", void 0);
+__decorate([
+    observable
+], ReportingHome.prototype, "activeReport", void 0);
+__decorate([
+    observable
+], ReportingHome.prototype, "notifications", void 0);
+__decorate([
+    observable
+], ReportingHome.prototype, "datasourceSettings", void 0);
+ReportingHome = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], ReportingHome);
+export { ReportingHome };

package/dist/esm/routes/reporting-home/types.js

@@ -0,0 +1,7 @@
+export var ReportingEventListeners;
+(function (ReportingEventListeners) {
+    ReportingEventListeners["notify"] = "notify";
+    ReportingEventListeners["listReports"] = "listReports";
+    ReportingEventListeners["runReport"] = "runReport";
+    ReportingEventListeners["editReport"] = "editReport";
+})(ReportingEventListeners || (ReportingEventListeners = {}));