@intellias/menu 1.0.0

package/Menu.ts

@@ -0,0 +1,625 @@
+import { mapGetters, mapMutations, mapActions } from "vuex";
+import NotificationsSidebar from "./components/notifications-sidebar/NotificationsSidebar.vue";
+import playPause from "./components/play-pause/PlayPause.vue";
+import SubMenu from "./components/sub-menu/SubMenu.vue";
+import { BaseUrl } from "./repositories/BaseUrl";
+import UserPublicInfoModel from "./models/user/PublicInfoModel";
+import UserExtendedInfoModel from "./models/user/ExtendedInfoModel";
+import BaseRepository from "./repositories/BaseRepository";
+import LogoutModel from "./models/LogoutModel";
+import ConfigModel from "./models/ConfigModel";
+import UserPicture from "./components/user-picture/UserPicture.vue";
+import { MenuOptions, ProjectName } from "./wrapper";
+import { isMobileOnly } from "mobile-device-detect";
+import NotificationActionModel, {
+  ActionType,
+  RequestMethod,
+} from "./models/user/NotificationActionModel";
+import {
+  NotificationCategory,
+  NotificationRejectionData,
+} from "./models/user/NotificationModel";
+
+export default {
+  name: "MainMenu",
+  components: {
+    UserPicture,
+    NotificationsSidebar,
+    playPause,
+    SubMenu,
+  },
+  props: {
+    helperFunctions: {
+      type: Array,
+    },
+    storeAdapter: {
+      type: Object,
+    },
+    subMenus: {
+      type: Array,
+    },
+    projectName: {
+      type: ProjectName,
+    },
+  },
+  provide(): MenuOptions {
+    return {
+      projectName: this.projectName,
+      storeAdapter: this.storeAdapter,
+      subMenus: this.isLiteDomain ? this.subMenus : null,
+      helperFunctions: this.helperFunctions,
+    };
+  },
+  mounted(): void {
+    this.initializeItems();
+    this.initializeAdminItems();
+    this.initializeHereBoardItems();
+    this.attachOverflowItems();
+    this.$echo
+      .private(`employee.${this.getUser.employee_id}`)
+      .listen("SmartBalanceChanged", () =>
+        this.storeAdapter.User.actions.getData()
+      )
+      .listen("LiqPayDonationProcessed", (payload) => {
+        if (payload.status === "finished") {
+          this.storeAdapter.Toasts.mutations.addMessage(
+            `${payload.quantity} UAH was successfully donated.`
+          );
+        } else {
+          this.storeAdapter.Toasts.mutations.addWarning(
+            `Donation ${payload.quantity} UAH was failed.`
+          );
+        }
+        this.storeAdapter.Toasts.mutations.showAll();
+      });
+  },
+  updated(): void {
+    this.findOverflowedIndex();
+    if (this.overflowedItems.items.length) {
+      this.attachOverflowedMenus();
+    }
+  },
+  computed: {
+    ...mapGetters("User", [
+      "getUser",
+      "isSidebarFixed",
+      "isSidebarOpenOnMobile",
+    ]),
+    intemsConfig(): ConfigModel {
+      return this.storeAdapter.Config.state.data;
+    },
+    userInfo(): UserPublicInfoModel | UserExtendedInfoModel {
+      return this.storeAdapter.User.state.data;
+    },
+    uncheckedCounter(): number {
+      if (
+        this.storeAdapter.HomePage_OnBoardingPlan.getters?.notCheckedTasksLength
+      ) {
+        return this.storeAdapter.HomePage_OnBoardingPlan.getters
+          .notCheckedTasksLength;
+      }
+      return this.userInfo.welcomeProgram.unchecked_welcome_program_questions;
+    },
+    canSeeGitBranch(): boolean {
+      return this.$can("read", "feature_show_git_branch");
+    },
+    intelliHubIconsClassName(): string {
+      return this.isIntelliHub
+        ? "icons hide-on-med-and-down"
+        : "icons fixed-padding hide-on-med-and-down";
+    },
+    intelliHubAvatarClassName(): string {
+      return this.isIntelliHub
+        ? "intellihub-user-wrapper"
+        : "intellihub-user-wrapper fixed-padding";
+    },
+    intelliHubNotificationsClassName(): string {
+      return this.isIntelliHub
+        ? "notifications-bell"
+        : "notifications-bell fixed-padding";
+    },
+    isIntelliHub(): boolean {
+      return this.projectName === ProjectName.IntelliHub;
+    },
+    isLiteDomain(): boolean {
+      return this.projectName === ProjectName.Lite;
+    },
+    isManagersPortal(): boolean {
+      return this.projectName === ProjectName.ManagersPortal;
+    },
+    allowedToGiveKudos(): boolean {
+      return this.userInfo.kudos_balance > 0;
+    },
+    vacationBalance(): number | string {
+      return this.userInfo.vacation_balance;
+    },
+    overflowMenuItemHeight(): number {
+      return this.overflowedMenus[0].querySelector("li").getBoundingClientRect()
+        .height;
+    },
+    overflowMenuMaxItemCount(): number {
+      const itemCountPerMenu = [];
+
+      this.overflowedMenus.forEach((menu) => {
+        itemCountPerMenu.push(menu.querySelectorAll(":scope > li").length);
+      });
+
+      return Math.max(...itemCountPerMenu);
+    },
+    isMobileOnly(): boolean {
+      return isMobileOnly;
+    },
+  },
+  watch: {
+    // kostyl to close dropdown after back button press
+    $route(): void {
+      if (this.mobileMenu) {
+        this.mobileMenu.close();
+      }
+    },
+    "overflowedItems.startIndex": {
+      handler(index: number): void {
+        this.overflowedItems.items = this.items.slice(index);
+      },
+    },
+  },
+  methods: {
+    ...mapGetters("Config", ["config"]),
+    ...mapActions("User/Notifications", ["markAsRead"]),
+    ...mapMutations("User", ["toggleSidebarFixation", "toggleSidebarOnMobile"]),
+    handleSidebarTogglerClick(): void {
+      if (!this.isMobileOnly) {
+        this.toggleSidebarFixation();
+      } else {
+        this.toggleSidebarOnMobile();
+      }
+    },
+    goTo(routeName): void {
+      this.helperFunctions.router.push({ name: routeName });
+    },
+    modifyOpenedAdminItems(indexItem: number): void {
+      const collapsibleWrapper = document.getElementById("admin_collapsible");
+      const collaplsedAdminItem =
+        collapsibleWrapper.children[indexItem].children[1];
+      const animationSmoothness = 0.4;
+      const transitionDuration = `${
+        collaplsedAdminItem.children.length * animationSmoothness
+      }s`;
+      collaplsedAdminItem.style.transitionDuration = transitionDuration;
+      this.adminItems = this.adminItems.map((item, index) =>
+        item.children && index === indexItem
+          ? { ...item, opened: !item.opened }
+          : item
+      );
+    },
+    toggleSideNavVisibility(): void {
+      this.sideNavOpened = !this.sideNavOpened;
+    },
+    attachOverflowItems(): void {
+      this.markOverflowedItems();
+      window.addEventListener("resize", this.markOverflowedItems);
+    },
+    attachOverflowedMenus(): void {
+      this.overflowedMenus = this.$refs.overflowedMenu.querySelectorAll("ul");
+    },
+    findOverflowedIndex(): void {
+      const items: Array<HTMLElement> = [
+        ...this.$refs["menu-items"].childNodes,
+      ];
+      const { length } = items;
+      for (let i = 0; i < length; i++) {
+        if (items[i].offsetTop > items[i].clientTop) {
+          this.overflowedItems.startIndex = i;
+          break;
+        }
+      }
+    },
+    markOverflowedItems(): void {
+      this.findOverflowedIndex();
+      this.overflowedItems.items =
+        this.overflowedItems.startIndex > -1
+          ? this.items.slice(this.overflowedItems.startIndex)
+          : [];
+    },
+    async logOut(): Promise<void> {
+      const repository = new BaseRepository(BaseUrl.LogOut);
+      const data = await repository.post<{ data: LogoutModel }>();
+      if (data.data !== undefined) {
+        window.location.href = data.data.redirect_url;
+      }
+    },
+    openModalGiveKudos(): void {
+      if (this.allowedToGiveKudos) {
+        this.giveKudosComponent = this.giveKudosModalComponent();
+      }
+    },
+    closeModalGiveKudos(): void {
+      this.giveKudosComponent = undefined;
+    },
+    giveKudosModalComponent() {
+      return () => import("./components/give-kudos-form/GiveKudosForm.vue");
+    },
+    setOverflowedMenuHeight(): void {
+      this.overflowedMenus.forEach((menu) => {
+        menu.style.height = `${
+          this.overflowMenuMaxItemCount * this.overflowMenuItemHeight
+        }px`;
+      });
+    },
+    moveOverflowedMenu(): void {
+      this.isOveflowedMenuMoved = true;
+      this.setOverflowedMenuHeight();
+    },
+    resetOverflowedMenu(): void {
+      this.isOveflowedMenuMoved = false;
+      this.overflowedMenus.forEach((menu) => {
+        menu.style.height = "auto";
+      });
+    },
+    initializeRejectionComponent(
+      rejectionData: NotificationRejectionData
+    ): void {
+      this.rejectConfirm = rejectionData.rejectionComponent;
+      this.rejectedNotification = rejectionData.notification;
+    },
+    confirmedReject(payload): void {
+      const action = this.rejectedNotification.actions
+        .first((item) => item.type === ActionType.reject)
+        .clone();
+      if (
+        [
+          NotificationCategory.vacations,
+          NotificationCategory.sick_leaves,
+          NotificationCategory.unpaid_leave,
+        ].includes(this.rejectedNotification.category)
+      ) {
+        action.body.rejection_reason = payload.comment;
+      } else {
+        action.body.reject_reason = payload;
+      }
+
+      this.requestNotification(action);
+
+      this.unsetRejection();
+    },
+    unsetRejection(): void {
+      this.rejectConfirm = null;
+    },
+    async requestNotification(action: NotificationActionModel): Promise<void> {
+      this.markAsRead(this.rejectedNotification);
+      await this.baseRepository.request(
+        action.action,
+        action.method ? action.method : RequestMethod.put,
+        action.body
+      );
+    },
+    initializeItems(): void {
+      this.items = [
+        {
+          name: "Time",
+          link: "Time",
+          toMainDomain: false,
+          toLite: !this.isLiteDomain,
+          menuCheck: "menu_time",
+        },
+        {
+          name: "Leaves and Absences",
+          link: this.isLiteDomain
+            ? "Leaves and Absences"
+            : "leaves-and-absences/balance",
+          toLite: !this.isLiteDomain,
+          menuCheck: "menu_leaves_and_absences",
+        },
+        {
+          name: "Stats",
+          link: "stats",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_stats",
+        },
+        {
+          name: "IntelliShare",
+          link: this.isLiteDomain ? "Donation Portal" : "donations",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_donation_campaigns",
+        },
+        {
+          name: "Welcome Program",
+          link: this.isLiteDomain
+            ? "On boarding page check list"
+            : "admin/welcome-program",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_welcome_program",
+        },
+        {
+          name: "Operations",
+          link: this.isLiteDomain ? "Reporting Branches" : "projects",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_projects",
+        },
+        {
+          name: "Reports",
+          link: "report/generate-excel",
+          toMainDomain: true,
+          menuCheck: "reports_tab",
+        },
+        {
+          name: "Team",
+          link: "view-employees",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_team",
+        },
+        {
+          name: "News",
+          link: "news",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_news",
+        },
+        {
+          name: "Career Hub",
+          link: this.config().careerSiteUrl,
+          isDirectLink: true,
+          menuCheck: "menu_career_hub",
+        },
+        {
+          name: "Service desk",
+          link: "https://jira.intellias.com/servicedesk/customer/portals",
+          toMainDomain: true,
+          menuCheck: "menu_service_desk",
+          blank: true,
+        },
+        {
+          name: "Knowledge base",
+          link: "https://confluence.intellias.com/pages/viewpage.action?pageId=110035843",
+          toMainDomain: true,
+          menuCheck: "menu_knowledge_base",
+          blank: true,
+        },
+        {
+          name: "IntelliVacancies",
+          link: this.isLiteDomain ? "IntelliVacancies" : "intelli-vacancies",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_rotation_portal",
+        },
+        {
+          name: "Book a desk",
+          link: "https://intellias.officespacesoftware.com/visual-directory",
+          toMainDomain: true,
+          menuCheck: "menu_office_space",
+          blank: true,
+        },
+        {
+          name: "Company EA Model",
+          link: this.isLiteDomain ? "Company EA Model" : "ea",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+          menuCheck: "menu_ea_model",
+        },
+        {
+          name: "Admin",
+          menuCheck: "menu_admin",
+          adminMenu: true,
+        },
+        {
+          name: "Time Imports",
+          menuCheck: "menu_here_board_page",
+          hereBoardMenu: true,
+        },
+      ];
+    },
+    initializeAdminItems(): void {
+      this.adminItems = [
+        {
+          name: "IT support",
+          menuCheck: "menu_admin_it_support",
+          opened: false,
+          children: [
+            {
+              name: "Access roles",
+              menuCheck: "setup_roles",
+              link: this.isLiteDomain ? "Access Roles" : "access-roles",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Work areas",
+              menuCheck: "menu_work_areas",
+              link: "work-areas",
+              toMainDomain: true,
+            },
+            {
+              name: "Technical work",
+              menuCheck: "menu_admin_it_support_technical_work",
+              link: "technical-work",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Access cards",
+              menuCheck: "menu_admin_it_support_access_cards",
+              link: "access-cards",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Client IPs",
+              menuCheck: "menu_admin_it_support_client_ips",
+              link: "clients/index.php",
+              toMainDomain: true,
+            },
+            {
+              name: "View logs",
+              menuCheck: "menu_admin_it_support_view_logs",
+              link: this.isLiteDomain ? "view_logs" : "view-logs",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Service page",
+              menuCheck: "menu_service_page",
+              link: this.isLiteDomain ? "Service" : "service-page",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+          ],
+        },
+        {
+          name: "HR",
+          menuCheck: "menu_admin_hr",
+          opened: false,
+          children: [
+            {
+              name: "Manage IntelliStore",
+              menuCheck: "menu_intelli_store_manage",
+              link: this.isLiteDomain
+                ? "catalog-admin-products-list"
+                : "total-rewards-portal/smart-catalog/admin'",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Trainings (OLD)",
+              menuCheck: "menu_admin_hr_trainings",
+              link: "eval/index.php",
+              toMainDomain: true,
+            },
+            {
+              name: "Trainings (OLD)",
+              menuCheck: "menu_admin_employee_trainings",
+              link: "employees-trainings",
+              toMainDomain: true,
+            },
+            {
+              name: "Events",
+              menuCheck: "event_and_training",
+              link: this.isLiteDomain ? "Manage trainings" : "trainings",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Calendars",
+              menuCheck: "menu_admin_holiday_calendar",
+              link: "calendars",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Manage smarts",
+              menuCheck: "menu_admin_hr_manage_smarts",
+              link: "virtual-money/index.php",
+              toMainDomain: true,
+            },
+            {
+              name: "Manage news",
+              menuCheck: "menu_admin_hr_news",
+              link: "admin/news",
+              toMainDomain: true,
+            },
+            {
+              name: "Compensation packages",
+              menuCheck: "menu_admin_non_comp_list",
+              link: this.isLiteDomain
+                ? "compensation-package"
+                : "admin/compensation-package",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Banners",
+              menuCheck: "menu_admin_banners",
+              link: this.isLiteDomain ? "Banners List" : "banners",
+              toLite: !this.isLiteDomain,
+              toMainDomain: false,
+            },
+            {
+              name: "Manage Welcome Program",
+              link: this.isLiteDomain
+                ? "Manage Welcome Program"
+                : "admin/welcome-program",
+              toMainDomain: false,
+              toLite: !this.isLiteDomain,
+              menuCheck: "menu_manage_welcome_program",
+            },
+            {
+              name: "Jira Satisfaction Survey",
+              menuCheck: "menu_enps_survey_admin",
+              link: this.isLiteDomain
+                ? "Jira Satisfaction Survey List"
+                : "jira-satisfaction-survey",
+              toMainDomain: false,
+              toLite: !this.isLiteDomain,
+            },
+          ],
+        },
+        {
+          name: "Accountancy",
+          menuCheck: "menu_admin_accountancy",
+          link: "accountancy/detailedReporting",
+          toMainDomain: true,
+        },
+        {
+          name: "Countries",
+          menuCheck: "menu_admin_dictionary",
+          link: this.isLiteDomain ? "dictionary" : "countries",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+        },
+      ];
+    },
+    initializeHereBoardItems(): void {
+      this.hereBoardItems = [
+        {
+          name: "Employee Dashboard",
+          menuCheck: "menu_here_board_page_user",
+          link: this.isLiteDomain ? "Here Board Page" : "here-board-page",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+        },
+        {
+          name: "Manager Dashboard",
+          menuCheck: "menu_here_board_page_manager",
+          link: this.isLiteDomain
+            ? "Here Board Page Admin"
+            : "here-board-page-admin",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+        },
+        {
+          name: "Admin Dashboard",
+          menuCheck: "menu_here_board_page_owner",
+          link: this.isLiteDomain
+            ? "Here Board Page Admin"
+            : "here-board-page-admin",
+          toLite: !this.isLiteDomain,
+          toMainDomain: false,
+        },
+      ];
+    },
+  },
+  data(): Record<string, unknown> {
+    return {
+      flagShowSignOutLinks: false,
+      sideNavOpened: false,
+      baseRepository: new BaseRepository(),
+      rejectConfirm: undefined,
+      rejectedNotification: undefined,
+      giveKudosComponent: undefined,
+      items: [],
+      adminItems: [],
+      hereBoardItems: [],
+      overflowedItems: {
+        items: [],
+        startIndex: -1,
+      },
+      mobileMenu: null,
+      overflowedMenus: undefined as Array<HTMLElement>,
+      isOveflowedMenuMoved: false,
+    };
+  },
+};