KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Change availability status from sidebar (#1288)

Browse source 
Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>
This commit is contained in:
Dmitriy Shcherbakan 2020-10-02 08:46:12 +03:00 • committed by GitHub
parent f61b731fb3
commit 127ffda762
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 299 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/dashboard/api/auth.js
View file

@ -138,4 +138,10 @@ export default {
}
return axios.put(endPoints('profileUpdate').url, formData);
},
updateAvailability({ availability }) {
return axios.put(endPoints('profileUpdate').url, {
profile: { availability },
});
},
};

169
app/javascript/dashboard/components/layout/AvailabilityStatus.vue Normal file
View file

@ -0,0 +1,169 @@
<template>
<div class="status">
<div class="status-view">
<div
:class="
`status-view--badge status-view--badge__${currentUserAvailabilityStatus}`
"
/>
<div class="status-view--title">
{{ currentUserAvailabilityStatus }}
</div>
</div>
<div class="status-change">
<transition name="menu-slide">
<div
v-if="isStatusMenuOpened"
v-on-clickaway="closeStatusMenu"
class="dropdown-pane top"
>
<ul class="vertical dropdown menu">
<li v-for="status in availabilityStatuses" :key="status.value">
<button
class="button clear status-change--dropdown-button"
:disabled="status.disabled"
@click="changeAvailabilityStatus(status.value)"
>
{{ status.label }}
</button>
</li>
</ul>
</div>
</transition>
<button class="status-change--change-button" @click="openStatusMenu">
{{ $t('SIDEBAR_ITEMS.CHANGE_AVAILABILITY_STATUS') }}
</button>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { mixin as clickaway } from 'vue-clickaway';
export default {
mixins: [clickaway],
data() {
return {
isStatusMenuOpened: false,
isUpdating: false,
};
},
computed: {
...mapGetters({
currentUser: 'getCurrentUser',
}),
currentUserAvailabilityStatus() {
return this.currentUser.availability_status;
},
availabilityStatuses() {
return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
status => ({
...status,
disabled: this.currentUserAvailabilityStatus === status.value,
})
);
},
},
methods: {
openStatusMenu() {
this.isStatusMenuOpened = true;
},
closeStatusMenu() {
this.isStatusMenuOpened = false;
},
changeAvailabilityStatus(availability) {
if (this.isUpdating) {
return;
}
this.isUpdating = true;
this.$store
.dispatch('updateAvailability', {
availability,
})
.finally(() => {
this.isUpdating = false;
});
},
},
};
</script>
<style lang="scss">
@import '~dashboard/assets/scss/variables';
.status {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: $space-micro $space-smaller;
}
.status-view {
display: flex;
align-items: baseline;
& &--badge {
width: $space-one;
height: $space-one;
border-radius: 50%;
&__online {
background: $success-color;
}
&__offline {
background: $color-gray;
}
&__busy {
background: $warning-color;
}
}
& &--title {
color: $color-gray;
font-size: $font-size-small;
font-weight: $font-weight-medium;
margin-left: $space-small;
&:first-letter {
text-transform: capitalize;
}
}
}
.status-change {
.dropdown-pane {
top: -130px;
}
& &--change-button {
color: $color-gray;
font-size: $font-size-small;
border-bottom: 1px solid $color-gray;
cursor: pointer;
&:hover {
border-bottom: none;
}
}
& &--dropdown-button {
font-weight: $font-weight-normal;
font-size: $font-size-small;
padding: $space-small $space-one;
text-align: left;
width: 100%;
}
}
</style>

8
app/javascript/dashboard/components/layout/Sidebar.vue
View file

@ -26,6 +26,10 @@
</transition-group>
</div>
<div class="bottom-nav">
<availability-status />
</div>
<div class="bottom-nav">
<transition name="menu-slide">
<div
@ -55,11 +59,11 @@
</ul>
</div>
</transition>
<div class="current-user" @click.prevent="showOptions()">
<thumbnail
:src="currentUser.avatar_url"
:username="currentUserAvailableName"
:status="currentUser.availability_status"
/>
<div class="current-user--data">
<h3 class="current-user--name">
@ -157,6 +161,7 @@ import { mixin as clickaway } from 'vue-clickaway';
import adminMixin from '../../mixins/isAdmin';
import Auth from '../../api/auth';
import SidebarItem from './SidebarItem';
import AvailabilityStatus from './AvailabilityStatus';
import { frontendURL } from '../../helper/URLHelper';
import Thumbnail from '../widgets/Thumbnail';
import { getSidebarItems } from '../../i18n/default-sidebar';
@ -167,6 +172,7 @@ export default {
components: {
SidebarItem,
Thumbnail,
AvailabilityStatus,
},
mixins: [clickaway, adminMixin, alertMixin],
props: {

77
app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js Normal file
View file

@ -0,0 +1,77 @@
import AvailabilityStatus from '../AvailabilityStatus';
import { createLocalVue, mount } from '@vue/test-utils';
import Vuex from 'vuex';
import VueI18n from 'vue-i18n';
import i18n from 'dashboard/i18n';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(VueI18n);
localVue.locale('en', i18n.en);
describe('AvailabilityStatus', () => {
const currentUser = { availability_status: 'online' };
let store = null;
let actions = null;
let modules = null;
let availabilityStatus = null;
beforeEach(() => {
actions = {
updateAvailability: jest.fn(() => {
return Promise.resolve();
}),
};
modules = {
auth: {
getters: {
getCurrentUser: () => currentUser,
},
},
};
store = new Vuex.Store({
actions,
modules,
});
availabilityStatus = mount(AvailabilityStatus, {
store,
localVue,
});
});
it('shows current user status', () => {
const statusViewTitle = availabilityStatus.find('.status-view--title');
expect(statusViewTitle.text()).toBe(currentUser.availability_status);
});
it('opens the menu when user clicks "change"', async () => {
expect(availabilityStatus.find('.dropdown-pane').exists()).toBe(false);
await availabilityStatus
.find('.status-change--change-button')
.trigger('click');
expect(availabilityStatus.find('.dropdown-pane').exists()).toBe(true);
});
it('dispatches an action when user changes status', async () => {
await availabilityStatus
.find('.status-change--change-button')
.trigger('click');
await availabilityStatus
.find('.status-change li:last-child button')
.trigger('click');
expect(actions.updateAvailability).toBeCalledWith(
expect.any(Object),
{ availability: 'offline' },
undefined
);
});
});

1
app/javascript/dashboard/i18n/locale/ar/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "يتغيرون",
"CHANGE_ACCOUNTS": "تبديل الحساب",
"SELECTOR_SUBTITLE": "اختر حساباً من القائمة التالية",
"PROFILE_SETTINGS": "إعدادات الملف الشخصي",

1
app/javascript/dashboard/i18n/locale/ca/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Canviar",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Configuració del Perfil",

1
app/javascript/dashboard/i18n/locale/cs/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Změnit",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Nastavení profilu",

1
app/javascript/dashboard/i18n/locale/da/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/de/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Wechseln",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profileinstellungen",

1
app/javascript/dashboard/i18n/locale/el/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Να αλλάξει",
"CHANGE_ACCOUNTS": "Αλλαγή Λογαριασμού",
"SELECTOR_SUBTITLE": "Επιλέξτε ένα λογαριασμό από την Λίστα",
"PROFILE_SETTINGS": "Ρυθμίσεις Προφίλ",

1
app/javascript/dashboard/i18n/locale/en/settings.json
View file

@ -90,6 +90,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/es/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Cambiar",
"CHANGE_ACCOUNTS": "Cambiar de cuenta",
"SELECTOR_SUBTITLE": "Seleccione una cuenta de la siguiente lista",
"PROFILE_SETTINGS": "Ajustes del perfil",

1
app/javascript/dashboard/i18n/locale/fa/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "عوض شدن",
"CHANGE_ACCOUNTS": "سوییچ به یک حساب دیگر",
"SELECTOR_SUBTITLE": "از لیست یکی از حساب‌ها را انتخاب کنید",
"PROFILE_SETTINGS": "تنظیمات پروفایل",

1
app/javascript/dashboard/i18n/locale/fi/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/fr/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Changer",
"CHANGE_ACCOUNTS": "Changer de compte",
"SELECTOR_SUBTITLE": "Sélectionnez un compte dans la liste suivante",
"PROFILE_SETTINGS": "Paramètres de profil",

1
app/javascript/dashboard/i18n/locale/hi/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/hu/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/it/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Cambia",
"CHANGE_ACCOUNTS": "Cambia Profilo/Account",
"SELECTOR_SUBTITLE": "Seleziona un account dal seguente elenco",
"PROFILE_SETTINGS": "Impostazioni profilo",

1
app/javascript/dashboard/i18n/locale/ja/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/ko/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/ml/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "മാറ്റം വരുത്തുക",
"CHANGE_ACCOUNTS": "അക്കൗണ്ട് സ്വിച്ചുചെയ്യുക",
"SELECTOR_SUBTITLE": "ഇനിപ്പറയുന്ന ലിസ്റ്റിൽ നിന്ന് ഒരു അക്കൗണ്ട് തിരഞ്ഞെടുക്കുക",
"PROFILE_SETTINGS": "പ്രൊഫൈൽ ക്രമീകരണങ്ങൾ",

1
app/javascript/dashboard/i18n/locale/nl/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Veranderen",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profiel instellingen",

1
app/javascript/dashboard/i18n/locale/pl/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Zmienić",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Ustawienia profilu",

1
app/javascript/dashboard/i18n/locale/pt/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Trocar",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Configurações do perfil",

1
app/javascript/dashboard/i18n/locale/pt_BR/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Trocar",
"CHANGE_ACCOUNTS": "Trocar Conta",
"SELECTOR_SUBTITLE": "Selecione uma conta da lista a seguir",
"PROFILE_SETTINGS": "Configurações do Perfil",

1
app/javascript/dashboard/i18n/locale/ro/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Schimba",
"CHANGE_ACCOUNTS": "Comută contul",
"SELECTOR_SUBTITLE": "Selectaţi un cont din următoarea listă",
"PROFILE_SETTINGS": "Setări profil",

1
app/javascript/dashboard/i18n/locale/ru/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Изменить",
"CHANGE_ACCOUNTS": "Сменить Аккаунт",
"SELECTOR_SUBTITLE": "Выберите аккаунт из списка",
"PROFILE_SETTINGS": "Настройки профиля",

1
app/javascript/dashboard/i18n/locale/sk/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/sv/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Att förändra",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profilens inställningar",

1
app/javascript/dashboard/i18n/locale/ta/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "மாற்ற",
"CHANGE_ACCOUNTS": "கணக்கை மாற்றவும்",
"SELECTOR_SUBTITLE": "பின்வரும் பட்டியலிலிருந்து ஒரு கணக்கைத் தேர்ந்தெடுக்கவும்",
"PROFILE_SETTINGS": "சுயவிவர அமைப்புகள்",

1
app/javascript/dashboard/i18n/locale/th/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/tr/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/uk/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Змінити",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Налаштування облікового запису",

1
app/javascript/dashboard/i18n/locale/vi/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "Change",
"CHANGE_ACCOUNTS": "Switch Account",
"SELECTOR_SUBTITLE": "Select an account from the following list",
"PROFILE_SETTINGS": "Profile Settings",

1
app/javascript/dashboard/i18n/locale/zh/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "改變",
"CHANGE_ACCOUNTS": "切换账户",
"SELECTOR_SUBTITLE": "从以下列表中选择一个账户",
"PROFILE_SETTINGS": "个人资料设置",

1
app/javascript/dashboard/i18n/locale/zh_CN/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "改變",
"CHANGE_ACCOUNTS": "切换账户",
"SELECTOR_SUBTITLE": "从以下列表中选择一个账户",
"PROFILE_SETTINGS": "个人资料设置",

1
app/javascript/dashboard/i18n/locale/zh_TW/settings.json
View file

@ -88,6 +88,7 @@
}
},
"SIDEBAR_ITEMS": {
"CHANGE_AVAILABILITY_STATUS": "改變",
"CHANGE_ACCOUNTS": "切換帳戶",
"SELECTOR_SUBTITLE": "從以下列表中選擇一個帳戶",
"PROFILE_SETTINGS": "個人資料設定",

7
app/javascript/dashboard/store/modules/auth.js
View file

@ -105,6 +105,13 @@ export const actions = {
}
},
updateAvailability: ({ commit }, { availability }) => {
authAPI.updateAvailability({ availability }).then(response => {
setUser(response.data, getHeaderExpiry(response));
commit(types.default.SET_CURRENT_USER);
});
},
setCurrentAccountId({ commit }, accountId) {
commit(types.default.SET_CURRENT_ACCOUNT_ID, accountId);
},