hl-core 0.0.9-beta.3 → 0.0.9-beta.31

package/composables/fields.ts

@@ -0,0 +1,203 @@
+import { i18n } from '../configs/i18n';
+import { FieldTypes } from '../types/form';
+
+const t = i18n.t;
+
+export const FieldBase = ({
+  label = '',
+  placeholder = '',
+  readonly = false,
+  disabled = false,
+  modelValue = null,
+  iconName = null,
+  rules = [],
+  maxLength = null,
+  clearable = true,
+  hint = undefined,
+  suffix = null,
+  maska = null,
+  key = '',
+  fetchFrom = null,
+}: InputBase): InputBase =>
+  ({
+    label,
+    placeholder,
+    readonly,
+    disabled,
+    modelValue,
+    iconName,
+    rules,
+    maxLength,
+    clearable,
+    hint,
+    suffix,
+    maska,
+    key,
+    fetchFrom,
+  } as InputBase);
+
+export const TextInput = ({ ...rest }: Partial<TextInput>): TextInput => {
+  return {
+    ...FieldBase(rest),
+    type: FieldTypes.TEXT,
+  };
+};
+
+export const SwitchInput = ({ ...rest }: Partial<SwitchInput>): SwitchInput => {
+  return {
+    ...FieldBase(rest),
+    type: FieldTypes.SWITCH,
+    direction: 'horizontal',
+    trueValue: null,
+    falseValue: null,
+    labeling: false,
+  };
+};
+
+export const NumberInput = ({ ...rest }: Partial<NumberInput>): NumberInput => {
+  return {
+    ...FieldBase(rest),
+    type: FieldTypes.NUMBER,
+  };
+};
+
+export const dynamic = <T>(obj: T, key: keyof T) => {
+  return computed({
+    get: () => {
+      const value = obj[key];
+      if (typeof value === 'object' && value) {
+        if ('nameRu' in value) return value.nameRu as any;
+      }
+      return value;
+    },
+    set: (val: any) => {
+      obj[key] = val;
+    },
+  });
+};
+
+type PersonalDataKeys = 'iin' | 'phoneNumber' | 'lastName' | 'firstName' | 'middleName' | 'citizenship' | 'position' | 'email' | 'gender';
+type PersonalData = Record<PersonalDataKeys, InputType>;
+
+type AddressesKeys = 'country' | 'province' | 'regionType' | 'city' | 'quarter' | 'microDistrict' | 'street' | 'houseNumber';
+type Address = Record<AddressesKeys, InputType>;
+
+type RepeatedFields = {
+  personalData: PersonalData;
+  address: Address;
+};
+
+export const RepeatedFields: RepeatedFields = {
+  personalData: {
+    iin: TextInput({
+      label: t('form.iin'),
+      maska: 'iin',
+    }),
+    phoneNumber: TextInput({
+      label: t('form.phoneNumber'),
+      maska: 'phone',
+    }),
+    lastName: TextInput({
+      label: t('form.lastName'),
+    }),
+    firstName: TextInput({
+      label: t('form.firstName'),
+    }),
+    middleName: TextInput({
+      label: t('form.middleName'),
+    }),
+    citizenship: TextInput({
+      label: t('clients.form.citizenship'),
+      iconName: 'arrowRight',
+      fetchFrom: 'getCountries',
+    }),
+    position: TextInput({
+      label: t('clients.form.namePosition'),
+    }),
+    email: TextInput({
+      label: t('form.email'),
+    }),
+    gender: TextInput({
+      label: t('form.gender'),
+    }),
+  },
+  address: {
+    country: TextInput({
+      label: t('form.Country'),
+      iconName: 'arrowRight',
+      fetchFrom: 'getCountries',
+    }),
+    province: TextInput({
+      label: t('form.Province'),
+      iconName: 'arrowRight',
+      fetchFrom: 'getStates',
+    }),
+    regionType: TextInput({
+      label: t('form.RegionType'),
+      iconName: 'arrowRight',
+      fetchFrom: 'getLocalityTypes',
+    }),
+    city: TextInput({
+      label: t('form.City'),
+      iconName: 'arrowRight',
+      fetchFrom: 'getCities',
+    }),
+    quarter: TextInput({
+      label: t('form.Quarter'),
+    }),
+    microDistrict: TextInput({
+      label: t('form.MicroDistrict'),
+    }),
+    street: TextInput({
+      label: t('form.Street'),
+    }),
+    houseNumber: TextInput({
+      label: t('form.NumberHouse'),
+    }),
+  },
+};
+
+export class BaseFields {
+  public mutatedList: InputType[] = [];
+  public fieldsLength: number = 0;
+
+  init<T extends keyof RepeatedFields>(sectionName: T, fieldsOrder?: (keyof RepeatedFields[T])[] | null, excludeFields?: (keyof RepeatedFields[T])[] | null): InputType[] {
+    const inputsWithDefinedKey = Object.entries(RepeatedFields[sectionName]).map(([key, field]: [string, InputType]) => {
+      return { ...field, key };
+    });
+
+    const originalFields = Object.values(RepeatedFields[sectionName]);
+
+    if (fieldsOrder && !excludeFields) {
+      this.fieldsLength = fieldsOrder.length;
+      return inputsWithDefinedKey
+        .filter((field: InputType) => fieldsOrder.includes(field.key))
+        .sort((a: InputType, b: InputType) => {
+          return fieldsOrder.indexOf(a.key) - fieldsOrder.indexOf(b.key);
+        });
+    }
+
+    if (!fieldsOrder && excludeFields) {
+      this.fieldsLength = originalFields.length - excludeFields.length;
+      return inputsWithDefinedKey.filter((field: InputType) => !excludeFields.includes(field.key));
+    }
+
+    this.fieldsLength = originalFields.length;
+    return originalFields;
+  }
+
+  setModels(modelList: any[]) {
+    if (modelList.length !== this.fieldsLength) {
+      throw new Error('Invalid v-models');
+    } else {
+      return this.mutatedList.map((field: InputType, index: number) => {
+        return { ...field, modelValue: modelList[index] };
+      });
+    }
+  }
+
+  getFields<T extends keyof RepeatedFields>(sectionName: T, fieldsOrder?: (keyof RepeatedFields[T])[] | null, excludeFields?: (keyof RepeatedFields[T])[] | null): this {
+    this.mutatedList = this.init(sectionName, fieldsOrder, excludeFields);
+    return this;
+  }
+}

package/composables/index.ts

@@ -30,6 +30,7 @@ export class Masks {
   date: string = '##.##.####';
   post: string = '######';
   threeDigit: string = '###';
+  iik: string = 'KZ################';
 }
 
 export const useMask = () => new Masks();
@@ -254,3 +255,50 @@ export const setAddressBeneficiary = (whichIndex: number, sameAddress: boolean)
     }
   }
 };
+
+export const changeBridge = async (toBridge: 'efo' | 'lka', token: string) => {
+  const bridgeUrl = ref<string>(import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string);
+  if (!toBridge) return;
+  if (!bridgeUrl.value || !token) {
+    useDataStore().showToaster('error', `${useDataStore().t('toaster.noUrl')} [import.meta.env.VITE_${toBridge.toUpperCase()}_URL]`);
+    return;
+  }
+  const host = window.location.hostname;
+  if (toBridge === 'efo') {
+    if (host.startsWith('bpmsrv02') && bridgeUrl.value !== 'http://bpmsrv02:88') bridgeUrl.value = 'http://bpmsrv02:88';
+    if (host.startsWith('vega') && bridgeUrl.value !== 'http://vega:800') bridgeUrl.value = 'http://vega:800';
+  }
+  if (toBridge === 'lka') {
+    if (host.startsWith('bpmsrv02') && bridgeUrl.value !== 'http://bpmsrv02:890') bridgeUrl.value = 'http://bpmsrv02:890';
+    if (host.startsWith('vega') && bridgeUrl.value !== 'http://vega:890') bridgeUrl.value = 'http://vega:890';
+  }
+  window.open(`${bridgeUrl.value}/#/Token?token=${token}`, '_blank');
+};
+
+export const getFirstDayOfMonth = (year: number, month: number) => {
+  const date = new Date();
+  return new Date(year, month, 1, (date.getTimezoneOffset() / 60) * -1).toISOString();
+};
+
+export const getLastDayOfMonth = (year: number, month: number) => {
+  const date = new Date();
+  return new Date(year, month + 1, 0, (date.getTimezoneOffset() / 60) * -1).toISOString();
+};
+
+type WhichValuePerEnv = 'qrGenUrl';
+
+export const getValuePerEnv = (which: WhichValuePerEnv) => {
+  type Envs = Exclude<EnvModes, 'vercel'>;
+  const valuesPerEnv: {
+    [key in WhichValuePerEnv]: {
+      [key in Envs]: string;
+    };
+  } = {
+    qrGenUrl: {
+      production: 'mobileSign:https://test-sign.halyklife.kz/EgovQr',
+      development: 'mobileSign:https://test-sign.halyklife.kz/EgovQr',
+      test: 'mobileSign:https://test-sign.halyklife.kz/EgovQr',
+    },
+  };
+  return valuesPerEnv[which][useEnv().envMode as Envs];
+};

package/composables/styles.ts

@@ -1,8 +1,8 @@
 export class Styles {
   // Base
-  whiteBg: string = 'bg-white';
-  whiteText: string = 'text-white';
-  blackText: string = 'text-black';
+  whiteBg: string = 'bg-[#FFF]';
+  whiteText: string = '!text-[#FFF]';
+  blackText: string = '!text-[#000]';
   bodyBg: string = '!bg-[#F5F5F5]';
 
   whiteTextHover: string = 'hover:text-[#FFFFFF]';
@@ -11,7 +11,7 @@ export class Styles {
   blueBgHover: string = 'hover:bg-[#96abd6]';
   blueBgLight: string = 'bg-[#F3F6FC]';
   blueBgLightHover: string = 'hover:bg-[#f5f8fd]';
-  blueText: string = 'text-[#A0B3D8]';
+  blueText: string = '!text-[#A0B3D8]';
   blueTextLight: string = 'text-[#F3F6FC]';
 
   // Green
@@ -23,13 +23,13 @@ export class Styles {
   greenBgLightHover: string = 'hover:bg-[#dbf0e4]';
 
   // Yellow
-  yellowText: string = 'text-[#FAB31C]';
+  yellowText: string = '!text-[#FAB31C]';
   yellowBg: string = 'bg-[#FAB31C]';
   yellowBgHover: string = 'hover:bg-[#FAB31C]';
 
   // Grey
   greyBg: string = 'bg-[#B8B8B8]';
-  greyText: string = 'text-[#B8B8B8]';
+  greyText: string = '!text-[#B8B8B8]';
   greyTextLight: string = 'text-[#B8B8B8]';
   greyIcon: string = 'text-[#DADADA]';
   greyIconBg: string = 'bg-[#DADADA]';
@@ -39,15 +39,22 @@ export class Styles {
   greyTextDark: string = 'text-[#9197A1]';
 
   // Red
-  redText: string = 'text-[#FD2D39]';
+  redText: string = '!text-[#FD2D39]';
   redBg: string = 'bg-[#FF897D]';
   redBgHover: string = 'hover:bg-[#ff9b91]';
   // Error
   errorBg: string = 'bg-[#FF5449]';
-  errorText: string = 'text-[#FF5449]';
+  errorText: string = '!text-[#FF5449]';
 
   // Border
   rounded: string = 'rounded-[8px]';
+  roundedT: string = 'rounded-t-[8px]';
+  roundedB: string = 'rounded-b-[8px]';
+  blueBorder: string = 'border-[1px] border-[#A0B3D8]';
+  blueLightBorder: string = 'border-[1px] border-[#F3F6FC]';
+  greenBorder: string = 'border-[1px] border-[#009C73]';
+  redBorder: string = 'border-[1px] border-[#FD2D39]';
+  yellowBorder: string = 'border-[1px] border-[#FAB31C]';
 
   // Text
   textSimple: string = 'text-[14px] leading-5';
@@ -63,6 +70,8 @@ export class Styles {
   redBtn: string;
   yellowBtn: string;
   whiteBtn: string;
+  whiteBorderBtn: string;
+  whiteBtnBlueBr: string;
   blueLightBtn: string;
   greenLightBtn: string;
 
@@ -70,9 +79,10 @@ export class Styles {
   flexColNav: string;
   emptyBlockCol: string;
   scrollPage: string;
+  flexCenter: string = 'flex items-center justify-center';
 
   // Muted or disabled
-  mutedText: string = 'text-[#99A3B3]';
+  mutedText: string = '!text-[#99A3B3]';
   disabled: string = 'cursor-not-allowed opacity-50';
 
   constructor() {
@@ -81,14 +91,16 @@ export class Styles {
     this.redBtn = `${this.redBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.redBgHover}`;
     this.yellowBtn = `${this.yellowBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.yellowBgHover}`;
     this.blueBtn = `${this.blueBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.blueBgHover}`;
+    this.whiteBtnBlueBr = `${this.whiteBg} ${this.blueText} ${this.textTitle} ${this.rounded} w-full ${this.blueBgLightHover} ${this.blueBorder}`;
     this.whiteBtn = ` ${this.blackText} ${this.textTitle} ${this.rounded} w-full ${this.blueLightBgHover}`;
+    this.whiteBorderBtn = ` ${this.blackText} ${this.textTitle} ${this.rounded} w-full ${this.blueLightBgHover} border-[#A0B3D8] border-[1px]`;
     this.blueLightBtn = `${this.blueBgLight} ${this.greyTextLight} ${this.textTitle} ${this.rounded} w-full ${this.blueBgLightHover}`;
     this.greenLightBtn = `${this.greenBgLight} ${this.greenText} ${this.textTitle} ${this.rounded} w-full ${this.greenBgLightHover}`;
 
     // Complex
     this.flexColNav = 'flex flex-col gap-[10px] px-2 pt-[14px]';
     this.emptyBlockCol = 'w-[60px] sm:w-[100px] h-[30%] rounded-[8px] bg-[#f5f5f5]';
-    this.scrollPage = 'max-h-[90vh] overflow-y-scroll';
+    this.scrollPage = 'max-h-[85svh] overflow-y-scroll';
   }
 }
 

package/configs/i18n.ts

@@ -1,6 +1,5 @@
 import { createI18n } from 'vue-i18n';
 import ru from '../locales/ru.json';
-import kz from '../locales/kz.json';
 
 const instance = createI18n({
   legacy: false,
@@ -8,7 +7,6 @@ const instance = createI18n({
   locale: 'ru',
   messages: {
     ru,
-    kz,
   },
 });
 

package/layouts/default.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="h-full z-[1]" :class="[$dataStore.hasLayoutMargins ? 'lg:mx-[22px] lg:my-[33px] lg:shadow-xl' : '']">
-    <div :class="[$libStyles.greenBg]" class="hidden z-[-1] lg:block absolute left-0 top-0 h-[200px] w-full"></div>
-    <section class="flex h-full" :class="$libStyles.blueBgLight">
+    <div :class="[$styles.greenBg]" class="hidden z-[-1] lg:block absolute left-0 top-0 h-[200px] w-full"></div>
+    <section class="flex h-full relative" :class="$styles.blueBgLight">
       <base-menu-nav
         v-if="$dataStore.showNav"
         :selected="$dataStore.menu.selectedItem"
         :title="$dataStore.menu.title ?? 'Страховые продукты'"
         :has-back="$dataStore.menu.hasBack ?? false"
         :back-icon="$dataStore.menu.backIcon ?? 'mdi-arrow-left'"
-        :more-icon="$dataStore.menu.moreIcon ?? 'mdi-cog-outline'"
-        :has-more="'hasMore' in $route.meta && $route.meta.hasMore ? !!$route.meta.hasMore : false"
+        :more-icon="$dataStore.menu.moreIcon ?? 'mdi-dots-vertical'"
+        :has-more="'hasMore' in $route.meta ? !!$route.meta.hasMore : true"
         :class="{
           // @ts-ignore
           '!hidden': !$display().lgAndUp.value && !!$dataStore.menu.selectedItem.title,
@@ -23,6 +23,7 @@
         </template>
       </base-menu-nav>
       <slot></slot>
+      <base-drawer which-panel="rightPanel" :panel-title="$dataStore.rightPanel.title" side="right" />
       <base-settings-panel />
     </section>
   </div>
@@ -44,6 +45,44 @@ const onLink = async (item: MenuItem) => {
 const onBack = async (item: MenuItem) => {
   if (dataStore.menu.onBack) await dataStore.menu.onBack(item);
 };
+
+watch(
+  () => dataStore.settings.open,
+  () => {
+    if (dataStore.settings.open === true && dataStore.panel.open === true) {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+    }
+    if (dataStore.settings.open === true && dataStore.rightPanel.open === true) {
+      dataStore.rightPanel.open = false;
+    }
+  },
+);
+
+watch(
+  () => dataStore.rightPanel.open,
+  () => {
+    if (dataStore.rightPanel.open === true && dataStore.panel.open === true) {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+    }
+    if (dataStore.rightPanel.open === true && dataStore.settings.open === true) {
+      dataStore.settings.open = false;
+    }
+  },
+);
+
+watch(
+  () => dataStore.panel.open,
+  () => {
+    if (dataStore.panel.open === true && dataStore.settings.open === true) {
+      dataStore.settings.open = false;
+    }
+    if (dataStore.panel.open === true && dataStore.rightPanel.open === true) {
+      dataStore.rightPanel.open = false;
+    }
+  },
+);
 </script>
 <style>
 .mainpage,
@@ -72,4 +111,7 @@ label .v-label .v-field-label,
   /* line-height: v-bind('dataStore.fontSize*1 + "px"') !important; */
   padding-bottom: 3px;
 }
+.v-card {
+  border-radius: 8px !important;
+}
 </style>

package/layouts/full.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full z-[1]" :class="[$dataStore.hasLayoutMargins ? 'lg:mx-[22px] lg:my-[33px] lg:shadow-xl' : '']">
-    <div :class="[$libStyles.greenBg]" class="hidden lg:block absolute z-[-1] left-0 top-0 h-[200px] w-full"></div>
+    <div :class="[$styles.greenBg]" class="hidden lg:block absolute z-[-1] left-0 top-0 h-[200px] w-full"></div>
     <slot></slot>
   </div>
 </template>