From a236c8a3c042da4b9372d09cc40cfd0d21fc5873 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 2 Jul 2024 17:14:02 +0300
Subject: [PATCH] email validation

---
 components/calcValues.vue | 56 ++++++++++++++++++++-------------------
 components/modal.vue      | 22 +++++++--------
 2 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/components/calcValues.vue b/components/calcValues.vue
index fbcb133..f8fd931 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -191,33 +191,35 @@ const plurals = {
                 </div>
             </div>
             <div class="col-span-12 lg:col-span-8 prose min-w-full">
-                <p>
-                    Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
-                    {{ section_count }}
-                    <Plural :n="section_count" :forms="plurals.section" /> по
-                    {{ `${parseInt(form_state.length).toFixed(2)}\xa0мм` }}{{
-                        form_state.extra_section ? ` и 1 дополнительная секция
-                    длиной ${form_state.extra_section.toFixed(2)}\xa0мм` : '' }}.
-                </p>
-                <p v-if="parametric.length.min <= form_state.total_length * 1000">
-                    Всего <template v-if="!form_state.remove_pillar">
-                        {{ section_count + ~~(!!form_state.extra_section) + 1 }}
-                        <Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
-                    </template>
-                    {{ section_count * lamelles_count }}
-                    <Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
-                    {{ `длиной ${parseInt(form_state.length).toFixed(2)}\xa0мм` }}<template
-                        v-if="form_state.extra_section">
-                        {{ ` и ${~~(!!form_state.extra_section.toFixed(2)) * lamelles_count}` }}
-                        <Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" />
-                        {{ `длиной ${form_state.extra_section}\xa0мм` }}
-                    </template>.
-                </p>
-                <p>
-                    Окрашивается по технологии порошковой окраски: <br />
-                    ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
-                    столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
-                </p>
+                <template v-if="(form_state.total_length * 1000) >= parametric.length.min">
+                    <p>
+                        Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
+                        {{ section_count }}
+                        <Plural :n="section_count" :forms="plurals.section" /> по
+                        {{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}{{
+                            form_state.extra_section ? ` и 1 дополнительная секция
+                        длиной ${form_state.extra_section.toFixed(2)}\xa0мм` : '' }}.
+                    </p>
+                    <p v-if="parametric.length.min <= form_state.total_length * 1000">
+                        Всего <template v-if="!form_state.remove_pillar">
+                            {{ section_count + ~~(!!form_state.extra_section) + 1 }}
+                            <Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
+                        </template>
+                        {{ section_count * lamelles_count }}
+                        <Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
+                        {{ `длиной ${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}<template
+                            v-if="form_state.extra_section">
+                            {{ ` и ${~~(!!form_state.extra_section.toFixed(2)) * lamelles_count}` }}
+                            <Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" />
+                            {{ `длиной ${form_state.extra_section}\xa0мм` }}
+                        </template>.
+                    </p>
+                    <p>
+                        Окрашивается по технологии порошковой окраски: <br />
+                        ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
+                        столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
+                    </p>
+                </template>
             </div>
             <div class="prose col-span-4">
                 <p v-if="form_state.extra_section" class="text-ioprim">
diff --git a/components/modal.vue b/components/modal.vue
index 94eb129..a626112 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -51,19 +51,16 @@ const validateInput = (evt: KeyboardEvent) => {
         return
     }
 }
+
 const validate = () => {
     const phone_regexp = /^\+?[\d\s-()]{0,14}\d{11}$/
     const email_regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
 
-    if (!modal_data.phone) {
-        modal_form.disabled = true
-        return
-    }
-    if (modal_data.phone.length < 3) {
-        modal_form.disabled = true
-        return
-    }
-    if (phone_regexp.test(modal_data.phone) || email_regex.test(modal_data.phone)) {
+    modal_form.disabled = true
+    if (
+        (modal_data.phone && phone_regexp.test(modal_data.phone))
+        || (modal_data.email && email_regex.test(modal_data.email))
+    ) {
         modal_form.disabled = false
         return
     }
@@ -167,7 +164,7 @@ const total_txt = computed(() => {
         <div class="modal">
             <template v-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
-                <form @submit.prevent="submit">
+                <form @submit.prevent="submit" ref="form">
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
                     <input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
                         @keypress="validateInput" @keyup="validate" />
@@ -196,9 +193,8 @@ const total_txt = computed(() => {
                         </p>
                     </template>
                 </div>
-                <div class="flex gap-4">
-                    <button class="not-prose" @click="openForm">Отправить расчет на эл. почту</button>
-                    <button class="not-prose neutral" @click="toggleModal">Закрыть окно</button>
+                <div class="flex gap-4 justify-center">
+                    <button class="not-prose" @click="openForm">Отправить расчет на e-mail</button>
                 </div>
             </template>
         </div>