1.0.1 • Published 9 years ago

co-selectable-items v1.0.1

Weekly downloads
136
License
-
Repository
github
Last release
9 years ago

co-selectable-items

This component can be used when you have a large list of items from which you wish to select a subset to be part of another list.

Run the example code

  • npm install
  • npm run build
  • npm start serve the files
  • navigate to localhost:3000 in web browser

Run tests

  • npm test
  • npm run test-unit only unit tests
  • npm run test-e2e only e2e tests

Develop

  • npm watch starts the TypeScript compilation watcher
  • npm start serve the files

Concept of component

A typical situation would be selecting which user roles a specific user should have. Then there is a list of all roles available and a list for each user specifying which roles the user has.

The component is initialised with two lists: selectableItems, which is the list of all the items available plus a display name, and selectedItems, which is the selected subset of items.

When selecting and deselecting items, the selectedItems list is modified.

An example of user roles:

// The original items from the server could look like this:
var originalItems = [
  {
    role: 'admin'
  },
  {
    role: 'support'
  },
  {
    role: 'basic'
  }
]

// In order to use the list of items with this component you
// need to manually transform the list to have a displayName.
// The display name is the string shown to the user
// (especially useful when needing i18n). The actual item is
// stored under the refValue property.
var selectableItems = [
  {
    refValue: {
      role: 'admin'
    },
    displayName: 'Administrator'
  },
  {
    refValue: {
      role: 'support'
    },
    displayName: 'Customer Support'
  },
  {
    refValue: {
      role: 'basic'
    },
    displayName: 'Basic User'
  }
]

// The list of selected items, the roles that the user has.
var selectedItems = [
  {
    role: 'basic'
  },
  {
    role: 'support'
  }
]

Component HTML:

<co-selectable-items
  [selectableItems]="selectableItems"
  [selectedItems]="selectedItems"
  [listHeight]="'150px'"
  [selectableHeader]="'Selectable Items'"
  [selectedHeader]="'Selected Items'"
  (selectedChanged)="someFunction($event)">
</co-selectable-items>
1.0.1

9 years ago

0.5.8

9 years ago

0.5.7

9 years ago

0.5.6

9 years ago

0.5.5

9 years ago

0.5.4

9 years ago

0.5.3

9 years ago

0.5.2

9 years ago

0.5.1

9 years ago

0.5.0

9 years ago

0.4.2

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.10

9 years ago

0.3.9

9 years ago

0.3.8

9 years ago

0.3.7

9 years ago

0.3.6

9 years ago

0.3.5

9 years ago

0.3.4

10 years ago

0.3.3

10 years ago

0.3.2

10 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

1.0.0

10 years ago