Nxp-Institution-Settings-UI-Library

Nxp-Notifications-Ui-Library is a vueJs library for managing institution Notification settings.

Installation

via npm :
---------

npm i nxp-notification-configuration-ui-library

in package.json with specific version :

"nxp-notification-configuration-ui-library": "^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'
}

Requirements

VueNxpUiComponents : 
    "vue-nxp-ui-components": "^2.1.4",

Axios : 
    "axios": "^0.21.1",
    "vue-axios": "^3.2.4",
    
VueMultiSelect :
    "vue-multiselect": "^2.1.6",

VueLidate : 
    "vuelidate": "^0.7.6",

i18n : 
    "vue-i18n": "^8.17.3",

Notyf : 
    "notyf": "^3.9.0",
    
FontAwesome Icons :
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/vue-fontawesome": "^2.0.0",

Settings

After Installing the Requirements, Use them Globaly in your main.js file

import NxpUiLibrary from 'vue-nxp-ui-components'
Vue.use(NxpUiLibrary);

import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);

import i18n from '../src/plugins/i18n'
//use i18n

import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);

//use the library globally
import NxpNotificationConfigurationUiLibrary from 'nxp-notification-configuration-ui-library';
Vue.use(NxpNotificationConfigurationUiLibrary);

import Vuelidate from 'vuelidate';
Vue.use(Vuelidate);

NB: 

Add Multiselect CSS.This can be added as a static asset or inside your App.vue.

For internationalization add following code to your en and fr js files

en.json : 
---------

{
  "notification-settings" : {

    "card-title": "Notification Settings",

    "space": {

      "configuration-name": "Configuration Name",
      "no-notifications-found": "No Notification Configuration Found",
      "configuration-deleted": "configuration has been Deleted",

      "errors": {
        "notification-ms-down": "notification microservice might be down...",
        "configuration-used-error": "Cannot delete a configuration that is used in a BIN",
        "parameters-ms-down": "parameters microservice might be down..."
      }

    },

    "add-view": {

      "input-labels": {
        "configuration-name": "Configuration Name *",
        "configuration-type": "Configuration Type *",
        "add-channel": "Add Channel",
        "configuration-channel": "Configuration Channel*",
        "notification-strategy": "Notification Strategy *",
        "server-address": "Server Address *",
        "server-port": "Server Port *",
        "from-email": "From Email *",
        "from-password": "From Password *"
      },

      "validation-errors": {

        "notification-error-message": "All fields are required",
        "configuration-name-required": "Configuration name is required",
        "configuration-type-required": "Configuration type is required",
        "smtp-configuration-email-required": "email is required",
        "smtp-configuration-password-required": "password is required",
        "smtp-configuration-server-address-required": "server address is required",
        "smtp-configuration-server-port-required": "server port is required"
      },

      "notyf": {
        "success" : "configuration has been added!",
        "reset": "the form has been reset!"
      },

      "api-errors": {
        "duplicated-configuration-name": "duplicated configuration name!",
        "institution-not-found" : "institution not found!"
      }

    },

    "update-view": {

      "input-labels": {
        "configuration-name": "Configuration Name",
        "add-channel": "Add Channel",
        "configuration-channel": "Configuration Channel*",
        "notification-strategy": "Notification Strategy *",
        "server-address": "Server Address *",
        "server-port": "Server Port *",
        "from-email": "From Email *",
        "from-password": "From Password *"
      },

      "validation-errors": {
        "notification-error-message": "All fields are required",
        "configuration-name-required": "Configuration name is required",
        "configuration-type-required": "Configuration type is required",
        "smtp-configuration-email-required": "email is required",
        "smtp-configuration-password-required": "password is required",
        "smtp-configuration-server-address-required": "server address is required",
        "smtp-configuration-server-port-required": "server port is required"
      },

      "notyf": {
        "success" : "configuration has been updated!",
        "reset": "the form has been reset!"
      },

      "api-errors": {
        "configuration-non-existing": "Cannot Update Non existing Configuration"
      }
    },

    "details-view": {

      "input-labels": {
        "configuration-name": "Configuration Name",
        "configuration-channel": "Configuration Channel",
        "notification-strategy": "Notification Strategy",
        "server-address": "Server Address",
        "server-port": "Server Port",
        "from-email": "From Email",
        "from-password": "From Password"
      }
    }
  }
}

fr.json : 
---------

{
  "institution-settings" : {

    "card-title": "Gestion de Notification",

    "space": {

      "configuration-name": "Nom Configuration",
      "no-notifications-found": "Aucune configuration de notification trouvée",
      "configuration-deleted": "la configuration a été supprimée avec success",

      "errors": {
        "notification-ms-down": "le microservice de notifications est non disponible...",
        "configuration-used-error": "Impossible de supprimer une configuration utilisée dans un BIN",
        "parameters-ms-down": "le microservice parameters est non disponible..."
      }

    },

    "add-view": {

      "input-labels": {
        "configuration-name": "Nom configuration *",
        "configuration-type": "Type configuration *",
        "configuration-protocol": "Protocole configuration *",
        "add-channel": "Ajouter un Canal",
        "configuration-channel": "Canal de configuration *",
        "notification-strategy": "Stratégie de notification *",
        "server-address": "Adresse du serveur *",
        "server-port": "Port du serveur *",
        "from-email": "Email Envoie *",
        "from-password": "Mot de passe Envoie *"
      },

      "validation-errors": {

        "notification-error-message": "Tous les champs sont requis",
        "configuration-name-required": "Le nom de la configuration est requis",
        "configuration-type-required": "Le type de configuration est requis",
        "smtp-configuration-email-required": "email d'envoie est requis",
        "smtp-configuration-password-required": "le mot de passe est requis",
        "smtp-configuration-server-address-required": "addresse du serveur est requise",
        "smtp-configuration-server-port-required": "port du serveur est requis"
      },

      "notyf": {
        "success" : "La configuration a été ajoutée!",
        "reset": "le formulaire a été réinitialisé!"
      },

      "api-errors": {
        "duplicated-configuration-name": "nom de configuration est dupliqué!",
        "institution-not-found" : "institution introuvable!"
      }

    },

    "update-view": {

      "input-labels": {
        "configuration-name": "Nom configuration",
        "add-channel": "Ajouter un Canal",
        "configuration-channel": "Canal de configuration *",
        "notification-strategy": "Stratégie de notification *",
        "server-address": "Adresse du serveur *",
        "server-port": "Port du serveur *",
        "from-email": "Email Envoie *",
        "from-password": "Mot de passe Envoie *"
      },

      "validation-errors": {
        "notification-error-message": "Tous les champs sont requis",
        "configuration-name-required": "Le nom de la configuration est requis",
        "configuration-type-required": "Le type de configuration est requis",
        "smtp-configuration-email-required": "email d'envoie est requis",
        "smtp-configuration-password-required": "le mot de passe est requis",
        "smtp-configuration-server-address-required": "addresse du serveur est requise",
        "smtp-configuration-server-port-required": "port du serveur est requis"
      },

      "notyf": {
        "success" : "la configuration a été mis à jour!",
        "reset": "le formulaire a été réinitialisé!"
      },

      "api-errors": {
        "configuration-non-existing": "Impossible de mettre à jour une configuration non existante"
      }
    },

    "details-view": {

      "input-labels": {
        "configuration-name": "Nom configuration",
        "configuration-channel": "Canal de configuration",
        "notification-strategy": "Stratégie de notification",
        "server-address": "Adresse du serveur",
        "server-port": "Port du serveur",
        "from-email": "Email Envoie",
        "from-password": "Mot de passe Envoie"
      }
    }
  }
}

Setup Icons

to display icons, add this code to your icons.js file

import {library} from "@fortawesome/fontawesome-svg-core";
import {
faCogs,
faCog,
faEdit,
faMinus,
faList,
faChevronDown
} from "@fortawesome/free-solid-svg-icons";

import {faPlusCircle} from "@fortawesome/free-solid-svg-icons/faPlusCircle";
import {faTv} from "@fortawesome/free-solid-svg-icons/faTv";
import {faChevronRight} from "@fortawesome/free-solid-svg-icons/faChevronRight";
import { faFontAwesome } from '@fortawesome/free-brands-svg-icons'

library.add(
faPlusCircle,faCog,faMinus,faTv, faChevronRight,faChevronDown,faEdit,faCog,faMinus,faTv, faChevronRight,faChevronDown,faEdit, faCog, faCogs, faList, faFontAwesome);

Api Communication

in order to communicate with your Notification Apis add environment variables

.env file : 
-----------

VUE_APP_ITSP_NOTIFICATION_URL = Your_Host_Url

.env.production : 
-----------------

VUE_APP_ITSP_NOTIFICATION_URL = $ITSP_NOTIFICATION_URL

jenkins file (post validation) :
--------------------------------

ITSP_NOTIFICATION_URL="https://notifications-transvers-integration.app.dev.s2m.ma/api/"

Testing Project

a sample example of using this library is available in a private git repository : 

git clone https://github.com/BoukhtaAli/Nxp-Institution-Settings-Test.git

contact [email protected] to get necessary access rights