@intellias/menu 1.0.0

package/components/give-kudos-form/GiveKudosForm.ts

@@ -0,0 +1,159 @@
+import { collect, Collection } from "collect.js";
+import { AxiosError } from "axios";
+import { maxLength, numeric, required } from "vuelidate/lib/validators";
+import BaseRepository from "../../repositories/BaseRepository";
+import { BaseUrl } from "../../repositories/BaseUrl";
+import KudosShareModel from "./models/KudosShareModel";
+import { ResponseState } from "../../helpers/response/ResponseState";
+import { DefaultContext } from "../../helpers/response/ResponseHelper";
+import ErrorsToToastHelper from "../../helpers/response/ErrorsToToastHelper";
+import UserPublicInfoModel from "../../models/user/PublicInfoModel";
+import UserExtendedInfoModel from "../../models/user/ExtendedInfoModel";
+import { KudosBalance } from "./validators/KudosBalance";
+import UserListModel from "./models/UserListModel";
+import { InEnglishValidatorRegex } from "./validators/InEnglishValidatorRegex";
+import { EventBus } from "../../buses/eventBus";
+import GiveKudosEvent from "../../buses/events/GiveKudosEvent";
+import UserSelectMixin from "./mixins/UserSelectMixin";
+import Modal from "../modal/Modal.vue";
+import VSelectIntems from "../v-select-intems/VSelectIntems.vue";
+import ActionButton from "../buttons/action-button/ActionButton.vue";
+import SecondaryButton from "../buttons/secondary-button/SecondaryButton.vue";
+
+export default {
+  mixins: [UserSelectMixin],
+  inject: ["storeAdapter"],
+  components: { Modal, ActionButton, SecondaryButton, VSelectIntems },
+  async beforeMount(): Promise<void> {
+    this.users = await this.repository.get();
+  },
+  mounted(): void {
+    this.openModalForm();
+  },
+  validations: {
+    kudosShare: {
+      points_amount: { required, numeric, between: KudosBalance },
+      comment: { regex: InEnglishValidatorRegex, maxLength: maxLength(500) },
+    },
+  },
+  computed: {
+    allUsers(): [] {
+      return this.users
+        .filter(
+          (employee) => employee.employee_id !== this.userData.employee_id
+        )
+        .all();
+    },
+    isDisabledSubmit(): boolean {
+      return (
+        !this.kudosShare.employee_id ||
+        this.kudosShare.points_amount <= 0 ||
+        this.kudosShare.share_reason === undefined ||
+        !this.kudosShare.comment ||
+        this.isLoadingSubmit
+      );
+    },
+    userData(): UserPublicInfoModel | UserExtendedInfoModel {
+      return this.storeAdapter.User.state.data;
+    },
+    employee: {
+      get(): number {
+        return this.kudosShare.employee_id;
+      },
+      set(val): void {
+        this.kudosShare.employee_id = val;
+      },
+    },
+  },
+  methods: {
+    async submit(): Promise<void> {
+      this.$v.$touch();
+      if (!this.$v.$invalid) {
+        this.isLoadingSubmit = true;
+        const repository = new BaseRepository(
+          BaseUrl.GiveKudos,
+          KudosShareModel
+        );
+        repository
+          .getResponseHelper()
+          .subscribe(
+            ResponseState.Resolved,
+            this.handleSuccess,
+            DefaultContext
+          );
+        repository
+          .getResponseHelper()
+          .subscribe(
+            ResponseState.Rejected,
+            (error) => this.handleError(error),
+            DefaultContext
+          );
+
+        const kudosShare = {
+          employee_id: this.employee.employee_id,
+          points_amount: this.kudosShare.points_amount,
+          share_reason: this.kudosShare.share_reason,
+          comment: this.kudosShare.comment,
+        };
+
+        await repository.post(kudosShare);
+
+        this.isLoadingSubmit = false;
+      }
+    },
+    handleError(error: AxiosError): void {
+      this.formDisabled = false;
+      ErrorsToToastHelper.showErrors(error);
+    },
+    handleSuccess(): void {
+      this.storeAdapter.Toasts.mutations.addMessage(
+        "You have given kudos successfully"
+      );
+      EventBus.dispatch(new GiveKudosEvent());
+      this.$modal.hide("giveKudos");
+    },
+    openModalForm(): void {
+      this.$v.$reset();
+      this.kudosShare = new KudosShareModel();
+      this.$modal.show("giveKudos");
+    },
+    closeModalForm(): void {
+      this.$emit("closed");
+      this.$modal.hide("giveKudos");
+    },
+  },
+  data(): Record<string, unknown> {
+    return {
+      repository: new BaseRepository(BaseUrl.GiveKudosUsersList, UserListModel),
+      users: collect() as Collection<UserListModel>,
+      kudosShare: new KudosShareModel(),
+      isLoadingSubmit: false,
+      kudosCategoryList: [
+        {
+          label: "One Team",
+          value: 5,
+        },
+        {
+          label: "Getting Things Done Humanly",
+          value: 6,
+        },
+        {
+          label: "Growth Mindset",
+          value: 7,
+        },
+        {
+          label: "Focus on Value",
+          value: 8,
+        },
+        {
+          label: "Equity, Diversity, Inclusivity",
+          value: 9,
+        },
+        {
+          label: "Welcome to Intellias",
+          value: 10,
+        },
+      ],
+    };
+  },
+};

package/components/give-kudos-form/GiveKudosForm.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="give-kudos">
+    <modal name="giveKudos" size="md">
+      <template slot="header">Give kudos</template>
+      <template slot="content">
+        <div class="subtitle">
+          <span>
+            Reward your colleagues with kudos to express gratitude for their
+            good work, expertise, friendship and support.
+          </span>
+          <br />
+          <a
+            href="https://confluence.intellias.com/pages/viewpage.action?pageId=46334516"
+            target="_blank"
+            rel="noopener"
+            >More details</a
+          >
+        </div>
+        <div class="form">
+          <div class="user">
+            <label for="user">Receiver’s name</label>
+            <v-select-intems
+              id="user"
+              v-model="employee"
+              v-bind:data="{
+                class: { 'select-with-avatars': true },
+                clearable: false,
+                options: userSelectOptions(allUsers),
+                label: userSelect.label,
+                filterBy: userSelect.filterBy,
+                placeholder: 'Select employee',
+              }"
+              @open="userSelectOnOpen"
+              @close="userSelectOnClose"
+              @search="userSelectOnSearch"
+            >
+              <template #list-footer>
+                <li
+                  v-show="userSelectHasNextPage"
+                  ref="loadUsers"
+                  class="loader"
+                ></li>
+              </template>
+            </v-select-intems>
+          </div>
+          <div class="block-kudos-category">
+            <label for="kudos-category">Kudos category</label>
+            <v-select-intems
+              id="kudos-category"
+              v-model="kudosShare.share_reason"
+              v-bind:data="{
+                clearable: false,
+                placeholder: 'Select category',
+                options: kudosCategoryList,
+                label: 'label',
+                reduce: (category) => category.value,
+              }"
+            ></v-select-intems>
+          </div>
+          <div class="block-kudos-quantity">
+            <label for="kudos-quantity">Kudos quantity</label>
+            <input
+              class="kudos-quantity"
+              id="kudos-quantity"
+              type="number"
+              v-model="kudosShare.points_amount"
+              min="1"
+              :max="userData.kudos_balance"
+              :class="{ 'error-field': $v.kudosShare.points_amount.$error }"
+            />
+            <div v-if="$v.kudosShare.points_amount.$error">
+              <div class="error" v-if="!$v.kudosShare.points_amount.numeric">
+                Should be be positive integer
+              </div>
+              <div
+                class="error"
+                v-if="!$v.kudosShare.points_amount.kudosBalance"
+              >
+                Your kudos balance is insufficient
+              </div>
+            </div>
+          </div>
+
+          <div class="description">
+            <label for="description">Comment</label>
+            <textarea
+              id="description"
+              placeholder="Describe what you are grateful for"
+              name="description"
+              v-model="kudosShare.comment"
+              :class="{ 'error-field': $v.kudosShare.comment.$error }"
+            ></textarea>
+            <div v-if="$v.kudosShare.comment.$error">
+              <div class="error" v-if="!$v.kudosShare.comment.regex">
+                Only Latin letters allowed
+              </div>
+              <div class="error" v-if="!$v.kudosShare.comment.maxLength">
+                Maximum length of this field is 500 symbols
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template slot="footer">
+        <secondary-button
+          :disabled="isLoadingSubmit"
+          @click.native="closeModalForm"
+          >Cancel</secondary-button
+        >
+        <action-button
+          class="btn-primary"
+          @click.native="submit()"
+          :is-disabled="isDisabledSubmit"
+          :is-loading="isLoadingSubmit"
+        >
+          Submit
+        </action-button>
+      </template>
+    </modal>
+  </div>
+</template>
+
+<script>
+import GiveKudosForm from "./GiveKudosForm";
+
+export default GiveKudosForm;
+</script>
+
+<style lang="scss">
+@import "GiveKudosForm";
+</style>

package/components/give-kudos-form/mixins/UserSelectMixin.ts

@@ -0,0 +1,57 @@
+import PublicInfoModel from "../../../models/user/PublicInfoModel";
+
+export default {
+  methods: {
+    filteredOptions(options: Array<PublicInfoModel>): Array<PublicInfoModel> {
+      return options.filter((option) => {
+        return this.userSelect.filterBy.some((filterKey) => {
+          return option[filterKey]
+            .toLowerCase()
+            .includes(this.userSelect.search.toLowerCase());
+        });
+      });
+    },
+    userSelectOptions(options: Array<PublicInfoModel>): Array<PublicInfoModel> {
+      return this.filteredOptions(options).slice(0, this.userSelect.limit);
+    },
+    userSelectHasNextPage(): boolean {
+      return this.userSelectOptions().length < this.filteredOptions().length;
+    },
+    async userSelectOnOpen(): Promise<void> {
+      if (this.userSelectHasNextPage) {
+        this.userSelect.observer = new IntersectionObserver(
+          this.infiniteScroll
+        );
+        await this.$nextTick();
+        this.userSelect.observer.observe(this.$refs.loadUsers);
+      }
+    },
+    userSelectOnClose(): void {
+      this.userSelect.search = "";
+      this.userSelect.observer.disconnect();
+    },
+    userSelectOnSearch(optionName: string): void {
+      this.userSelect.search = optionName;
+    },
+    async infiniteScroll([{ isIntersecting, target }]): Promise<void> {
+      if (isIntersecting) {
+        const ul = target.offsetParent;
+        const { scrollTop } = target.offsetParent;
+        this.userSelect.limit += 10;
+        await this.$nextTick();
+        ul.scrollTop = scrollTop;
+      }
+    },
+  },
+  data(): Record<string, unknown> {
+    return {
+      userSelect: {
+        label: "full_name",
+        filterBy: ["full_name", "full_name_reversed", "username"],
+        observer: null,
+        limit: 10 as number,
+        search: "" as string,
+      },
+    };
+  },
+};

package/components/give-kudos-form/models/KudosShareModel.ts

@@ -0,0 +1,6 @@
+export default class KudosShareModel {
+  employee_id = undefined as string;
+  points_amount = undefined as number;
+  share_reason = undefined as number;
+  comment = undefined as string;
+}

package/components/give-kudos-form/models/UserListModel.ts

@@ -0,0 +1,5 @@
+import UserPublicInfoModel from "../../../models/user/PublicInfoModel";
+
+export default class UserListModel extends UserPublicInfoModel {
+  disabled_option = undefined as boolean;
+}

package/components/give-kudos-form/validators/InEnglishValidatorRegex.ts

@@ -0,0 +1,17 @@
+const InEnglishValidatorRegex = (value: string) => {
+  if (!value) {
+    return true;
+  }
+
+  return !/[^\x00-\x7F]+/.test(value);
+};
+
+const InEnglishWithoutSymbolsRegex = (value: string) => {
+  if (!value) {
+    return true;
+  }
+
+  return /^[a-zA-Z0-9\s.,\n]*$/.test(value);
+};
+
+export { InEnglishValidatorRegex, InEnglishWithoutSymbolsRegex };

package/components/give-kudos-form/validators/KudosBalance.ts

@@ -0,0 +1,10 @@
+import UserExtendedInfoModel from "../../../models/user/ExtendedInfoModel";
+import { myOptions } from "../../../wrapper";
+
+const KudosBalance = (value: number) =>
+  value > 0 &&
+  value <=
+    (myOptions.storeAdapter.User.state.data as UserExtendedInfoModel)
+      .kudos_balance;
+
+export { KudosBalance };

package/components/modal/Modal.scss

@@ -0,0 +1,53 @@
+@use "sass:map";
+@import "../../scss/components/utils";
+@import "../../scss/components/variables";
+
+.modal {
+    &-wrapper {
+        padding-bottom: 1rem;
+        border-radius: 6px !important;
+        background-color: map.get($intems-colors, "surface-primary") !important;
+        box-shadow: 0 15px 30px rgba(37, 55, 70, 0.202715);
+        color: map.get($intems-colors, "text-primary");
+    }
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        padding: 2rem 2rem 1rem 2rem;
+        font-size: 1.25rem;
+        font-weight: bold;
+
+        i.icon:before {
+            background-color: map.get($intems-colors, "text-primary") !important;
+        }
+    }
+
+    &-content {
+        padding: 1rem 2rem;
+    }
+
+    &-close {
+        width: 15px !important;
+        min-width: 15px;
+        height: 15px !important;
+        cursor: pointer;
+    }
+
+    &-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 1rem 2rem;
+
+        .btn {
+            &:not(:first-child) {
+                margin-left: 1rem;
+            }
+        }
+    }
+}
+
+.vm--overlay {
+    background-color: rgba(37, 55, 70, 0.55) !important;
+    transition: 0.3s !important;
+}

package/components/modal/Modal.ts

@@ -0,0 +1,70 @@
+import { isMobile } from "mobile-device-detect";
+
+enum ModalSize {
+  mobile = "85%",
+  sm = "500px",
+  md = "780px",
+  lg = "968px",
+}
+
+enum ModalSizeName {
+  sm = "sm",
+  md = "md",
+  lg = "lg",
+}
+
+const modalSizeToName = new Map([
+  [ModalSizeName.sm, ModalSize.sm],
+  [ModalSizeName.md, ModalSize.md],
+  [ModalSizeName.lg, ModalSize.lg],
+]);
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: String,
+      default: ModalSizeName.sm,
+    },
+  },
+  methods: {
+    open(): void {
+      this.$modal.show(this.name);
+    },
+    close(): void {
+      this.$modal.hide(this.name);
+    },
+  },
+  computed: {
+    modalWidth(): string {
+      switch (this.size) {
+        case ModalSizeName.sm:
+          return !isMobile
+            ? modalSizeToName.get(ModalSizeName.sm)
+            : ModalSize.mobile;
+        case ModalSizeName.md:
+          return !isMobile
+            ? modalSizeToName.get(ModalSizeName.md)
+            : ModalSize.mobile;
+        case ModalSizeName.lg:
+          return !isMobile
+            ? modalSizeToName.get(ModalSizeName.lg)
+            : ModalSize.mobile;
+        default:
+          return ModalSize.mobile;
+      }
+    },
+    modalOptions(): Record<string, unknown> {
+      return {
+        classes: ["modal-wrapper"],
+        width: this.modalWidth,
+        height: "auto",
+        clickToClose: false,
+        scrollable: true,
+      };
+    },
+  },
+};

package/components/modal/Modal.vue

@@ -0,0 +1,28 @@
+<template>
+  <modal :name="name" v-bind="modalOptions">
+    <div class="modal-header">
+      <slot name="header">
+        <span>
+          <slot name="header"></slot>
+        </span>
+      </slot>
+      <i class="modal-close icon close" @click="close"></i>
+    </div>
+    <div v-if="!!$slots.content" class="modal-content">
+      <slot name="content"></slot>
+    </div>
+    <div v-if="!!$slots.footer" class="modal-footer">
+      <slot name="footer"></slot>
+    </div>
+  </modal>
+</template>
+
+<script>
+import Modal from "./Modal";
+
+export default Modal;
+</script>
+
+<style lang="scss">
+@import "Modal";
+</style>