vue-nxp-notifications-ui-plugin

NXP Notification UI Plugin

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

Requirements

• Nxp UI Plugin.

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.

npm i vue-nxp-notifications-ui-plugin

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

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

NB :

Add following code to your package.json in order to download the plugin from nexus repository.

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

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

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

Settings

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

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 :

@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:

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 :

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

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