import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import StackLayout from '@/layouts/StackLayout.vue'

import BaseSearchInput from '@/elements/input/BaseSearchInput.vue'
import BaseButton from '@/elements/button/BaseButton.vue'
import BaseHeading from '@/elements/content/BaseHeading.vue'
import BaseIcon from '@/elements/icon/BaseIcon.vue'

<Meta title="Revas Platform Guide|Data Collections" />

# Data Collections

A list consists of related pieces of information grouped together, clearly associated to each other. Lists are easy to read and maintain, and they provide a good structural point of view for interface elements.

## Collection Types

There are two types of lists, **tables** for a quick overview of multiple data items and **card lists** for a quick overview of the content of single data items.

### Tables

Tables are used to render tabular data in a basic grid, making it easier for people to scan it. Tables work well when:

- Users need to review uniform and structured sets of data or options;
- Users need to select items and operate some actions on them.

> In the **Element** section there is a **BaseTable** component that helps implementation of these kind of collections.

### Card Lists

Cards lists are used to render data in a stream of elements, making it easier for people to quickly read the content of the single item without accessing to a details view. Card lists work well when:

- Users need to review items rich of useful content;
- Displaying a stream of contents that the user needs to quicly read in depth;
- Give access to meanigful content of multiple items quickly.

## Patterns

### Navbar

#### Title

`entity name` of `parent object name/title/label`. Don't use words like list, collection, set, ecc...

#### Actions

- Usually the primary action pushes the user to the creation of an entity of the collection.
- The secondary actions are directed to the entire collection
- The tertiary actions are used only for the selectable lists (like tables). The first element is always the deselect action (with selection count) and the other actions are directed to the selected items.

### Search

Filters are under the action navbar. The first filter, when available, is the search bar, followed by others filters.

### Search bar

### Status filters

Use the button group selector.