@intellias/menu 1.0.0

package/components/notifications-sidebar/NotificationsSidebar.ts

@@ -0,0 +1,203 @@
+import { mapGetters, mapActions, mapMutations } from "vuex";
+import VueCustomScrollbar from "vue-custom-scrollbar";
+import QueryFilter from "../../helpers/QueryFilter";
+import {
+  NotificationRejectionData,
+  NotificationStatus,
+  NotificationType,
+} from "../../models/user/NotificationModel";
+import Notification from "./notification/Notification.vue";
+import ActionButton from "../buttons/action-button/ActionButton.vue";
+import RequestLoader from "../request-loader/RequestLoader.vue";
+import Preloader from "../preloader/Preloader.vue";
+import { map } from "../../helpers/model/ModelHelper";
+import BroadcastNotificationPayload from "./models/BroadcastNotificationPayload";
+import ConfigModel from "../../models/ConfigModel";
+import DropdownMenu from "v-dropdown-menu/vue2";
+import "v-dropdown-menu/dist/vue2/v-dropdown-menu.css";
+import Tabs from "vue-tabs-with-active-line";
+import { ProjectName } from "../../wrapper";
+
+export default {
+  components: {
+    Preloader,
+    RequestLoader,
+    ActionButton,
+    Notification,
+    VueCustomScrollbar,
+    DropdownMenu,
+    Tabs,
+  },
+  inject: ["projectName", "storeAdapter"],
+  mounted(): void {
+    this.initListener();
+  },
+  methods: {
+    ...mapActions("User/Notifications", [
+      "readAll",
+      "newNotification",
+      "markAsProcessed",
+    ]),
+    ...mapActions("User/Notifications/SidebarModule", [
+      "fetchSidebarNotifications",
+      "dismissAll",
+    ]),
+    ...mapMutations("User/Notifications/SidebarModule", [
+      "unsetNotifications",
+      "changeStatus",
+    ]),
+    initListener(): void {
+      this.$echo
+        .private(`employee.${this.getUser.employee_id}`)
+        .notification((payload) => {
+          this.newNotification(map(BroadcastNotificationPayload, payload));
+          if (localStorage.activeBrowserTab === "false") {
+            localStorage.pendingAnimation = true;
+          } else {
+            this.bellAnimation();
+          }
+        });
+      this.$echo
+        .private(`employee.${this.getUser.employee_id}`)
+        .listen("NotificationProcessed", (payload) => {
+          const notification = this.find(payload.notification_id);
+          if (
+            notification &&
+            notification.status !== NotificationStatus.processed
+          ) {
+            this.markAsProcessed(notification);
+          }
+        });
+      localStorage.activeBrowserTab = true;
+      document.addEventListener("visibilitychange", () => {
+        localStorage.activeBrowserTab = !document.hidden;
+        if (
+          localStorage.activeBrowserTab === "true" &&
+          localStorage.pendingAnimation === "true"
+        ) {
+          this.bellAnimation();
+        }
+      });
+    },
+    async initData(): void {
+      Promise.all([
+        this.unsetNotifications(),
+        this.fetchSidebarNotifications(this.queryAll.unsetPagination()),
+        this.fetchSidebarNotifications(this.queryPending.unsetPagination()),
+      ]).then(() => {
+        this.updateScrollbar();
+      });
+    },
+    loadAllNotifications(): void {
+      if (!this.dropDownOpen || this.currentTab !== "all") {
+        return;
+      }
+      this.fetchSidebarNotifications(
+        this.queryAll.offset(this.notices.count())
+      );
+    },
+    loadPendingRequests(): void {
+      if (!this.dropDownOpen || this.currentTab !== "pending_approval") {
+        return;
+      }
+      this.fetchSidebarNotifications(
+        this.queryPending.offset(this.pendingRequests.count())
+      );
+    },
+    changeActiveTab(newTab): void {
+      this.currentTab = newTab;
+    },
+    bellAnimation(): void {
+      this.displayAnimation = true;
+      setTimeout(() => {
+        this.displayAnimation = false;
+      }, 5600);
+
+      localStorage.pendingAnimation = false;
+    },
+    closeSidebar(): void {
+      this.dropDownOpen = false;
+    },
+    updateScrollbar(): void {
+      this.$refs.scrollBar.update();
+    },
+    emitRejectionComponent(rejectionData: NotificationRejectionData): void {
+      this.$emit("rejection-component", rejectionData);
+    },
+  },
+  computed: {
+    ...mapGetters("User", ["getUser"]),
+    ...mapGetters("User/Notifications/SidebarModule", [
+      "notices",
+      "pendingRequests",
+      "find",
+    ]),
+    ...mapGetters("User/Notifications", ["hasUnread", "totalUnread"]),
+    hasUnreadNotifications(): boolean {
+      return this.hasUnread !== undefined
+        ? this.hasUnread
+        : this.getUser.has_unread_notifications;
+    },
+    isLiteDomain(): boolean {
+      return this.projectName === ProjectName.Lite;
+    },
+    intemsConfig(): ConfigModel {
+      return this.storeAdapter.Config.state.data;
+    },
+  },
+  watch: {
+    "totalUnread.notice": {
+      handler(notice: number): void {
+        const tab = this.$refs.tabs.$el.children[0];
+        if (this.totalUnread.notice) {
+          tab.innerHTML = `All
+          <span class="counter" >${notice}</span>`;
+        } else {
+          tab.innerHTML = "All";
+        }
+      },
+    },
+    "totalUnread.pending_request": {
+      handler(request: number): void {
+        const tab = this.$refs.tabs.$el.children[1];
+        if (this.totalUnread.pending_request) {
+          tab.innerHTML = `Pending approval
+          <span class="counter" >${request}</span>`;
+        } else {
+          tab.innerHTML = "Pending approval";
+        }
+      },
+    },
+  },
+  data(): Record<string, unknown> {
+    return {
+      queryAll: new QueryFilter()
+        .notIn("status", [
+          NotificationStatus.hidden,
+          NotificationStatus.hidden_processed,
+        ])
+        .scope("type", NotificationType.notice),
+      queryPending: new QueryFilter()
+        .notIn("status", [
+          NotificationStatus.hidden,
+          NotificationStatus.hidden_processed,
+        ])
+        .scope("type", NotificationType.pending_request),
+      dropDownOpen: false,
+      tabs: [
+        {
+          title: "All",
+          value: "all",
+        },
+        {
+          title: "Pending approval",
+          value: "pending_approval",
+        },
+      ],
+      currentTab: "all",
+      preloaderSize: "small",
+      scrollBarSettings: { suppressScrollX: true, minScrollbarLength: 50 },
+      displayAnimation: false,
+    };
+  },
+};

package/components/notifications-sidebar/NotificationsSidebar.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="notifications-sidebar dropdown-menu">
+    <dropdown-menu
+      direction="center"
+      :overlay="false"
+      :isOpen="dropDownOpen"
+      @opened="initData"
+    >
+      <template #trigger>
+        <a class="notification-href pointer" ref="notifications_sidebar">
+          <i
+            class="icon notification"
+            :class="{ 'bell-animation': displayAnimation }"
+          ></i>
+          <transition name="fade" :duration="{ enter: 4000, leave: 1 }">
+            <span v-show="hasUnreadNotifications" class="has-unread"></span>
+          </transition>
+        </a>
+      </template>
+      <template #header>
+        <div class="row note-title-row">
+          <div class="col s10">
+            <span class="primary-text">Notifications</span>
+          </div>
+          <div class="col s2">
+            <dropdown-menu direction="left" :overlay="false">
+              <template #trigger>
+                <a
+                  class="pointer"
+                  ref="manage_dropdown"
+                  :data-target="`manage_dropdown_${_uid}`"
+                >
+                  <div
+                    class="overflowed-menu-toggler notification-manage-toggler"
+                  >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </div>
+                </a>
+              </template>
+              <template #body>
+                <ul class="sub-menu">
+                  <li>
+                    <a
+                      @click="readAll"
+                      :class="{
+                        'is-disabled':
+                          !totalUnread.notice && !totalUnread.pending_request,
+                      }"
+                    >
+                      Mark all as read
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      @click="dismissAll"
+                      :class="{
+                        'is-disabled':
+                          !notices.count() && !pendingRequests.count(),
+                      }"
+                    >
+                      Dismiss all
+                    </a>
+                  </li>
+                </ul>
+              </template>
+            </dropdown-menu>
+          </div>
+        </div>
+      </template>
+      <template #body>
+        <div class="main-dropdown">
+          <div class="row">
+            <tabs
+              :tabs="tabs"
+              :currentTab="currentTab"
+              :wrapper-class="'default-tabs'"
+              :tab-class="'tab'"
+              :tab-active-class="'active'"
+              :line-class="'indicator'"
+              @onClick="changeActiveTab"
+              ref="tabs"
+            />
+            <div class="notification-content">
+              <div class="row notifications-list" v-show="currentTab === 'all'">
+                <vue-custom-scrollbar
+                  ref="scrollBar"
+                  class="col tab-content"
+                  :options="scrollBarSettings"
+                  @ps-y-reach-end="loadAllNotifications"
+                >
+                  <notification
+                    v-for="notification in notices"
+                    @rejection-component="emitRejectionComponent"
+                    :key="notification.id"
+                    :notification="notification"
+                  ></notification>
+                  <preloader
+                    v-if="queryAll.loading"
+                    :size="preloaderSize"
+                  ></preloader>
+                  <div
+                    v-else-if="!notices.count()"
+                    class="main-text margin-top-50 align-center"
+                  >
+                    You have no new notifications
+                  </div>
+                </vue-custom-scrollbar>
+              </div>
+              <div
+                class="row notifications-list"
+                v-show="currentTab === 'pending_approval'"
+              >
+                <vue-custom-scrollbar
+                  class="col tab-content"
+                  :options="scrollBarSettings"
+                  @ps-y-reach-end="loadPendingRequests"
+                >
+                  <notification
+                    v-for="notification in pendingRequests"
+                    @rejection-component="emitRejectionComponent"
+                    :key="notification.id"
+                    :notification="notification"
+                  ></notification>
+                  <preloader
+                    v-if="queryAll.loading"
+                    :size="preloaderSize"
+                  ></preloader>
+                  <div
+                    v-else-if="!pendingRequests.count()"
+                    class="main-text margin-top-50 align-center"
+                  >
+                    You have no pending requests
+                  </div>
+                </vue-custom-scrollbar>
+              </div>
+            </div>
+          </div>
+          <div class="row view-all-row align-center">
+            <action-button
+              v-if="isLiteDomain"
+              :to="{ name: 'Employee Notifications' }"
+              is-link
+              @click.native="closeSidebar"
+            >
+              View all
+            </action-button>
+            <action-button
+              v-else
+              :href="`${intemsConfig.liteSiteUrl}`"
+              is-link
+              @click.native="closeSidebar"
+            >
+              View all
+            </action-button>
+          </div>
+        </div>
+      </template>
+    </dropdown-menu>
+  </div>
+</template>
+
+<script>
+import NotificationsSidebar from "./NotificationsSidebar";
+
+export default NotificationsSidebar;
+</script>
+<style lang="scss">
+@import "NotificationsSidebar";
+</style>

package/components/notifications-sidebar/models/BroadcastNotificationPayload.ts

@@ -0,0 +1,8 @@
+import { NotificationType } from "../../../models/user/NotificationModel";
+
+export default class {
+  comment = undefined as string;
+  id = undefined as string;
+  notification_type = undefined as NotificationType;
+  type = undefined as string;
+}

package/components/notifications-sidebar/models/TotalCounter.ts

@@ -0,0 +1,50 @@
+import { NotificationType } from "../../../models/user/NotificationModel";
+
+export type NotificationTotal = {
+  notification: number;
+  pending_request: number;
+};
+export default class {
+  notice = 0 as number;
+  pending_request = 0 as number;
+  private has_unread = undefined;
+
+  constructor(total?: NotificationTotal) {
+    if (!total) {
+      return;
+    }
+    this.notice = total.notification;
+    this.pending_request = total.pending_request;
+    this.checkHasUnread();
+  }
+
+  decrement(type: NotificationType): this {
+    this[type.toString()] = this[type.toString()] - 1;
+    this.checkHasUnread();
+
+    return this;
+  }
+
+  increment(type: NotificationType | string): this {
+    this[type.toString()] = this[type.toString()] + 1;
+    this.checkHasUnread();
+
+    return this;
+  }
+
+  private checkHasUnread(): void {
+    this.has_unread = this.notice > 0 || this.pending_request > 0;
+  }
+
+  get hasUnread(): boolean {
+    return this.has_unread;
+  }
+
+  readAll(): this {
+    this.notice = 0;
+    this.pending_request = 0;
+    this.checkHasUnread();
+
+    return this;
+  }
+}

package/components/notifications-sidebar/notification/Notification.ts

@@ -0,0 +1,17 @@
+import { mapActions } from "vuex";
+import ActionButton from "../../buttons/action-button/ActionButton.vue";
+import ActionProcessing from "../../../mixins/notifications/ActionProcessing";
+import TimeAgo from "../../time-ago/TimeAgo.vue";
+import NotificationModel from "../../../models/user/NotificationModel";
+
+export default {
+  components: { TimeAgo, ActionButton },
+  props: {
+    notification: NotificationModel,
+  },
+  mixins: [ActionProcessing],
+  methods: {
+    ...mapActions("User/Notifications", ["read"]),
+    ...mapActions("User/Notifications/SidebarModule", ["dismiss"]),
+  },
+};

package/components/notifications-sidebar/notification/Notification.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="note" :class="{ read: !notification.isNew }">
+    <div class="row">
+      <div class="col s2 margin-top-5">
+        <i class="icon category-icon" :class="notification.icon"></i>
+      </div>
+      <div class="col s8 note-title-col">
+        <span class="primary-text" v-html="notification.title"></span><br />
+        <span class="text-muted"
+          ><time-ago :time="notification.created_at"></time-ago
+        ></span>
+      </div>
+      <span class="manage-notification">
+        <a
+          v-if="notification.isNew && !actionProcessing"
+          @click="read(notification)"
+          class="pointer"
+          title="Mark as read"
+        >
+          <i class="icon icon-small visibility"></i>
+        </a>
+        <a
+          v-if="!actionProcessing"
+          @click="dismiss(notification)"
+          class="margin-left-10 pointer"
+        >
+          <i class="icon icon-small delete" title="Dismiss"></i>
+        </a>
+      </span>
+    </div>
+    <div class="row margin-top-15">
+      <div
+        class="col semi-primary-text"
+        v-html="notification.description"
+      ></div>
+    </div>
+    <div class="row margin-top-15" v-if="notification.actions.count()">
+      <div class="col s10 action-buttons">
+        <template v-for="(action, index) in notification.actions">
+          <action-button
+            v-if="
+              !notification.isProcessed && !action.isLink && !actionProcessing
+            "
+            :key="index"
+            class="margin-right-10"
+            :class="{ 'reject-color': action.isReject }"
+            btn-link
+            @click.native="submitAction(action)"
+          >
+            {{ title(action) }}
+          </action-button>
+          <action-button
+            v-else-if="action.isLink"
+            :key="index"
+            :is-disabled="isExpired(action)"
+            btn-link
+            class="margin-right-10"
+            @click.native="proceedToView(action)"
+          >
+            {{ title(action) }}
+          </action-button>
+          <action-button
+            v-else
+            is-disabled
+            btn-link
+            class="margin-right-10"
+            :key="index"
+          >
+            {{ title(action) }}
+          </action-button>
+        </template>
+      </div>
+      <div class="col s2 align-right">
+        <i
+          v-show="actionProcessing"
+          class="icon icon-small2 loading-spinner loading"
+        ></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Notification from "./Notification";
+
+export default Notification;
+</script>

package/components/play-pause/PlayPause.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+@import "../../scss/components/variables";
+
+#modalTracked {
+    color: map.get($intems-colors, "dark");
+    .modal-content {
+        #tracked-content {
+            display: flex;
+            align-items: center;
+            p {
+                margin: 0;
+                line-height: initial;
+            }
+        }
+        #span-clock {
+            margin-right: 10px;
+            i {
+                font-size: 54px;
+            }
+        }
+    }
+}
+.play-pause {
+    display: flex;
+    i.spinner-solid {
+        animation: spin 1s linear infinite;
+    }
+}
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}