@netology-group/wc-user-list v0.8.0

<user-list>

user-list is an element for displaying a list of users with their avatars and online statuses that provides useful filtering, sorting and grouping options.

Installation

npm install --save netology-group/wc-user-list

Example

HTML:

<user-list
  id="list1"
  me="3"
  melead
  canblock
  withfilter
  sortby="online:desc,name:asc,blocked:desc"
  groupby="role"
></user-list>

You need to pass array of users for list:

var userList1 = document.getElementById('list1')

userList1.users = [
  {
    id: 1,
    name: 'Calhoun Beer',
    avatar: 'https://robohash.org/nihilveritatisfugit.png?size=64x64&set=set1',
    online: false,
    role: 'user',
    blocked: false
  },
  {
    id: 2,
    name: 'Oneida Ivimey',
    avatar: 'https://robohash.org/quisetofficia.png?size=64x64&set=set1',
    online: false,
    role: 'user',
    blocked: true
  },
  {
    id: 3,
    name: 'Sheila MacCombe',
    avatar: 'https://robohash.org/consequaturnihildolores.png?size=64x64&set=set1',
    online: false,
    role: 'user',
    blocked: true
  }
]

Using in project

To start using user-list you need to add next line in your project root.

import '@netology-group/wc-user-list/dist/user-list'

Also you need to add webcomponents-bundle polyfill and custom-elements-es5-adapter (see webcomponentsjs).

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>

Build

You may want to build your own custom user-list-like element. Here's how:

import {
  UserList,
  withStyles,
  withFilter,
  withSort,
  withGroup
} from '@netology-group/wc-user-list'

// custom styles
const css = `...`
// custom map of strings for grouping
const withGroupConfig = {
  mapping: {
    admin: 'Admins',
    moderator: 'Moderators',
    presenter: 'Presenters',
    user: 'Users'
  }
}

window.customElements.define('custom-user-list', withGroup(withSort(withFilter(withStyles(UserList, css))), withGroupConfig))

Demo

npm start

User object

Example:

{
  id: 1,
  name: 'Calhoun Beer',
  avatar: 'https://robohash.org/nihilveritatisfugit.png?size=64x64&set=set1',
  online: false,
  role: 'user',
  blocked: false
}

API

Attributes and properties:

sortby format:

• attribute not set - without sorting
• sortby="online,name,blocked" - sort by key online, then by key name and finally by key blocked (default order is desc)
• sortby="online,name:asc,blocked" - sort by key online, then by key name with order asc and finally by key blocked

Events: