feat: Change availability status from sidebar (#1288)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/javascript/dashboard/api/auth.js

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

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -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>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -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: {

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -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
+    );
+  });
+});

app/javascript/dashboard/i18n/locale/ar/settings.json

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

app/javascript/dashboard/i18n/locale/ca/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/cs/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/da/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/de/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/el/settings.json

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

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/es/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/fa/settings.json

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

app/javascript/dashboard/i18n/locale/fi/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/fr/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/hi/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/hu/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/it/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/ja/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/ko/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/ml/settings.json

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

app/javascript/dashboard/i18n/locale/nl/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/pl/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/pt/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/pt_BR/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/ro/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/ru/settings.json

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

app/javascript/dashboard/i18n/locale/sk/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/sv/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/ta/settings.json

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

app/javascript/dashboard/i18n/locale/th/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/tr/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/uk/settings.json

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

app/javascript/dashboard/i18n/locale/vi/settings.json

@@ -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",

app/javascript/dashboard/i18n/locale/zh/settings.json

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

app/javascript/dashboard/i18n/locale/zh_CN/settings.json

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

app/javascript/dashboard/i18n/locale/zh_TW/settings.json

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

app/javascript/dashboard/store/modules/auth.js

@@ -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);
   },