forked from chatwoot/chatwoot
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Ability to add label for contact page (chatwoot#2350)
* feat: Ability to add label for contact page Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com> Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
- Loading branch information
4 people
committed
Jun 14, 2021
1 parent
fe2af37
commit d21c1c7
Showing
17 changed files
with
562 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
app/javascript/dashboard/components/widgets/LabelSelector.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { action } from '@storybook/addon-actions'; | ||
| import LabelSelector from './LabelSelector'; | ||
|
|
||
| export default { | ||
| title: 'Components/Label/Contact Label', | ||
| component: LabelSelector, | ||
| argTypes: { | ||
| contactId: { | ||
| control: { | ||
| type: 'text ,number', | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const Template = (args, { argTypes }) => ({ | ||
| props: Object.keys(argTypes), | ||
| components: { LabelSelector }, | ||
| template: | ||
| '<label-selector v-bind="$props" @add="onAdd" @remove="onRemove"></label-selector>', | ||
| }); | ||
|
|
||
| export const ContactLabel = Template.bind({}); | ||
| ContactLabel.args = { | ||
| onAdd: action('Added'), | ||
| onRemove: action('Removed'), | ||
| allLabels: [ | ||
| { | ||
| id: '1', | ||
| title: 'sales', | ||
| description: '', | ||
| color: '#0a5dd1', | ||
| }, | ||
| { | ||
| id: '2', | ||
| title: 'refund', | ||
| description: '', | ||
| color: '#8442f5', | ||
| }, | ||
| { | ||
| id: '3', | ||
| title: 'testing', | ||
| description: '', | ||
| color: '#f542f5', | ||
| }, | ||
| { | ||
| id: '4', | ||
| title: 'scheduled', | ||
| description: '', | ||
| color: '#42d1f5', | ||
| }, | ||
| ], | ||
| savedLabels: [ | ||
| { | ||
| id: '2', | ||
| title: 'refund', | ||
| description: '', | ||
| color: '#8442f5', | ||
| }, | ||
| { | ||
| id: '4', | ||
| title: 'scheduled', | ||
| description: '', | ||
| color: '#42d1f5', | ||
| }, | ||
| ], | ||
| }; |
116 changes: 116 additions & 0 deletions
116
app/javascript/dashboard/components/widgets/LabelSelector.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| <template> | ||
| <div> | ||
| <h6 class="text-block-title"> | ||
| <i class="title-icon ion-pricetags" /> | ||
| {{ $t('CONTACT_PANEL.LABELS.CONTACT.TITLE') }} | ||
| </h6> | ||
| <div v-on-clickaway="closeDropdownLabel" class="label-wrap"> | ||
| <add-label @add="toggleLabels" /> | ||
| <woot-label | ||
| v-for="label in savedLabels" | ||
| :key="label.id" | ||
| :title="label.title" | ||
| :description="label.description" | ||
| :show-close="true" | ||
| :bg-color="label.color" | ||
| @click="removeItem" | ||
| /> | ||
| <div class="dropdown-wrap"> | ||
| <div | ||
| :class="{ 'dropdown-pane--open': showSearchDropdownLabel }" | ||
| class="dropdown-pane" | ||
| > | ||
| <label-dropdown | ||
| v-if="showSearchDropdownLabel" | ||
| :account-labels="allLabels" | ||
| :selected-labels="selectedLabels" | ||
| @add="addItem" | ||
| @remove="removeItem" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import AddLabel from 'shared/components/ui/dropdown/AddLabel'; | ||
| import LabelDropdown from 'shared/components/ui/label/LabelDropdown'; | ||
| import { mixin as clickaway } from 'vue-clickaway'; | ||
| export default { | ||
| components: { | ||
| AddLabel, | ||
| LabelDropdown, | ||
| }, | ||
| mixins: [clickaway], | ||
| props: { | ||
| allLabels: { | ||
| type: Array, | ||
| default: () => [], | ||
| }, | ||
| savedLabels: { | ||
| type: Array, | ||
| default: () => [], | ||
| }, | ||
| }, | ||
| data() { | ||
| return { | ||
| showSearchDropdownLabel: false, | ||
| }; | ||
| }, | ||
| computed: { | ||
| selectedLabels() { | ||
| return this.savedLabels.map(label => label.title); | ||
| }, | ||
| }, | ||
| methods: { | ||
| addItem(label) { | ||
| this.$emit('add', label); | ||
| }, | ||
| removeItem(label) { | ||
| this.$emit('remove', label); | ||
| }, | ||
| toggleLabels() { | ||
| this.showSearchDropdownLabel = !this.showSearchDropdownLabel; | ||
| }, | ||
| closeDropdownLabel() { | ||
| this.showSearchDropdownLabel = false; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .title-icon { | ||
| margin-right: var(--space-smaller); | ||
| } | ||
| .label-wrap { | ||
| position: relative; | ||
| margin-left: var(--space-two); | ||
| line-height: var(--space-medium); | ||
| .dropdown-wrap { | ||
| display: flex; | ||
| position: absolute; | ||
| margin-right: var(--space-medium); | ||
| top: var(--space-medium); | ||
| width: 100%; | ||
| left: -1px; | ||
| .dropdown-pane { | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
89 changes: 89 additions & 0 deletions
89
app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| <template> | ||
| <label-selector | ||
| :all-labels="allLabels" | ||
| :saved-labels="savedLabels" | ||
| @add="addItem" | ||
| @remove="removeItem" | ||
| /> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { mapGetters } from 'vuex'; | ||
| import LabelSelector from 'dashboard/components/widgets/LabelSelector.vue'; | ||
| import alertMixin from 'shared/mixins/alertMixin'; | ||
| export default { | ||
| components: { LabelSelector }, | ||
| mixins: [alertMixin], | ||
| props: { | ||
| contactId: { | ||
| type: [String, Number], | ||
| required: true, | ||
| }, | ||
| }, | ||
| computed: { | ||
| savedLabels() { | ||
| const result = this.$store.getters['contactLabels/getContactLabels']( | ||
| this.contactId | ||
| ); | ||
| return result.map(value => { | ||
| return this.allLabels.find(label => label.title === value); | ||
| }); | ||
| }, | ||
| ...mapGetters({ | ||
| labelUiFlags: 'contactLabels/getUIFlags', | ||
| allLabels: 'labels/getLabels', | ||
| }), | ||
| }, | ||
| watch: { | ||
| contactId(newContactId, prevContactId) { | ||
| if (newContactId && newContactId !== prevContactId) { | ||
| this.fetchLabels(newContactId); | ||
| } | ||
| }, | ||
| }, | ||
| mounted() { | ||
| const { contactId } = this; | ||
| this.fetchLabels(contactId); | ||
| }, | ||
| methods: { | ||
| async onUpdateLabels(selectedLabels) { | ||
| try { | ||
| await this.$store.dispatch('contactLabels/update', { | ||
| contactId: this.contactId, | ||
| labels: selectedLabels, | ||
| }); | ||
| } catch (error) { | ||
| this.showAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR')); | ||
| } | ||
| }, | ||
| addItem(value) { | ||
| const result = this.savedLabels.map(item => item.title); | ||
| result.push(value.title); | ||
| this.onUpdateLabels(result); | ||
| }, | ||
| removeItem(value) { | ||
| const result = this.savedLabels | ||
| .map(label => label.title) | ||
| .filter(label => label !== value); | ||
| this.onUpdateLabels(result); | ||
| }, | ||
| async fetchLabels(contactId) { | ||
| if (!contactId) { | ||
| return; | ||
| } | ||
| this.$store.dispatch('contactLabels/get', contactId); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style></style> |
Oops, something went wrong.