vca-widget-user v0.6.5

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.

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" />

There are no slots for this widget

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" />

There are no slots for this widget

Avatar

Shows the avatar (profile image) of a user.

You can use it that way:

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

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" />

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" />

There are no slots for this widget

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 } }" />

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

There are no slots for this widget

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