feat: Update agent and team multi-select with new multi-select dropdown (#2516)

* feat: Update agent/team multiselect styles

* Component name fixes

* Adds key control for our multiselect dropdown and component name spell fix

* Minor fixes

* Review fixes

* Minor fixes

* Minor fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
Sivin Varghese 2021-07-29 17:44:37 +05:30 committed by GitHub
parent 672e5874fb
commit f2b5e328bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 117 additions and 41 deletions

View file

@ -91,6 +91,23 @@
},
"SEARCH": {
"NO_RESULTS": "No results found."
},
"MULTI_SELECTOR": {
"PLACEHOLDER": "None",
"TITLE": {
"AGENT": "Select agent",
"TEAM": "Select team"
},
"SEARCH": {
"NO_RESULTS": {
"AGENT": "No agents found",
"TEAM": "No teams found"
},
"PLACEHOLDER": {
"AGENT": "Search agents",
"TEAM": "Search teams"
}
}
}
}
}

View file

@ -24,27 +24,21 @@
</woot-button>
</template>
</contact-details-item>
<multiselect
v-model="assignedAgent"
<multiselect-dropdown
:options="agentsList"
label="name"
track-by="id"
deselect-label=""
select-label=""
selected-label=""
:placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
:allow-empty="true"
>
<template slot="option" slot-scope="props">
<div class="option__desc">
<availability-status-badge
:status="props.option.availability_status"
:selected-item="assignedAgent"
:multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
:multiselector-placeholder="
$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
"
:no-search-result="
$t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
"
:input-placeholder="
$t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
"
@click="onClickAssignAgent"
/>
<span class="option__title">{{ props.option.name }}</span>
</div>
</template>
<span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
</multiselect>
</div>
<div class="multiselect-wrap--small">
<contact-details-item
@ -52,19 +46,21 @@
icon="ion-ios-people"
emoji="🎢"
/>
<multiselect
v-model="assignedTeam"
<multiselect-dropdown
:options="teamsList"
label="name"
track-by="id"
deselect-label=""
select-label=""
selected-label=""
:placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
:allow-empty="true"
>
<span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
</multiselect>
:selected-item="assignedTeam"
:multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
:multiselector-placeholder="
$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
"
:no-search-result="
$t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
"
:input-placeholder="
$t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.TEAM')
"
@click="onClickAssignTeam"
/>
</div>
</div>
<conversation-labels :conversation-id="conversationId" />
@ -138,7 +134,7 @@ import ContactDetailsItem from './ContactDetailsItem.vue';
import ContactInfo from './contact/ContactInfo';
import ConversationLabels from './labels/LabelBox.vue';
import ContactCustomAttributes from './ContactCustomAttributes';
import AvailabilityStatusBadge from 'dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue';
import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
import flag from 'country-code-emoji';
@ -149,7 +145,7 @@ export default {
ContactDetailsItem,
ContactInfo,
ConversationLabels,
AvailabilityStatusBadge,
MultiselectDropdown,
},
mixins: [alertMixin, agentMixin],
props: {
@ -330,6 +326,21 @@ export default {
};
this.assignedAgent = selfAssign;
},
onClickAssignAgent(selectedItem) {
if (this.assignedAgent && this.assignedAgent.id === selectedItem.id) {
this.assignedAgent = null;
} else {
this.assignedAgent = selectedItem;
}
},
onClickAssignTeam(selectedItemTeam) {
if (this.assignedTeam && this.assignedTeam.id === selectedItemTeam.id) {
this.assignedTeam = null;
} else {
this.assignedTeam = selectedItemTeam;
}
},
},
};
</script>

View file

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import Dropdown from './MutiselectDropdown';
import Dropdown from './MultiselectDropdown';
export default {
title: 'Components/Dropdown/Multiselect Dropdown',

View file

@ -1,5 +1,9 @@
<template>
<div v-on-clickaway="onCloseDropdown" class="selector-wrap">
<div
v-on-clickaway="onCloseDropdown"
class="selector-wrap"
@keyup.esc="onCloseDropdown"
>
<woot-button
variant="hollow"
color-scheme="secondary"

View file

@ -11,14 +11,19 @@
/>
</div>
<div class="list-scroll-container">
<div class="dropdown-list">
<div
ref="multiselectDropdown"
class="multiselect-dropdown--list"
@keyup.up="onArrowUp"
@keyup.down="onArrowDown"
>
<woot-dropdown-menu>
<woot-dropdown-item
v-for="option in filteredOptions"
:key="option.id"
>
<woot-button
class="dropdown-item"
class="multiselect-dropdown--item"
variant="clear"
:class="{
active: option.id === (selectedItem && selectedItem.id),
@ -102,17 +107,50 @@ export default {
return this.filteredOptions.length === 0 && this.search !== '';
},
},
mounted() {
this.focusInput();
},
methods: {
onclick(option) {
this.$emit('click', option);
},
focusInput() {
this.$refs.searchbar.focus();
},
onArrowUp() {
const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
'.dropdown .multiselect-dropdown--item'
);
const focusedElement = this.$refs.multiselectDropdown.querySelector(
'.dropdown .multiselect-dropdown--item:focus'
);
const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
const lastElementIndex = allDropdownItems.length - 1;
if (activeElementIndex >= 1) {
allDropdownItems[activeElementIndex - 1].focus();
} else {
allDropdownItems[lastElementIndex].focus();
}
},
onArrowDown() {
const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
'.dropdown .multiselect-dropdown--item'
);
const focusedElement = this.$refs.multiselectDropdown.querySelector(
'.dropdown .multiselect-dropdown--item:focus'
);
const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
const lastElementIndex = allDropdownItems.length - 1;
if (activeElementIndex === lastElementIndex) {
allDropdownItems[0].focus();
} else {
allDropdownItems[activeElementIndex + 1].focus();
}
},
},
};
</script>
@ -153,18 +191,24 @@ export default {
overflow: auto;
}
.dropdown-list {
.multiselect-dropdown--list {
width: 100%;
max-height: 12rem;
}
.dropdown-item {
.multiselect-dropdown--item {
justify-content: space-between;
width: 100%;
&.active {
background-color: var(--w-50);
color: var(--w-900);
font-weight: var(--font-weight-bold);
}
&:focus {
background-color: var(--color-background);
}
}
.user-wrap {