From 019c8c0459774c05295f50a13986cb63c85d5774 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 26 Sep 2023 17:54:47 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=81=D0=B5=D1=82=D0=BA=D0=B8=20=D1=84=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../managerCalendar/CalendarColumn.vue        |  2 +-
 .../BasicDataForms/BasicDataForm.vue          |  2 +-
 .../BasicDataForms/ContactsForm.vue           | 49 +++++++++----------
 .../BasicDataForms/DocumentsForm.vue          | 20 ++++----
 .../BasicDataForms/InsuranceForm.vue          | 30 ++++--------
 5 files changed, 45 insertions(+), 58 deletions(-)

diff --git a/src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue b/src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue
index 59cb494..09b42ef 100644
--- a/src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue
+++ b/src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue
@@ -49,7 +49,7 @@ export default {
       events: (state) => state.calendar.events,
     }),
     filteredRecords() {
-      return this.events.filter((elem) => elem?.medic?.id === this.medic?.id);
+      return this.events.filter((elem) => elem?.medic?.ID === this.medic?.ID);
     },
   },
 };
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
index ad11a02..0056008 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
@@ -14,7 +14,7 @@
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
         .flex.w-full.items-center.gap-4(v-for="field in data.fields")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
-          .avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
+          .flex.gap-3.items-center.h-10(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
               img.avatar.object-cover(
                 v-if="basic[data.dataKey][field.key]?.photo"
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
index 6507f88..db40a5c 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
@@ -9,13 +9,13 @@
     :cancel="cancelEdit"
     :open-edit="openEdit"
     )
-    q-form.form-wrap.gap-24.w-full(ref="formContacts")
-      .flex.flex-col.gap-4(v-for="(contact, key) in contacts")
+    q-form.form-wrap.gap-6.w-full(ref="formContacts")
+      .flex.flex-col.gap-2(v-for="(contact, key) in contacts")
         .font-semibold.text-sm.whitespace-nowrap {{configData[key].title}}
-        .flex.w-full.justify-between.items-center.gap-4(v-for="(data, index) in contact")
+        .flex.w-full.items-center.gap-4(v-for="(data, index) in contact")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${configData[key].fieldName} ${index+1} :`}}
-          .input-wrapper.items-center.flex.h-10.gap-10px
-            .flex(v-if="key === 'networks'")
+          .w-full.items-center.flex.h-10
+            .flex.w-full(v-if="key === 'networks'")
               .flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
                 v-if="data.id || data.filled"
                 @click="() => copyLinkNetwork(data.value)"
@@ -23,7 +23,7 @@
               )
                 q-icon.icon(:name="mapNetworks[data.category].icon" :class="{old: data.id, new: data.filled}")
                 span.text-sm.font-medium {{ mapNetworks[data.category].title || data.value }}
-              .flex.gap-10px(v-else v-click-outside="() => checkNetworksField(index)" :key="key+index")
+              .flex.gap-10px.w-full(v-else v-click-outside="() => checkNetworksField(index)" :key="key+index")
                 base-select-networks(
                   :list-data="Object.values(mapNetworks)"
                   :option-data="data.category"
@@ -31,13 +31,14 @@
                   :style-border="true"
                   :size-input="50"
                   )
-                base-input.w-full(
+                base-input(
                   v-model="data.value",
                   :name="key",
                   :rule="configData[key].rules",
-                  size="M"
+                  size="M",
+                  width="100%"
                 )
-            base-input.w-full(
+            base-input(
               v-else,
               :readonly="!isEdit",
               v-model="data.value",
@@ -45,23 +46,25 @@
               :mask="configData[key].inputMask",
               :rule="configData[key].rules",
               @update:model-value="checkChangeInput",
-              size="M"
+              size="M",
+              width="100%"
             )
-            .delete-contact.icon-cancel.text-xxs.cursor-pointer(
+            q-icon.delete-icon.ml-2.cursor-pointer(
               v-if="isEdit"
               @click="() => deleteContact(key, index)"
-              )
+              name="app:cancel-mini",
+              size="24px"
+            )
         q-btn.ml-2px(
           v-if="isEdit",
           color="primary",
           flat,
-          :style="{'font-weight': 500, width: '104px', height: '24px'}",
+          :style="{'font-weight': 500, width: '76px', height: '40px'}",
           no-caps,
           padding="0",
           @click="(e) => addNewContact(e, key)"
+          label="Добавить"
         )
-          q-icon(name="app:icon-plus", size="12px", left)
-          span Добавить
 </template>
 
 <script>
@@ -219,24 +222,20 @@ export default {
     color: var(--btn-blue-color)
   &.new
     color: var(--icon-violet-color)
-.input-wrapper
-  width: 302px
 .form-wrap
   display: grid
   grid-template-columns: repeat(3, 1fr)
-  grid-template-rows: repeat(1, auto)
-  @media(max-width: 1900px)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1440px)
     grid-template-columns: repeat(2, 1fr)
-    grid-template-rows: repeat(2, auto)
-  @media(max-width: 1320px)
-    grid-template-columns: repeat(1, 1fr)
-    grid-template-rows: repeat(3, auto)
+    grid-template-rows: repeat(2, 1fr)
 .network-field
   background-color: var(--bg-light-grey)
 .label-field
+  min-width: 110px
   color: var(--font-grey-color)
-.delete-contact
-  color: var(--font-grey-color)
+.delete-icon :deep(path)
+  fill: var(--font-grey-color)
 .on-left
   margin-right: 10px
 .q-btn :deep(.q-ripple)
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
index 150dd23..17bd882 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
@@ -8,15 +8,15 @@
     :open-edit="openEdit",
     :save="saveChange"
   )
-    q-form.form-wrap.gap-24.w-full(ref="documentForm", :no-error-focus="true")
-      .data-section.flex.flex-col.gap-4(v-for="data in configData", :key="data.dataLabel")
+    q-form.form-wrap.gap-6.w-full(ref="documentForm", :no-error-focus="true")
+      .data-section.flex.flex-col.gap-2(v-for="data in configData", :key="data.dataLabel")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
-        .flex.w-full.justify-between.items-center.gap-4(
+        .flex.w-full.items-center.gap-4(
           v-for="field in data.fields",
           :key="field.label"
         )
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
-          .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
+          .flex.gap-3.items-center.h-10(v-if="field.type === 'photo'")
             q-avatar(
               rounded,
               size="40px",
@@ -49,7 +49,7 @@
             :name="data.dataKey + ':' + field.key",
             @update:model-value="checkChangeDocData",
             :readonly="!isEdit",
-            :width="302",
+            width="100%",
             :mask="field?.inputMask",
             :rule="(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val)",
             size="M",
@@ -61,7 +61,7 @@
             @update:model-value="checkChangeDocData",
             :readonly="!isEdit",
             :type="field.type",
-            :width="302",
+            width="100%",
             :mask="field?.inputMask",
             :rule="[(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val, initialDocData?.[data.dataKey]?.id)]",
             size="M"
@@ -315,13 +315,11 @@ export default {
   display: grid
   grid-template-columns: repeat(3, 1fr)
   grid-template-rows: repeat(1, 1fr)
-  @media(max-width: 1900px)
+  @media(max-width: 1440px)
     grid-template-columns: repeat(2, 1fr)
-    grid-template-rows: 2.5fr 0.5fr
-  @media(max-width: 1320px)
-    grid-template-columns: repeat(1, 1fr)
-    grid-template-rows: 2.5fr 0.5fr 0.5fr
+    grid-template-rows: 3fr 1fr
 .label-field
+  min-width: 110px
   color: var(--font-grey-color)
 .replace-photo
   color: var(--btn-blue-color)
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
index a94bc15..ff51977 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
@@ -9,10 +9,10 @@
     :save="saveChange",
     :cancel="cancelEdit"
   )
-    q-form.form-wrap.gap-24.w-full(ref="insuranceForm", :no-error-focus="true")
-      .flex.flex-col.gap-4(v-for="insurance in insuranceConfig", :key="insurance.insuranceKey")
+    q-form.form-wrap.gap-6.w-full(ref="insuranceForm", :no-error-focus="true")
+      .flex.flex-col.gap-2(v-for="insurance in insuranceConfig", :key="insurance.insuranceKey")
         .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
-        .flex.w-full.justify-between.items-center.gap-4(
+        .flex.w-full.items-center.gap-4(
           v-for="field in insurance.fields",
           :key="insurance.insuranceKey + field.key",
           :style="{marginTop: field.label === 'Документы' ? '20px' : null}"
@@ -49,8 +49,8 @@
                 v-model="insuranceData[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto"
               )
-          .category.flex.h-10.relative.gap-x-2(v-else-if="field.type === 'select'")
-            .category-select.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
+          .flex.h-10.relative.gap-x-2.w-full(v-else-if="field.type === 'select'")
+            .w-full.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
             q-btn.change.flex.w-7.h-9.rounded-md(
               v-if="isEdit",
               @click="openModalCategories",
@@ -80,12 +80,13 @@
               span(
                 :style="{color: 'var(--font-dark-blue-color)'}"
               ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
-          .input-container.flex.flex-col.relative(v-else)
+          .w-full.flex.flex-col.relative(v-else)
             base-input(
               v-model="insuranceData[insurance.insuranceKey][field.key]",
               @update:model-value="checkChangeInput",
               :readonly="!isEdit",
               size="M",
+              width="100%",
               :name="insurance.insuranceKey + ':' + field.key",
               :rule="[(val) => checkFields(val, insurance.insuranceKey, field.rules)]"
             )
@@ -355,9 +356,6 @@ export default {
 .avatar
   height: 100%
 
-.input-container
-  width: 302px
-
 .replace-photo
   color: var(--btn-blue-color)
 
@@ -365,14 +363,12 @@ export default {
   display: grid
   grid-template-columns: repeat(3, 1fr)
   grid-template-rows: repeat(1, 1fr)
-  @media(max-width: 1900px)
+  @media(max-width: 1440px)
     grid-template-columns: repeat(2, 1fr)
-    grid-template-rows: repeat(2, 1fr)
-  @media(max-width: 1320px)
-    grid-template-columns: repeat(1, 1fr)
-    grid-template-rows: repeat(3, 1fr)
+    grid-template-rows: 1.2fr 0.8fr
 
 .label-field
+  min-width: 110px
   color: var(--font-grey-color)
 
 .q-badge
@@ -382,12 +378,6 @@ export default {
 .delete
   background-color: var(--btn-red-color)
 
-.category
-  width: 324px
-
-.category-select
-  min-width: 276px
-
 .icon :deep(path)
   fill: var(--font-grey-color)