Ut-portal NPM | npm.io

9.6.76 • Published 18 days ago

Install

Weekly downloads

-

License

Apache-2.0

Repository

Last release

18 days ago

Microservice portal

Create portals in a modular way

Project links

Usage

Include ut-portal in your browser build INSTEAD of ut-front-react:

// usually this is in browser/index.js or portal/index.js
module.exports = (...params) => [
    require('ut-portal')(...params),
    // other modules
]

API

handle.tab.show({tab, params}) - Shows a new tab
portal.menu.item(definition) or portal.menu.item({component, id , title}) - Define a menu item, which when clicked opens a page.
- definition - Component definition function
- component - React component function
- id - Passed as the id property to the component function
- title - Title of the menu

Portal menu

To provide configuration for the portal, include it in a portal configuration module after ut-portal:

module.exports = (...params) => [
    // other modules,
    require('ut-portal')(...params),
    require('ut-portal-hello')(...params)
]

Then in ut-portal-hello, create a browser layer that returns handlers.

// browser.js
module.exports = () => function utPortalHello() {
    return {
        browser: () => [
            require('./portal.params.get')
        ]
    };
};

Implement a portal.params.get handler function named portal. The handler can reference components from other modules by using one of the destructuring syntaxes:

import:{component$subjectObjectPredicate}
import:{'component/x.y.z': componentXyz}

Then these components can be attached to the portal menu items:

// portal.params.get.js
const classes = require('./admin.css');

module.exports = function portal({
    import: {
        component$microserviceFooNew,
        component$microserviceFooBrowse,
        component$microserviceFooOpen,
        portalMenuItem
    }
}) {
    return {
        async 'portal.params.get'() {
            return {
                // return the theme parameters
                theme: {
                    ut: {
                        classes
                    }
                },
                // return the portal name
                portalName: 'Hello Portal',
                // return the portal menu
                menu: [{
                    title: 'Hello Menu',
                    items: [
                        await portalMenuItem(component$microserviceFooNew),
                        await portalMenuItem(component$microserviceFooBrowse),
                        await portalMenuItem({
                            component: component$microserviceFooOpen,
                            id: 1,
                            title: 'Open Foo 1'
                        })
                    ]
                }]
            };
        }
    };
};

Portal pages

Portal pages open as tabs in the UI. Portal pages are usually defined in dedicated files with the standard structure for defining handlers. The handler function should return an object, as shown below:

// @ts-check
import React from 'react';

/** @type { import("../../handlers").handlerFactory } */
export default ({
    import: {
    }
}) => ({
    'subject.object.predicate': () => ({
        title: 'Page title',
        permission: 'some.permission.id',
        component:() => function ComponentName {
            return (
                <div>Page content</div>
            );
        }

    })
});

@infinitebrahmanuniverse/nolb-ut-@everything-registry/sub-chunk-3031

18 days ago

3 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

9 months ago

8 months ago

9 months ago

11 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago