npm package: @propmix/profet-app-wrapper
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
Latest version: 4.0.0-beta.1

  

# ProfetWrapper

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.

  
## Usage


1. Install the package using the command

    npm install @propmix/profet-app-wrapper


2. Import the library in module

        import { ProfetAppWrapperModule } from "@propmix/profet-app-wrapper";
        imports: [
            
            <!-- Other import statements -->
            ProfetAppWrapperModule
        ]


3. Use library in the component html

        <profet-wrapper>
            <ng-container headerInfo>
                // Custom header content goes here (Eg: Create Order)
            </ng-container>

            <ng-container bodyContentInfo>
                // Add the entire app router here, this will render the entire app within the wrapper
            </ng-container>
        </profet-wrapper>

4. Add library configuration [Find `config` section below]



## Config


The `PROFET_APPS` can have the following possible values:

| Constant                               | Description                            |
|----------------------------------------|----------------------------------------|
| `PROFET_APPS.profet_portal`            | **Profet Portal**                      |
| `PROFET_APPS.appraisal_management`     | **Workflow Management**                |
| `PROFET_APPS.appraisal_review`         | **Profet Review**                      |
| `PROFET_APPS.appraisal_valuation`      | **Profet Valuation**                   |

  
Use an initializer function to configure parameters

        import { ProfetWrapperConfig, PROFET_APPS } from '@propmix/profet-app-wrapper';
        import { Amplify } from 'aws-amplify';
        import { environment } from 'src/environments/environment';

        export function initializeConfig(): ProfetWrapperConfig {
            const wrapperConfig: ProfetWrapperConfig = {
                apiUrl: environment.portalApiUrl,

                appType: PROFET_APPS.profet_portal,     // change the value with respective app name from the `PROFET_APPS`

                portalFrontendUrl: environment.portalFrontendUrl,       // portalFrontendUrl is optional

                disableUtilityDrawer?: boolean;         // Disable Utility drawer is optional, by default it is enabled
                
                disableAppraisalAssistantApp?: boolean;     // Disable Appraisal Assistant app is optional, by default it is enabled
                
                signOutUrl: Amplify.getConfig().Auth.Cognito.loginWith.oauth.redirectSignOut[0]
                // signOutUrl - using this option to specify the logout path. 
                //              Usually take this from the Amplify config
            };
        
            return wrapperConfig;
        }
  

Use the configuration option in the app.module.ts file
  

        import { ProfetAppWrapperService } from '@propmix/profet-app-wrapper';        
        
        providers: [
            ProfetAppWrapperService,
            { provide: 'profetWrapperConfig', useFactory: initializeConfig }
        ]

## Input

INACTIVITY_LIMIT - Provide the value in milliseconds. The default value is 30 minutes

appUtilityconfig: UtilityConfig[] - Provide application/page specific configuration

        UtilityConfig {
            id?: string;                                // OPTIONAL - unique identifier(if not provided one will be auto-generated)
            label: string;                              // text for button
            loadComponent?: () => Promise<Type<any>>;   // the component to render in drawer
            layout?: 'push' | 'side' | 'over';          // drawer mode
            icon: string;                               // mat icon name
            config?: any;                               // configuration object passed to the dynamic component
        }


## Output

logoutEvent - This event is emitted when the user clicks on the logout button

utilitySelection - This event is emitted when the user clicks on the utility icon

### Optional Observables

The library provides two observables that can be consumed by the application if needed. However, using these observables is not mandatory.

1. `activeMenuList$` - Observable listening to menu list

    *Typescript* -

        import { ProfetAppWrapperService } from '@propmix/profet-app-wrapper';

        private _wrapperSer = inject(ProfetAppWrapperService);

        this._wrapperSer.activeMenuList$.subscribe(res => {
            console.log(res)  // menu list
        })

2. `companyList$` - Observable listening to companylist

    *Typescript* -

        import { ProfetAppWrapperService } from '@propmix/profet-app-wrapper';

        private _wrapperSer = inject(ProfetAppWrapperService);

        this._wrapperSer.companyList$.subscribe(res => {
            console.log(res)  // company list
        })

## Publishing to npm repository

1. ng build profet-app-wrapper

2. cd dist/profet-app-wrapper

3. npm publish --access public

  

## Local Development & testing

Do these steps from the library directory

1. ng build profet-app-wrapper --watch

2. cd dist/profet-app-wrapper/

3. npm link

Do these steps from the consumer application

1. npm ci

2. npm link @propmix/profet-app-wrapper

## Running unit tests

Run `ng test profet-app-wrapper` to execute the unit tests via [Karma](https://karma-runner.github.io).
 

## Further help
 

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.