@intellias/menu 1.0.2 → 1.0.4

package/components/notifications-sidebar/NotificationsSidebar.ts

@@ -1,203 +0,0 @@
-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

@@ -1,171 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,87 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-@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);
-    }
-}