hl-core 0.0.8 → 0.0.9-beta.10

package/components/Pages/Anketa.vue

@@ -1,13 +1,19 @@
 <template>
   <base-fade-transition>
     <section v-if="firstQuestionList && firstQuestionList.length && !firstPanel && !secondPanel" class="flex flex-col">
-      <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
-        <base-form-toggle v-model="answerToAll" :title="$t('questionnaireType.answerAllNo')" :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()" :has-border="false" @clicked="handleToggler"></base-form-toggle>
+      <section :class="[$styles.blueBgLight, $styles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
+        <base-form-toggle
+          v-model="answerToAll"
+          :title="$dataStore.t('questionnaireType.answerAllNo')"
+          :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+          :has-border="false"
+          @clicked="handleToggler"
+        />
       </section>
       <v-form ref="vForm" class="max-h-[70vh] overflow-y-scroll" @submit="submitForm">
         <section
           v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'N').length"
-          :class="[$libStyles.blueBgLight, $libStyles.rounded]"
+          :class="[$styles.blueBgLight, $styles.rounded]"
           class="mx-[10px] p-4 flex flex-col gap-4"
         >
           <base-form-input
@@ -18,73 +24,79 @@
             :maska="$maska.threeDigit"
             :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
             :rules="$rules.required"
-          ></base-form-input>
+          />
         </section>
         <section
           v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'Y').length"
-          :class="[$libStyles.blueBgLight, $libStyles.rounded]"
+          :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>
               <div
                 v-if="question.first.answerName === 'Да' && secondQuestionList"
-                :class="[$libStyles.greenBg, $libStyles.whiteText, $libStyles.textSimple]"
+                :class="[$styles.greenBg, $styles.whiteText, $styles.textSimple]"
                 class="rounded-t-lg pl-6 py-1 cursor-pointer"
                 @click="openFirstPanel(question)"
               >
-                {{ $t('questionnaireType.pleaseAnswer').replace('{text}', `${secondQuestionList.length}`) }}
+                {{ $dataStore.t('questionnaireType.pleaseAnswer', { text: secondQuestionList.length }) }}
               </div>
             </base-fade-transition>
-            <span :class="[$libStyles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
+            <span :class="[$styles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
               {{ question.first.name }}
               <base-fade-transition>
-                <i v-if="question.first.answerName === 'Да' && secondQuestionList" class="mdi mdi-chevron-right text-2xl cursor-pointer" @click="openFirstPanel(question)"></i>
+                <i
+                  v-if="question.first.answerName === 'Да' && secondQuestionList && secondQuestionList.length"
+                  class="mdi mdi-chevron-right text-2xl cursor-pointer"
+                  @click="openFirstPanel(question)"
+                ></i>
               </base-fade-transition>
             </span>
-            <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$libStyles.textSimple]">
+            <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 ${$libStyles.greenText}`"
+                :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>
-                <v-radio label="Нет" value="Нет"></v-radio>
+                <v-radio label="Да" value="Да" />
+                <v-radio label="Нет" value="Нет" />
               </v-radio-group>
             </div>
           </base-form-text-section>
         </section>
       </v-form>
-      <base-btn class="my-[14px] self-center" :loading="isButtonLoading" :disabled="formStore.isDisabled[whichSurvey]" @click="submitForm" :text="$t('buttons.save')"></base-btn>
+      <base-btn
+        class="my-[14px] self-center"
+        :loading="isButtonLoading"
+        :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+        @click="submitForm"
+        :text="$dataStore.t('buttons.save')"
+      />
     </section>
-    <section
-      ref="firstPanelSection"
+    <v-btn
       v-if="secondQuestionList && secondQuestionList.length && firstPanel"
-      class="flex flex-col px-[10px] py-[14px]"
-      :class="[$libStyles.scrollPage]"
-    >
-      <v-btn
-        icon="mdi mdi-close"
-        variant="text"
-        size="large"
-        @click="
-          firstPanel = false;
-          secondPanel = false;
-        "
-      ></v-btn>
-      <section v-if="currentQuestion" :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
+      icon="mdi mdi-close"
+      class="ml-3 !absolute z-10"
+      @click="
+        firstPanel = false;
+        secondPanel = false;
+      "
+    />
+    <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">
         <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="Введите текст"
-          ></base-form-input>
-          <span v-else class="flex items-center justify-between p-4 cursor-pointer" :class="[$libStyles.textTitle, $libStyles.greenText]" @click="openSecondPanel(question)">
+            :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>
@@ -93,8 +105,8 @@
     </section>
   </base-fade-transition>
   <Teleport v-if="secondPanel" to="#panel-actions">
-    <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
-      <base-rounded-input v-model="searchQuery" :label="$t('labels.search')" class="w-full p-2" :hide-details="true"></base-rounded-input>
+    <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">
         <base-panel-select-item
           v-for="(item, index) of $dataStore.questionRefs.filter(i => i.nameRu && (i.nameRu as string).match(new RegExp(searchQuery, 'i')))"
@@ -102,16 +114,16 @@
           :text="`${item.nameRu}`"
           :selected="currentSecond!.answerId === item.ids"
           @click="closeSecondPanel(item)"
-        ></base-panel-select-item>
+        />
       </div>
-      <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50"></base-loader>
+      <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50" />
     </div>
   </Teleport>
   <base-scroll-buttons @up="scrollForm('up')" @down="scrollForm('down')" />
 </template>
 
 <script lang="ts">
-import { Value } from '@/composables/classes';
+import { Value } from '../../composables/classes';
 
 export default defineComponent({
   setup() {
@@ -126,14 +138,23 @@ export default defineComponent({
     const firstPanel = ref<boolean>(false);
     const secondPanel = ref<boolean>(false);
     const surveyType = ref<'health' | 'critical'>('tab' in route.query && route.query.tab === 'criticalBase' ? 'critical' : 'health');
-    const whichSurvey = computed(() => (surveyType.value === 'health' ? 'surveyByHealthBase' : 'surveyByCriticalBase'));
-    const firstQuestionList = ref<AnketaBody[]>();
+    const whichSurvey = computed(() =>
+      surveyType.value === 'health'
+        ? whichMember.value === 'insured'
+          ? 'surveyByHealthBase'
+          : 'surveyByHealthBasePolicyholder'
+        : whichMember.value === 'insured'
+        ? '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 whichMember = computed(() => ('member' in route.query && !!route.query.member ? (route.query.member as 'insured' | 'policyholder') : 'insured'));
     const scrollForm = (direction: 'up' | 'down') => {
       const scrollObject = { top: direction === 'up' ? 0 : screen.height * 10, behavior: 'smooth' };
       if (firstPanel.value) {
@@ -153,19 +174,21 @@ export default defineComponent({
             }
           });
           formStore[whichSurvey.value]!.type = surveyType.value;
-          const anketaToken = await dataStore.setSurvey(formStore[whichSurvey.value]);
-          formStore[whichSurvey.value]!.id = anketaToken;
+          const anketaToken = await dataStore.setSurvey(formStore[whichSurvey.value]!);
+          if (typeof anketaToken === 'string') {
+            formStore[whichSurvey.value]!.id = anketaToken;
+          }
           isButtonLoading.value = false;
         } else {
           const errors = document.querySelector('.v-input--error');
           if (errors) {
             const errorText = errors.querySelector('.v-label.v-field-label');
             if (errorText) {
-              dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorText.innerHTML?.replace(/[-<>!//.]/g, '')));
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorText.innerHTML?.replace(/[-<>!//.]/g, '') }));
             } else {
               const errorFieldText = errors.parentElement?.parentElement?.children[0].innerHTML;
               if (errorFieldText) {
-                dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorFieldText));
+                dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorFieldText }));
               }
             }
             errors.scrollIntoView({
@@ -247,9 +270,10 @@ export default defineComponent({
       await dataStore.getQuestionList(
         surveyType.value,
         formStore.applicationData.processInstanceId,
-        formStore.applicationData.insuredApp[0].id,
+        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']!;
@@ -259,13 +283,10 @@ export default defineComponent({
         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);
         }),
       );
-      if (formStore.isDisabled.surveyByHealthBase) {
-        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
-      }
     };
 
     onMounted(async () => {

package/components/Pages/Auth.vue

@@ -1,27 +1,79 @@
 <template>
-  <section class="flex flex-col justify-evenly">
-    <img draggable="false" class="w-2/3 lg:w-[25vw] self-center" src="~/assets/auth-logo.svg" />
-    <v-form ref="vForm" class="w-2/3 lg:w-[35vw] self-center">
-      <base-rounded-input
-        class="mb-1"
-        v-model="login"
-        :rules="$dataStore.rules.required"
-        :loading="authLoading"
-        :placeholder="$t('buttons.userLogin')"
-        type="text"
-        @submitted="submitAuthForm"
-      ></base-rounded-input>
-      <base-rounded-input
-        class="mb-1"
-        v-model="password"
-        :rules="$dataStore.rules.required"
-        :loading="authLoading"
-        :placeholder="$t('buttons.password')"
-        type="password"
-        @submitted="submitAuthForm"
-      ></base-rounded-input>
-      <base-btn :text="$t('buttons.login')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm"></base-btn>
-    </v-form>
+  <section class="flex h-full" :class="$styles.blueBgLight">
+    <!-- @vue-ignore -->
+    <aside :class="{ '!hidden': !$display().lgAndUp.value }" class="w-full lg:w-1/4 bg-white flex flex-col justify-between border-r-2 relative px-8">
+      <img draggable="false" class="w-[50%] mt-8" src="~/assets/auth-logo.svg" />
+      <div class="self-center flex flex-col items-center justify-center base-auth">
+        <v-carousel :show-arrows="false" color="#009C73">
+          <v-carousel-item v-for="(item, index) of carouselItems" :key="index">
+            <img draggable="false" class="mx-auto" :src="item.img" />
+            <div class="flex flex-col items-center justify-center mt-12 mb-8 text-center">
+              <h2 class="text-[22px] font-medium mb-1">{{ item.title }}</h2>
+              <h4 class="text-[16px]">{{ item.subtitle }}</h4>
+            </div>
+          </v-carousel-item>
+        </v-carousel>
+      </div>
+      <base-btn :text="$dataStore.t('buttons.more')" :disabled="true" class="mb-28" />
+    </aside>
+    <section v-if="isLogin" class="w-full lg:w-3/4 flex flex-col justify-center">
+      <!-- @vue-ignore -->
+      <img :class="{ '!block': !$display().lgAndUp.value }" draggable="false" class="hidden w-2/4 sm:w-1/3 mb-10 self-center" src="~/assets/auth-logo.svg" />
+      <div class="flex flex-col items-center mb-8 text-center">
+        <h1 class="text-[28px] font-medium mb-1">{{ $dataStore.t('labels.welcomeHL') }}</h1>
+        <span :class="[$styles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.needAuth') }}</span>
+      </div>
+      <v-form ref="vForm" class="w-2/3 lg:w-[25vw] self-center">
+        <base-rounded-input class="mb-1" v-model.trim="login" :rules="$rules.required" :loading="authLoading" :placeholder="$dataStore.t('buttons.userLogin')" type="text" />
+        <base-rounded-input
+          class="mb-1"
+          v-model.trim="password"
+          :rules="$rules.required"
+          :loading="authLoading"
+          :placeholder="$dataStore.t('buttons.password')"
+          :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+          @append="showPassword = !showPassword"
+          :type="showPassword ? ('' as InputTypes) : 'password'"
+        />
+        <span v-if="$dataStore.isLKA" class="inline-block w-full text-end mb-4" :class="[$styles.textSimple, $styles.greyTextDark]" @click="isLogin = false">{{
+          $dataStore.t('labels.resetPassword')
+        }}</span>
+        <base-btn :text="$dataStore.t('buttons.login')" :disabled="authLoading" :btn="$styles.greenBtn" @click="submitAuthForm" />
+      </v-form>
+    </section>
+    <section v-if="isLogin === false" class="w-full lg:w-3/4 flex flex-col justify-center items-center">
+      <div class="flex flex-col items-center mb-4">
+        <h1 class="text-[28px] font-medium mb-1">{{ $dataStore.t('labels.resetPassword') }}</h1>
+        <span :class="[$styles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.resetType') }}</span>
+      </div>
+      <div class="p-[2px] mb-8 rounded-[12px] border-[1px] w-2/3 lg:w-[25vw]" :class="[$styles.whiteBg]">
+        <v-tabs v-model="resetPasswordType" density="compact" slider-color="#009c73" class="w-full base-reset-password rounded-[12px]" :class="[$styles.whiteBg]">
+          <v-tab :ripple="false" value="phone"> {{ $dataStore.t('form.phoneNumber') }} </v-tab>
+          <v-tab :ripple="false" value="email"> {{ $dataStore.t('form.email') }} </v-tab>
+        </v-tabs>
+      </div>
+      <v-form ref="vForm" class="w-2/3 lg:w-[25vw] self-center">
+        <base-rounded-input
+          v-if="resetPasswordType === 'phone'"
+          v-model.trim="phone"
+          :maska="$maska.phone"
+          :rules="$rules.required.concat($rules.phoneFormat)"
+          :loading="authLoading"
+          :placeholder="$dataStore.t('form.phoneNumber')"
+          type="text"
+        />
+        <base-rounded-input
+          v-if="resetPasswordType === 'email'"
+          v-model.trim="email"
+          :rules="$rules.required.concat($rules.email)"
+          :loading="authLoading"
+          :placeholder="$dataStore.t('form.email')"
+          type="text"
+        />
+        <span class="inline-block w-full text-end mb-4" :class="[$styles.textSimple, $styles.greyTextDark]" @click="isLogin = true">{{ $dataStore.t('buttons.login') }}</span>
+        <base-btn :text="$dataStore.t('buttons.reset')" :disabled="authLoading" :btn="$styles.greenBtn" @click="submitAuthForm" />
+      </v-form>
+    </section>
   </section>
 </template>
 
@@ -33,24 +85,32 @@ export default defineComponent({
     const dataStore = useDataStore();
 
     const vForm = ref<any>(null);
+    const isLogin = ref<boolean>(true);
+    const showPassword = ref<boolean>(false);
+    const phone = ref<string>();
+    const email = ref<string>();
+    const resetPasswordType = ref<string>();
 
-    const credentials = {
-      production: { login: '', password: '' },
-      test: { login: '', password: '' },
-      development: { login: 'manager', password: 'asdqwe123' },
-      vercel: { login: '', password: 'asdqwe123' },
-    };
-
-    const useEnv = {
-      envMode: import.meta.env.VITE_MODE,
-      isDev: import.meta.env.VITE_MODE === 'development',
-      isTest: import.meta.env.VITE_MODE === 'test',
-      isVercel: import.meta.env.VITE_MODE === 'vercel',
-      isProduction: import.meta.env.VITE_MODE === 'production',
-    };
+    const carouselItems = [
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+    ];
 
-    const login = ref<string>(credentials[useEnv.envMode as keyof typeof credentials].login);
-    const password = ref<string>(credentials[useEnv.envMode as keyof typeof credentials].password);
+    const login = ref<string>(getBaseCredentials()[useEnv().envMode].login);
+    const password = ref<string>(getBaseCredentials()[useEnv().envMode].password);
 
     const numAttempts = ref(0);
 
@@ -68,24 +128,57 @@ export default defineComponent({
     const submitAuthForm = async () => {
       await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
         if (v.valid) {
-          authLoading.value = true;
-          await dataStore.loginUser(login.value, password.value, numAttempts.value);
-          numAttempts.value++;
-          authLoading.value = false;
-          if (!!dataStore.user.id) {
-            router.push({ name: 'index' });
+          if (isLogin.value === true) {
+            authLoading.value = true;
+            await dataStore.loginUser(login.value, password.value, numAttempts.value);
+            numAttempts.value++;
+            authLoading.value = false;
+            if (!!dataStore.user.id) {
+              await router.push({ name: 'index' });
+            }
+          } else {
+            // TODO Reset password
           }
         }
       });
     };
 
     return {
+      // State
       login,
-      password,
       vForm,
+      phone,
+      email,
+      isLogin,
+      password,
       authLoading,
+      showPassword,
+      carouselItems,
+      resetPasswordType,
+
+      // Functions
       submitAuthForm,
     };
   },
 });
 </script>
+
+<style>
+.base-auth .v-carousel__controls {
+  background: white !important;
+}
+.base-reset-password .v-tab__slider {
+  z-index: -1;
+  height: 100% !important;
+  border-radius: 12px;
+}
+.base-reset-password .v-tab {
+  width: 50%;
+  color: #566681;
+  text-transform: unset;
+  font-size: 12px;
+}
+.base-reset-password .v-tab--selected {
+  color: white !important;
+}
+</style>