hl-core 0.0.9-beta.4 → 0.0.9-beta.41

package/composables/constants.ts

@@ -2,6 +2,8 @@ import { Actions, PostActions, Roles, Statuses } from '../types/enum';
 
 export const constants = Object.freeze({
   products: {
+    // TODO remove this after PA will be ready
+    pensionannuity: import.meta.env.VITE_MODE === 'production' ? 0 : 1,
     baiterek: 3,
     halykmycar: 5,
     lifetrip: 7,
@@ -9,27 +11,39 @@ export const constants = Object.freeze({
     liferenta: 9,
     gons: 10,
     halykkazyna: 11,
+    daskamkorlyk: 13,
     lifebusiness: 14,
+    amuletlife: 15,
   },
   amlProducts: {
     checkcontragent: 1,
     checkcontract: 2,
   },
-  editableStatuses: [Statuses.StartForm, Statuses.EditBeneficiaryForm, Statuses.EditForm],
+  extractedProducts: ['dso', 'uu'],
+  editableStatuses: [Statuses.StartForm, Statuses.EditBeneficiaryForm, Statuses.EditForm, Statuses.InputDataForm],
   documentsLinkVisibleStatuses: [
     Statuses.DocumentsSignedFrom,
+    Statuses.DocumentsSignedClientFrom,
     Statuses.UnderwriterForm,
     Statuses.AffilationResolutionForm,
     Statuses.Completed,
     Statuses.InsurancePremiumOnlinePaid,
   ],
-  returnStatementStatuses: [Statuses.DocumentsSignedFrom, Statuses.ContractSignedFrom, Statuses.WaitingInsurancePremiumForm, Statuses.UnderwriterForm],
+  returnStatementStatuses: [
+    Statuses.DocumentsSignedFrom,
+    Statuses.DocumentsSignedClientFrom,
+    Statuses.ContractSignedFrom,
+    Statuses.WaitingInsurancePremiumForm,
+    Statuses.UnderwriterForm,
+    Statuses.ApproveForm,
+  ],
   cancelApplicationStatuses: [
     Statuses.StartForm,
     Statuses.EditForm,
     Statuses.EditBeneficiaryForm,
     Statuses.WaitingInsurancePremiumForm,
     Statuses.DocumentsSignedFrom,
+    Statuses.DocumentsSignedClientFrom,
     Statuses.ContractSignedFrom,
   ],
   gbdErrors: ['INVALID', 'TIMEOUT', 'ERROR', 'NOT_FOUND'],
@@ -42,4 +56,53 @@ export const constants = Object.freeze({
     kzt: '₸',
     usd: '$',
   },
+  documentTypes: {
+    statement: 5,
+    contract: 6,
+    underConclusion: 12,
+    complianceFinMonitoring: 14,
+    agreement: 19,
+    acceptLetter: 22,
+    rejectLetter: 23,
+    application1: 33,
+    insuredsList: 34,
+    questionnaireInsured: 35,
+  },
+  fixInsAmount: [
+    {
+      code: '500000',
+      id: '1',
+      nameKz: '500 000',
+      nameRu: '500 000',
+      ids: '',
+    },
+    {
+      code: '1000000',
+      id: '2',
+      nameKz: '1 000 000',
+      nameRu: '1 000 000',
+      ids: '',
+    },
+    {
+      code: '1500000',
+      id: '3',
+      nameKz: '1 500 000',
+      nameRu: '1 500 000',
+      ids: '',
+    },
+    {
+      code: '2000000',
+      id: '4',
+      nameKz: '2 000 000',
+      nameRu: '2 000 000',
+      ids: '',
+    },
+    {
+      code: '2500000',
+      id: '5',
+      nameKz: '2 500 000',
+      nameRu: '2 500 000',
+      ids: '',
+    },
+  ],
 });

package/composables/fields.ts

@@ -0,0 +1,291 @@
+import { i18n } from '../configs/i18n';
+import { FieldTypes } from '../types/form';
+import { ComputedRefWithControl } from '@vueuse/core';
+
+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;
+  }
+}
+
+export class FormBlockLabel {
+  text: string;
+  size: LabelSize = 1;
+  hideOnMobile: boolean = false;
+  constructor(options: { text: string; size?: LabelSize; hideOnMobile?: boolean }) {
+    this.text = options.text;
+    if (typeof options.size === 'number') this.size = options.size;
+    if (typeof options.hideOnMobile === 'boolean') this.hideOnMobile = options.hideOnMobile;
+  }
+}
+
+export class FormBlock {
+  title: string;
+  subtitle?: string;
+  noValueText?: string;
+  headerBtn?: {
+    text: string;
+    action: () => void;
+  };
+  labels: FormBlockLabel[];
+  data: ComputedRefWithControl<any> | string[][];
+  shrinkLabels: boolean = true;
+  disabled: ComputedRef;
+  show: ComputedRef;
+  btn: {
+    icon: string;
+    showBtn: ComputedRef;
+    action: ({ value, index }: { value: any; index: number }) => void;
+  };
+  constructor(options: {
+    title: string;
+    subtitle?: string;
+    noValueText?: string;
+    headerBtn?: { text: string; action: () => void };
+    labels: FormBlockLabel[];
+    data: ComputedRefWithControl<any> | string[][];
+    shrinkLabels?: boolean;
+    disabled?: ComputedRef;
+    show?: ComputedRef;
+    btn?: { icon?: string; showBtn?: ComputedRef; action: ({ value, index }: { value: any; index: number }) => void };
+  }) {
+    this.title = options.title;
+    if (typeof options.subtitle === 'string') this.subtitle = options.subtitle;
+    if (typeof options.noValueText === 'string') this.noValueText = options.noValueText;
+    else this.noValueText = t('clients.necessaryFillForm');
+    this.labels = options.labels;
+    this.data = options.data;
+    if (typeof options.shrinkLabels === 'boolean') this.shrinkLabels = options.shrinkLabels;
+    if (options.disabled !== undefined) this.disabled = options.disabled;
+    else this.disabled = computed(() => false);
+    if (options.show !== undefined) this.show = options.show;
+    else this.show = computed(() => true);
+    if (typeof options.headerBtn === 'object') this.headerBtn = options.headerBtn;
+    if (typeof options.btn === 'object') {
+      this.btn = { icon: options.btn.icon ?? 'mdi-dots-vertical', showBtn: options.btn.showBtn ?? computed(() => true), action: options.btn.action };
+    } else this.btn = { icon: 'mdi-dots-vertical', showBtn: computed(() => true), action: () => {} };
+  }
+}
+
+export const getFormDataFrom = <T>(
+  data: T | T[],
+  keys: Array<keyof T>,
+  modifiers?: {
+    [key in keyof T]?: (val: any) => any;
+  },
+) => {
+  const getValuesFromKeys = (member: T) => {
+    const each: any[] = [];
+    keys.forEach(key => {
+      const data = member[key];
+      const value = data && typeof data === 'object' && 'nameRu' in data ? (data['nameRu'] as any) : data;
+      //@ts-ignore
+      each.push(modifiers && modifiers[key] ? modifiers[key](value ?? '') : value);
+    });
+    return each;
+  };
+  const getData = () => {
+    const result: any[][] = [];
+    Array.isArray(data) ? data.forEach(member => result.push(getValuesFromKeys(member))) : result.push(getValuesFromKeys(data));
+    return result;
+  };
+  return computedWithControl(
+    () => getData(),
+    () => getData(),
+  );
+};

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();
@@ -183,12 +184,13 @@ export const ESBDMessage = (ESBDObject: any, initialPoint: any) => {
 
 export const ErrorHandler = (err: unknown, errorText?: string) => {
   console.log(err);
+  const dataStore = useDataStore();
   if (err instanceof AxiosError) {
     if ('response' in err && err.response && err.response.data) {
       if ('status' in err.response && err.response.status === 403) {
-        useDataStore().showToaster('error', useDataStore().t('toaster.noPermission'), 10000);
+        dataStore.showToaster('error', dataStore.t('toaster.noPermission'), 10000);
       } else if (err.response.data) {
-        useDataStore().showToaster('error', errorText ? errorText : err.response.data, 10000);
+        dataStore.showToaster('error', errorText ? errorText : err.response.data, 10000);
       }
     }
   }
@@ -256,11 +258,62 @@ export const setAddressBeneficiary = (whichIndex: number, sameAddress: boolean)
 };
 
 export const changeBridge = async (toBridge: 'efo' | 'lka', token: string) => {
-  const bridgeUrl = import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string;
+  const bridgeUrl = ref<string>(import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string);
   if (!toBridge) return;
-  if (!bridgeUrl || !token) {
+  if (!bridgeUrl.value || !token) {
     useDataStore().showToaster('error', `${useDataStore().t('toaster.noUrl')} [import.meta.env.VITE_${toBridge.toUpperCase()}_URL]`);
     return;
   }
-  window.open(`${bridgeUrl}/#/Token?token=${token}`, '_blank');
+  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/EgovQrCms',
+      development: 'mobileSign:https://test-sign.halyklife.kz/EgovQrCms',
+      test: 'mobileSign:https://test-sign.halyklife.kz/EgovQrCms',
+    },
+  };
+  return valuesPerEnv[which][useEnv().envMode as Envs];
+};
+
+export const getMainPageRoute = () => {
+  const dataStore = useDataStore();
+  if (dataStore.isEFO) {
+    return 'Insurance-Product';
+  }
+  if (dataStore.isLKA) {
+    return 'Menu';
+  }
+  if (dataStore.isAML) {
+    return 'Main';
+  }
+  return 'index';
 };

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/layouts/default.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="h-full z-[1]" :class="[$dataStore.hasLayoutMargins ? 'lg:mx-[22px] lg:my-[33px] lg:shadow-xl' : '']">
     <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" :class="$styles.blueBgLight">
+    <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"
+        :has-info="$dataStore.menu.hasInfo"
+        :info-icon="$dataStore.menu.infoIcon"
+        :info-items="$dataStore.menu.infoItems"
         :class="{
           // @ts-ignore
           '!hidden': !$display().lgAndUp.value && !!$dataStore.menu.selectedItem.title,
@@ -23,6 +26,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 +48,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 +114,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>