hl-core 0.0.9-beta.2 → 0.0.9-beta.20

package/components/Button/Btn.vue

@@ -1,18 +1,18 @@
 <template>
   <button
     type="button"
-    class="transition-all"
+    class="transition-all border-solid"
     @click="$emit('clicked')"
     :disabled="disabled || loading"
     :class="[
       disabled ? 'disabled' : '',
       classes,
       btn,
-      $libStyles[`btnH${$capitalize(size)}` as keyof typeof $libStyles],
+      $styles[`btnH${$capitalize(size)}` as keyof typeof $styles],
     ]"
   >
     <base-loader v-if="loading" :size="24" color="#FFF" bg-color="" :width="2" />
-    <span v-if="!loading">{{ text }}</span>
+    <span class="!text-inherit" v-if="!loading">{{ text }}</span>
   </button>
 </template>
 

package/components/Complex/ContentBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full p-4" :class="[$libStyles.blueBgLight, $libStyles.rounded]">
+  <div class="w-full p-4" :class="[$styles.blueBgLight, $styles.rounded]">
     <slot></slot>
   </div>
 </template>

package/components/Complex/MessageBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-left p-6 mb-4" :class="[color, $libStyles.rounded]">
+  <div class="text-left p-6" :class="[color, $styles.rounded, $styles.textTitle]">
     <v-icon :icon="icon" class="mr-4"></v-icon>
     {{ text }}
   </div>

package/components/Complex/Page.vue

@@ -1,6 +1,7 @@
 <template>
-  <base-content class="flex-col" :class="[$libStyles.whiteBg]">
+  <base-content class="flex-col" :class="[$styles.whiteBg]">
     <base-header
+      v-if="customHeader === false"
       class="justify-center lg:pl-14"
       :has-back="hasBack"
       :back-icon="backIcon"
@@ -10,6 +11,7 @@
       @onBack="$emit('onBack')"
       @onMore="$emit('onMore')"
     />
+    <slot name="header"></slot>
     <slot></slot>
   </base-content>
 </template>
@@ -37,6 +39,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    customHeader: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['onBack', 'onMore'],
 });

package/components/Complex/WhiteBlock.vue

@@ -0,0 +1,7 @@
+<template>
+  <div :class="[$styles.rounded, $styles.whiteBg]" class="p-4 shadow">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

package/components/Dialog/Dialog.vue

@@ -11,8 +11,8 @@
         {{ subtitle }}
       </v-card-subtitle>
       <v-card-actions class="gap-[16px] m-2">
-        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.yes')" :btn="$libStyles.blueBtn" @click="$emit('yes')" />
-        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.no')" :btn="$libStyles.blueBtn" @click="$emit('no')" />
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.yes')" :btn="$styles.blueBtn" @click="$emit('yes')" />
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.no')" :btn="$styles.blueBtn" @click="$emit('no')" />
         <slot v-if="actions !== 'default'" name="actions"></slot>
       </v-card-actions>
     </v-card>

package/components/Dialog/FamilyDialog.vue

@@ -2,20 +2,20 @@
   <v-list lines="two" v-if="formStore.birthInfos && formStore.birthInfos.length" class="w-full !py-0">
     <v-list-item
       @click="$emit('reset')"
-      :append-icon="selected && Object.keys(selected).length === 0 ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
+      :append-icon="selected && Object.keys(selected).length === 0 ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
     >
-      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{ $dataStore.t('form.notChosen') }}</v-list-item-title>
+      <v-list-item-title :class="[$styles.greenText, $styles.textTitle]">{{ $dataStore.t('form.notChosen') }}</v-list-item-title>
     </v-list-item>
     <v-list-item
       v-for="familyMember of formStore.birthInfos"
       :key="familyMember.childIIN"
       @click="$emit('selectFamilyMember', familyMember)"
-      :append-icon="familyMember && selected && selected.childIIN === familyMember.childIIN ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
+      :append-icon="familyMember && selected && selected.childIIN === familyMember.childIIN ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
     >
-      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{
+      <v-list-item-title :class="[$styles.greenText, $styles.textTitle]">{{
         `${familyMember.childSurName} ${familyMember.childName} ${familyMember.childPatronymic ? familyMember.childPatronymic : ''}`
       }}</v-list-item-title>
-      <v-list-item-subtitle :class="[$libStyles.textSimple]"
+      <v-list-item-subtitle :class="[$styles.textSimple]"
         ><span>{{ `${$dataStore.t('form.iin')}:` }}</span
         >{{ ` ${$reformatIin(familyMember.childIIN!)}` }}</v-list-item-subtitle
       >

package/components/Form/FormBlock.vue

@@ -1,29 +1,29 @@
 <template>
-  <div class="pt-3 rounded-lg border-[1px]" :class="[$libStyles.whiteBg, disabled && $libStyles.disabled]">
+  <div class="pt-3 rounded-lg border-[1px]" :class="[$styles.whiteBg, disabled && $styles.disabled]">
     <div class="ml-5">
       <div class="flex justify-between mr-5">
-        <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ title }}</p>
+        <p :class="[$styles.textTitle, $styles.greenText]">{{ title }}</p>
         <div
           v-if="isMultiple && more && !isShort && isActionsAvailable"
-          :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple, disabled ? $libStyles.disabled : 'cursor-pointer']"
-          class="lg:flex transition-all rounded-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
+          :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
+          class="hidden lg:flex transition-all rounded-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
           @click="!disabled && memberStore.addMember(whichForm)"
         >
           {{ $dataStore.t('buttons.add') }}
         </div>
       </div>
-      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+      <p v-if="!!subtitle" :class="[$styles.greyText, $styles.textSimple]">{{ subtitle }}</p>
     </div>
     <div
       class="ml-5 mt-6 grid auto-rows-fr items-center"
       :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2 mb-6' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 ']"
     >
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $dataStore.t('form.fullName') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $dataStore.t('form.iin') }}</span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('form.gender') }}</span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium"> {{ $dataStore.t('form.birthDate') }} </span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('form.Country') }} </span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('code') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('form.fullName') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('form.iin') }}</span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('form.gender') }}</span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium"> {{ $dataStore.t('form.birthDate') }} </span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('form.Country') }} </span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('code') }}</span>
     </div>
     <div v-if="isMultiple && multipleMember !== null" class="ml-5 flex flex-col" :class="[isShort ? 'mb-6' : '']">
       <div
@@ -32,16 +32,16 @@
         class="grid auto-rows-fr items-center relative"
         :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7']"
       >
-        <span :class="[getMemberInfo(each).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
-        <span :class="[getMemberInfo(each).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).sectorCode }} </span>
+        <span :class="[getMemberInfo(each).fullName === null && $styles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
+        <span :class="[getMemberInfo(each).iin === null && $styles.emptyBlockCol]">{{ getMemberIIN(each) }}</span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).gender === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).birthDate === null && $styles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).birthPlace === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).sectorCode === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).sectorCode }} </span>
         <div
           v-if="!isShort"
           class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end"
-          :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover, disabled ? $libStyles.disabled : 'cursor-pointer']"
+          :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
           @click="!disabled && $emit('onMore', { whichForm, index })"
         >
           <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"></i>
@@ -53,22 +53,20 @@
       class="ml-5 grid auto-rows-fr items-center relative"
       :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7']"
     >
-      <span :class="[getMemberInfo(singleMember).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(singleMember).fullName }}</span>
-      <span :class="[getMemberInfo(singleMember).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(singleMember).iin }}</span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block"
-        >{{ getMemberInfo(singleMember).gender }}
-      </span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(singleMember).birthDate }} </span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
+      <span :class="[getMemberInfo(singleMember).fullName === null && $styles.emptyBlockCol]">{{ getMemberInfo(singleMember).fullName }}</span>
+      <span :class="[getMemberInfo(singleMember).iin === null && $styles.emptyBlockCol]">{{ getMemberInfo(singleMember).iin }}</span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).gender === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(singleMember).gender }} </span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthDate === null && $styles.emptyBlockCol]"> {{ getMemberInfo(singleMember).birthDate }} </span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthPlace === null && $styles.emptyBlockCol]" class="hidden lg:block">
         {{ getMemberInfo(singleMember).birthPlace }}
       </span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).sectorCode === null && $styles.emptyBlockCol]" class="hidden lg:block">
         {{ getMemberInfo(singleMember).sectorCode }}
       </span>
       <div
         v-if="!isShort"
         class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end"
-        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover, disabled ? $libStyles.disabled : 'cursor-pointer']"
+        :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
         @click="!disabled && $emit('onMore', { whichForm })"
       >
         <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"></i>
@@ -76,8 +74,8 @@
     </div>
     <div
       v-if="isMultiple && more && !isShort && isActionsAvailable"
-      :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple, disabled ? $libStyles.disabled : 'cursor-pointer']"
-      class="lg:hidden transition-all rounded-b-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90"
+      :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
+      class="flex lg:hidden transition-all rounded-b-lg h-[36px] items-center font-medium justify-center opacity-50 hover:opacity-90"
       @click="!disabled && memberStore.addMember(whichForm)"
     >
       {{ $dataStore.t('buttons.add') }}
@@ -118,6 +116,7 @@ export default defineComponent({
   },
   emits: ['onMore', 'addMember'],
   setup(props) {
+    const dataStore = useDataStore();
     const formStore = useFormStore();
     const memberStore = useMemberStore();
     const isMultiple = computed(() => [StoreMembers.insuredForm, StoreMembers.beneficiaryForm, StoreMembers.beneficialOwnerForm].includes(props.whichForm as StoreMembers));
@@ -130,6 +129,13 @@ export default defineComponent({
 
     const isShort = computed(() => props.type === 'short');
     const isActionsAvailable = computed(() => memberStore.isStatementEditible(props.whichForm));
+    const getMemberIIN = (each: Member) => {
+      const iin = getMemberInfo(each).iin;
+      if (dataStore.isFinCenter() && iin) {
+        return iin.replaceAll('-', '');
+      }
+      return iin;
+    };
 
     const getMemberInfo = (memberData: Member) => {
       return {
@@ -155,6 +161,7 @@ export default defineComponent({
       isActionsAvailable,
 
       // Functions
+      getMemberIIN,
       getMemberInfo,
     };
   },

package/components/Form/FormSection.vue

@@ -1,6 +1,6 @@
 <template>
-  <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mt-[14px] p-4 flex flex-col gap-[1px]">
-    <h2 :class="[$libStyles.textTitle]" class="font-medium text-center w-full mb-4">
+  <section :class="[$styles.blueBgLight, $styles.rounded]" class="mt-[14px] p-4 flex flex-col gap-[1px]">
+    <h2 :class="[$styles.textTitle]" class="font-medium text-center w-full mb-4">
       {{ title }}
       <slot name="icon"></slot>
     </h2>

package/components/Form/FormTextSection.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col justify-between rounded-lg" :class="[$libStyles.whiteBg]">
-    <span v-if="title" class="p-4" :class="[$libStyles.textTitle]">{{ title }}</span>
-    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$libStyles.textSimple]">{{ subtitle }}</span>
+  <div class="flex flex-col justify-between rounded-lg" :class="[$styles.whiteBg]">
+    <span v-if="title" class="p-4" :class="[$styles.textTitle]">{{ title }}</span>
+    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$styles.textSimple]">{{ subtitle }}</span>
     <slot></slot>
   </div>
 </template>

package/components/Form/FormToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="h-[74px] !pl-2 md:!pl-5 flex items-center justify-start gap-4"
-    :class="[$libStyles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
+    :class="[$styles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
   >
     <v-switch
       class="base-toggle"
@@ -14,8 +14,8 @@
       hide-details
       :disabled="disabled"
     />
-    <p :class="[$libStyles.textSimple]">{{ `${title}` }}</p>
-    <p class="mr-3" :class="[modelValue ? $libStyles.greenText : '', $libStyles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
+    <p :class="[$styles.textSimple]">{{ `${title}` }}</p>
+    <p class="mr-3" :class="[modelValue ? $styles.greenText : '', $styles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
   </div>
 </template>
 

package/components/Form/ManagerAttachment.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="rounded-lg border-[1px]" :class="[$libStyles.whiteBg, disabled && $libStyles.disabled]">
+  <div class="rounded-lg border-[1px]" :class="[$styles.whiteBg, disabled && $styles.disabled]">
     <div class="mt-3 ml-5">
-      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ $dataStore.t('form.attachManager') }}</p>
+      <p :class="[$styles.textTitle, $styles.greenText]">{{ $dataStore.t('form.attachManager') }}</p>
     </div>
     <v-form ref="vForm" class="flex flex-col mt-1">
       <base-panel-input
         class="pl-1"
         v-model="formStore.SaleChanellPolicy"
-        :value="formStore.SaleChanellPolicy.nameRu"
+        :value="formStore.SaleChanellPolicy?.nameRu"
         :readonly="isReadonly"
         :clearable="!isReadonly"
         :label="$dataStore.t('form.salesChanell')"
@@ -18,7 +18,7 @@
       <base-panel-input
         class="pl-1"
         v-model="formStore.RegionPolicy"
-        :value="formStore.RegionPolicy.nameRu"
+        :value="formStore.RegionPolicy?.nameRu"
         :readonly="isReadonly"
         :clearable="!isReadonly"
         :label="$dataStore.t('form.Region')"
@@ -29,7 +29,7 @@
       <base-panel-input
         class="pl-1"
         v-model="formStore.ManagerPolicy"
-        :value="formStore.ManagerPolicy.nameRu"
+        :value="formStore.ManagerPolicy?.nameRu"
         :readonly="isReadonly"
         :clearable="!isReadonly"
         :label="$dataStore.t('form.manager')"
@@ -40,7 +40,7 @@
       <base-panel-input
         class="pl-1"
         v-model="formStore.AgentData"
-        :value="formStore.AgentData.fullName"
+        :value="formStore.AgentData?.fullName"
         :readonly="isReadonly"
         :clearable="!isReadonly"
         :label="$dataStore.t('form.agent')"
@@ -50,7 +50,7 @@
       />
     </v-form>
     <Teleport v-if="isPanelOpen" to="#panel-actions">
-      <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
+      <div :class="[$styles.scrollPage]" class="flex flex-col items-center">
         <base-rounded-input
           v-model.trim="searchQuery"
           :label="$dataStore.t('labels.search')"
@@ -59,16 +59,34 @@
           :append-inner-icon="currentDictName === 'AgentData' ? 'mdi mdi-magnify' : ''"
           @append="searchAgent"
         />
-        <div v-if="dictList && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
-          <div v-for="(item, index) in dictList" :key="item.id">
-            <base-panel-select-item
-              :key="index"
-              :text="currentDictName === 'AgentData' ? item.fullName : (item.nameRu as string)"
-              :selected="currentDictName === 'AgentData' ? item.fullName === panelValue.fullName : item.nameRu === panelValue.nameRu"
-              @click="pickPanelValue(item)"
-            />
+        <div v-if="isPanelLoading === false" class="w-full">
+          <div v-if="currentDictName === 'AgentData'" class="w-full flex flex-col gap-2 p-2">
+            <div v-for="(agent, index) of $dataStore[currentDictName]" :key="index">
+              <div
+                class="flex justify-between p-4 items-center cursor-pointer"
+                :class="[$styles.rounded, $styles.blueBgLight, $styles.blueBgLightHover]"
+                @click="pickPanelValue(agent)"
+              >
+                <div class="flex flex-col">
+                  <span :class="[$styles.textSimple]">{{ $getFullNameShorted(agent.fullName ?? '', 2) }}</span>
+                  <span :class="[$styles.mutedText]">
+                    {{ agent.saleChannel ? `${agent.saleChannel} / ${$getFullNameShorted(agent.managerName ?? '', 2)}` : `${agent.managerName}` }}
+                  </span>
+                </div>
+                <i
+                  class="mdi text-xl"
+                  :class="[agent.agentId === (panelValue as AgentData).agentId ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]']"
+                ></i>
+              </div>
+            </div>
+          </div>
+          <div v-if="currentDictName === 'ManagerPolicy' || currentDictName === 'RegionPolicy' || currentDictName === 'SaleChanellPolicy'" class="w-full flex flex-col gap-2 p-2">
+            <div v-for="(item, index) in $dataStore[currentDictName].filter(i => (i.nameRu as string).toLowerCase().includes(searchQuery.toLowerCase()))" :key="index">
+              <base-panel-select-item :key="index" :text="item.nameRu ?? ''" :selected="item.ids === (panelValue as Value).ids" @click="pickPanelValue(item)" />
+            </div>
           </div>
         </div>
+
         <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50" />
       </div>
     </Teleport>
@@ -77,6 +95,7 @@
 
 <script lang="ts">
 import { Value } from '../../composables/classes';
+import { watchDebounced } from '@vueuse/core';
 
 export default defineComponent({
   props: {
@@ -90,29 +109,17 @@ export default defineComponent({
     },
   },
   setup(props) {
+    type ManagerAttachmentFiels = 'SaleChanellPolicy' | 'RegionPolicy' | 'ManagerPolicy' | 'AgentData';
+    type FieldTypes = Value | AgentData;
     const route = useRoute();
     const dataStore = useDataStore();
     const formStore = useFormStore();
     const isPanelOpen = ref<boolean>(false);
     const isPanelLoading = ref<boolean>(false);
-    const panelValue = ref<Value & AgentData>(new Value());
+    const panelValue = ref<FieldTypes>(new Value());
     const searchQuery = ref<string>('');
-    const currentDictName = ref<string>();
+    const currentDictName = ref<ManagerAttachmentFiels>();
 
-    const dictList = computed(() => {
-      if (!currentDictName.value) {
-        return [];
-      }
-      if (currentDictName.value === 'AgentData') {
-        return dataStore[currentDictName.value];
-      } else {
-        // @ts-ignore
-        return dataStore[currentDictName.value].filter((item: Value) => {
-          // @ts-ignore
-          return item.nameRu ? item.nameRu.toLowerCase().includes(searchQuery.value.toLowerCase()) : item.fullName.toLowerCase().includes(searchQuery.value.toLowerCase());
-        });
-      }
-    });
     const isReadonly = computed(
       () =>
         props.disabled ||
@@ -121,7 +128,7 @@ export default defineComponent({
         (route.params.taskId !== '0' && (!dataStore.isProcessEditable(formStore.applicationData.statusCode) || !dataStore.isTask())),
     );
 
-    const openPanel = async (currentDict: string, title: string) => {
+    const openPanel = async (currentDict: ManagerAttachmentFiels, title: string) => {
       searchQuery.value = '';
       if (dataStore.isTask() && !props.disabled) {
         dataStore.panelAction = null;
@@ -129,13 +136,13 @@ export default defineComponent({
         dataStore.panel.title = title;
         currentDictName.value = currentDict;
 
-        if (currentDict === 'ManagerPolicy') {
+        if (currentDict === 'ManagerPolicy' && formStore.RegionPolicy.ids) {
           isPanelLoading.value = true;
-          await dataStore.filterManagerByRegion(String(formStore.RegionPolicy.ids ?? ''));
+          await dataStore.filterManagerByRegion(formStore.RegionPolicy.ids as string);
         }
 
         isPanelOpen.value = true;
-        panelValue.value = formStore[currentDict as keyof typeof formStore];
+        panelValue.value = formStore[currentDict];
         isPanelLoading.value = false;
       } else {
         dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
@@ -150,7 +157,7 @@ export default defineComponent({
       }
     };
 
-    const pickPanelValue = (answer: any) => {
+    const pickPanelValue = (answer: FieldTypes) => {
       // @ts-ignore
       formStore[currentDictName.value] = answer;
       isPanelOpen.value = false;
@@ -158,11 +165,18 @@ export default defineComponent({
       searchQuery.value = '';
     };
 
-    watch(searchQuery, () => {
-      if (searchQuery.value === null) {
-        searchQuery.value = '';
-      }
-    });
+    watchDebounced(
+      searchQuery,
+      async searchQuery => {
+        if (searchQuery === null) {
+          searchQuery = '';
+        }
+        if (!!searchQuery && currentDictName.value === 'AgentData') {
+          await searchAgent();
+        }
+      },
+      { debounce: 1000 },
+    );
 
     watch(
       () => formStore.RegionPolicy,
@@ -184,7 +198,6 @@ export default defineComponent({
       currentDictName,
 
       // Computed
-      dictList,
       isReadonly,
 
       // Functions