# NXP Notification UI Plugin

- Nxp-Notifications-Ui-Plugin is a vueJs plugin for managing institution Notification settings.

## Requirements

- Nxp UI Plugin.

```shell
npm i vue-nxp-plugin
```

## Configuration

- add the following line to your hosts file to trust notification Certificate.
```
3.22.52.234 notifications-transvers-integration.app.dev.s2m.ma
```

## Installation

- via npm, latest version.

```shell
npm i vue-nxp-notifications-ui-plugin
```

- via package.json with specific version (integration Deployments).

```json
"vue-nxp-notifications-ui-plugin" : "0.5.7",
```

__NB :__
```text
Add following code to your package.json in order to download the plugin from nexus repository.
```

```json
"publishConfig": {
"registry": "https://artifact-repos.dev.s2m.ma/repository/npm-hosted/",
},
```

- via package.json with specific version (local Developments).

```json
"vue-nxp-notifications-ui-plugin" : "0.4.21",
```

## Settings

- After Installing the Plugin, Use it globally in your main.js file.

```js
import NotificationConfigurationPlugin from 'vue-nxp-notifications-ui-plugin/dist/nxp-notifications-ui-plugin.common';
import 'vue-nxp-notifications-ui-plugin/dist/nxp-notifications-ui-plugin.css';

Vue.use(NotificationConfigurationPlugin,{ 'notificationUrl': process.env.VUE_APP_ITSP_NOTIFICATION_URL, 'parametersInstitutionExistenceUrl': process.env.VUE_APP_ITSP_PARAMETERS_MICROSERVICE_CHECK_INSTITUTION_EXISTENCE, 'parametersConfigurationUsageUrl': process.env.VUE_APP_ITSP_PARAMETERS_MICROSERVICE_CHECK_CONFIGURATION_USAGE});
```

__- With :__

- VUE_APP_ITSP_NOTIFICATION_URL is an environment variable in .env and .env.production files which is the notification Microservice url.
  
- VUE_APP_ITSP_PARAMETERS_MICROSERVICE_CHECK_INSTITUTION_EXISTENCE is an environment variable in .env and .env.production files which is the api url for check-institution-existence (the api returns true if the institution exists by institution Id before creating or updating the configuraiton).
- VUE_APP_ITSP_PARAMETERS_MICROSERVICE_CHECK_CONFIGURATION_USAGE is an environment variable in .env and .env.production files which is the api url for check-configuration-usage (the api returns true if the configuration is used in an entity before delete action).


__So in your Institution MicroService you have to implement two Apis, example :__

```java
@PostMapping("/exists")
public ResponseEntity<Boolean> existsByInsId(@RequestBody String operationData) {
    return new ResponseEntity<>(this.institutionService.existsByInsId(operationData), HttpStatus.OK);
}

@PostMapping("check-usage")
public ResponseEntity<Boolean> existsByNotificationConfigurationName(@RequestBody String operationData) {
    return new ResponseEntity<>(this.binService.existsByNotificationConfigurationName(operationData),
            HttpStatus.OK);
}
```

- finally, in your i18n file plug notification plugin i18n variable:

```js
setTimeout(()=>{
    your_messages.en = {...Vue.prototype.$notification_messages.en ,...your_messages.en}
    your_messages.fr = {...Vue.prototype.$notification_messages.fr ,...your_messages.fr}
},0)
```

- with Vue.prototype.$notification_messages is a global variable coming from notifications plugin.

## Props

- institution : Object.

## Events

- close : when the user clicks on Close Button.

## Usage

- You can simply import The base Component as follows :

```vue
<template>
  <div>
    <nxp-notification-configuration :institution="institution"/>
  </div>
</template>

<script>
export default {
  name :'test',
  data(){
    return {
      institution : {
        institutionId :'000001',
        institutionName : 'BMCE Bank'
      }
    }
  }
}
</script>
```
