From f86be1b18788a38456a6eb69f4cf97a45ccac889 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 17 Jul 2023 18:21:26 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=20=D0=B1=D0=B0=D0=B3=20=D0=BD=D0=B0=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=82=D0=B5=D0=B3=D0=BE=D1=80=D0=B8=D1=8F=D1=85=20=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=B3=D0=BE=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseInput.vue                  | 12 +++++-
 src/components/base/BaseCategorySelection.vue | 18 ++++-----
 src/components/base/BaseInputDate.vue         |  6 +--
 src/components/base/BaseInputTime.vue         |  2 +-
 .../BasicDataForms/BasicDataForm.vue          | 23 +++++++----
 .../BasicDataForms/ContactsForm.vue           | 40 ++++++++-----------
 .../BasicDataForms/DocumentsForm.vue          | 34 ++++++++++++----
 .../BasicDataForms/InsuranceForm.vue          | 28 ++++++++++---
 .../Forms/MainFactorsForm.vue                 |  5 +--
 .../Forms/MedicalFormTag.vue                  | 31 ++++++++++----
 .../Forms/TagCreationForm.vue                 |  9 ++++-
 11 files changed, 136 insertions(+), 72 deletions(-)

diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue
index 70fe3c6..70bdd26 100644
--- a/src/components/BaseInput.vue
+++ b/src/components/BaseInput.vue
@@ -5,7 +5,7 @@
       :name="name",
       :multiple="multiple",
       :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{resize: resize,}",
+      :input-style="{resize: resize}",
       :borderless="borderless",
       :placeholder="placeholder",
       outlined,
@@ -23,7 +23,7 @@
       :debounce="debounce",
       :shadow-text="shadowText",
       :autofocus="autofocus",
-      hide-bottom-space,
+      hide-bottom-space
     )
       template(v-slot:prepend, v-if="iconLeft")
         slot(name="iconLeft")
@@ -131,6 +131,14 @@ export default {
             "--px": "0 16px",
             "--py": "8px 0",
           };
+        case "auto":
+          return {
+            "--input-height": "auto",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
         default:
           return {
             "--input-height": "56px",
diff --git a/src/components/base/BaseCategorySelection.vue b/src/components/base/BaseCategorySelection.vue
index fcf7cb1..08e9f11 100644
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -4,21 +4,18 @@
       .flex.flex-col.gap-y-4.h-full
         .flex.flex-col.gap-y-6
           .flex.font-bold.text-xl Категории
-          base-input.input(
+          base-input.search(
             placeholder="Поиск",
             @keyup.enter="searchCategory",
             @input="searchCategory",
             v-model="searchBenefit",
             debounce="10",
-            outlined,
             :width="300",
+            size="M",
             iconLeft
           )
-            q-icon(
-              name="app:icon-search",
-              size="20px",
-              style="color: var(--font-grey-color)"
-            )
+            template(v-slot:iconLeft)
+              q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
         .field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
           .flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
             q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
@@ -43,7 +40,7 @@
         base-button(
           label="Сохранить",
           width="146px",
-          @click="saveCategories(selected[0])"
+          @click="saveCategories(selected)"
         )
     .right-side.flex.px-10.font-bold.relative
       q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
@@ -66,8 +63,8 @@
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "BaseCategorySelection",
@@ -218,4 +215,7 @@ export default {
 
 .radio :deep(.q-radio__inner)
   height: 24px
+
+.search :deep(.q-field__prepend)
+  padding-right: 6px
 </style>
diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index 8bd9919..e465e28 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -18,19 +18,19 @@
       hide-bottom-space,
       lazy-rules
     )
-      template(v-slot:append)
+      template(v-slot:append, v-if="!readonly && !disabled")
         q-icon(
           name="app:calendar",
           class="cursor-pointer",
           size="18px"
         )
           q-menu(
-            :style="{'margin-top': '8px !important'}",
+            :style="{'margin-top': '6px !important'}",
             v-model="calendarVisibility",
             transition-show="scale",
             transition-hide="scale",
             self="top middle",
-            :offset="[118, 14]"
+            :offset="[118, 14]",
           )
             base-calendar(
               v-model="internalDate",
diff --git a/src/components/base/BaseInputTime.vue b/src/components/base/BaseInputTime.vue
index d623076..d9e7964 100644
--- a/src/components/base/BaseInputTime.vue
+++ b/src/components/base/BaseInputTime.vue
@@ -18,7 +18,7 @@
       hide-bottom-space,
       no-error-icon
     )
-      template(v-slot:append)
+      template(v-slot:append, v-if="!readonly && !disabled")
         q-icon(
           name="app:time",
           class="cursor-pointer",
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
index 595a8a9..ee362a8 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
@@ -38,25 +38,29 @@
               :items="genderOptions"
               bg-color="#e9e9f6"
               )
+          base-input-date(
+            v-else-if="field.type === 'date'",
+            v-model="basic[data.dataKey][field.key]",
+            size="M",
+            :readonly="!isEdit",
+            @update:model-value="checkChangeInput",
+            :width="302"
+          )
           base-input(
-            v-else 
+            v-else,
             :readonly="!isEdit" 
             v-model="basic[data.dataKey][field.key]"
             @update:model-value="checkChangeInput"
             :type="field.type"
             :name="field.key" 
-            :width="302" 
-            :standout="!isEdit" 
-            :outlined="isEdit"
-            no-error-icon
+            :width="302",
+            size="M",
             :rule="field.rules"
-            text-color="black"
-            )
+          )
 </template>
 
 <script>
 import BaseSelect from "@/components/base/BaseSelect.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
@@ -74,6 +78,8 @@ import {
   errorMap,
 } from "@/pages/newMedicalCard/utils/medicalConfig.js";
 import { mapGetters, mapState } from "vuex";
+import BaseInput from "@/components/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
 
 export default {
   name: "BasicDataForm",
@@ -85,6 +91,7 @@ export default {
     BaseModal,
     BaseUploadPhoto,
     TheNotificationProvider,
+    BaseInputDate,
   },
   data() {
     return {
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
index 3b2aa3f..39c018a 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
@@ -31,29 +31,21 @@
                   :size-input="50"
                   )
                 base-input.w-full(
-                  v-model="data.username"
-                  type="text"
-                  no-error-icon
-                  :name="key"
-                  :rule="configData[key].rules"
-                  :standout="!isEdit" 
-                  :outlined="isEdit" 
-                  text-color="black"
-                  )
-            base-input.w-full( 
-              v-else
-              :readonly="!isEdit" 
-              v-model="data.username"
-              :name="key"
-              :mask="configData[key].inputMask"
-              :rule="configData[key].rules"
-              no-error-icon
-              @update:model-value="checkChangeInput"
-              type="text"  
-              :standout="!isEdit" 
-              :outlined="isEdit" 
-              text-color="black"
-              )
+                  v-model="data.username",
+                  :name="key",
+                  :rule="configData[key].rules",
+                  size="M"
+                )
+            base-input.w-full(
+              v-else,
+              :readonly="!isEdit",
+              v-model="data.username",
+              :name="key",
+              :mask="configData[key].inputMask",
+              :rule="configData[key].rules",
+              @update:model-value="checkChangeInput",
+              size="M"
+            )
             .delete-contact.icon-cancel.text-xxs.cursor-pointer(
               v-if="isEdit" 
               @click="() => deleteContact(key, index)"
@@ -73,7 +65,6 @@
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
@@ -85,6 +76,7 @@ import {
 import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
 import { mapState, mapGetters } from "vuex";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "ContactsForm",
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
index 1b8ade3..c9feea6 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
@@ -41,20 +41,30 @@
                 v-model="docData[photoId][field.key]",
                 :confirm-upload="confirmChangePhoto",
               )
+          base-input-date(
+            v-if="field.type === 'date'",
+            v-model="docData[data.dataKey][field.key]",
+            :name="field.key",
+            @update:model-value="checkChangeDocData",
+            :readonly="!isEdit",
+            :width="302",
+            :mask="field?.inputMask",
+            :rule="[(val) => !personDataField.includes(field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
+            :autogrow="field.key === 'issued_by_org'",
+            size="M"
+          )
           base-input(
-            v-else,
+            v-if="field.type === 'text'",
             v-model="docData[data.dataKey][field.key]",
             :name="field.key",
             @update:model-value="checkChangeDocData",
             :readonly="!isEdit",
             :type="field.type",
-            textColor="var(--font-dark-blue-color)",
             :width="302",
-            :standout="!isEdit",
-            :outlined="isEdit", 
             :mask="field?.inputMask",
             :rule="[(val) => !personDataField.includes(field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
-            :autogrow="field.key === 'issued_by_org'"
+            :autogrow="field.key === 'issued_by_org'",
+            :size="field.key !== 'issued_by_org' ? 'M' : 'auto'"
           )
             .icon-copy.my-auto.text-lg.label-field.cursor-pointer(
               v-if="checkCopiedFields(field.key) && !!docData[data.dataKey][field.key]",
@@ -65,7 +75,6 @@
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import { documentForm } from "@/pages/newMedicalCard/utils/medicalConfig";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
@@ -76,6 +85,8 @@ import {
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 import { addNotification } from "@/components/Notifications/notificationContext";
+import BaseInput from "@/components/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
   name: "DocumentsForm",
   components: {
@@ -85,6 +96,7 @@ export default {
     BaseModal,
     BaseUploadPhoto,
     TheNotificationProvider,
+    BaseInputDate,
   },
   data() {
     return {
@@ -200,7 +212,12 @@ export default {
           let documentsFormData = new FormData();
           form.getValidationComponents().forEach((elem) => {
             if (!this.personDataField.includes(elem.name)) {
-              passportFormData.append(elem.name, elem.modelValue ?? "");
+              if (elem.name === "issued_by_date") {
+                passportFormData.append(
+                  elem.name,
+                  this.convertFormat(elem.modelValue) ?? ""
+                );
+              } else passportFormData.append(elem.name, elem.modelValue ?? "");
             } else documentsFormData.append(elem.name, elem.modelValue ?? "");
           });
           this.checkChangePhoto("passport", "photo", passportFormData);
@@ -299,6 +316,9 @@ export default {
     addErrorNotification(title, message) {
       addNotification(title + message, title, message, "error", 5000);
     },
+    convertFormat(date) {
+      return date ? date.split(".").reverse().join("-") : null;
+    },
   },
   watch: {
     initialDocData: {
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
index 00ba66b..d9f1c6f 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
@@ -48,7 +48,7 @@
             v-else-if="field.type === 'select'",
             @click="openModalCategories"
           )
-            q-field.items-center(
+            q-field.items-center.categories(
               :style="{cursor: isEdit ? 'pointer' : 'default'}",
               standout,
               :readonly="!isEdit",
@@ -82,10 +82,8 @@
               @update:model-value="checkChangeInput",
               :mask="field?.inputMask",
               :readonly="!isEdit",
-              :standout="!isEdit",
-              :outlined="isEdit",
               :type="field.type",
-              text-color="black"
+              size="M"
             )
               q-icon.my-auto.text-lg.label-field.cursor-pointer(
                 size="18px",
@@ -101,12 +99,12 @@ import { mapGetters, mapState } from "vuex";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import BaseCategorySelection from "@/components/base/BaseCategorySelection.vue";
 import { checkChangeData } from "@/shared/utils/changesObjects";
 import { addNotification } from "@/components/Notifications/notificationContext";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "InsuranceForm",
@@ -421,4 +419,24 @@ export default {
 
 .delete
   background-color: var(--btn-red-color)
+
+
+.categories :deep(.q-field__control)
+  height: 40px
+  color: var(--font-dark-blue-color)
+  padding: 0 16px
+  &:before
+    border: none !important
+    transition: none
+  &:after
+    border: none !important
+    transition: none
+    transform: none !important
+
+.categories :deep(.q-field__native)
+  font-weight: 500
+  font-size: 16px
+  line-height: normal
+  color: var(--font-dark-blue-color)
+  padding: 8px 0
 </style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue
index 8f62acd..42685d0 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue
@@ -24,8 +24,7 @@
           base-input.w-full(
             v-model="dataValue.result",
             label="Результат",
-            outlined,
-            text-color="black",
+            size="M",
             placeholder="Введите диагноз...",
           )
           .results-wrapper.flex.flex-col.rounded.w-full.px-4.py-2
@@ -66,11 +65,11 @@
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputNumber from "@/components/base/BaseInputNumber.vue";
 import { thermometryResultsMap } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { mapState } from "vuex";
 import { mapActions } from "vuex";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "ThermometryForm",
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
index e2acb48..0501096 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
@@ -15,15 +15,17 @@
               :key="tag.id"
               :class="{'pointer': change || fillInspection}"
             ) {{tag}}
-          base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+          q-input.input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
         .filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
           .flex.gap-x-2
-            base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
-              q-icon(
-                name="app:icon-search",
-                size="20px",
-                style="color: var(--font-grey-color)"
-              )
+            base-input.search(
+              placeholder="Поиск",
+              :width="232",
+              iconLeft
+              size="M"
+            )
+              template(v-slot:iconLeft)
+                q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
             .button
               q-btn(
                 icon="filter_alt",
@@ -63,11 +65,11 @@
 
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import TagCreationForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import { mapState } from "vuex";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "MedicalFormTag",
@@ -213,4 +215,17 @@ export default {
   display: none
 .on-left
   margin-right: 8px
+
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: 14px
+  line-height: 135%
+  color: var(--font-dark-blue-color)
+  padding: 4px 0
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.search :deep(.q-field__prepend)
+  padding-right: 6px
 </style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
index 7365fa5..4b5a9ee 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
@@ -29,7 +29,12 @@
             q-icon(name="app:icon-plus", size="10px",)
             span Добавить категорию
       .flex.flex-col(class="gap-x-1.5")
-        base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тег", outlined)
+        new-base-input(
+          v-model="model.tag",
+          label="Текст тега",
+          placeholder="Введите тег",
+          size="M"
+        )
     .buttons-group.flex
       base-button(
         type="secondary",
@@ -47,8 +52,8 @@
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "TagCreationForm",