feat: Creates new component for multiselect. (#2446)
This commit is contained in:
Sivin Varghese
GitHub
parent
d840b7b13d
commit
151bfbd1dd
7 changed files with 500 additions and 1 deletions
|
|
@ -34,3 +34,4 @@ exclude_patterns:
|
|||
- "stories/**/*"
|
||||
- "**/*.stories.js"
|
||||
- "**/stories/"
|
||||
- "app/javascript/**/*.stories.js"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@ $default-button-height: 4.0rem;
|
|||
height: $default-button-height;
|
||||
margin-bottom: 0;
|
||||
|
||||
.button__content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
padding: 0 var(--space-small);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
},
|
||||
"SEARCH": {
|
||||
"NO_RESULTS": "No agents found."
|
||||
"NO_RESULTS": "No results found."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
import { action } from '@storybook/addon-actions';
|
||||
import Dropdown from './MutiselectDropdown';
|
||||
|
||||
export default {
|
||||
title: 'Components/Dropdown/Multiselect Dropdown',
|
||||
component: Dropdown,
|
||||
argTypes: {
|
||||
options: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedItem: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
multiselectorTitle: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
multiselectorPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
noSearchResult: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
inputPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { Dropdown },
|
||||
template: '<dropdown v-bind="$props" @click="onClick"></dropdown>',
|
||||
});
|
||||
|
||||
export const MultiselectDropdown = Template.bind({});
|
||||
MultiselectDropdown.args = {
|
||||
onClick: action('Opened'),
|
||||
options: [
|
||||
{
|
||||
id: 1,
|
||||
availability_status: 'online',
|
||||
name: 'James Philip',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
],
|
||||
|
||||
selectedItem: {
|
||||
id: 1,
|
||||
availability_status: 'online',
|
||||
name: 'James Philip',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import { action } from '@storybook/addon-actions';
|
||||
import DropdownItems from './MultiselectDropdownItems';
|
||||
|
||||
export default {
|
||||
title: 'Components/Dropdown/Multiselect Dropdown Items',
|
||||
component: DropdownItems,
|
||||
argTypes: {
|
||||
options: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedItem: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
inputPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
noSearchResult: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { DropdownItems },
|
||||
template:
|
||||
'<dropdown-items v-bind="$props" @click="onClick"></dropdown-items>',
|
||||
});
|
||||
|
||||
export const MultiselectDropdownItems = Template.bind({});
|
||||
MultiselectDropdownItems.args = {
|
||||
onClick: action('Added'),
|
||||
options: [
|
||||
{
|
||||
id: '0',
|
||||
name: 'None',
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: 'James Philip',
|
||||
availability_status: 'online',
|
||||
role: 'administrator',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Support Team',
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Agent',
|
||||
thumbnail: '',
|
||||
},
|
||||
],
|
||||
|
||||
selectedItem: { id: '1' },
|
||||
};
|
||||
197
app/javascript/shared/components/ui/MultiselectDropdownItems.vue
Normal file
197
app/javascript/shared/components/ui/MultiselectDropdownItems.vue
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<div class="dropdown-wrap">
|
||||
<div class="search-wrap">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="inputPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-scroll-container">
|
||||
<div class="dropdown-list">
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item
|
||||
v-for="option in filteredOptions"
|
||||
:key="option.id"
|
||||
>
|
||||
<woot-button
|
||||
class="dropdown-item"
|
||||
variant="clear"
|
||||
:class="{
|
||||
active: option.id === (selectedItem && selectedItem.id),
|
||||
}"
|
||||
@click="() => onclick(option)"
|
||||
>
|
||||
<div class="user-wrap">
|
||||
<Thumbnail
|
||||
:src="option.thumbnail"
|
||||
size="24px"
|
||||
:username="option.name"
|
||||
:status="option.availability_status"
|
||||
/>
|
||||
<div class="name-wrap">
|
||||
<span
|
||||
class="name text-truncate text-block-title"
|
||||
:title="option.name"
|
||||
>
|
||||
{{ option.name }}
|
||||
</span>
|
||||
<i
|
||||
v-if="option.id === (selectedItem && selectedItem.id)"
|
||||
class="icon ion-checkmark-round"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
</woot-dropdown-menu>
|
||||
<h4 v-if="noResult" class="no-result text-truncate text-block-title">
|
||||
{{ noSearchResult }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
|
||||
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
export default {
|
||||
components: {
|
||||
WootDropdownItem,
|
||||
WootDropdownMenu,
|
||||
Thumbnail,
|
||||
},
|
||||
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
inputPlaceholder: {
|
||||
type: String,
|
||||
default: 'Search',
|
||||
},
|
||||
noSearchResult: {
|
||||
type: String,
|
||||
default: 'No results found',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredOptions() {
|
||||
return this.options.filter(option => {
|
||||
return option.name.toLowerCase().includes(this.search.toLowerCase());
|
||||
});
|
||||
},
|
||||
noResult() {
|
||||
return this.filteredOptions.length === 0 && this.search !== '';
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.focusInput();
|
||||
},
|
||||
methods: {
|
||||
onclick(option) {
|
||||
this.$emit('click', option);
|
||||
},
|
||||
|
||||
focusInput() {
|
||||
this.$refs.searchbar.focus();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 16rem;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
margin-bottom: var(--space-small);
|
||||
flex: 0 0 auto;
|
||||
max-height: var(--space-large);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
height: var(--space-large);
|
||||
font-size: var(--font-size-small);
|
||||
padding: var(--space-small);
|
||||
background-color: var(--color-background);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--w-500);
|
||||
}
|
||||
}
|
||||
|
||||
.list-scroll-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
width: 100%;
|
||||
max-height: 12rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
.user-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
line-height: var(--space-normal);
|
||||
margin: 0 var(--space-small);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: var(--space-smaller);
|
||||
}
|
||||
|
||||
.no-result {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: var(--space-small) var(--space-one);
|
||||
}
|
||||
</style>
|
||||
165
app/javascript/shared/components/ui/MutiselectDropdown.vue
Normal file
165
app/javascript/shared/components/ui/MutiselectDropdown.vue
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<div v-on-clickaway="onCloseDropdown" class="selector-wrap">
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
color-scheme="secondary"
|
||||
:v-model="selectedItem"
|
||||
class="selector-button"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<div class="selector-user-wrap">
|
||||
<Thumbnail
|
||||
v-if="hasValue"
|
||||
:src="selectedItem.thumbnail"
|
||||
size="24px"
|
||||
:status="selectedItem.availability_status"
|
||||
:badge="selectedItem.channel"
|
||||
:username="selectedItem.name"
|
||||
/>
|
||||
<div class="selector-name-wrap">
|
||||
<h4
|
||||
v-if="!hasValue"
|
||||
class="not-selected text-ellipsis text-block-title"
|
||||
>
|
||||
{{ multiselectorPlaceholder }}
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="selector-name text-truncate text-block-title"
|
||||
:title="selectedItem.name"
|
||||
>
|
||||
{{ selectedItem.name }}
|
||||
</h4>
|
||||
<i v-if="showSearchDropdown" class="icon ion-chevron-up" />
|
||||
<i v-else class="icon ion-chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
<div
|
||||
:class="{ 'dropdown-pane--open': showSearchDropdown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<h4 class="text-block-title text-truncate">
|
||||
{{ multiselectorTitle }}
|
||||
</h4>
|
||||
<multiselect-dropdown-items
|
||||
v-if="showSearchDropdown"
|
||||
:options="options"
|
||||
:selected-item="selectedItem"
|
||||
:input-placeholder="inputPlaceholder"
|
||||
:no-search-result="noSearchResult"
|
||||
@click="onClickSelectItem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems';
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
export default {
|
||||
components: {
|
||||
Thumbnail,
|
||||
MultiselectDropdownItems,
|
||||
},
|
||||
mixins: [clickaway],
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
multiselectorTitle: {
|
||||
type: String,
|
||||
default: 'Select',
|
||||
},
|
||||
multiselectorPlaceholder: {
|
||||
type: String,
|
||||
default: 'None',
|
||||
},
|
||||
noSearchResult: {
|
||||
type: String,
|
||||
default: 'No results found',
|
||||
},
|
||||
inputPlaceholder: {
|
||||
type: String,
|
||||
default: 'Search',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSearchDropdown: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasValue() {
|
||||
if (this.selectedItem && this.selectedItem.id) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.showSearchDropdown = !this.showSearchDropdown;
|
||||
},
|
||||
|
||||
onCloseDropdown() {
|
||||
this.showSearchDropdown = false;
|
||||
},
|
||||
|
||||
onClickSelectItem(value) {
|
||||
this.$emit('click', value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selector-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-right: var(--space-one);
|
||||
margin-bottom: var(--space-small);
|
||||
|
||||
.selector-button {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-border);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.selector-user-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.selector-name-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.not-selected {
|
||||
margin: 0 var(--space-small) 0 0;
|
||||
}
|
||||
|
||||
.selector-name {
|
||||
align-items: center;
|
||||
margin: 0 var(--space-small);
|
||||
}
|
||||
|
||||
.dropdown-pane {
|
||||
box-sizing: border-box;
|
||||
top: 4.2rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue