From e55176efdc95e5636e4e1a0dffb7fbb965ccf6b4 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Fri, 2 Jun 2023 16:04:57 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D1=81?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D1=8F=20=D0=B7=D1=83?=
 =?UTF-8?q?=D0=B1=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ToothFormula/DentalConditionForm.vue      | 52 +++++++++++++------
 .../Forms/ToothFormula/ToothFormulaCell.vue   |  4 +-
 .../newMedicalCard/utils/gettersObjects.js    | 24 +++++----
 tailwind.config.js                            |  1 +
 4 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
index 4a61aab..a7859a5 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
@@ -1,17 +1,17 @@
 <template lang="pug">
   .flex.p-1
-    .wrapper-tooth.felx.h-250px.w-28.flex-col.rounded.justify-around.items-center
+    .wrapper-tooth.flex.h-250px.w-28.flex-col.rounded.justify-around.items-center
       span.text-base.font-medium {{cellConfig.tooth_number}}
     .flex.flex-col.pt-2.pl-4.pr-1.gap-y-2.w-350px.h-250px
       span.font-bold.text-m Состояние зуба
-      .options-wrapper.flex.flex-col.h-250px.overflow-y-auto.gap-y-1.pb-14px
+      .scroll.flex.flex-col.h-250px.overflow-y-auto.gap-y-1.pb-14px
         q-expansion-item.expansion-item.rounded.mr-2.w-318px(
-          v-for="(kind, key) in formConfig.conditions", 
-          :label="kind.label"
+          v-for="(type, key) in formConfig.conditions", 
+          :label="type.label"
           )
-          .general-expaction.flex.flex-col.pl-4(v-if="!kind?.partsTooth")
+          .general-expaction.flex.flex-col.pl-4(v-if="!type?.partsTooth")
             .condition-item.flex.gap-11px.items-center.h-10.w-full(
-              v-for="option in kind.options"
+              v-for="option in type.options"
             )
               q-radio(
                 v-model="data[key]",
@@ -26,9 +26,9 @@
                 span.font-medium {{ option.label }}
           .flex.flex-col.pl-4(v-else)
             .flex.flex-col.gap-y-3
-              .part-item.flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
+              .part-item.flex.flex-col(v-for="(part, partKey) in type?.partsTooth")
                 span.part-label.text-smm.font-medium {{part.label}}
-                .condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in kind.options")
+                .condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in type.options")
                   q-checkbox(
                     v-model="data[key][partKey]", 
                     :val="option.value",
@@ -40,28 +40,40 @@
                   .condition-label.flex.gap-x-2.h-full.w-full.items-center.text-smm
                     span.font-semibold {{ option.value }}
                     span.font-medium {{ option.label }}
-    q-menu.h-258px(
+    q-menu(
       v-model="isOpenInfoSelected",
       anchor="top right",
       no-parent-event,
       :offset="[4,0]"
     )
-      .flex.flex-col.px-4.py-2.gap-y-3
+      .h-258px.w-240px.flex.flex-col.pl-4.pr-2.py-2.gap-y-3
         .flex.gap-x-2.text-m.font-bold
           span Выбранное
-          span(:style="{'color': 'var(--font-grey-color)'}") {{countSelected}}
+          span(:style="{'color': 'var(--font-grey-color)'}") {{listSelected.map((el) => el.value).flat().length}}
+        .scroll.flex.flex-col.gap-y-3.h-full
+          .flex.flex-col.gap-y-2.text-smm.font-medium(v-for="condition in listSelected")
+            .flex.gap-x-6px.items-center.whitespace-nowrap
+              span.part-label {{formConfig.conditions[condition.type].label}}
+              .light-grey-background.flex.w-1.h-1.rounded(v-if="condition.part")
+              span.part-label(v-if="condition.part") {{formConfig.conditions[condition.type].partsTooth[condition.part].label}}
+            .flex.flex-col.gap-y-1
+              .grey-background.flex.px-3.py-7px.rounded.w-fit.whitespace-nowrap(
+                v-for="value in [condition.value].flat()"
+                ) {{`${value} – ${toothConditions[value]}`}}
 </template>
 
 <script>
 import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { toothConditions } from "@/pages/newMedicalCard/utils/medicalConfig";
 
 export default {
   name: "DentalConditionForm",
   data() {
     return {
       isOpenInfoSelected: false,
-      countSelected: 0,
+      listSelected: [],
       getFiiledConditions,
+      toothConditions,
     };
   },
   props: {
@@ -72,9 +84,13 @@ export default {
   methods: {
     updateConditions() {
       let arraySelected = [...this.getFiiledConditions(this.data)];
-      if (this.data.general) arraySelected.push(this.data.general);
-      this.countSelected = arraySelected.length;
-      if (this.data.general) {
+      if (this.data.general)
+        arraySelected.unshift({
+          value: this.data.general,
+          type: "general",
+        });
+      this.listSelected = [...arraySelected];
+      if (arraySelected.length) {
         this.isOpenInfoSelected = true;
       } else {
         this.isOpenInfoSelected = false;
@@ -102,9 +118,13 @@ export default {
         border-bottom: none
 .part-label
   color: var(--font-grey-color)
+.light-grey-background
+  background-color: var(--font-grey-color)
+.grey-background
+  background-color: var(--bg-light-grey)
 .condition-label
   border-bottom: 1px solid var(--bg-light-grey)
-.options-wrapper
+.scroll
   &::-webkit-scrollbar
       width: 4px
 </style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
index 98136e2..99f5483 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -6,7 +6,7 @@
   )
   .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
     v-if="isEdit && rowKey !== 'tooth_number'"
-    @click.self="()=>{isEditCondition=!isEditCondition}",
+    @click.stop="()=>{isEditCondition=!isEditCondition}",
     :class="{'open-edit': isEditCondition}"
     )
     q-icon(
@@ -43,7 +43,7 @@
       tooth-conditions-info(
         v-model="isOpenConditionsInfo",
         :general="value[rowKey].general",
-        :conditions="getFiiledConditions(value[rowKey])"
+        :conditions="getFiiledConditions(value[rowKey]).map((el) => el.value).flat()"
         :config="conditionConfig"
         )
   span.text-smm.font-medium(
diff --git a/src/pages/newMedicalCard/utils/gettersObjects.js b/src/pages/newMedicalCard/utils/gettersObjects.js
index 0c65ce3..c491628 100644
--- a/src/pages/newMedicalCard/utils/gettersObjects.js
+++ b/src/pages/newMedicalCard/utils/gettersObjects.js
@@ -56,13 +56,19 @@ export function getConfidantObject(data) {
 }
 
 export const getFiiledConditions = (condition) => {
-  let filledConditions = [
-    ...Object.values(condition.crown)
-      .filter((val) => val.length)
-      .flat(),
-    ...Object.values(condition.root)
-      .filter((val) => val.length)
-      .flat(),
-  ];
-  return filledConditions;
+  let crown = Object.keys(condition.crown)
+    .map((key) => ({
+      value: condition.crown[key],
+      type: "crown",
+      part: key,
+    }))
+    .filter((el) => el.value.length);
+  let root = Object.keys(condition.root)
+    .map((key) => ({
+      value: condition.root[key],
+      type: "root",
+      part: key,
+    }))
+    .filter((el) => el.value.length);
+  return [...crown, ...root];
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 7a4c0c0..60c336a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -69,6 +69,7 @@ module.exports = {
         "143px": "143px",
         "148px": "148px",
         "212px": "212px",
+        "240px": "240px",
         "250px": "250px",
         "258px": "258px",
         "318px": "318px",