vue-nxp-notifications-ui-plugin

nxp-notifications-ui-plugin

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

Installation

via npm, latest version:
-----------------------

npm i vue-nxp-notifications-ui-plugin



via package.json with specific version :
----------------------------------------

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

Props

              |  institution  |
------------- | ------------- |
    Type      |    Object     |

Events

close : when the user click on Close Button.

Usage

You can simply import The base Componenet as follow : 
-----------------------------------------------------

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

with Properties as follow : 
---------------------------

institution : {
    institutionId :'000001',
    institutionName : 'BMCE Bank'
}

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';
Vue.use(NotificationConfigurationPlugin,{ 'notificationUrl':null,'i18n':i18n });

parameters : 
------------

notificationUrl : string : notification url api URL, if not present http://localhost:9092/api/ will be set as default value, optional.
i18n : plugin, your i18n module, required.

add global css style : 
----------------------

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'notyf/notyf.min.css';
import 'vue-multiselect/dist/vue-multiselect.min.css';
import './assets/style.css';

create style.css under src/assets folder as follow:
-----------------------------------------------

.myRow {
    border: 0;
    border-bottom: 2px solid grey;
}

.chevClass :hover{
    color: dodgerblue;
    background-color: lightgrey;
    border-radius: 2px;
}

.errorMessage{
    font-weight:bold;
    color:red;
    font-size:12px
}

NB: you can add your global css classes to this folder...


and finally in your i18n file add notification plugin en and fr files as follow :
---------------------------------------------------------------------------------

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..