hl-core 0.0.7-beta.10 → 0.0.7-beta.11

package/components/Button/Btn.vue

@@ -3,7 +3,7 @@
     type="button"
     class="transition-all"
     @click="$emit('clicked')"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     :class="[
       disabled ? 'disabled' : '',
       classes,
@@ -11,7 +11,8 @@
       $libStyles[`btnH${$capitalize(size)}` as keyof typeof $libStyles],
     ]"
   >
-    {{ text }}
+    <base-loader v-if="loading" :size="24" color="#FFF" bg-color="" :width="2"></base-loader>
+    <span v-if="!loading">{{ text }}</span>
   </button>
 </template>
 
@@ -35,6 +36,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
     btn: {
       type: String,
       default: new Styles().blueBtn,

package/components/Layout/Drawer.vue

@@ -6,7 +6,7 @@
     class="sm:!w-[400px] lg:!relative !right-0"
     :class="[$dataStore[whichPanel].overlay ? 'lg:!hidden' : '', $dataStore[whichPanel].open ? '!w-full lg:!w-[420px]' : 'lg:!w-[0px]']"
   >
-    <base-header :title="panelTitle" :has-back="true" back-icon="mdi-close" class="justify-center" @onBack="$dataStore[whichPanel].open = false"></base-header>
+    <base-header :title="panelTitle" :has-back="true" back-icon="mdi-close" class="justify-center" @onBack="closePanel"></base-header>
     <div class="flex flex-col" id="panel-actions">
       <slot></slot>
     </div>
@@ -26,8 +26,17 @@ export default defineComponent({
       default: 'panel',
     },
   },
-  setup() {
-    return {};
+  setup(props) {
+    const dataStore = useDataStore();
+
+    const closePanel = () => {
+      dataStore[props.whichPanel].open = false;
+      dataStore.panelAction = null;
+    };
+
+    return {
+      closePanel,
+    };
   },
 });
 </script>

package/components/Menu/MenuNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="w-full lg:w-1/4 bg-white flex flex-col border-r-2">
+  <aside class="w-full lg:w-1/4 bg-white flex flex-col border-r-2 relative">
     <base-header
       class="justify-center"
       :title="title"
@@ -29,6 +29,32 @@
         </div>
       </base-fade-transition>
       <slot name="end"></slot>
+      <slot name="actions"></slot>
+      <base-fade-transition>
+        <div
+          v-if="$dataStore.buttons && $dataStore.buttons.length"
+          class="flex flex-col gap-[10px] justify-self-end absolute bottom-5 lg:bottom-[30%] w-full pr-4"
+        >
+          <div v-for="(item, index) of $dataStore.buttons" :key="index">
+            <transition
+              enter-active-class="animate__animated animate__fadeIn animate__faster"
+              leave-active-class="animate__animated animate__fadeOut animate__faster"
+            >
+              <base-btn
+                v-if="
+                  'show' in item && typeof item.show === 'boolean'
+                    ? item.show
+                    : true
+                "
+                :text="item.title!"
+                :btn="item.color"
+                :disabled="!!item.disabled"
+                @click="item.action"
+              >
+              </base-btn>
+            </transition>
+          </div></div
+      ></base-fade-transition>
     </section>
   </aside>
 </template>

package/composables/classes.ts

@@ -12,7 +12,11 @@ class MenuItemConfig {
   url?: string | null;
   initial?: object | null;
   icon?: string | null;
-  action?: Function;
+  action?: Function | void;
+  disabled?: typeof computed;
+  color?: string;
+  show?: typeof computed;
+
   constructor(
     id: any = null,
     title: string | null = null,
@@ -22,7 +26,10 @@ class MenuItemConfig {
     url?: string | null,
     initial?: object | null,
     icon?: string | null,
-    action?: Function,
+    action?: Function | void,
+    disabled?: typeof computed,
+    color?: string,
+    show?: typeof computed,
   ) {
     this.id = id;
     this.title = title;
@@ -33,12 +40,15 @@ class MenuItemConfig {
     this.initial = initial;
     this.icon = icon;
     this.action = action;
+    this.disabled = disabled;
+    this.color = color;
+    this.show = show;
   }
 }
 
 export class MenuItem extends MenuItemConfig {
-  constructor({ id, title, link, hasLine, description, url, initial, icon, action }: MenuItemConfig = new MenuItemConfig()) {
-    super(id, title, link, hasLine, description, url, initial, icon, action);
+  constructor({ id, title, link, hasLine, description, url, initial, icon, action, disabled, color, show }: MenuItemConfig = new MenuItemConfig()) {
+    super(id, title, link, hasLine, description, url, initial, icon, action, disabled, color, show);
   }
 }
 
@@ -768,6 +778,8 @@ export class DataStoreClass {
     overlay: boolean;
     items: MenuItem[];
   };
+  buttons: MenuItem[];
+  panelAction: string | null;
   panel: {
     open: boolean;
     overlay: boolean;
@@ -876,11 +888,13 @@ export class DataStoreClass {
       overlay: false,
       items: [],
     };
+    this.buttons = [];
     this.panel = {
       open: false,
       overlay: false,
       title: '',
     };
+    this.panelAction = null;
     this.historyPageIndex = 1;
     this.historyPageSize = 10;
     this.historyTotalItems = 0;

package/composables/constants.ts

@@ -26,6 +26,8 @@ export const constants = Object.freeze({
     agentMycar: 'AgentMycar',
     analyst: 'Analyst',
     upk: 'UPK',
+    financeCenter: 'FinanceCenter',
+    supervisor: 'Supervisor',
   },
   actions: {
     accept: 'accept',
@@ -38,6 +40,13 @@ export const constants = Object.freeze({
   },
   yearCases: [2, 0, 1, 1, 1, 2],
   yearTitles: ['год', 'года', 'лет'],
+  panelActions: {
+    accept: 'accept',
+    claim: 'claim',
+    return: 'return',
+    reject: 'reject',
+    rejectclient: 'rejectclient',
+  },
   postActions: {
     route: 'route',
     applicationCreated: 'applicationCreated',

package/composables/styles.ts

@@ -5,10 +5,12 @@ export class Styles {
   blackText: string = 'text-black';
   bodyBg: string = '!bg-[#F5F5F5]';
 
+  whiteTextHover: string = 'hover:text-[#FFFFFF]';
   // Blue
   blueBg: string = 'bg-[#A0B3D8]';
   blueBgHover: string = 'hover:bg-[#96abd6]';
   blueBgLight: string = 'bg-[#F3F6FC]';
+  blueBgLightHover: string = 'hover:bg-[#F3F6FC]';
   blueText: string = 'text-[#A0B3D8]';
   blueTextLight: string = 'text-[#F3F6FC]';
 
@@ -27,11 +29,11 @@ export class Styles {
   greyIconBg: string = 'bg-[#DADADA]';
   greyBtnBg: string = 'bg-[#EEE6E6]';
   greyBtnDisabledBg: string = 'bg-[#919191]';
-
+  blueLightBgHover: string = 'hover:bg-[#F3F6FC]';
   // Red
-  redText: string = 'text-[#E46962]';
-  redBg: string = 'bg-[#E46962]';
-
+  redText: string = 'text-[#FF897D]';
+  redBg: string = 'bg-[#FF897D]';
+  redBgHover: string = 'hover:bg-[#ff9b91]';
   // Error
   errorBg: string = 'bg-[#FF5449]';
   errorText: string = 'text-[#FF5449]';
@@ -48,17 +50,27 @@ export class Styles {
   btnHSm: string = 'h-[40px]';
   btnHMd: string = 'h-[60px]';
   btnHLg: string = 'h-[60px]';
-
-  // Complex
   greenBtn: string;
   blueBtn: string;
+  redBtn: string;
+  whiteBtn: string;
+  blueLightBtn: string;
+
+  // Complex
+  flexColNav: string;
 
   // Muted or disabled
   mutedText: string = 'text-[#99A3B3]';
 
   constructor() {
-    // Complex
+    // Button
     this.greenBtn = `${this.greenBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.greenBgHover}`;
+    this.redBtn = `${this.redBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.redBgHover}`;
     this.blueBtn = `${this.blueBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.blueBgHover}`;
+    this.whiteBtn = ` ${this.blackText} ${this.textTitle} ${this.rounded} w-full ${this.blueLightBgHover}`;
+    this.blueLightBtn = `${this.blueBgLight} ${this.greyTextLight} ${this.textTitle} ${this.rounded} w-full ${this.blueBgLightHover}`;
+
+    // Complex
+    this.flexColNav = 'flex flex-col gap-[10px] px-2 pt-[14px]';
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hl-core",
-  "version": "0.0.7-beta.10",
+  "version": "0.0.7-beta.11",
   "license": "MIT",
   "private": false,
   "main": "nuxt.config.ts",

package/store/data.store.js

@@ -91,7 +91,18 @@ export const useDataStore = defineStore('data', {
           this.refreshToken = response.refreshToken;
           this.getUserRoles();
         }
-        if (this.isManager() || this.isUnderwriter() || this.isAdmin() || this.isAgent() || this.isCompliance() || this.isAgentMycar() || this.isAnalyst() || this.isUpk()) {
+        if (
+          this.isManager() ||
+          this.isUnderwriter() ||
+          this.isAdmin() ||
+          this.isAgent() ||
+          this.isCompliance() ||
+          this.isAgentMycar() ||
+          this.isAnalyst() ||
+          this.isUpk() ||
+          this.isFinanceCenter() ||
+          this.isSupervisor()
+        ) {
           localStorage.setItem('accessToken', this.accessToken);
           localStorage.setItem('refreshToken', this.refreshToken);
         } else {
@@ -154,6 +165,13 @@ export const useDataStore = defineStore('data', {
     isUpk() {
       return this.isRole(constants.roles.upk);
     },
+    isFinanceCenter() {
+      return this.isRole(constants.roles.financeCenter);
+    },
+    isSupervisor() {
+      return this.isRole(constants.roles.supervisor);
+    },
+
     isProcessEditable(statusCode) {
       return !!constants.editableStatuses.find(status => status === statusCode);
     },
@@ -1816,6 +1834,46 @@ export const useDataStore = defineStore('data', {
         return false;
       }
     },
+    async handleTask(action, taskId, comment) {
+      if (action && Object.keys(constants.actions).includes(action)) {
+        switch (action) {
+          case constants.actions.claim: {
+            try {
+              this.isLoading = true;
+              await this.api.claimTask(this.formStore.applicationTaskId);
+              await this.getApplicationData(taskId, false, false, false);
+              this.showToaster('success', this.t('toaster.successOperation'), 3000);
+            } catch (err) {
+              console.log(err);
+              if ('response' in err && err.response.data) {
+                this.showToaster('error', err.response.data, 3000);
+              }
+            }
+          }
+          case constants.actions.reject:
+          case constants.actions.return:
+          case constants.actions.rejectclient:
+          case constants.actions.accept: {
+            try {
+              await this.sendTask(taskId, action, comment);
+              this.formStore.$reset();
+              if (this.isEFO) {
+                await this.router.push({ name: 'Insurance-Product' });
+              } else {
+                this.sendToParent(constants.postActions.toHomePage, this.t('toaster.successOperation') + 'SUCCESS');
+              }
+            } catch (err) {
+              console.log(err);
+              if ('response' in err && err.response.data) {
+                this.showToaster('error', err.response.data, 3000);
+              }
+            }
+          }
+        }
+      } else {
+        console.error('No handleTask action');
+      }
+    },
     async getInvoiceData(processInstanceId) {
       try {
         const response = await this.api.getInvoiceData(processInstanceId);

package/store/messages.ts

@@ -130,6 +130,8 @@ export const messages = {
       toPayment: 'Перейти к оплате',
       calcSum: 'Рассчитать сумму',
       calcPremium: 'Рассчитать премию',
+      accept: 'Одобрить',
+      reject: 'Отказать',
     },
     error: {
       title: 'Ошибка 404',