WidgetUser

Implements different visualizations for a user.

Preconditions

Using this package requires a running version of Drops, that has already implemented issue #225. Additionally, the web server you are using to run the front end application using this widget, has to use the same domain and the same port as Drops. Drops has to be deployed using the path prefix /drops/.

Widgets

This package implements several UI elements to handle user-specific interaction with the business objects User and Crew of the Pool² (e.g. input fields to search for a user or HTML and CSS code to present a user in a standard way). Using the widgets implemented here, you can ensure that users of your microservice will have the same user experience regarding other users as using the other microservices of Pool².

Plain crew name

Since microservices should be loosely coupled, ideally they only save references to data objects managed by other microservices. Therefore, you need widgets to print a data object, if you only have a reference.

This widget prints a crew name by a given crews UUID.

You can use it that way:

<CrewPlainName id="606693fe-c057-4f05-8b29-2cc4975dda82" />

Since it has been implemented as a simple <span> tag without any styling, you can define the font and background color as you want.

Parameter	Type	Optional	Default	Description
id	String	required	No default value	The crews UUID. It will be used for an ajax request to obtain the crew object.

There are no slots for this widget

There are no events of this widget

Crew select

It allows the user to select a crew. The widget fires an event after selection that returns the UUID of the selected crew.

You can use it that way (crewUuid and handler are example names for variable and function):

<CrewSelect value="crewUuid" :disabled="false" v-on:input="handler" />

Parameter	Type	Optional	Default	Description
value	String	optional	""	The UUID of the crew selected by default (e.g. a previously selected value).
disabled	Boolean	optional	false	Indicates if the select box is disabled.

There are no slots for this widget

Event	Data
input	The UUID of the selected crew.

Tag

Using this widget, you can show user or crew names as small (removable) tags. On click, the user will be redirected to the profile page of the user that is represented by the tag.

You can use it that way:

<Tag uuid="606693fe-c057-4f05-8b29-2cc4975dda82" :removable="false" :crew="false" />

Parameter	Type	Optional	Default	Description
uuid	String	optional	No default value	The UUID of the user whose name has to be printed.
user	Object	optional	No default value	The whole user object, thus an additional ajax request (in contrast to the parameter uuid) is not required.
removable	Boolean	optional	false	Indicates if the "X" button has to be visible.
crew	Boolean	optional	false	If set to true the name of the users crew instead of the individuals name is been used.

There are no slots for this widget

Event	Data
vca-user-remove	The object representing the removed user.
vca-user-focus	The object representing the focused user.
vca-user-blur	The object representing the blurred user.

Avatar

Shows the avatar (profile image) of a user.

You can use it that way:

<Avatar :user="user" type="type" />

Parameter	Type	Optional	Default	Description
user	Object	optional	No default value	The whole user object.
type	String	required	-	The type can be 'medium' (4em x 4em), 'large' (10em x 10em) or 'profile' (20em x 20em).

There are no slots for this widget

There are no events of this widget

VcA Role

Shows the role of a user as a tag.

You can use it that way:

<VcARole name="VolunteerManager" pillar="network" />

Parameter	Type	Optional	Default	Description
name	String	optional	No default value	The name of the role that will be shown. Possible values: admin, employee, supporter, VolunteerManager
pillar	String	optional	No default value	If the role to be shown is a volunteer manager, the area of responsibility can be described here. Possible values: network, operation, finance, education
translated	String	optional	No default value	If you already have a translated string, you can force the VcARole to use it by passing it through this attribute.

There are no slots for this widget

There are no events of this widget

User Widget

Visualizes a user in various forms.

You can use it that way:

<UserWidget uuid="13e42965-cd78-459a-97e0-35a91c01ab4d" type="large" />

Parameter	Type	Optional	Default	Description
uuid	UUID	optional	No default value	If given, the printed user will be requested from Drops when the widget is created by an ajax request.
user	Object	optional	No default value	If given, the object will be interpreted as complete user that will be printed. No additional ajax requests are required.
type	String	required	-	Indicates the form of presentation. There are three different forms (and thus are the values of the attribute): small, medium and large
removable	Boolean	optional	false	If the type is set to small and removable is true, a small button labeled with "X" will be shown at the right border of the widget. A click triggers a vca-user-remove event.

There are no slots for this widget

Event	Data
vca-user-remove	The object representing the removed user.
vca-user-focus	The object representing the focused user.
vca-user-blur	The object representing the blurred user.

User Widget List

Shows a set of users and implements functions to search through, sort and paginate the set. There are four different forms of visualizing the set: as large user widget, as medium user widget, as small user widget and as table columns.

You can use it that way:

<WidgetUserList :options="{ lang: 'de-DE', type: { menue: true, value: 'table' }, sorting: { menue: { field: 'Supporter_firstName', dir: 'ASC' } }, pagination: { activated: true, size: 40, sliding: 20 } }" />

Parameter	Type	Optional	Default	Description
options	Object	optional	See example	Configures the widget. Consider: type: menue indicates if sort and search function have to be visible, type: value configures the visualization of users (allowed values: table, big widgets (large user widget), small widgets (medium user widget), tags (small user widget)), sorting: menue: field allows all attributes of a user, pagination: size defines the number of users shown on a page and pagination: sliding defines the number of users that are removed at the beginning of a page and appended at the end of page on a page switch.

There are no slots for this widget

There are no events of this widget

User Widget Autocomplete

Allows to select a list of users by an autocomplete field.

You can use it that way:

<WidgetUserAutocomplete placeholder="Enter user name..." />

Parameter	Type	Optional	Default	Description
placeholder	String	optional	No default value	The placeholder for the input field.
preselection	Array of user objects	optional	[]	Used to pass all already selected users. They will be shown as removable tags.

There are no slots for this widget

Event	Data
vca-user-selection	An Array of selected user objects.

Installation

npm install --save vca-widget-user

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import WidgetUserList from 'vca-widget-user'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vca-widget-user/dist/vca-widget-user.css'

Vue.use(WidgetUserList)

export default {
  name: 'App',
  components: { WidgetUserList },
  data () {
    return { options: {
      'type': { 'menue': true, 'value': 'table' },
      'sorting': { 'menue': { 'field': 'Supporter_firstName', 'dir': 'ASC' } },
      'lang': 'de'
    } }
  }
}

Inside your template:

<template>
  <div id="app">
    <WidgetUserList :options="options" />
  </div>
</template>

Existing internationalization

If you already use vue-i18n to handle your internationalization and localization, we have to merge our messages into yours. You can do this in your main.js before you instantiate your Vue App.

import Vue from 'vue';
...
import VueI18n from 'vue-i18n';
import WidgetUserList from 'vca-widget-user' // use `WidgetUser` if you don't need a list of users

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: locale,
    messages: {
        'en-US': require('@/lang/en_US'),
        'de-DE': require('@/lang/de_VCA'),
        'ja-JA': require('../node_modules/element-ui/lib/locale/lang/ja')
    }
});

// the most important line of code here
Vue.use(WidgetUserList, { 'i18n': i18n })

/* eslint-disable no-new */

new Vue({
  ...
  i18n,
  components: { WidgetUserList },
  ...
}).$mount('#app');

Afterwards, you don't have to use Vue.use(WidgetUserList) in your components again.

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="widget-user/dist/widget-user.css"></link>
<script src="vca-widget-user/dist/widget-user.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vca-widget-user/dist/widget-user.css"></link>
<script src="https://unpkg.com/vca-widget-user"></script>

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT