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

package/components/Pages/Anketa.vue

@@ -1,6 +1,9 @@
 <template>
   <base-fade-transition>
-    <section v-if="firstQuestionList && firstQuestionList.length && !firstPanel && !secondPanel" class="flex flex-col">
+    <section v-if="firstQuestionList && firstQuestionList.length && (isFirstPanelOnRight ? true : !firstPanel) && !secondPanel" class="flex flex-col shrink grow max-h-[90vh]">
+      <base-form-section v-if="$dataStore.isUnderwriter()" class="mx-[10px]">
+        <base-rounded-select v-model="filterType" class="w-[200px]" :items="filterItems" :label="$dataStore.t('labels.filter')" hide-details />
+      </base-form-section>
       <section :class="[$styles.blueBgLight, $styles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
         <base-form-toggle
           v-model="answerToAll"
@@ -10,7 +13,7 @@
           @clicked="handleToggler"
         />
       </section>
-      <v-form ref="vForm" class="max-h-[70vh] overflow-y-scroll" @submit="submitForm">
+      <v-form ref="vForm" class="grow shrink overflow-y-scroll" @submit="submitForm">
         <section
           v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'N').length"
           :class="[$styles.blueBgLight, $styles.rounded]"
@@ -27,30 +30,34 @@
           />
         </section>
         <section
-          v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'Y').length"
+          v-if="firstQuestions.filter(i => i.first.definedAnswers === 'Y').length"
           :class="[$styles.blueBgLight, $styles.rounded]"
           class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4"
         >
-          <base-form-text-section v-for="(question, index) in firstQuestionList.filter(i => i.first.definedAnswers === 'Y')" :key="index">
-            <base-fade-transition>
+          <base-form-text-section
+            v-for="(question, index) in firstQuestions.filter(i => i.first.definedAnswers === 'Y')"
+            :key="index"
+            :class="[currentQuestion?.first.id === question.first.id && $dataStore.rightPanel.open ? $styles.greenBorder : '']"
+          >
+            <base-animation>
               <div
-                v-if="question.first.answerName === 'Да' && secondQuestionList"
+                v-if="question.first.answerName === 'Да' && question.second"
                 :class="[$styles.greenBg, $styles.whiteText, $styles.textSimple]"
                 class="rounded-t-lg pl-6 py-1 cursor-pointer"
                 @click="openFirstPanel(question)"
               >
-                {{ $dataStore.t('questionnaireType.pleaseAnswer', { text: secondQuestionList.length }) }}
+                {{ $dataStore.t('questionnaireType.pleaseAnswer', { text: question.second.length }) }}
               </div>
-            </base-fade-transition>
+            </base-animation>
             <span :class="[$styles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
               {{ question.first.name }}
-              <base-fade-transition>
+              <base-animation>
                 <i
-                  v-if="question.first.answerName === 'Да' && secondQuestionList && secondQuestionList.length"
+                  v-if="question.first.answerName === 'Да' && question.second && question.second.length"
                   class="mdi mdi-chevron-right text-2xl cursor-pointer"
                   @click="openFirstPanel(question)"
                 ></i>
-              </base-fade-transition>
+              </base-animation>
             </span>
             <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$styles.textSimple]">
               <v-radio-group
@@ -68,43 +75,108 @@
             </div>
           </base-form-text-section>
         </section>
+        <section
+          v-if="firstQuestions.filter(i => i.first.definedAnswers === 'D').length"
+          :class="[$styles.blueBgLight, $styles.rounded]"
+          class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4"
+        >
+          <base-form-text-section
+            v-for="(question, index) in firstQuestions.filter(i => i.first.definedAnswers === 'D')"
+            :key="index"
+            :class="[currentQuestion?.first.id === question.first.id && $dataStore.rightPanel.open ? $styles.greenBorder : '']"
+          >
+            <span :class="[$styles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between"> {{ question.first.name }} </span>
+            <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$styles.textSimple]">
+              <v-radio-group
+                v-model="question.first.answerName"
+                class="anketa-radio"
+                :true-icon="`mdi-radiobox-marked ${$styles.greenText}`"
+                false-icon="mdi-radiobox-blank text-[#636363]"
+                :rules="$rules.required"
+                :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+                inline
+              >
+                <v-radio label="Да" value="Да" />
+                <v-radio label="Нет" value="Нет" />
+              </v-radio-group>
+            </div>
+            <base-animation>
+              <div v-if="question.first.answerName === 'Да'" :class="[$styles.whiteText, $styles.textSimple]">
+                <base-form-input
+                  v-model="question.first.answerText"
+                  :label="$dataStore.t('labels.inDetails')"
+                  :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+                  :rules="$rules.required"
+                />
+              </div>
+            </base-animation>
+          </base-form-text-section>
+        </section>
       </v-form>
-      <base-btn
-        class="my-[14px] self-center"
-        :loading="isButtonLoading"
-        :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
-        @click="submitForm"
-        :text="$dataStore.t('buttons.save')"
-      />
+      <div class="px-[14px]">
+        <base-btn
+          class="my-[14px] self-center"
+          :loading="isButtonLoading"
+          :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+          @click="submitForm"
+          :text="$dataStore.t('buttons.save')"
+        />
+      </div>
     </section>
-    <v-btn
-      v-if="secondQuestionList && secondQuestionList.length && firstPanel"
-      icon="mdi mdi-close"
-      class="ml-3 !absolute z-10"
-      @click="
-        firstPanel = false;
-        secondPanel = false;
-      "
+    <base-btn
+      v-if="currentQuestion && currentQuestion.second && currentQuestion.second.length && isFirstPanelOnRight ? false : firstPanel"
+      class="!absolute z-10 self-center w-[96%] bottom-0"
+      :text="$dataStore.t('buttons.save')"
+      @click="submitSecondaryForm"
     />
-    <section ref="firstPanelSection" v-if="secondQuestionList && secondQuestionList.length && firstPanel" class="flex flex-col px-[10px] pb-[14px]" :class="[$styles.scrollPage]">
-      <section v-if="currentQuestion" :class="[$styles.blueBgLight, $styles.rounded]" class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4">
+    <section
+      ref="firstPanelSection"
+      v-if="currentQuestion && currentQuestion.second && isFirstPanelOnRight ? false : firstPanel"
+      class="flex flex-col px-[10px] pb-[14px]"
+      :class="[$styles.scrollPage]"
+    >
+      <v-form
+        v-if="currentQuestion"
+        :class="[$styles.blueBgLight, $styles.rounded]"
+        class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4"
+        ref="vSecondaryForm"
+        @submit="submitSecondaryForm"
+      >
         <base-form-text-section v-for="question in currentQuestion.second" :title="question.name" :key="question.name">
-          <base-form-input
-            v-if="question.definedAnswers === 'N'"
-            v-model="question.answerText"
-            class="border-t-[1px] border-t-[#F3F6FC]"
-            placeholder="Введите текст"
+          <div v-if="question.definedAnswers === 'N'">
+            <base-form-input
+              v-if="question.answerType === 'T' || question.answerType === 'N'"
+              v-model="question.answerText"
+              class="border-t-[1px] border-t-[#F3F6FC]"
+              :placeholder="$dataStore.t('labels.inputText')"
+              :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+              :rules="isSecondRequired ? $rules.required : []"
+            />
+            <base-form-input
+              v-if="question.answerType === 'D'"
+              v-model="question.answerText"
+              class="border-t-[1px] border-t-[#F3F6FC]"
+              :placeholder="$dataStore.t('form.date')"
+              :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+              :rules="isSecondRequired ? $rules.date : []"
+              :maska="$maska.date"
+              append-inner-icon="mdi mdi-calendar-blank-outline"
+            />
+          </div>
+          <base-panel-input
+            v-else
+            :class="[$styles.textTitle, $styles.greenText]"
+            :value="question.answerName ? question.answerName : 'Выбрать вариант ответа'"
             :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
-          />
-          <span v-else class="flex items-center justify-between p-4 cursor-pointer" :class="[$styles.textTitle, $styles.greenText]" @click="openSecondPanel(question)">
-            {{ question.answerName ? question.answerName : 'Выбрать вариант ответа' }}
-            <i class="mdi mdi-chevron-right text-[28px]"></i>
-          </span>
+            :clearable="false"
+            :error-messages="isSecondRequired ? (question.answerName ? [] : ['Выбрать вариант ответа']) : []"
+            @click="openSecondPanel(question)"
+          ></base-panel-input>
         </base-form-text-section>
-      </section>
+      </v-form>
     </section>
   </base-fade-transition>
-  <Teleport v-if="secondPanel" to="#panel-actions">
+  <Teleport v-if="secondPanel" to="#right-panel-actions">
     <div :class="[$styles.scrollPage]" class="flex flex-col items-center">
       <base-rounded-input v-model="searchQuery" :label="$dataStore.t('labels.search')" class="w-full p-2" :hide-details="true" />
       <div v-if="$dataStore.questionRefs && $dataStore.questionRefs.length && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
@@ -119,11 +191,55 @@
       <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50" />
     </div>
   </Teleport>
-  <base-scroll-buttons @up="scrollForm('up')" @down="scrollForm('down')" />
+  <Teleport v-if="isFirstPanelOnRight && firstPanel" to="#right-panel-actions">
+    <div :class="$styles.scrollPage">
+      <v-form
+        v-if="currentQuestion"
+        :class="[$styles.blueBgLight, $styles.rounded]"
+        class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4"
+        ref="vSecondaryForm"
+        @submit="submitSecondaryForm"
+      >
+        <base-form-text-section v-for="question in currentQuestion.second" :title="question.name" :key="question.name" :title-class="$styles.textSimple">
+          <div v-if="question.definedAnswers === 'N'">
+            <base-form-input
+              v-if="question.answerType === 'T' || question.answerType === 'N'"
+              v-model="question.answerText"
+              class="border-t-[1px] border-t-[#F3F6FC]"
+              :placeholder="$dataStore.t('labels.inputText')"
+              :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+              :rules="isSecondRequired ? $rules.required : []"
+            />
+            <base-form-input
+              v-if="question.answerType === 'D'"
+              v-model="question.answerText"
+              class="border-t-[1px] border-t-[#F3F6FC]"
+              :placeholder="$dataStore.t('form.date')"
+              :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+              :rules="isSecondRequired ? $rules.date : []"
+              :maska="$maska.date"
+              append-inner-icon="mdi mdi-calendar-blank-outline"
+            />
+          </div>
+          <base-panel-input
+            v-else
+            :class="[$styles.greenText]"
+            :value="question.answerName ? question.answerName : 'Выбрать вариант ответа'"
+            :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+            :clearable="false"
+            :error-messages="isSecondRequired ? (question.answerName ? [] : ['Выбрать вариант ответа']) : []"
+            @click="openSecondPanel(question)"
+          />
+        </base-form-text-section>
+      </v-form>
+    </div>
+  </Teleport>
+  <base-scroll-buttons v-if="firstQuestionList && firstQuestionList.length" @up="scrollForm('up')" @down="scrollForm('down')" />
 </template>
 
 <script lang="ts">
 import { Value } from '../../composables/classes';
+import type { AnketaBody, AnketaSecond, AnswerName } from '../../types';
 
 export default defineComponent({
   setup() {
@@ -132,11 +248,18 @@ export default defineComponent({
     const formStore = useFormStore();
     const dataStore = useDataStore();
     const vForm = ref<any>();
+    const vSecondaryForm = ref<any>();
     const firstPanelSection = ref<any>();
     const isButtonLoading = ref<boolean>(false);
     const answerToAll = ref<boolean>(false);
     const firstPanel = ref<boolean>(false);
     const secondPanel = ref<boolean>(false);
+    const filterType = ref<'Да' | 'Нет' | null>(null);
+    const filterItems = [
+      { title: 'Все', value: null },
+      { title: 'Только «Да»', value: 'Да' },
+      { title: 'Только «Нет»', value: 'Нет' },
+    ];
     const surveyType = ref<'health' | 'critical'>('tab' in route.query && route.query.tab === 'criticalBase' ? 'critical' : 'health');
     const whichSurvey = computed(() =>
       surveyType.value === 'health'
@@ -144,17 +267,19 @@ export default defineComponent({
           ? 'surveyByHealthBase'
           : 'surveyByHealthBasePolicyholder'
         : whichMember.value === 'insured'
-        ? 'surveyByCriticalBase'
-        : 'surveyByCriticalBasePolicyholder',
+          ? 'surveyByCriticalBase'
+          : 'surveyByCriticalBasePolicyholder',
     );
     const firstQuestionList = ref<AnketaBody[]>([]);
-    const secondQuestionList = ref<AnketaSecond[]>([]);
     const currentQuestion = ref<AnketaBody>();
     const currentSecond = ref<AnketaSecond>();
     const isPanelLoading = ref<boolean>(false);
     const searchQuery = ref<string>('');
+    const isFirstPanelOnRight = dataStore.isUnderwriter() && !useEnv().isProduction;
 
     const whichMember = computed(() => ('member' in route.query && !!route.query.member ? (route.query.member as 'insured' | 'policyholder') : 'insured'));
+    const isSecondRequired = computed(() => dataStore.controls.isSecondAnketaRequired);
+    const firstQuestions = computed(() => (filterType.value !== null ? firstQuestionList.value.filter(i => i.first.answerName === filterType.value) : firstQuestionList.value));
     const scrollForm = (direction: 'up' | 'down') => {
       const scrollObject = { top: direction === 'up' ? 0 : screen.height * 10, behavior: 'smooth' };
       if (firstPanel.value) {
@@ -168,16 +293,45 @@ export default defineComponent({
       await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
         if (v.valid) {
           isButtonLoading.value = true;
-          formStore[whichSurvey.value]!.body.forEach((survey: AnketaBody) => {
-            if (survey.first.answerText === 'Нет') {
-              survey.second = [];
-            }
-          });
+          const isValid = dataStore.validateAnketa(whichSurvey.value);
+          if (!isValid) {
+            isButtonLoading.value = false;
+            return false;
+          }
+          if (formStore[whichSurvey.value] && formStore[whichSurvey.value]?.body) {
+            formStore[whichSurvey.value]?.body.forEach(question => {
+              if (question.first.definedAnswers === 'Y' && question.first.answerName?.match(new RegExp('Да', 'i')) && question.second && question.second.length) {
+                question.second.forEach(second => {
+                  if (second.answerType === 'D') second.answerText = formatDate(String(second.answerText))!.toISOString();
+                });
+              }
+              if (question.first.definedAnswers === 'Y' && question.first.answerName?.match(new RegExp('Нет', 'i')) && question.second && question.second.length) {
+                question.second.forEach(second => {
+                  if (second.definedAnswers === 'N') {
+                    second.answerText = null;
+                  } else {
+                    second.answerId = null;
+                    second.answerName = null;
+                  }
+                });
+              }
+              if (question.first.definedAnswers === 'D' && question.first.answerName?.match(new RegExp('Нет', 'i')) && question.first.answerText) {
+                question.first.answerText = null;
+              }
+            });
+          }
           formStore[whichSurvey.value]!.type = surveyType.value;
           const anketaToken = await dataStore.setSurvey(formStore[whichSurvey.value]!);
           if (typeof anketaToken === 'string') {
             formStore[whichSurvey.value]!.id = anketaToken;
           }
+          await dataStore.getQuestionList(
+            surveyType.value,
+            formStore.applicationData.processInstanceId,
+            whichMember.value === 'insured' ? formStore.applicationData.insuredApp[0].id : formStore.applicationData.clientApp.id,
+            whichSurvey.value,
+            whichMember.value,
+          );
           isButtonLoading.value = false;
         } else {
           const errors = document.querySelector('.v-input--error');
@@ -201,13 +355,40 @@ export default defineComponent({
       });
     };
 
-    const openFirstPanel = async (question: AnketaBody) => {
-      currentQuestion.value = question;
-      formStore[whichSurvey.value]!.body.forEach((question_object: AnketaBody) => {
-        if ((question_object.first.id === question.first.id && question_object.second && !question_object.second.length) || question_object.second == null) {
-          question_object.second = JSON.parse(JSON.stringify(formStore[surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond']));
+    const submitSecondaryForm = async () => {
+      await vSecondaryForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          if (isSecondRequired.value && currentQuestion.value && currentQuestion.value.second) {
+            const hasError = currentQuestion.value.second.find(second => (second.definedAnswers === 'N' ? !second.answerText : !second.answerName));
+            if (hasError) {
+              dataStore.showToaster('error', dataStore.t('toaster.emptySecondAnketa', { text: hasError.name }), 5000);
+              return false;
+            }
+          }
+          firstPanel.value = false;
+          secondPanel.value = false;
+        } else {
+          const errors = document.querySelector('.v-input--error');
+          if (errors) {
+            const errorText = errors.parentElement?.children[0].innerHTML;
+            if (errorText) {
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorText?.replace(/[-<>!//.]/g, '') }));
+            }
+            errors.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+              inline: 'nearest',
+            });
+          }
         }
       });
+    };
+    const openFirstPanel = async (question: AnketaBody) => {
+      currentQuestion.value = question;
+      if (isFirstPanelOnRight) {
+        dataStore.rightPanel.open = true;
+        dataStore.rightPanel.title = `${String(question.first.name).substring(0, 60)}...`;
+      }
       firstPanel.value = true;
       secondPanel.value = false;
     };
@@ -219,8 +400,8 @@ export default defineComponent({
       await dataStore.getQuestionRefs(question.id);
       secondPanel.value = true;
       dataStore.panelAction = null;
-      dataStore.panel.open = true;
-      dataStore.panel.title = question.name;
+      dataStore.rightPanel.open = true;
+      dataStore.rightPanel.title = question.name;
       isPanelLoading.value = false;
     };
 
@@ -231,12 +412,11 @@ export default defineComponent({
       }
       secondPanel.value = false;
       dataStore.panelAction = null;
-      dataStore.panel.open = false;
+      dataStore.rightPanel.open = false;
       dataStore.questionRefs = [];
     };
 
     const getDefinedAnswerId = async (id: string, value: any, index: number) => {
-      // @ts-ignore
       await dataStore.definedAnswers(id, whichSurvey.value, value, index);
     };
 
@@ -272,18 +452,16 @@ export default defineComponent({
         formStore.applicationData.processInstanceId,
         whichMember.value === 'insured' ? formStore.applicationData.insuredApp[0].id : formStore.applicationData.clientApp.id,
         whichSurvey.value,
-        surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond',
         whichMember.value,
       );
       firstQuestionList.value = formStore[whichSurvey.value]!.body;
-      secondQuestionList.value = formStore[surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond']!;
       formStore[whichSurvey.value]!.type = surveyType.value;
       const negativeAnswer = firstQuestionList.value.every(i => i.first.answerName === 'Нет');
       if (negativeAnswer) {
         answerToAll.value = true;
       }
       await Promise.allSettled(
-        firstQuestionList.value.map(async (question: any) => {
+        firstQuestionList.value.map(async question => {
           await dataStore.definedAnswers(question.first.id, whichSurvey.value);
         }),
       );
@@ -293,10 +471,14 @@ export default defineComponent({
       await onInit();
     });
 
+    onUnmounted(() => {
+      dataStore.abortRequests();
+    });
+
     watch(
-      () => dataStore.panel.open,
+      () => dataStore.rightPanel.open,
       () => {
-        if (dataStore.panel.open === false) {
+        if (dataStore.rightPanel.open === false) {
           secondPanel.value = false;
           dataStore.panelAction = null;
         }
@@ -308,7 +490,7 @@ export default defineComponent({
       () => firstQuestionList.value,
       value => {
         if (value) {
-          const hasPositiveAnswer = value.some(i => i.first.definedAnswers === 'Y' && i.first.answerName !== 'Нет');
+          const hasPositiveAnswer = value.some(i => (i.first.definedAnswers === 'Y' || i.first.definedAnswers === 'D') && i.first.answerName !== 'Нет');
           answerToAll.value = !hasPositiveAnswer;
         }
       },
@@ -320,22 +502,30 @@ export default defineComponent({
     return {
       // State
       vForm,
+      vSecondaryForm,
       formStore,
       answerToAll,
+      firstQuestions,
       firstQuestionList,
-      secondQuestionList,
       whichSurvey,
       isButtonLoading,
       firstPanel,
+      filterType,
+      filterItems,
       secondPanel,
       currentQuestion,
       currentSecond,
       isPanelLoading,
       searchQuery,
       firstPanelSection,
+      isSecondRequired,
+
+      // Computed
+      isFirstPanelOnRight,
 
       // Functions
       submitForm,
+      submitSecondaryForm,
       getDefinedAnswerId,
       scrollForm,
       handleToggler,