@intellias/menu 1.0.0

package/repositories/UserRepository.ts

@@ -0,0 +1,75 @@
+import { AxiosResponse } from "axios";
+import { Collection } from "collect.js";
+import { BaseUrl } from "./BaseUrl";
+import BaseRepository from "./BaseRepository";
+import ExtendedInfoModel from "../models/user/ExtendedInfoModel";
+import NotificationModel from "../models/user/NotificationModel";
+import QueryFilter from "../helpers/QueryFilter";
+import { DefaultContext } from "../helpers/response/ResponseHelper";
+import { UpdateContext } from "./ResourceRepository";
+import { NotificationTotal } from "../components/notifications-sidebar/models/TotalCounter";
+import { ResponseCode } from "../helpers/response/ResponseCode";
+import { Meta } from "../helpers/response/ResponseInterface";
+
+// Todo: maybe rename or what, because this repository is only to get logged in user data
+export default class UserRepository extends BaseRepository<
+  typeof ExtendedInfoModel
+> {
+  constructor() {
+    super(BaseUrl.LoggedInUser, ExtendedInfoModel);
+  }
+
+  async notifications(filter: QueryFilter, model = undefined) {
+    const response = await this.axiosProxy.get<{
+      data: { data: Record<string, unknown> };
+      total_unread: NotificationTotal;
+      total: number;
+      meta: Meta;
+    }>(
+      this.getUrl(`/notifications`),
+      { params: filter.toObject() },
+      DefaultContext
+    );
+    if (response.status < ResponseCode.BadRequest) {
+      return {
+        collection: this.map(
+          model !== undefined ? model : NotificationModel,
+          response.data.data
+        ),
+        total: response.data.total_unread,
+        meta: response.data.meta,
+      };
+    }
+
+    return null;
+  }
+
+  async readNotifications(
+    notifications?: Collection<NotificationModel>
+  ): Promise<AxiosResponse> {
+    let data = {};
+    if (notifications) {
+      data = { notifications: notifications.pluck("id").all() };
+    }
+    return this.putData(`/notifications/read-all`, data, {}, UpdateContext);
+  }
+
+  async dismissNotifications(
+    notification?: NotificationModel
+  ): Promise<AxiosResponse> {
+    return this.patch(
+      `/notifications/dismiss-all${notification ? `/${notification.id}` : ""}`,
+      UpdateContext
+    );
+  }
+
+  async processNotifications(
+    notification?: NotificationModel
+  ): Promise<AxiosResponse> {
+    return this.patch(
+      `/notifications/process/${notification.id}`,
+      UpdateContext
+    );
+  }
+
+}

package/repositories/subscribers/CreateSubscribers.ts

@@ -0,0 +1,28 @@
+import { AxiosResponse } from "axios";
+import { ResponseState } from "../../helpers/response/ResponseState";
+import { ResponseCode } from "../../helpers/response/ResponseCode";
+import { Subscribers, SubscribersEvents } from "./Subscribers";
+import { myOptions } from "../../wrapper";
+
+export default class CreateSubscribers implements Subscribers {
+  private readonly resourceName: string;
+  constructor(resourceName = "Item") {
+    this.resourceName = resourceName;
+  }
+
+  generate(): SubscribersEvents {
+    return {
+      [ResponseState.Resolved]: (result: AxiosResponse) => {
+        if (result.status === ResponseCode.Created) {
+          myOptions.storeAdapter.Toasts.mutations.addMessage(
+            `${this.resourceName} was successfully created`
+          );
+        } else if (result.status !== ResponseCode.Ok) {
+          myOptions.storeAdapter.Toasts.mutations.addError(
+            `Unable to create ${this.resourceName}`
+          );
+        }
+      },
+    };
+  }
+}

package/repositories/subscribers/DefaultSubscribers.ts

@@ -0,0 +1,82 @@
+import { AxiosError } from "axios";
+import { ResponseState } from "../../helpers/response/ResponseState";
+import { Subscribers, SubscribersEvents } from "./Subscribers";
+import { ResponseCode } from "../../helpers/response/ResponseCode";
+import { myOptions } from "../../wrapper";
+
+const laravelDefault403Error1 = "Unauthenticated.";
+const laravelDefault403Error2 = "This action is unauthorized.";
+
+export default class DefaultSubscribers implements Subscribers {
+  protected errors;
+  constructor() {
+    this.errors = new Map([
+      [ResponseCode.BadRequest, "Bad request"],
+      [ResponseCode.Unauthorized, "Unauthorized error"],
+      [ResponseCode.Forbidden, "Unauthorized action"],
+      [ResponseCode.NotFound, "Resource is not found"],
+      [ResponseCode.PageExpired, "Page is expired. Please reload the page"],
+      [ResponseCode.UnprocessableEntity, "Data is not valid"],
+      [ResponseCode.ServerError, "Server error"],
+      [ResponseCode.ServiceUnavailable, "Service unavailable"],
+    ]);
+  }
+
+  private getErrorMessageByCode(statusCode: number) {
+    const errorMessage = this.errors.get(statusCode);
+    return errorMessage !== undefined ? errorMessage : "Unknown error";
+  }
+
+  private generateError(error: AxiosError) {
+    if (error.response.status === ResponseCode.UnprocessableEntity) {
+      const { response } = error;
+
+      // if there are error messages return false, because it will be shown by another handlers
+      if (typeof response.data.errors !== "undefined") {
+        return false;
+      }
+      return response.data.message;
+    }
+
+    if (
+      error.response.data.message &&
+      error.response.status === ResponseCode.Forbidden &&
+      error.response.data.message !== "" &&
+      error.response.data.message !== laravelDefault403Error1 &&
+      error.response.data.message !== laravelDefault403Error2
+    ) {
+      return error.response.data.message;
+    }
+
+    return this.getErrorMessageByCode(error.response.status);
+  }
+
+  private async getMessageFromBlob(data: Blob) {
+    await data.text().then((text) => {
+      return JSON.parse(text);
+    });
+  }
+
+  generate(): SubscribersEvents {
+    return {
+      [ResponseState.Pending]: () => {
+        myOptions.storeAdapter.Request.mutations.incrementSent();
+      },
+      [ResponseState.Rejected]: (error: AxiosError) => {
+        if (error.config.method === "head") {
+          return false;
+        }
+
+        const errorMessage = this.generateError(error);
+        if (!errorMessage) {
+          return false;
+        }
+        myOptions.storeAdapter.Toasts.mutations.addError(errorMessage);
+      },
+      [ResponseState.Done]: () => {
+        myOptions.storeAdapter.Request.mutations.incrementCompleted();
+        myOptions.storeAdapter.Toasts.mutations.showAll();
+      },
+    };
+  }
+}

package/repositories/subscribers/DeleteSubscribers.ts

@@ -0,0 +1,28 @@
+import { AxiosResponse } from "axios";
+import { Subscribers, SubscribersEvents } from "./Subscribers";
+import { ResponseState } from "../../helpers/response/ResponseState";
+import { ResponseCode } from "../../helpers/response/ResponseCode";
+import { myOptions } from "../../wrapper";
+
+export default class DeleteSubscribers implements Subscribers {
+  private readonly resourceName: string;
+  constructor(resourceName = "Item") {
+    this.resourceName = resourceName;
+  }
+
+  generate(): SubscribersEvents {
+    return {
+      [ResponseState.Resolved]: (result: AxiosResponse) => {
+        if (result.status === ResponseCode.NoContent) {
+          myOptions.storeAdapter.Toasts.mutations.addMessage(
+            `${this.resourceName} was successfully deleted`
+          );
+        } else {
+          myOptions.storeAdapter.Toasts.mutations.addError(
+            `Unable to delete ${this.resourceName}`
+          );
+        }
+      },
+    };
+  }
+}

package/repositories/subscribers/DownloadSubscribers.ts

@@ -0,0 +1,28 @@
+import { AxiosResponse } from "axios";
+import { Subscribers, SubscribersEvents } from "./Subscribers";
+import { ResponseState } from "../../helpers/response/ResponseState";
+import { ResponseCode } from "../../helpers/response/ResponseCode";
+import { myOptions } from "../../wrapper";
+
+export default class DownloadSubscribers implements Subscribers {
+  private readonly resourceName: string;
+  constructor(resourceName = "File") {
+    this.resourceName = resourceName;
+  }
+
+  generate(): SubscribersEvents {
+    return {
+      [ResponseState.Resolved]: (result: AxiosResponse) => {
+        if (result.status === ResponseCode.Ok) {
+          myOptions.storeAdapter.Toasts.mutations.addMessage(
+            `${this.resourceName} was successfully downloaded`
+          );
+        } else {
+          myOptions.storeAdapter.Toasts.mutations.addError(
+            `Unable to download ${this.resourceName}`
+          );
+        }
+      },
+    };
+  }
+}

package/repositories/subscribers/Subscribers.ts

@@ -0,0 +1,13 @@
+import { AxiosError, AxiosResponse } from "axios";
+import { ResponseState } from "../../helpers/response/ResponseState";
+
+export interface SubscribersEvents {
+  [ResponseState.Pending]?: () => void;
+  [ResponseState.Resolved]?: (result: AxiosResponse) => void;
+  [ResponseState.Rejected]?: (error: AxiosError) => void;
+  [ResponseState.Done]?: () => void;
+}
+
+export interface Subscribers {
+  generate(): SubscribersEvents;
+}

package/repositories/subscribers/UpdateSubscribers.ts

@@ -0,0 +1,32 @@
+import { AxiosResponse } from "axios";
+import { Subscribers, SubscribersEvents } from "./Subscribers";
+import { ResponseState } from "../../helpers/response/ResponseState";
+import { ResponseCode } from "../../helpers/response/ResponseCode";
+import { myOptions } from "../../wrapper";
+
+export default class UpdateSubscribers implements Subscribers {
+  private readonly resourceName: string;
+  private readonly successMessage: string;
+  constructor(resourceName = "Record", successMessage?: string) {
+    this.resourceName = resourceName;
+    this.successMessage = successMessage;
+  }
+
+  generate(): SubscribersEvents {
+    return {
+      [ResponseState.Resolved]: (result: AxiosResponse) => {
+        if (result.status === ResponseCode.Ok) {
+          myOptions.storeAdapter.Toasts.mutations.addMessage(
+            this.successMessage
+              ? this.successMessage
+              : `${this.resourceName} was successfully updated`
+          );
+        } else {
+          myOptions.storeAdapter.Toasts.mutations.addError(
+            `Unable to update ${this.resourceName}`
+          );
+        }
+      },
+    };
+  }
+}

package/scss/components/_global.scss

@@ -0,0 +1,66 @@
+@use "sass:map";
+@import "./utils";
+@import "./variables";
+
+main {
+    overflow: auto;
+    position: relative;
+    flex: 1 1 auto;
+}
+//helpers.
+.bold {
+    font-weight: bold;
+}
+
+.margin-top-5 {
+    margin-top: 5px;
+}
+
+.margin-top-10 {
+    margin-top: 10px;
+}
+
+.padding-top-15 {
+    padding-top: 15px;
+}
+
+.margin-top-15 {
+    margin-top: 15px;
+}
+.margin-top-25 {
+    margin-top: 25px;
+}
+
+.margin-top-50 {
+    margin-top: 50px;
+}
+
+.title-row {
+    margin: 30px 0 40px;
+
+    .page-title {
+        margin: 0;
+        align-self: center;
+        justify-self: flex-start;
+    }
+    button {
+        order: 2;
+    }
+}
+
+.center {
+    text-align: center;
+    justify-content: center;
+}
+.wide {
+    width: 100%;
+}
+.pointer {
+    cursor: pointer;
+}
+
+a,
+a:hover {
+    text-decoration: none;
+    color: map.get($intems-colors, "primary-hover");
+}

package/scss/components/_mixins.scss

@@ -0,0 +1,31 @@
+// PLACEHOLDERS
+%clear-default-button-styles {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+// MIXINS
+// Inject icon path to element css styles
+@mixin icon($name) {
+    background-image: url('~@/assets/icons/#{$name}.svg');
+    mask-image: url('~@/assets/icons/#{$name}.svg');
+}
+
+@mixin margin-x($side, $attr-count: 15, $attr-steps: 5, $unit: 'px') {
+    @for $i from 0 through $attr-count {
+        $attr-value: $attr-steps * $i;
+
+        .margin-#{$side}-#{$attr-value} {
+            margin-#{$side}: #{$attr-value}#{$unit};
+        }
+    }
+}
+
+@mixin scale($scale, $speed: 0.4s) {
+    transform: scale($scale);
+    -webkit-transition: transform $speed ease-in-out;
+    -moz-transition:transform $speed ease-in-out;
+    -ms-transition:transform $speed ease-in-out;
+}

package/scss/components/_tooltip.scss

@@ -0,0 +1,45 @@
+@use "sass:map";
+@import "./variables";
+
+.tooltip {
+    display: block !important;
+    z-index: 10000;
+
+    .tooltip-inner {
+        max-width: 300px;
+        padding: 6px 8px;
+        background: map.get($intems-colors, "background-top-menu");
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        color: map.get($intems-colors, "text-on-color");
+        font-size: $font-size-12;
+    }
+
+    &[x-placement^="top"] {
+        margin-bottom: 5px;
+    }
+
+    &[x-placement^="bottom"] {
+        margin-top: 5px;
+    }
+
+    &[x-placement^="right"] {
+        margin-left: 5px;
+    }
+
+    &[x-placement^="left"] {
+        margin-right: 5px;
+    }
+
+    &[aria-hidden="true"] {
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity 0.15s, visibility 0.15s;
+    }
+
+    &[aria-hidden="false"] {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.15s;
+    }
+}

package/scss/components/_utils.scss

@@ -0,0 +1,26 @@
+// Carousel
+// ==========================================================================
+
+$carousel-height: 400px !default;
+$carousel-item-height: calc(#{$carousel-height} / 2) !default;
+$carousel-item-width: $carousel-item-height !default;
+
+// Media Query Ranges
+// ==========================================================================
+
+$small-screen: 600px !default;
+$large-screen: 1200px !default;
+
+// Grid
+// ==========================================================================
+
+$gutter-width: 1.5rem !default;
+$element-top-margin: calc(#{$gutter-width} / 3) !default;
+$element-bottom-margin: calc(#{$gutter-width} * 2) / 3 !default;
+
+// Flow Text
+// ==========================================================================
+
+$range : calc(#{$large-screen} - #{$small-screen}) !default;
+$intervals: 20 !default;
+$interval-size: calc(#{$range} / #{$intervals}) !default;

package/scss/components/_variables.scss

@@ -0,0 +1,103 @@
+$intems-colors: (
+    "white": #ffffff,
+    "black": #000000,
+    "orangish": #ff8041,
+    "dark": #253746,
+    "maintext": #415464,
+
+    // primary colors
+    "primary": #00a58e,
+    "primary-hover": #008c79,
+    "primary-container-tag": #c2e9e4,
+
+    // new colors
+    // background start
+    "background": #f8fafc,
+    "overlay": #253746,
+    "tooltip": #253746,
+    // background end
+    //surface start
+    "surface-primary": #ffffff,
+    "surface-tertiary": #e2e8f0,
+    // surface end
+    // character start
+    "select": #f1f5f9,
+    "border": #cbd5e1,
+    "icon": #94a3b8,
+    "disable": #f1f5f9,
+    "hover": #e2e8f0,
+    // character end
+    // text start
+    "text-primary": #1a2732,
+    "text-secondary": #475569,
+    "text-disable": #94a3b8,
+    "text-on-color": #ffffff,
+    "text-tertiary": #64748b,
+    // text end
+    // functional start
+    "information": #186ade,
+    "information-container": #f0f4fa,
+    "success-container": #ebf7ed,
+    "warning-container": #faf6cf,
+    "error-container": #fff1f1,
+    "information-hover": #0d4ea6,
+    "success": #16a163,
+    "warning": #f5c518,
+    "warning-text": #8f3415,
+    "error": #da1e28,
+
+    // status colors
+    "error-container-tag": #ffd7d9,
+    "error-hover": #a2191f,
+    "information-container-tag": #d4e4fa,
+    "warning-container-tag": #fcddc7,
+
+    // accent
+    "accent": #ff8041,
+
+    // additional colors
+    "success-container-tag": #c7ebd1,
+    "green-70": #075e45,
+
+    //top menu
+    "background-top-menu": #253746,
+    "text-top-menu": #f8fafc,
+    "active-top-menu": #45d6ad,
+    "icon-top-menu": #45d6ad,
+    "accent-top-menu": #ff8041,
+    "intellihub-user-top-menu": #3b4d5d,
+);
+
+$font-open-sans: "open sans", sans-serif;
+$font-play: play, sans-serif;
+
+$font-size-10: 0.67rem;
+$font-size-12: 0.8rem;
+$font-size-14: 0.94rem;
+$font-size-16: 1.07rem;
+$font-size-18: 1.2rem;
+$font-size-20: 1.3rem;
+$font-size-24: 1.6rem;
+$font-size-28: 1.75rem;
+$font-size-36: 2.4rem;
+$font-size-40: 2.5rem;
+$font-size-50: 3.34rem;
+$font-size-80: 5.34rem;
+
+// Media Query Ranges
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600px !default;
+$medium-screen: 992px !default;
+$large-screen: 1200px !default;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
+$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
+$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
+
+$spaceamounts: (5, 7, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 80, 100);
+$sides: (top, bottom, left, right);

package/scss/main.scss

@@ -0,0 +1,7 @@
+// Fonts
+@import url("https://fonts.googleapis.com/css?family=Play:400,700&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap");
+
+@import "components/tooltip";
+@import "components/global";

package/shims-vue.d.ts

@@ -0,0 +1,9 @@
+// This code fix tslint error TS2307 Cannot find module *.vue when importing
+declare module "*.vue" {
+  import Vue from "vue";
+
+  export default Vue;
+}
+
+declare module "*.jpg";
+declare module "*.png";

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+        "module": "esnext",
+        "target": "es6",
+        "lib": [
+            "dom",
+            "es6",
+            "es2015.iterable",
+            "es2017.object",
+            "es2021"
+        ],
+        "downlevelIteration": true,
+        "experimentalDecorators": true,
+        "moduleResolution": "node",
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["./*"],
+        },
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "**/*.ts"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts"
+    ],
+    "files": [
+        "./shims-vue.d.ts"
+    ]
+}