diff --git a/.gitignore b/.gitignore index 82f4a4df5..028a97f09 100644 --- a/.gitignore +++ b/.gitignore @@ -74,3 +74,5 @@ yalc.lock /yarn-error.log yarn-debug.log* .yarn-integrity + +/storybook-static \ No newline at end of file diff --git a/app/javascript/dashboard/components/base/Hotkey.vue b/app/javascript/dashboard/components/base/Hotkey.vue new file mode 100644 index 000000000..d453fc026 --- /dev/null +++ b/app/javascript/dashboard/components/base/Hotkey.vue @@ -0,0 +1,25 @@ + + + diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue index a7ab63609..56b86eaf6 100644 --- a/app/javascript/dashboard/components/widgets/LabelSelector.vue +++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue @@ -20,6 +20,7 @@ v-if="showSearchDropdownLabel" :account-labels="allLabels" :selected-labels="selectedLabels" + :allow-creation="isAdmin" @add="addItem" @remove="removeItem" /> @@ -30,8 +31,15 @@ diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index feb6f0595..b96b76fb0 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -33,7 +33,8 @@ "LABEL_SELECT": { "TITLE": "Add Labels", "PLACEHOLDER": "Search labels", - "NO_RESULT": "No labels found" + "NO_RESULT": "No labels found", + "CREATE_LABEL": "Create new label" } }, "MERGE_CONTACT": "Merge contact", diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue index 8247ad159..d35c2e9da 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue @@ -30,6 +30,7 @@ v-if="showSearchDropdownLabel" :account-labels="accountLabels" :selected-labels="savedLabels" + :allow-creation="isAdmin" @add="addLabelToConversation" @remove="removeLabelFromConversation" /> @@ -47,7 +48,14 @@ import Spinner from 'shared/components/Spinner'; import LabelDropdown from 'shared/components/ui/label/LabelDropdown'; import AddLabel from 'shared/components/ui/dropdown/AddLabel'; import { mixin as clickaway } from 'vue-clickaway'; +import adminMixin from 'dashboard/mixins/isAdmin'; +import eventListenerMixins from 'shared/mixins/eventListenerMixins'; import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin'; +import { + buildHotKeys, + isEscape, + isActiveElementTypeable, +} from 'shared/helpers/KeyboardHelpers'; export default { components: { @@ -56,7 +64,7 @@ export default { AddLabel, }, - mixins: [clickaway, conversationLabelMixin], + mixins: [clickaway, conversationLabelMixin, adminMixin, eventListenerMixins], props: { conversationId: { type: Number, @@ -84,6 +92,17 @@ export default { closeDropdownLabel() { this.showSearchDropdownLabel = false; }, + handleKeyEvents(e) { + const keyPattern = buildHotKeys(e); + + if (keyPattern === 'l' && !isActiveElementTypeable(e)) { + this.toggleLabels(); + e.preventDefault(); + } else if (isEscape(e) && this.showSearchDropdownLabel) { + this.closeDropdownLabel(); + e.preventDefault(); + } + }, }, }; diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue index 538b53c06..63b744f3c 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue @@ -65,6 +65,12 @@ import { getRandomColor } from 'dashboard/helper/labelColor'; export default { mixins: [alertMixin, validationMixin], + props: { + prefillTitle: { + type: String, + default: '', + }, + }, data() { return { color: '#000', @@ -81,6 +87,7 @@ export default { }, mounted() { this.color = getRandomColor(); + this.title = this.prefillTitle.toLowerCase(); }, methods: { onClose() { diff --git a/app/javascript/dashboard/store/modules/labels.js b/app/javascript/dashboard/store/modules/labels.js index e281caedb..34f63f2a1 100644 --- a/app/javascript/dashboard/store/modules/labels.js +++ b/app/javascript/dashboard/store/modules/labels.js @@ -45,7 +45,10 @@ export const actions = { commit(types.SET_LABEL_UI_FLAG, { isFetching: true }); try { const response = await LabelsAPI.get(true); - commit(types.SET_LABELS, response.data.payload); + const sortedLabels = response.data.payload.sort((a, b) => + a.title.localeCompare(b.title) + ); + commit(types.SET_LABELS, sortedLabels); } catch (error) { // Ignore error } finally { diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue index 58bcda4c6..e15c93714 100644 --- a/app/javascript/shared/components/ui/label/LabelDropdown.vue +++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue @@ -1,8 +1,11 @@