feat: Creates label dropdown component (#2220)
* Feat: Creates label dropdown component * fixes conflicts in i18n Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
This commit is contained in:
Sivin Varghese
GitHub
parent
5c80d0ac42
commit
2839454bc0
7 changed files with 360 additions and 13 deletions
|
|
@ -6,6 +6,8 @@ import Button from './ui/WootButton';
|
|||
import Code from './Code';
|
||||
import ColorPicker from './widgets/ColorPicker';
|
||||
import DeleteModal from './widgets/modal/DeleteModal.vue';
|
||||
import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
|
||||
import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
|
||||
import Input from './widgets/forms/Input.vue';
|
||||
import Label from './ui/Label';
|
||||
import LoadingState from './widgets/LoadingState';
|
||||
|
|
@ -26,6 +28,8 @@ const WootUIKit = {
|
|||
Code,
|
||||
ColorPicker,
|
||||
DeleteModal,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
Input,
|
||||
LoadingState,
|
||||
Label,
|
||||
|
|
|
|||
|
|
@ -28,11 +28,17 @@
|
|||
"INACTIVE_LABELS": "Labels available in the account",
|
||||
"REMOVE": "Click on X icon to remove the label",
|
||||
"ADD": "Click on + icon to add the label",
|
||||
"ADD_BUTTON": "Add Labels",
|
||||
"UPDATE_BUTTON": "Update labels",
|
||||
"UPDATE_ERROR": "Couldn't update labels, try again."
|
||||
},
|
||||
"NO_LABELS_TO_ADD": "There are no more labels defined in the account.",
|
||||
"NO_AVAILABLE_LABELS": "There are no labels added to this conversation."
|
||||
"NO_AVAILABLE_LABELS": "There are no labels added to this conversation.",
|
||||
"LABEL_SELECT": {
|
||||
"TITLE": "Add Labels",
|
||||
"PLACEHOLDER": "Search labels",
|
||||
"NO_RESULT": "No labels found"
|
||||
}
|
||||
},
|
||||
"MUTE_CONTACT": "Mute Conversation",
|
||||
"UNMUTE_CONTACT": "Unmute Conversation",
|
||||
|
|
|
|||
|
|
@ -27,19 +27,21 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-menu__item ::v-deep {
|
||||
a,
|
||||
.button {
|
||||
font-weight: var(--font-size-normal);
|
||||
font-size: var(--font-size-small);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
padding: var(--space-small) var(--space-one);
|
||||
.dropdown-menu__item {
|
||||
list-style: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background);
|
||||
border-radius: var(--border-radius-normal);
|
||||
::v-deep {
|
||||
a,
|
||||
.button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
padding: var(--space-small) var(--space-one);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background);
|
||||
border-radius: var(--border-radius-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import { action } from '@storybook/addon-actions';
|
||||
import LabelDropdown from './LabelDropdown';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Dropdown',
|
||||
component: LabelDropdown,
|
||||
argTypes: {
|
||||
conversationId: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
accountLabels: {
|
||||
defaultValue: [
|
||||
{
|
||||
color: '#555',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'sales',
|
||||
},
|
||||
{
|
||||
color: '#c242f5',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'business',
|
||||
},
|
||||
{
|
||||
color: '#4287f5',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'testing',
|
||||
},
|
||||
],
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedLabels: {
|
||||
defaultValue: 'sales, testing',
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LabelDropdown },
|
||||
template:
|
||||
'<label-dropdown v-bind="$props" @add="onAdd" @remove="onRemove"></label-dropdown>',
|
||||
});
|
||||
|
||||
export const Dropdown = Template.bind({});
|
||||
Dropdown.args = {
|
||||
onAdd: action('added'),
|
||||
onRemove: action('removed'),
|
||||
};
|
||||
156
app/javascript/shared/components/ui/label/LabelDropdown.vue
Normal file
156
app/javascript/shared/components/ui/label/LabelDropdown.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div class="dropdown-search-wrap">
|
||||
<h4 class="text-block-title">
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
|
||||
</h4>
|
||||
<div class="search-wrap">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-wrap">
|
||||
<div class="list">
|
||||
<woot-dropdown-menu>
|
||||
<label-dropdown-item
|
||||
v-for="label in filteredActiveLabels"
|
||||
:key="label.title"
|
||||
:title="label.title"
|
||||
:color="label.color"
|
||||
:selected="selectedLabels.includes(label.title)"
|
||||
@click="onAddRemove(label)"
|
||||
/>
|
||||
</woot-dropdown-menu>
|
||||
<div v-if="noResult" class="no-result">
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelDropdownItem from './LabelDropdownItem';
|
||||
export default {
|
||||
components: {
|
||||
LabelDropdownItem,
|
||||
},
|
||||
|
||||
props: {
|
||||
conversationId: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
accountLabels: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedLabels: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredActiveLabels() {
|
||||
return this.accountLabels.filter(label => {
|
||||
return label.title.toLowerCase().includes(this.search.toLowerCase());
|
||||
});
|
||||
},
|
||||
|
||||
noResult() {
|
||||
return this.filteredActiveLabels.length === 0 && this.search !== '';
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.focusInput();
|
||||
},
|
||||
|
||||
methods: {
|
||||
focusInput() {
|
||||
this.$refs.searchbar.focus();
|
||||
},
|
||||
|
||||
updateLabels(label) {
|
||||
this.$emit('update', label);
|
||||
},
|
||||
|
||||
onAdd(label) {
|
||||
this.$emit('add', label);
|
||||
},
|
||||
|
||||
onRemove(label) {
|
||||
this.$emit('remove', label);
|
||||
},
|
||||
|
||||
onAddRemove(label) {
|
||||
if (this.selectedLabels.includes(label.title)) {
|
||||
this.onRemove(label.title);
|
||||
} else {
|
||||
this.onAdd(label);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-search-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 20rem;
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid var(--w-500);
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-result {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--s-700);
|
||||
padding: var(--space-smaller) var(--space-one);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { action } from '@storybook/addon-actions';
|
||||
import LabelDropdownItem from './LabelDropdownItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Item',
|
||||
component: LabelDropdownItem,
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'sales',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
color: {
|
||||
defaultValue: '#555',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
selected: {
|
||||
defaultValue: true,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LabelDropdownItem },
|
||||
template:
|
||||
'<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
|
||||
});
|
||||
|
||||
export const item = Template.bind({});
|
||||
item.args = {
|
||||
onClick: action('Selected'),
|
||||
};
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<woot-dropdown-item>
|
||||
<div class="item-wrap">
|
||||
<woot-button variant="clear" @click="onClick">
|
||||
<div class="button-wrap">
|
||||
<div class="name-label-wrap">
|
||||
<div
|
||||
v-if="color"
|
||||
class="label-color--display"
|
||||
:style="{ backgroundColor: color }"
|
||||
/>
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<i v-if="selected" class="icon ion-checkmark-round" />
|
||||
</div>
|
||||
</woot-button>
|
||||
</div>
|
||||
</woot-dropdown-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click', this.title);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-wrap {
|
||||
display: flex;
|
||||
|
||||
.button-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--w-700);
|
||||
}
|
||||
|
||||
.name-label-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.label-color--display {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
|
||||
.label-color--display {
|
||||
border-radius: var(--border-radius-normal);
|
||||
height: var(--space-slab);
|
||||
margin-right: var(--space-smaller);
|
||||
margin-top: var(--space-micro);
|
||||
min-width: var(--space-slab);
|
||||
width: var(--space-slab);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue