From 94ac479e2fe7190ab25a1fab33608e8b292fbc27 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Mon, 5 Jun 2023 11:15:55 +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=B8=D0=BB=D1=8C=D1=82=D1=80=20=D0=B7=D1=83?=
 =?UTF-8?q?=D0=B1=D0=BD=D0=BE=D0=B9=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=D0=BB?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ToothFormula/DentalConditionForm.vue      | 13 +--
 .../Forms/ToothFormula/FormulaFilter.vue      | 91 +++++++++++++++++++
 .../ToothFormula/ToothConditionsInfo.vue      |  5 +-
 .../Forms/ToothFormula/ToothFormulaCell.vue   | 13 ++-
 .../Forms/ToothFormula/ToothFormulaForm.vue   |  5 +-
 .../newMedicalCard/utils/gettersObjects.js    | 11 ++-
 .../newMedicalCard/utils/medicalConfig.js     |  7 ++
 7 files changed, 123 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue

diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
index a7859a5..8d967ed 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
 import { toothConditions } from "@/pages/newMedicalCard/utils/medicalConfig";
 
 export default {
@@ -72,7 +72,7 @@ export default {
     return {
       isOpenInfoSelected: false,
       listSelected: [],
-      getFiiledConditions,
+      getFilledConditions,
       toothConditions,
     };
   },
@@ -83,14 +83,9 @@ export default {
   },
   methods: {
     updateConditions() {
-      let arraySelected = [...this.getFiiledConditions(this.data)];
-      if (this.data.general)
-        arraySelected.unshift({
-          value: this.data.general,
-          type: "general",
-        });
-      this.listSelected = [...arraySelected];
+      let arraySelected = [...this.getFilledConditions(this.data)];
       if (arraySelected.length) {
+        this.listSelected = [...arraySelected];
         this.isOpenInfoSelected = true;
       } else {
         this.isOpenInfoSelected = false;
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue
new file mode 100644
index 0000000..2c0784e
--- /dev/null
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue
@@ -0,0 +1,91 @@
+<template lang="pug">
+  .flex.w-full.gap-x-10px
+    .filter-block.w-full.flex-col.flex.rounded(
+      v-for="filter in formulaFilterMap"
+      )
+      .flex.block-filter.h-30px(v-for="value in filter")
+        .border-right.width-cell.flex.justify-center.items-center
+          q-checkbox(
+            dense,
+            v-model="filterResult",
+            @update:model-value="() => updateFilter(value)",
+            :val="value",
+            checked-icon="check_box",
+            unchecked-icon="check_box_outline_blank",
+          )
+        .border-right.width-cell.flex.justify-center.items-center
+          span.text-smm.font-medium(
+            v-if="value !== 'Все'"
+            :style="{'color': 'var(--font-grey-color)'}"
+            ) {{value}}
+        .border-right.flex.items-center.pl-3.w-full(:style="{'minWidth': '190px'}")
+          span.text-smm.font-medium {{toothConditions[value] || value}}
+        .width-cell.flex.w-8.justify-center.items-center
+          span.text-smm.font-medium {{getCountConditions[value] || "-"}}
+</template>
+
+<script>
+import {
+  toothConditions,
+  formulaFilterMap,
+} from "@/pages/newMedicalCard/utils/medicalConfig";
+import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+
+export default {
+  name: "FormulaFilter",
+  data() {
+    return {
+      toothConditions,
+      formulaFilterMap,
+      getFilledConditions,
+      filterResult: ["Все"],
+    };
+  },
+  props: {
+    data: Object,
+  },
+  methods: {
+    updateFilter(value) {
+      if (value === "Все" || !this.filterResult.length) {
+        this.filterResult = ["Все"];
+      } else {
+        this.filterResult = [
+          ...this.filterResult.filter((item) => item !== "Все"),
+        ];
+      }
+    },
+  },
+  computed: {
+    getCountConditions() {
+      let conditions = {};
+      Object.keys(this.toothConditions).forEach((key) => {
+        conditions[key] = 0;
+      });
+      Object.keys(this.data.formula)
+        .map((key) => ({
+          firstCondition: getFilledConditions(
+            this.data.formula[key].dental_condition
+          )
+            .map((item) => item.value)
+            .flat()[0],
+          key: key,
+        }))
+        .forEach((el) => {
+          if (el.firstCondition) {
+            conditions[el.firstCondition] += 1;
+          }
+        });
+      return conditions;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.filter-block
+  border: 1px solid var(--border-light-grey-color)
+.border-right
+  border-right: 1px solid var(--border-light-grey-color)
+.width-cell
+  min-width: 32px
+</style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
index ed8efae..e575447 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
@@ -6,8 +6,8 @@
     )
     .flex.flex-col.p-4.gap-15px.text-smm.font-medium
       .general.w-full.flex.justify-start.pb-15px
-        span.opacity-60(:style="{'color': 'var(--font-dark-blue-color)'}") {{`${general} – ${config[general]}`}}
-      span(v-for="condition in conditions") {{`${condition} – ${config[condition]}`}}
+        span.opacity-60(:style="{'color': 'var(--font-dark-blue-color)'}") {{`${conditions[0]} – ${config[conditions[0]]}`}}
+      span(v-for="condition in conditions.slice(1)") {{`${condition} – ${config[condition]}`}}
 </template>
 
 <script>
@@ -17,7 +17,6 @@ export default {
   name: "ToothConditionsInfo",
   props: {
     config: Object,
-    general: String,
     conditions: Array,
     modelValue: Boolean,
     hideEvent: Function,
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
index 99f5483..0c27ea1 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -33,17 +33,16 @@
     v-if="rowKey === 'dental_condition' && !isEditCondition",
     :class="{'cell-info': isEdit}"
     )
-    span.text-smm.font-medium {{ value[rowKey].general }}
+    span.text-smm.font-medium {{getFilledConditions(value[rowKey]).map((el) => el.value).flat()[0]}}
     .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
-      v-if="getFiiledConditions(value[rowKey]).length",
+      v-if="getFilledConditions(value[rowKey]).map((el) => el.value).flat().length-1 > 0",
       @click="()=>openConditionsInfo()",
       :class="{'active': isOpenConditionsInfo}"
       )
-      span.text-xsx.font-medium {{`+${getFiiledConditions(value[rowKey]).length}`}}
+      span.text-xsx.font-medium {{`+${getFilledConditions(value[rowKey]).map((el) => el.value).flat().length - 1}`}}
       tooth-conditions-info(
         v-model="isOpenConditionsInfo",
-        :general="value[rowKey].general",
-        :conditions="getFiiledConditions(value[rowKey]).map((el) => el.value).flat()"
+        :conditions="getFilledConditions(value[rowKey]).map((el) => el.value).flat()"
         :config="conditionConfig"
         )
   span.text-smm.font-medium(
@@ -84,7 +83,7 @@
 import DentalConditionForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue";
 import ToothLowSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue";
 import ToothConditionsInfo from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue";
-import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
 import {
   toothConditions,
   toothMobility,
@@ -100,7 +99,7 @@ export default {
       isOpenConditionsInfo: false,
       mobilityConfig: toothMobility,
       conditionConfig: toothConditions,
-      getFiiledConditions,
+      getFilledConditions,
     };
   },
   mixins: [v_model],
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
index af6d17b..1d65394 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
@@ -26,6 +26,7 @@
           :form-config="data.conditionsForm",
           :is-edit="isEdit"
           )
+      formula-filter(:data="protocol[data.state]")
     template(v-slot:right-corner)
       .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
         q-btn.w-12.h-full.rounded(
@@ -43,6 +44,7 @@
 </template>
 
 <script>
+import FormulaFilter from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import ToothFormulaTable from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue";
 import teeth from "@/assets/icons/teeth.svg";
@@ -51,11 +53,12 @@ import { mapState } from "vuex";
 
 export default {
   name: "ToothFormulaForm",
-  components: { MedicalFormWrapper, ToothFormulaTable },
+  components: { MedicalFormWrapper, ToothFormulaTable, FormulaFilter },
   data() {
     return {
       teeth,
       teeth_2,
+      filter: ["Все"],
       isEdit: false,
       component: false,
       viewToothFormula: true,
diff --git a/src/pages/newMedicalCard/utils/gettersObjects.js b/src/pages/newMedicalCard/utils/gettersObjects.js
index c491628..4ed730e 100644
--- a/src/pages/newMedicalCard/utils/gettersObjects.js
+++ b/src/pages/newMedicalCard/utils/gettersObjects.js
@@ -55,7 +55,8 @@ export function getConfidantObject(data) {
   }
 }
 
-export const getFiiledConditions = (condition) => {
+export const getFilledConditions = (condition) => {
+  let filledConditions = [];
   let crown = Object.keys(condition.crown)
     .map((key) => ({
       value: condition.crown[key],
@@ -70,5 +71,11 @@ export const getFiiledConditions = (condition) => {
       part: key,
     }))
     .filter((el) => el.value.length);
-  return [...crown, ...root];
+  filledConditions = [...crown, ...root];
+  if (condition.general)
+    filledConditions.unshift({
+      value: condition.general,
+      type: "general",
+    });
+  return filledConditions;
 };
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index c560eaf..3b0c6c5 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -586,6 +586,13 @@ export const toothMobility = [
   { id: 4, label: "IV" },
 ];
 
+export const formulaFilterMap = [
+  ["Все", "К", "П"],
+  ["Д", "Пл", "ИК"],
+  ["ИЗ", "В", "И"],
+  ["КЗ", "О", "Пт"],
+];
+
 export const protocolForms = [
   {
     title: "Жалобы",