https://github.com/sanofi-iadc/glisten
Feedback component plugin for whispr
https://github.com/sanofi-iadc/glisten
dashboard-component feedbacks
Last synced: 3 months ago
JSON representation
Feedback component plugin for whispr
- Host: GitHub
- URL: https://github.com/sanofi-iadc/glisten
- Owner: Sanofi-IADC
- License: mit
- Created: 2020-11-25T09:19:33.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-27T17:56:53.000Z (over 1 year ago)
- Last Synced: 2025-01-27T18:46:05.798Z (over 1 year ago)
- Topics: dashboard-component, feedbacks
- Language: Vue
- Homepage: https://sanofi-iadc.github.io/glisten/
- Size: 3.49 MB
- Stars: 6
- Watchers: 7
- Forks: 5
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@sanofi-iadc/glisten)
Glisten is a Vue component library that helps managing feedbacks in a Vue application. It is composed of 2 components, a **client component** that provides a modal and the logic to push a feedback, and a **dashboard component** to manage and monitor these feedbacks.
It relies on [Whispr](https://github.com/Sanofi-IADC/whispr) as a backend.
# Documentation
To check out docs, visit https://sanofi-iadc.github.io/glisten/.
# Installation
Install the component in your project.
```sh
npm install @sanofi-iadc/glisten
```
You need to install [Vuetify](https://github.com/vuetifyjs/vuetify) and [Vue-apollo](https://github.com/vuejs/vue-apollo) to use theses compoents
```sh
npm install vuetify vue-apollo
```
Then configure vue-apollo to connect your project to [Whispr](https://github.com/Sanofi-IADC/whispr)
```javascript
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import Glisten, { GlistenClient, GlistenDashboard, ApolloProvider } from '@sanofi-iadc/glisten';
Vue.component('GlistenClient', GlistenClient); // this is not mandatory if you need to use only one component
Vue.component('GlistenDashboard', GlistenDashboard);
Vue.use(Glisten);
Vue.use(VueApollo);
Vue.use(Vuetify);
new Vue({
vuetify,
apolloProvider: ApolloProvider(
process.env.VUE_APP_WHISPR_API_HTTP_URL,
process.env.VUE_APP_WHISPR_API_WS_URL, // this is not needed if you use only GlistenClient
authToken, // this is not needed if you use only GlistenClient
),
render: (h) => h(App),
}).$mount('#app');
```
You can then use these components anywhere in your project (See usage below)
## Installation in Nuxt project
**Right now SSR doesn't not work with Glisten !**
In a nuxt project you need to install Nuxt modules for Vuetify and Apollo, and setup it within nuxt config as such
```sh
npm install @nuxtjs/apollo
npm install @nuxtjs/vuetify
```
Add a plugin in _plugins/glisten.client.js_ :
```javascript
// glisten.client.js
import Vue from 'vue';
import Glisten, { GlistenClient, GlistenDashboard } from '@sanofi-iadc/glisten';
Vue.component('GlistenClient', GlistenClient);
Vue.component('GlistenDashboard', GlistenDashboard);
Vue.use(Glisten);
```
Then, in _nuxt.config.js_ add :
```javascript
ssr: false, // TODO: does not work in SSR yet
// ...
buildModules: [
// ...
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
],
modules: [
// ...
'@nuxtjs/apollo',
],
plugins: [{ src: '@/plugins/glisten.client.js', mode: 'client' }],
apollo: {
clientConfigs: {
whispr: {
httpEndpoint:
process.env.WHISPR_HTTP_BASE_URL, // e.g http://localhost:3000/graphql
wsEndpoint:
process.env.WHISPR_WS_BASE_URL, // e.g ws://localhost:3000/graphql
},
},
},
```
# Usage
### Client Component
You can either use the client to add a modal on a page like this
```html
```
**Props**
- _sheet_ (`boolean`) : modal is showed whenever true
- _application-id_ (`string`) : identify the feedback's application
- _user-name_ (`string`) : default username
- _text-field-label_=(`string`) : text displayed in the text field before the user enters something)
- _greetings_=(`string`) : greeting text displayed in the top of the component)
- _heart-color_=(`string`) : color of the heart symbols)
- _custom-tracker_ (`object`) : tracks context of the feedback (like current page URL)
```json
// for instance
{
"contextPortal": window.location.href,
"contextPage": "",
"categories": ['First category, 'Second category']
}
```
**Events**
- _close_ (`void`) : emitted whenever close button is pressed
### Dashboard component
Insert on page the following comonent
```html
```
**Props**
- _admin-access-rights_ (`boolean`) : Allows you to remove feedback from the actions column of the FeedbackList component
### Glisten Client Micro front-end
You can either use the micro front-end application deployed in dedicated place. The proposed solution to use Glisten Client as a micro front-end application is [Single SPA](https://single-spa.js.org) library. Communication via micro front-end application is implemented via event emitter instance.
To build a micro front-end instance, You need to run the command:
```sh
npm run build:glisten-client:microfrontend
```
To run instance locally, You need to run the command:
```sh
npm run serve:microfrontends
```
# Roadmap
- [ ] Split installation of glisten in two npm packages separating feedback and dashboard
- [ ] Make the dashboard components exported as separate widgets so dashboards are composable and more flexible