@intellias/menu 1.0.2 → 1.0.4

package/components/buttons/secondary-button/SecondaryButton.scss

@@ -1,48 +0,0 @@
-@use "sass:map";
-@import "../../../scss/components/utils";
-@import "../../../scss/components/variables";
-
-.secondary-button {
-    position: relative;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    color: map.get($intems-colors, "text-primary");
-    text-transform: initial;
-    border-radius: 4px;
-    font-weight: 600;
-    line-height: 38px;
-
-    i.icon {
-        vertical-align: middle;
-    }
-
-    .spinner-solid {
-        color: map.get($intems-colors, "text-primary");
-        animation: spin 2s linear infinite;
-        vertical-align: middle;
-        transition: width 300ms, height 300ms;
-        margin-left: 8px;
-    }
-
-    .left-icon {
-        margin-right: 4px;
-    }
-
-    &.disabled,
-    &.btn-secondary:disabled,
-    &.btn[disabled] {
-        background-color: map.get($intems-colors, "disable") !important;
-        color: map.get($intems-colors, "text-disable");
-
-        .spinner-solid {
-            color: map.get($intems-colors, "text-disable") !important;
-        }
-    }
-}
-
-@keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/components/buttons/secondary-button/SecondaryButton.ts

@@ -1,28 +0,0 @@
-import VueRouter from "vue-router";
-
-export default {
-  name: "SecondaryButton",
-  props: {
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    mini: {
-      type: Boolean,
-      default: false,
-    },
-    large: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    iconLeft: {
-      type: String,
-      default: "",
-    },
-    to: undefined as VueRouter,
-  },
-};

package/components/buttons/secondary-button/SecondaryButton.vue

@@ -1,27 +0,0 @@
-<template>
-    <router-link class="btn btn-secondary secondary-button waves-effect" v-if="to" :to="to">
-        <slot></slot>
-    </router-link>
-    <button
-        v-else
-        type="button"
-        class="btn btn-secondary secondary-button waves-effect"
-        :class="{ 'btn-mini': mini, 'btn-large': large }"
-        :disabled="isDisabled"
-    >
-        <i v-if="iconLeft" class="left-icon icon icon-small" :class="iconLeft"></i>
-        <span class="span-text">
-            <slot>Click me</slot>
-        </span>
-        <i v-show="isLoading" class="icon icon-small spinner-solid loading"></i>
-    </button>
-</template>
-
-<script lang="ts">
-import SecondaryButton from './SecondaryButton.ts';
-
-export default SecondaryButton;
-</script>
-<style lang="scss">
-@import 'SecondaryButton';
-</style>

package/components/confirm/Confirm.scss

@@ -1,44 +0,0 @@
-@use "sass:map";
-@import "../../scss/components/utils";
-@import "../../scss/components/variables";
-
-.modal.confirm {
-    box-sizing: border-box;
-    min-width: 280px;
-    min-height: 150px;
-    flex-direction: column;
-    background-color: map.get($intems-colors, "text-on-color");
-    position: fixed;
-
-    &.open {
-        display: flex !important;
-    }
-
-    .header {
-        padding-bottom: 10px;
-
-        i.modal-close {
-            float: right;
-            height: 24px;
-            line-height: 24px;
-        }
-
-        h3 {
-            color: map.get($intems-colors, "text-primary");
-        }
-
-        + .modal-footer {
-            padding-top: 30px;
-        }
-    }
-
-    .modal-content {
-        white-space: normal;
-        color: map.get($intems-colors, "text-primary");
-        overflow: initial;
-        font-weight: normal;
-        line-height: normal;
-        margin-right: 0;
-        padding-right: 0;
-    }
-}

package/components/confirm/Confirm.ts

@@ -1,82 +0,0 @@
-import Modal from "../modal/Modal.vue";
-import ActionButton from "../../components/buttons/action-button/ActionButton.vue";
-import SecondaryButton from "../../components/buttons/secondary-button/SecondaryButton.vue";
-import { required, maxLength } from "vuelidate/lib/validators";
-import { onlyLatin } from "../../helpers/Validations";
-
-export type Comment = {
-  placeholder?: string;
-  description?: string;
-  required?: boolean;
-};
-
-type Form = {
-  comment?: string;
-};
-
-export default {
-  components: { Modal, SecondaryButton, ActionButton },
-  props: {
-    title: String,
-    description: String,
-    submitBtn: {
-      type: String,
-      default: "Yes",
-    },
-    rejectBtn: {
-      type: String,
-      default: "No",
-    },
-    comment: undefined as Comment,
-  },
-  validations: {
-    form: {
-      comment: { required, maxLength: maxLength(300), onlyLatin },
-    },
-  },
-  methods: {
-    open(payload?: unknown): void {
-      this.payload = payload;
-      this.$modal.show("confirm");
-    },
-    confirm(): void {
-      this.$emit(
-        "confirmed",
-        Object.keys(this.form).length ? this.form : this.payload
-      );
-      this.$modal.hide("confirm");
-      this.reset();
-    },
-    confirmWithValidation(): void {
-      this.$v.$touch();
-      if (!this.$v.$invalid) {
-        this.confirm();
-      }
-    },
-    reject(): void {
-      this.$modal.hide("confirm");
-      this.reset();
-
-      this.$emit("rejected", this.payload);
-    },
-    reset(): void {
-      this.$v.$reset();
-      this.form = {};
-    },
-  },
-  computed: {
-    hasForm(): boolean {
-      return this.comment;
-    },
-    hasDefaultSlot() {
-      return !!this.$slots.default;
-    },
-  },
-  data(): Record<string, unknown> {
-    return {
-      payload: undefined,
-      options: { dismissible: false },
-      form: {} as Form,
-    };
-  },
-};

package/components/confirm/Confirm.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="confirm">
-    <modal name="confirm" size="md">
-      <template slot="header">
-        {{ title ? title : "Confirm?" }}
-      </template>
-      <template slot="content">
-        <p>{{ description ? description : "" }}</p>
-        <form class="intems-form p-t-10" v-if="hasForm">
-          <div :class="{ 'form-group--error': $v.form.comment.$error }">
-            <div class="form-group">
-              <label v-if="comment.description" class="form__label">{{
-                comment.description
-              }}</label>
-              <textarea
-                ref="comment"
-                id="comment"
-                class="form__input"
-                spellcheck="false"
-                v-model="form.comment"
-                :placeholder="comment.placeholder"
-                @keydown.stop=""
-              ></textarea>
-              <div v-if="$v.form.comment.$error">
-                <div class="error" v-if="!$v.form.comment.required">
-                  Comment is required
-                </div>
-                <div class="error" v-if="!$v.form.comment.maxLength">
-                  Maximum length of this field is 300 symbols
-                </div>
-                <div class="error" v-if="!$v.form.comment.onlyLatin">
-                  Only Latin letters allowed
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-        <slot name="confirm-content"></slot>
-      </template>
-      <template slot="footer">
-        <slot name="footer-description"></slot>
-
-        <secondary-button @click.native="reject">
-          {{ rejectBtn }}
-        </secondary-button>
-        <action-button
-          @click.native="hasForm ? confirmWithValidation() : confirm()"
-        >
-          {{ submitBtn }}
-        </action-button>
-      </template>
-    </modal>
-  </div>
-</template>
-
-<script>
-import Confirm from "./Confirm";
-
-export default Confirm;
-</script>
-
-<style lang="scss">
-@import "./Confirm";
-</style>

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

@@ -1,114 +0,0 @@
-@use "sass:map";
-@import "../../scss/components/variables";
-
-.give-kudos {
-    .user {
-        ul {
-            max-height: 200px;
-        }
-    }
-
-    a {
-        font-weight: bold;
-    }
-
-    .subtitle {
-        padding: 0px 0 30px 0;
-    }
-
-    .form {
-        .vs__selected-options {
-            span.vs__selected {
-                white-space: nowrap;
-            }
-
-            flex-wrap: nowrap;
-        }
-
-        display: grid;
-        grid-template-columns: auto 207px;
-        grid-gap: 15px;
-
-        .kudos-quantity {
-            height: 38px;
-            margin: 0;
-            border: solid 1px map.get($intems-colors, "border");
-            background-color: map.get($intems-colors, "surface-primary");
-            padding: 0 15px;
-            width: 175px;
-        }
-
-        input.kudos-quantity:focus {
-            border: solid 1px map.get($intems-colors, "primary");
-            box-shadow: none;
-        }
-
-        /* Chrome, Safari, Edge, Opera */
-        input::-webkit-outer-spin-button,
-        input::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-
-        /* Firefox */
-        input[type="number"] {
-            -moz-appearance: textfield;
-        }
-
-        .user {
-            grid-column: span 2;
-            margin-right: 1px;
-        }
-
-        .block-kudos-quantity {
-            width: 190px;
-        }
-
-        .block-kudos-category {
-            margin-right: 5px;
-        }
-
-        .description {
-            grid-column: span 2;
-
-            textarea {
-                resize: none;
-                min-height: 100px;
-                max-height: 300px;
-                min-width: 100%;
-                max-width: 100%;
-                border-radius: 2px;
-                border: solid 1px map.get($intems-colors, "border");
-                outline: none;
-                padding: 10px;
-            }
-
-            margin-right: 1px;
-        }
-
-        label {
-            display: flex;
-            font-size: $font-size-14;
-            margin-bottom: 10px;
-            color: map.get($intems-colors, "text-primary");
-        }
-
-        .error {
-            font-size: $font-size-12;
-        }
-
-        .error-field {
-            border: solid 1px map.get($intems-colors, "error");
-        }
-    }
-
-    button.btn-large[disabled] {
-        background-color: map.get($intems-colors, "primary-container-tag") !important;
-    }
-
-    .vs__clear {
-        svg {
-            display: none;
-        }
-    }
-}

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

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

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