hl-core 0.0.9-beta.9 → 0.0.10-beta.10

package/components/Form/ManagerAttachment.vue

@@ -1,55 +1,65 @@
 <template>
   <div class="rounded-lg border-[1px]" :class="[$styles.whiteBg, disabled && $styles.disabled]">
-    <div class="mt-3 ml-5">
-      <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"
-        :readonly="isReadonly"
-        :clearable="!isReadonly"
-        :label="$dataStore.t('form.salesChanell')"
-        :rules="$rules.objectRequired"
-        append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('SaleChanellPolicy', $dataStore.t('form.salesChanell'))"
-      />
-      <base-panel-input
-        class="pl-1"
-        v-model="formStore.RegionPolicy"
-        :value="formStore.RegionPolicy?.nameRu"
-        :readonly="isReadonly"
-        :clearable="!isReadonly"
-        :label="$dataStore.t('form.Region')"
-        :rules="$rules.objectRequired"
-        append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('RegionPolicy', $dataStore.t('form.Region'))"
-      />
-      <base-panel-input
-        class="pl-1"
-        v-model="formStore.ManagerPolicy"
-        :value="formStore.ManagerPolicy?.nameRu"
-        :readonly="isReadonly"
-        :clearable="!isReadonly"
-        :label="$dataStore.t('form.manager')"
-        :rules="$rules.objectRequired"
-        append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('ManagerPolicy', $dataStore.t('form.manager'))"
-      />
-      <base-panel-input
-        class="pl-1"
-        v-model="formStore.AgentData"
-        :value="formStore.AgentData?.fullName"
-        :readonly="isReadonly"
-        :clearable="!isReadonly"
-        :label="$dataStore.t('form.agent')"
-        :rules="$rules.agentDataRequired"
-        append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('AgentData', $dataStore.t('form.agent'))"
-      />
-    </v-form>
-    <Teleport v-if="isPanelOpen" to="#panel-actions">
+    <v-expansion-panels>
+      <v-expansion-panel class="rounded-lg" elevation="0">
+        <v-expansion-panel-title :class="[$styles.textTitle, $styles.greenText]">
+          {{ $dataStore.t('form.attachManager') }}
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="border-t-[1px] no-padding">
+          <v-form ref="vForm" class="flex flex-col divide-y">
+            <base-panel-input
+              v-if="isSaleChanellShown"
+              class="pl-1 pt-1"
+              v-model="formStore.SaleChanellPolicy"
+              :value="formStore.SaleChanellPolicy?.nameRu"
+              :readonly="isSaleChanellReadonly"
+              :clearable="!isSaleChanellReadonly"
+              :label="$dataStore.t('form.salesChanell')"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel('SaleChanellPolicy', $dataStore.t('form.salesChanell'))"
+            />
+            <base-panel-input
+              v-if="isRegionShown"
+              class="pl-1 pt-1"
+              v-model="formStore.RegionPolicy"
+              :value="formStore.RegionPolicy?.nameRu"
+              :readonly="isRegionReadonly"
+              :clearable="!isRegionReadonly"
+              :label="$dataStore.t('form.Region')"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel('RegionPolicy', $dataStore.t('form.Region'))"
+            />
+            <base-panel-input
+              v-if="isManagerShown"
+              class="pl-1 pt-1"
+              v-model="formStore.ManagerPolicy"
+              :value="formStore.ManagerPolicy?.nameRu"
+              :readonly="isManagerReadonly"
+              :clearable="!isManagerReadonly"
+              :label="$dataStore.t('form.manager')"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel('ManagerPolicy', $dataStore.t('form.manager'))"
+            />
+            <base-panel-input
+              v-if="isAgentShown"
+              class="pl-1 pt-1"
+              v-model="formStore.AgentData"
+              :value="formStore.AgentData?.fullName"
+              :readonly="isAgentReadonly"
+              :clearable="!isAgentReadonly"
+              :label="$dataStore.t('form.agent')"
+              :rules="$rules.agentDataRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel('AgentData', $dataStore.t('form.agent'))"
+            />
+          </v-form>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <Teleport v-if="isPanelOpen" to="#right-panel-actions">
       <div :class="[$styles.scrollPage]" class="flex flex-col items-center">
         <base-rounded-input
           v-model.trim="searchQuery"
@@ -59,16 +69,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}` }} {{ ` ${agent.agentNo}` }}
+                  </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 +105,8 @@
 
 <script lang="ts">
 import { Value } from '../../composables/classes';
+import { watchDebounced } from '@vueuse/core';
+import type { AgentData } from '../../types';
 
 export default defineComponent({
   props: {
@@ -90,29 +120,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 ||
@@ -120,13 +138,44 @@ export default defineComponent({
         !dataStore.isInitiator() ||
         (route.params.taskId !== '0' && (!dataStore.isProcessEditable(formStore.applicationData.statusCode) || !dataStore.isTask())),
     );
-
-    const openPanel = async (currentDict: string, title: string) => {
+    const isSaleChanellReadonly = computed(() => {
+      if (dataStore.isGons) return isReadonly.value && dataStore.isServiceManager();
+      return isReadonly.value;
+    });
+    const isRegionReadonly = computed(() => {
+      if (dataStore.isGons) return isReadonly.value && (dataStore.isServiceManager() || dataStore.isAgent());
+      return isReadonly.value;
+    });
+    const isManagerReadonly = computed(() => {
+      if (dataStore.isGons) return isReadonly.value && dataStore.isServiceManager();
+      return isReadonly.value;
+    });
+    const isAgentReadonly = computed(() => {
+      if (dataStore.isGons || dataStore.isPension) return isReadonly.value && dataStore.isServiceManager();
+      return isReadonly.value;
+    });
+    const isSaleChanellShown = computed(() => {
+      if (dataStore.isGons) return dataStore.isServiceManager();
+      return true;
+    });
+    const isRegionShown = computed(() => {
+      if (dataStore.isGons) return dataStore.isServiceManager() || dataStore.isAgent();
+      return true;
+    });
+    const isManagerShown = computed(() => {
+      if (dataStore.isGons) return dataStore.isServiceManager();
+      return true;
+    });
+    const isAgentShown = computed(() => {
+      if (dataStore.isGons || dataStore.isPension) return dataStore.isServiceManager();
+      return true;
+    });
+    const openPanel = async (currentDict: ManagerAttachmentFiels, title: string) => {
       searchQuery.value = '';
       if (dataStore.isTask() && !props.disabled) {
         dataStore.panelAction = null;
-        dataStore.panel.open = true;
-        dataStore.panel.title = title;
+        dataStore.rightPanel.open = true;
+        dataStore.rightPanel.title = title;
         currentDictName.value = currentDict;
 
         if (currentDict === 'ManagerPolicy' && formStore.RegionPolicy.ids) {
@@ -135,7 +184,7 @@ export default defineComponent({
         }
 
         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,29 +199,57 @@ export default defineComponent({
       }
     };
 
-    const pickPanelValue = (answer: any) => {
+    const pickPanelValue = (answer: FieldTypes) => {
       // @ts-ignore
       formStore[currentDictName.value] = answer;
       isPanelOpen.value = false;
-      dataStore.panel.open = false;
+      dataStore.rightPanel.open = false;
       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,
       (val, oldVal) => {
         if (val.ids !== oldVal.ids) {
-          formStore.ManagerPolicy = new Value();
+          if (!dataStore.isGons) {
+            formStore.ManagerPolicy = new Value();
+          }
         }
       },
     );
 
+    watch(
+      () => dataStore.rightPanel.open,
+      () => {
+        if (dataStore.rightPanel.open === false) {
+          isPanelOpen.value = false;
+        }
+      },
+      { immediate: true },
+    );
+
+    onBeforeUnmount(() => {
+      if (!isReadonly.value) {
+        const areValid = !!formStore.SaleChanellPolicy.nameRu && !!formStore.RegionPolicy.nameRu && !!formStore.ManagerPolicy.nameRu && !!formStore.AgentData.fullName;
+        if (areValid) {
+          dataStore.setINSISWorkData(false);
+        }
+      }
+    });
+
     return {
       // State
       formStore,
@@ -184,9 +261,15 @@ export default defineComponent({
       currentDictName,
 
       // Computed
-      dictList,
       isReadonly,
-
+      isSaleChanellReadonly,
+      isRegionReadonly,
+      isManagerReadonly,
+      isAgentReadonly,
+      isSaleChanellShown,
+      isRegionShown,
+      isManagerShown,
+      isAgentShown,
       // Functions
       openPanel,
       searchAgent,
@@ -195,3 +278,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+.no-padding :deep(.v-expansion-panel-text__wrapper) {
+  padding: 0 !important;
+}
+</style>

package/components/Form/ProductConditionsBlock.vue

@@ -6,23 +6,48 @@
       </p>
       <p v-if="!!subtitle" :class="[$styles.greyText, $styles.textSimple]">{{ subtitle }}</p>
     </div>
-    <div class="mt-6 grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
+    <div v-if="hasDefault" class="mt-6 grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
       <span v-if="hasSum" :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('productConditionsForm.requestedSumInsured') }}</span>
       <span v-if="hasPremium" :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('productConditionsForm.insurancePremiumPerMonth') }}</span>
-      <span v-if="hasPolicyNumber" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('buttons.InsuranceContract') }}</span>
+
       <span v-if="hasContractDate" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.contractDate') }}</span>
       <span v-if="hasCoverPeriod" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.coverPeriod') }}</span>
       <span v-if="hasPayPeriod" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.payPeriod') }}</span>
     </div>
-    <div class="grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
+    <div v-if="hasDefault" class="grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
       <span v-if="hasSum" :class="[amount === null && $styles.emptyBlockCol]">{{ amount }} </span>
       <span v-if="hasPremium" :class="[premium === null && $styles.emptyBlockCol]"> {{ premium }}</span>
       <span v-if="hasPolicyNumber" :class="[policyNumber === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ policyNumber }}</span>
       <span v-if="hasContractDate" :class="[policyNumber === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ contractDate }}</span>
       <span v-if="hasCoverPeriod" :class="[coverPeriod === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ coverPeriod }} </span>
-      <span v-if="hasPayPeriod" :class="[paymentPeriod === null && $styles.emptyBlockCol]" class="hidden lg:block">
-        {{ paymentPeriod }}
+      <span v-if="hasPayPeriod" :class="[paymentPeriod === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ paymentPeriod }}</span>
+      <div
+        class="rounded-br-lg transition-all h-[70px] w-[60px] relative place-self-end"
+        :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
+        @click="!disabled && $emit('onMore', { whichForm: 'productConditions' })"
+      >
+        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"></i>
+      </div>
+    </div>
+    <div v-if="$dataStore.isLifetrip" class="mt-6 grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
+      <span :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('calculatorForm.type') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('calculatorForm.country') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('calculatorForm.purpose') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('calculatorForm.amount') }}</span>
+      <span v-if="hasPolicyNumber" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('buttons.InsuranceContract') }}</span>
+    </div>
+    <div v-if="$dataStore.isLifetrip" class="grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
+      <span :class="[calculatorForm.type.nameRu === null && $styles.emptyBlockCol]" class="hidden lg:block">
+        {{ calculatorForm.type.nameRu }}
       </span>
+      <span :class="[calculatorForm.price === null && $styles.emptyBlockCol]"> {{ calculatorForm.countries?.length ? countriesComputed : '' }}</span>
+      <span :class="[calculatorForm.purpose.nameRu === null && $styles.emptyBlockCol]" class="hidden lg:block">
+        {{ calculatorForm.purpose && calculatorForm.purpose.nameRu ? calculatorForm.purpose.nameRu : $dataStore.t('calculatorForm.purpose') }}</span
+      >
+      <span :class="[calculatorForm.amount && calculatorForm.amount.nameRu ? calculatorForm.amount.nameRu : $dataStore.t('calculatorForm.amount') && $styles.emptyBlockCol]"
+        >{{ calculatorForm.amount?.nameRu }}
+      </span>
+
       <div
         class="rounded-br-lg transition-all h-[70px] w-[60px] relative place-self-end"
         :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
@@ -68,11 +93,17 @@ export default defineComponent({
         ? formStore.productConditionsForm.paymentPeriod.nameRu
         : null,
     );
-
+    const calculatorForm = formStore.productConditionsForm.calculatorForm;
     const hasSum = computed(() => {
+      if (dataStore.isLifetrip) {
+        return false;
+      }
       return true;
     });
     const hasPremium = computed(() => {
+      if (dataStore.isLifetrip) {
+        return false;
+      }
       return true;
     });
     const hasPolicyNumber = computed(() => {
@@ -88,20 +119,40 @@ export default defineComponent({
       return false;
     });
     const hasCoverPeriod = computed(() => {
+      if (dataStore.isLifetrip) {
+        return false;
+      }
       if (dataStore.isFinCenter()) {
         return false;
       }
       return true;
     });
     const hasPayPeriod = computed(() => {
+      if (dataStore.isLifetrip) {
+        return false;
+      }
       if (dataStore.isFinCenter()) {
         return false;
       }
       return true;
     });
+    const countriesComputed = computed(() => {
+      let message = '';
+      for (let country in calculatorForm.countries) {
+        message += calculatorForm.countries[country as any].nameRu + ', ';
+      }
+      return message.slice(0, -2);
+    });
+    const hasDefault = computed(() => {
+      if (dataStore.isLifetrip) {
+        return false;
+      }
+      return true;
+    });
     return {
       // State
       formStore,
+      calculatorForm,
 
       // Computed
       amount,
@@ -116,6 +167,8 @@ export default defineComponent({
       hasContractDate,
       hasPayPeriod,
       hasCoverPeriod,
+      countriesComputed,
+      hasDefault,
     };
   },
 });

package/components/Input/Datepicker.vue

@@ -1,5 +1,6 @@
 <template>
   <vue-date-picker
+    class="base-datepicker"
     :model-value="modelValue"
     :clearable="false"
     :disabled="disabled"
@@ -7,18 +8,20 @@
     @update:modelValue="$emit('update:modelValue', $event)"
     locale="ru"
     model-type="dd.MM.yyyy"
-    position="left"
-    menu-class-name="!left-[30vw] md:!left-[70vw] lg:!left-[75vw]"
-    :teleport="teleport"
-    :offset="-50"
+    :teleport="true"
     :close-on-scroll="true"
     :enable-time-picker="false"
+    :six-weeks="true"
+    :min-date="minDate"
     cancel-text="Отменить"
     select-text="Выбрать"
   >
     <template #trigger>
       <v-icon icon="mdi mdi-calendar-blank-outline cursor-pointer" />
     </template>
+    <template #action-preview="{ value }">
+      {{ reformatDate(value) }}
+    </template>
   </vue-date-picker>
 </template>
 
@@ -36,10 +39,43 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    teleport: {
-      type: String,
-      default: '.v-form',
+    minDate: {
+      type: Date,
+      required: false,
     },
   },
 });
 </script>
+
+<style>
+:root {
+  --dp-menu-min-width: 300px;
+  --dp-border-radius: 10px;
+  --dp-cell-border-radius: 9999px;
+}
+
+.dp__calendar_item .dp__active_date {
+  @apply bg-[#A0B3D8];
+}
+.dp__calendar_item .dp__today {
+  @apply border-[#A0B3D8];
+}
+.dp__calendar_item .dp__today:not(.dp__active_date) {
+  @apply border-[#009C73];
+}
+.dp__overlay_cell_active {
+  @apply !bg-[#A0B3D8];
+}
+.dp__action_button {
+  @apply h-auto px-3 py-1 text-[14px] rounded-lg;
+}
+.dp__action_cancel {
+  @apply hover:border-[#A0B3D8];
+}
+.dp__action_select {
+  @apply bg-[#009C73] hover:bg-[#00a277] text-white px-4;
+}
+.dp__selection_preview[title*='/'] {
+  @apply rounded-lg border-[1px] px-3 py-1 text-[14px] text-[#009C73];
+}
+</style>

package/components/Input/DynamicInput.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-for="(field, fieldIndex) in fields" :key="fieldIndex">
+    <base-text-input
+      v-if="field.type === 'text' || field.type === 'number'"
+      :control="field"
+      class="bg-[#fff]"
+      :class="{ 'rounded-t-lg': fieldIndex === 0 || fields[fieldIndex - 1].type !== 'text', 'rounded-b-lg': fieldIndex === fields.length - 1 }"
+      @onClickField="$emit('onClickField', field)"
+    />
+    <base-switch-input v-if="field.type === 'switch'" :field="field" />
+  </div>
+</template>
+
+<script lang="ts">
+import type { InputType } from '../../types/form';
+
+export default defineComponent({
+  props: {
+    fields: {
+      type: Object as PropType<InputType[]>,
+      required: true,
+    },
+  },
+});
+</script>

package/components/Input/FileInput.vue

@@ -3,17 +3,22 @@
     class="file-input"
     :disabled="disabled"
     prepend-icon=""
-    append-inner-icon="mdi mdi-file-document"
-    @click:append-inner="$emit('input', $event)"
+    :append-inner-icon="`mdi ${icon}`"
     @input="$emit('input', $event)"
     variant="solo"
     show-size
     multiple
-    accept=".pdf,.doc,.jpeg,.jpg,.jpg"
+    accept=".pdf,.doc,.docx,.jpeg,.jpg,.jpg,.xlsx,.xls"
     truncate-length="15"
     clear-icon="mdi mdi-close"
-    :label="$dataStore.t('labels.chooseDoc')"
-  />
+    :label="label"
+    @click:append-inner="$emit('append-inner', $event)"
+    @click:clear="$emit('on-clear')"
+  >
+    <template v-slot:loader>
+      <v-progress-linear v-if="loading" color="#A0B3D8" height="3" indeterminate />
+    </template>
+  </v-file-input>
 </template>
 
 <script lang="ts">
@@ -23,7 +28,22 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    icon: {
+      type: String,
+      default: 'mdi-file-document',
+    },
+    label: {
+      type: String,
+      default() {
+        return useDataStore().t('labels.chooseDoc');
+      },
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
+  emits: ['input', 'append-inner', 'on-clear'],
 });
 </script>