Merge branch 'ASTRA-105' into 'master'

[WIP] Настроил фильтрацию таблицы зубной формулы

See merge request andrusyakka/urban-couscous!407

src/pages/newCalendar/components/CalendarBackground.vue

@@ -17,7 +17,6 @@ export default {
       workingHours: (state) => state.calendar.workingHours,
     }),
     timeCount() {
-      console.log(this.workingHours);
       return (
         this.workingHours.end.split(":")[0] -
         this.workingHours.start.split(":")[0] +

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue

@@ -7,7 +7,7 @@
         .border-right.width-cell.flex.justify-center.items-center
           q-checkbox(
             dense,
-            v-model="filterResult",
+            v-model="filterFurmula",
             @update:model-value="() => updateFilter(value)",
             :val="value",
             checked-icon="check_box",
@@ -21,7 +21,7 @@
         .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] || "-"}}
+          span.text-smm.font-medium {{getCountConditions[value] && getCountConditions[value].length || "-"}}
 </template>
 
 <script>
@@ -30,6 +30,7 @@ import {
   formulaFilterMap,
 } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "FormulaFilter",
@@ -38,20 +39,25 @@ export default {
       toothConditions,
       formulaFilterMap,
       getFilledConditions,
-      filterResult: ["Все"],
+      filterFurmula: ["Все"],
     };
   },
   props: {
     data: Object,
   },
+  mixins: [v_model],
   methods: {
     updateFilter(value) {
-      if (value === "Все" || !this.filterResult.length) {
+      if (value === "Все" || !this.filterFurmula.length) {
-        this.filterResult = ["Все"];
+        this.filterFurmula = ["Все"];
+        this.value = [...Object.keys(this.data.formula)];
       } else {
-        this.filterResult = [
+        this.filterFurmula = [
-          ...this.filterResult.filter((item) => item !== "Все"),
+          ...this.filterFurmula.filter((item) => item !== "Все"),
         ];
+        this.value = this.filterFurmula
+          .map((key) => this.getCountConditions[key])
+          .flat();
       }
     },
   },
@@ -59,22 +65,18 @@ export default {
     getCountConditions() {
       let conditions = {};
       Object.keys(this.toothConditions).forEach((key) => {
-        conditions[key] = 0;
+        conditions[key] = [];
+      });
+      Object.keys(this.data.formula).forEach((key) => {
+        let firstConditions = getFilledConditions(
+          this.data.formula[key].dental_condition
+        )
+          .map((item) => item.value)
+          .flat()[0];
+        if (firstConditions) {
+          conditions[firstConditions] = [...conditions[firstConditions], key];
+        }
       });
-      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;
     },
   },

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue

@@ -1,82 +1,83 @@
 <template lang="pug">
-.cell.flex.justify-center.items-center.h-full.p-1(
+.cell.flex(
   :key="`${jawPosition}_${config.tooth_number}`"
   :style="{'width': '5%'}",
   :class="{'cursor-pointer': isEdit}"
   )
-  .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
+  .flex.h-full.w-full.justify-center.items-center.h-full.p-1(v-if="filtredTooths.includes(config.tooth_number)")
-    v-if="isEdit && rowKey !== 'tooth_number'"
+    .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
-    @click.stop="()=>{isEditCondition=!isEditCondition}",
+      v-if="isEdit && rowKey !== 'tooth_number'"
-    :class="{'open-edit': isEditCondition}"
+      @click.stop="()=>{isEditCondition=!isEditCondition}",
-    )
+      :class="{'open-edit': isEditCondition}"
-    q-icon(
-      v-if="!isEditCondition",
-      name="add",
-      size="25px",
-    )
-    q-icon(
-      v-else
-      name="close",
-      size="25px",
-    )
-  .flex.flex-col.gap-y-5px.items-center(
-    v-if="rowKey === 'tooth_number'",
-    )
-    tooth-low-svg(
-      :opacity="value.dental_condition.general === 'О' ? 0.2 : 1",
-      :type="config.type",
-      :position="config?.position",
-      :jaw="jawPosition"
       )
-    span.font-medium.text-smm {{ config.tooth_number }}
+      q-icon(
-  .flex.flex-col.gap-y-1.items-center(
+        v-if="!isEditCondition",
-    v-if="rowKey === 'dental_condition' && !isEditCondition",
+        name="add",
-    :class="{'cell-info': isEdit}"
+        size="25px",
-    )
-    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="getFilledConditions(value[rowKey]).map((el) => el.value).flat().length-1 > 0",
-      @click="()=>openConditionsInfo()",
-      :class="{'active': isOpenConditionsInfo}"
       )
-      span.text-xsx.font-medium {{`+${getFilledConditions(value[rowKey]).map((el) => el.value).flat().length - 1}`}}
+      q-icon(
-      tooth-conditions-info(
+        v-else
-        v-model="isOpenConditionsInfo",
+        name="close",
-        :conditions="getFilledConditions(value[rowKey]).map((el) => el.value).flat()"
+        size="25px",
-        :config="conditionConfig"
+      )
+    .flex.flex-col.gap-y-5px.items-center(
+      v-if="rowKey === 'tooth_number'",
+      )
+      tooth-low-svg(
+        :opacity="value.dental_condition.general === 'О' ? 0.2 : 1",
+        :type="config.type",
+        :position="config?.position",
+        :jaw="jawPosition"
         )
-  span.text-smm.font-medium(
+      span.font-medium.text-smm {{ config.tooth_number }}
-    v-if="rowKey === 'tooth_mobility' && !isEditCondition",
+    .flex.flex-col.gap-y-1.items-center(
-    :class="{'cell-info': isEdit}"
+      v-if="rowKey === 'dental_condition' && !isEditCondition",
-    ) {{ mobilityConfig.find((el) => el.id === value[rowKey])?.label || null }}
+      :class="{'cell-info': isEdit}"
-  q-menu(
+      )
-    v-if="isEdit && rowKey === 'tooth_mobility'",
+      span.text-smm.font-medium {{getFilledConditions(value[rowKey]).map((el) => el.value).flat()[0]}}
-    v-model="isEditCondition",
+      .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
-    anchor="top left",
+        v-if="getFilledConditions(value[rowKey]).map((el) => el.value).flat().length-1 > 0",
-    :offset="[0,168]",
+        @click="()=>openConditionsInfo()",
-    )
+        :class="{'active': isOpenConditionsInfo}"
-    .flex.flex-col.p-2.w-40.gap-y-1
-      .mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-3.rounded.cursor-pointer(
-        v-for="mobility in mobilityConfig",
-        @click="()=>chooseMobility(mobility.id)"
         )
-        span.text-smm.font-medium {{ `${mobility.label} степень` }}
+        span.text-xsx.font-medium {{`+${getFilledConditions(value[rowKey]).map((el) => el.value).flat().length - 1}`}}
-        q-icon.check(
+        tooth-conditions-info(
-          name="check",
+          v-model="isOpenConditionsInfo",
-          size="12px"
+          :conditions="getFilledConditions(value[rowKey]).map((el) => el.value).flat()"
+          :config="conditionConfig"
           )
-  q-menu(
+    span.text-smm.font-medium(
-    v-if="isEdit && rowKey === 'dental_condition'",
+      v-if="rowKey === 'tooth_mobility' && !isEditCondition",
-    v-model="isEditCondition",
+      :class="{'cell-info': isEdit}"
-    anchor="top left",
+      ) {{ mobilityConfig.find((el) => el.id === value[rowKey])?.label || null }}
-    self="bottom left",
+    q-menu(
-    :offset="[20,8]",
+      v-if="isEdit && rowKey === 'tooth_mobility'",
-    )
+      v-model="isEditCondition",
-    dental-condition-form(
+      anchor="top left",
-      :data="value.dental_condition"
+      :offset="[0,168]",
-      :cell-config="config",
-      :form-config="formConfig"
       )
+      .flex.flex-col.p-2.w-40.gap-y-1
+        .mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-3.rounded.cursor-pointer(
+          v-for="mobility in mobilityConfig",
+          @click="()=>chooseMobility(mobility.id)"
+          )
+          span.text-smm.font-medium {{ `${mobility.label} степень` }}
+          q-icon.check(
+            name="check",
+            size="12px"
+            )
+    q-menu(
+      v-if="isEdit && rowKey === 'dental_condition'",
+      v-model="isEditCondition",
+      anchor="top left",
+      self="bottom left",
+      :offset="[20,8]",
+      )
+      dental-condition-form(
+        :data="value.dental_condition"
+        :cell-config="config",
+        :form-config="formConfig"
+        )
 </template>
 
 <script>
@@ -109,6 +110,7 @@ export default {
     rowKey: String,
     config: Object,
     formConfig: Object,
+    filtredTooths: Array,
   },
   watch: {
     isEdit() {

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue

@@ -20,13 +20,17 @@
       .flex.flex-col
         tooth-formula-table(
           v-for="config in data.formulaConfig",
+          :filtred-tooths="filtredTooths"
           :key="`table_${config.name}`", 
           :config="config", 
           :data="protocol[data.state]", 
           :form-config="data.conditionsForm",
           :is-edit="isEdit"
           )
-      formula-filter(:data="protocol[data.state]")
+      formula-filter(
+        v-model="filtredTooths",
+        :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(
@@ -58,7 +62,7 @@ export default {
     return {
       teeth,
       teeth_2,
-      filter: ["Все"],
+      filtredTooths: [],
       isEdit: false,
       component: false,
       viewToothFormula: true,
@@ -81,5 +85,8 @@ export default {
       this.isEdit = false;
     },
   },
+  mounted() {
+    this.filtredTooths = Object.keys(this.protocol[this.data.state].formula);
+  },
 };
 </script>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue

@@ -12,6 +12,7 @@
       tooth-formula-cell(
         v-for="cell in config.columns",
         v-model="data.formula[cell.tooth_number]",
+        :filtred-tooths="filtredTooths"
         :is-edit="isEdit",
         :jaw-position="config.name",
         :row-key="row.key",
@@ -41,6 +42,7 @@ export default {
     modelValue: Object,
     isEdit: Boolean,
     formConfig: Object,
+    filtredTooths: Array,
   },
   emits: ["update:modelValue"],
 };

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -1043,103 +1043,103 @@ export const protocolForms = [
         columns: [
           {
             type: "molars",
-            tooth_number: 18,
+            tooth_number: "18",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 17,
+            tooth_number: "17",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 16,
+            tooth_number: "16",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "pre-molars",
-            tooth_number: 15,
+            tooth_number: "15",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "pre-molars",
-            tooth_number: 14,
+            tooth_number: "14",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "fangs",
-            tooth_number: 13,
+            tooth_number: "13",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 12,
+            tooth_number: "12",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 11,
+            tooth_number: "11",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 21,
+            tooth_number: "21",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 22,
+            tooth_number: "22",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "fangs",
-            tooth_number: 23,
+            tooth_number: "23",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "pre-molars",
-            tooth_number: 24,
+            tooth_number: "24",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "pre-molars",
-            tooth_number: 25,
+            tooth_number: "25",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 26,
+            tooth_number: "26",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 27,
+            tooth_number: "27",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 28,
+            tooth_number: "28",
             dental_condition: "",
             tooth_mobility: "",
           },