Create generic list controls component

[landeaux]

Description

A generic list controls component needs to be created which can be re-used for any list in the app (pitch deck list, user list, etc). The component will act as a header above the list and contain three input fields: a text input for search, and two select (drop down) inputs for sort and filter. When a user makes a selection from either sort or filter input, or enters input in the search, the component will emit the appropriate event with the value to the parent component. Any parent component using this component would listen for these events and perform the necessary action on the list below it

Specs

BaseListControls

• The component shall span 100% of the width of its container
• The component shall include a text input for search
• The component shall include a select input for sort
• The component shall include a select input for filter
• The component shall emit a search-input event with the value of the search input field as a user enters text
• The component shall emit a sort-select event with the value of the sort option selected
• The component shall emit a filter-select event with the value of the filter option selected
• The component shall take as input an array of sort options via a sortOptions prop
• The component shall take as input an array of filter options via a filterOptions prop

Props

sortOptions

• defaults to an empty array
• required
• validates array has at least 1 item

filterOptions

• defaults to an empty array
• required
• validates array has at least 1 item

Tasks

• 1. Implement the BaseListControls component according to the above spec

[landeaux]

Closing this issue for now as sorting and filtering can be done through the b-table bootstrap-vue component (https://bootstrap-vue.js.org/docs/components/table)