From 3ea002a5e5b85609280276176fabae551fa25cd3 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Thu, 30 Mar 2023 19:41:41 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D1=80=D0=B0=D0=BF=D0=BF=D0=B5=D1=80=20=D0=B4=D0=BB=D1=8F?=
 =?UTF-8?q?=20=D1=84=D0=BE=D1=80=D0=BC=20=D0=BC=D0=B5=D0=B4=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=80=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BasicDataForm.vue              |  8 +++
 .../components/MedicalFormWrapper.vue         | 69 +++++++++++++++++++
 .../newMedicalCard/utils/configMedical.js     | 35 ++++++++++
 tailwind.config.js                            |  1 +
 4 files changed, 113 insertions(+)
 create mode 100644 src/pages/newMedicalCard/components/BasicDataForm.vue
 create mode 100644 src/pages/newMedicalCard/components/MedicalFormWrapper.vue
 create mode 100644 src/pages/newMedicalCard/utils/configMedical.js

diff --git a/src/pages/newMedicalCard/components/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForm.vue
new file mode 100644
index 0000000..61b61ee
--- /dev/null
+++ b/src/pages/newMedicalCard/components/BasicDataForm.vue
@@ -0,0 +1,8 @@
+<template lang="pug">
+</template>
+
+<script>
+export default {
+  name: "BasicDataForm",
+};
+</script>
diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
new file mode 100644
index 0000000..8ccf8da
--- /dev/null
+++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
@@ -0,0 +1,69 @@
+<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")
+        base-loader
+    .flex.flex-col.h-full.gap-25px.m-6
+      .flex.w-fit.gap-11px.items-center
+        span.font-bold.text-base {{title}}
+        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!thisEdit" @click="clickEditForm" size="20")
+      slot
+      .flex.h-fit.w-fit.gap-2
+        base-button.text-base.font-semibold(v-if="thisEdit" outlined :size="40" @click="cancelEdit") Отменить
+        base-button.text-base.font-semibold(v-if="thisEdit" :size="40" @click="saveChangeForm") Сохранить изменения
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseLoader from "@/components/Loader/BaseLoader.vue";
+export default {
+  name: "MedicalFormWrapper",
+  components: { BaseButton, BaseLoader },
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      thisEdit: false,
+      isLoadingData: false,
+    };
+  },
+  methods: {
+    clickEditForm() {
+      this.thisEdit = true;
+    },
+    cancelEdit() {
+      this.thisEdit = false;
+    },
+    saveChangeForm() {
+      this.isLoadingData = true;
+      setTimeout(() => {
+        this.isLoadingData = false;
+        this.thisEdit = false;
+      }, 2000);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.form-wrapper
+  width: 1532px
+  background-color: var(--default-white)
+.edit-button
+  color: var(--btn-blue-color)
+.loader
+  background-color: var(--default-white)
+.medical-form-enter-from
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.medical-form-leave-to
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.medical-form-leave-active
+  transition: 0.3s ease
+.medical-form-move
+  transition: 0.3s ease
+</style>
diff --git a/src/pages/newMedicalCard/utils/configMedical.js b/src/pages/newMedicalCard/utils/configMedical.js
new file mode 100644
index 0000000..dbf3509
--- /dev/null
+++ b/src/pages/newMedicalCard/utils/configMedical.js
@@ -0,0 +1,35 @@
+export const baseDataForm = [
+  {
+    fieldName: "Личные данные",
+    fields: [
+      {
+        key: "last_name",
+        label: "Фамилия",
+      },
+      {
+        key: "first_name",
+        label: "Имя",
+      },
+      {
+        key: "patronymic",
+        label: "Отчество",
+      },
+      {
+        key: "patronymic",
+        label: "Отчество",
+      },
+      {
+        key: "gender",
+        label: "Пол",
+      },
+      {
+        key: "birth_date",
+        label: "Дата рождения",
+      },
+      {
+        key: "photo",
+        label: "Фото",
+      },
+    ],
+  },
+];
diff --git a/tailwind.config.js b/tailwind.config.js
index 961885d..ab60bc1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,7 @@ module.exports = {
         "7px": "7px",
         "11px": "11px",
         "30px": "30px",
+        "25px": "25px",
         43: "43px",
       },
       spacing: {