From 8b6eb0401aea4c936fdaf4c570ab2c321b397e3f Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Fri, 31 Mar 2023 18:28:07 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=9E=D1=81=D0=BD=D0=BE=D0=B2=D0=BD=D1=8B=D1=85=20=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             | 10 ++-
 .../components/BasicDataForm.vue              | 61 +++++++++++++++
 .../components/MedicalFormWrapper.vue         |  6 +-
 .../newMedicalCard/utils/configMedical.js     | 75 +++++++++++++++++--
 4 files changed, 143 insertions(+), 9 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 0f95b13..f2206fc 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -3,14 +3,14 @@
     q-input(
       v-model="value",
       :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ color: textColor, width: width + 'px' }",
+      :input-style="{ color: textColor, width: width + 'px' , borderColor: borderColor}",
       :borderless="borderless",
       :placeholder="placeholder",
       :outlined="outlined",
       :dense="dense",
       :type="type",
       :filled="filled",
-      :bg-color="filled ? '' : 'white'",
+      :bg-color="filled || standout ? '' : 'white'",
       :disable="disabled",
       :rules="rule",
       :lazy-rules="lazyRule",
@@ -20,6 +20,7 @@
       :maxlength="maxLength",
       :autogrow="autogrow",
       :square="square",
+      :standout="standout"
       hide-bottom-space
     )
       slot.cursor-pointer
@@ -60,10 +61,15 @@ export default {
     type: {
       default: "text",
     },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     mask: String,
     width: Number,
     maxLength: Number,
     textColor: String,
+    borderColor: String,
     rule: Array,
     lazyRule: [Boolean, String],
     noErrorIcon: Boolean,
diff --git a/src/pages/newMedicalCard/components/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForm.vue
index 61b61ee..98fb148 100644
--- a/src/pages/newMedicalCard/components/BasicDataForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForm.vue
@@ -1,8 +1,69 @@
 <template lang="pug">
+  medical-form-wrapper(title="Основная информация")
+    .form-wrap.form.flex.gap-24.w-full
+      .data-section.flex.flex-col.gap-4(v-for="data in configData")
+        .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
+        .flex.justify-between.items-center.gap-4(v-for="field in data.fields")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
+          .avatar-field.justify-start(v-if="field.type === 'avatar'")
+            base-avatar(:size="40")
+          base-input(v-else v-model="initData[data.dataKey][field.key]" :type="field.type" :width="300" standout="bg-white" text-color="black")
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { baseDataForm } from "@/pages/newMedicalCard/utils/configMedical";
 export default {
   name: "BasicDataForm",
+  components: { MedicalFormWrapper, BaseInput, BaseAvatar },
+  data() {
+    return {
+      configData: baseDataForm,
+      initData: {
+        basicData: {
+          last_name: "",
+          first_name: "",
+          patronymic: "",
+          gender: "",
+          birth_date: new Date(),
+          photo: "",
+        },
+        registrationAddress: {
+          region: "",
+          city: "",
+          street: "",
+          house_number: "",
+          apartment_number: "",
+        },
+        residenceAddress: {
+          region: "",
+          city: "",
+          street: "",
+          house_number: "",
+          apartment_number: "",
+        },
+      },
+    };
+  },
 };
 </script>
+
+<style lang="sass" scoped>
+.avatar-field
+  min-width: 310px
+.input
+  color: purple
+.data-section
+  width: 30%
+  @media(max-width: 1900px)
+    width: 28%
+  @media(max-width: 1700px)
+    width: 100%
+.form-wrap
+  @media(max-width: 1700px)
+    flex-direction: column
+.label-field
+  color: var(--font-grey-color)
+</style>
diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
index 487dc4a..07ff522 100644
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .form-wrapper.relative.h-fit.rounded
     transition(name="medical-form", mode="out-in")
-      .loader.absolute.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
+      .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
         base-loader
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-fit.gap-11px.items-center
@@ -48,8 +48,10 @@ export default {
 
 <style lang="sass" scoped>
 .form-wrapper
-  width: 1532px
+  width: 83.2%
   background-color: var(--default-white)
+  @media (max-width: 600px)
+    width: fit-content
 .edit-button
   color: var(--btn-blue-color)
 .loader
diff --git a/src/pages/newMedicalCard/utils/configMedical.js b/src/pages/newMedicalCard/utils/configMedical.js
index dbf3509..2e6af9c 100644
--- a/src/pages/newMedicalCard/utils/configMedical.js
+++ b/src/pages/newMedicalCard/utils/configMedical.js
@@ -1,34 +1,99 @@
 export const baseDataForm = [
   {
-    fieldName: "Личные данные",
+    dataLabel: "Личные данные",
+    dataKey: "basicData",
     fields: [
       {
         key: "last_name",
         label: "Фамилия",
+        type: "text",
       },
       {
         key: "first_name",
         label: "Имя",
+        type: "text",
       },
       {
         key: "patronymic",
         label: "Отчество",
-      },
-      {
-        key: "patronymic",
-        label: "Отчество",
+        type: "text",
       },
       {
         key: "gender",
         label: "Пол",
+        type: "text",
       },
       {
         key: "birth_date",
         label: "Дата рождения",
+        type: "date",
       },
       {
         key: "photo",
         label: "Фото",
+        type: "avatar",
+      },
+    ],
+  },
+  {
+    dataLabel: "Адрес регистрации",
+    dataKey: "registrationAddress",
+    fields: [
+      {
+        key: "region",
+        label: "Регион",
+        type: "text",
+      },
+      {
+        key: "city",
+        label: "Город",
+        type: "text",
+      },
+      {
+        key: "street",
+        label: "Улица",
+        type: "text",
+      },
+      {
+        key: "house_number",
+        label: "Дом",
+        type: "number",
+      },
+      {
+        key: "apartment_number",
+        label: "Квартира",
+        type: "number",
+      },
+    ],
+  },
+  {
+    dataLabel: "Адрес проживания",
+    dataKey: "residenceAddress",
+    fields: [
+      {
+        key: "region",
+        label: "Регион",
+        type: "text",
+      },
+      {
+        key: "city",
+        label: "Город",
+        type: "text",
+      },
+      {
+        key: "street",
+        label: "Улица",
+        type: "text",
+      },
+      {
+        key: "house_number",
+        label: "Дом",
+        type: "number",
+      },
+      {
+        key: "apartment_number",
+        label: "Квартира",
+        type: "number",
       },
     ],
   },