From 701164c288b4b78b3b5c409d9865291677e95c74 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Tue, 30 May 2023 19:07:24 +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=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D0=B4=D0=B2=D0=B8=D0=B6=D0=BD=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=20=D0=B7=D1=83=D0=B1=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ToothFormula/ToothConditionsInfo.vue      |   2 +
 .../Forms/ToothFormula/ToothFormulaCell.vue   | 144 ++++++++++++++++++
 .../Forms/ToothFormula/ToothFormulaForm.vue   |   9 +-
 .../Forms/ToothFormula/ToothFormulaTable.vue  |  61 +++-----
 tailwind.config.js                            |   1 +
 5 files changed, 170 insertions(+), 47 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue

diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
index bd3b039..10146e7 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
   q-menu(
     v-model="modelValue",
+    anchor="bottom left",
+    :offset="[160,5]",
     )
     .flex.flex-col.p-4.gap-15px.text-smm.font-medium
       .general.w-full.flex.justify-start.pb-15px
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
new file mode 100644
index 0000000..1805ba4
--- /dev/null
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -0,0 +1,144 @@
+<template lang="pug">
+.cell.flex.justify-center.items-center.h-full.p-1(
+  :key="`${jawPosition}_${config.tooth_number}`"
+  :style="{'width': '5%'}",
+  :class="{'cursor-pointer': isEdit}"
+  )
+  .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
+    v-if="isEdit && rowKey !== 'tooth_number'"
+    @click.self="()=>{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 }}
+  .flex.flex-col.gap-y-1.items-center(
+    v-if="rowKey === 'dental_condition' && !isEditCondition",
+    :class="{'cell-info': isEdit}"
+    )
+    span.text-smm.font-medium {{ value[rowKey].general }}
+    .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
+      v-if="getFiiledConditions(value[rowKey]).length",
+      @click="()=>openConditionsInfo()",
+      )
+      span.text-xsx.font-medium {{`+${getFiiledConditions(value[rowKey]).length}`}}
+      tooth-conditions-info(
+        v-model="isOpenConditionsInfo",
+        :general="value[rowKey].general",
+        :conditions="getFiiledConditions(value[rowKey])"
+        :config="toothConfig.conditions"
+        )
+  span.text-smm.font-medium(
+    v-if="rowKey === 'tooth_mobility' && !isEditCondition",
+    :class="{'cell-info': isEdit}"
+    ) {{ toothConfig.mobility.find((el) => el.id === value[rowKey])?.label || null }}
+  q-menu(
+    v-if="isEdit",
+    v-model="isEditCondition",
+    )
+    .flex.flex-col.p-4(v-if="rowKey === 'tooth_mobility'")
+      .mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-15px.rounded.w-143px.cursor-pointer(
+        v-for="mobility in toothConfig.mobility",
+        @click="()=>chooseMobility(mobility.id)"
+        )
+        span.text-smm.font-medium {{ `${mobility.label} степень` }}
+        q-icon.check(
+          name="check",
+          size="12px"
+          )
+</template>
+
+<script>
+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 { v_model } from "@/shared/mixins/v-model";
+
+export default {
+  name: "ToothFormulaCell",
+  components: { ToothLowSvg, ToothConditionsInfo },
+  data() {
+    return {
+      isEditCondition: false,
+      isOpenConditionsInfo: false,
+      getFiiledConditions,
+    };
+  },
+  mixins: [v_model],
+  props: {
+    isEdit: Boolean,
+    jawPosition: String,
+    rowKey: String,
+    config: Object,
+    toothConfig: Object,
+  },
+  watch: {
+    isEdit() {
+      if (!this.isEdit) {
+        this.isEditCondition = false;
+      }
+    },
+  },
+  methods: {
+    chooseMobility(id) {
+      this.value.tooth_mobility = id;
+      this.isEditCondition = false;
+    },
+    openConditionsInfo() {
+      this.isOpenConditionsInfo = true;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.cell
+  border-right: 1px solid var(--border-light-grey-color)
+  &:hover
+    & .edit-cell
+      display: flex
+    & .cell-info
+      display: none
+  &:active
+    & .cell-info
+      display: none
+  &:last-child
+    border-right-width: 0
+.conditions
+  background-color: var(--bg-light-grey)
+  &:hover
+    background-color: var(--font-grey-color-0)
+  &:active
+    background-color: var(--btn-blue-color)
+.edit-cell
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  display: none
+.open-edit
+  display: flex !important
+.mobility-item
+  &:hover
+    background-color: var(--bg-light-grey)
+    & .check
+      display: block
+.check
+  display: none
+  color: var(--bg-status-green)
+</style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
index e70bfc5..af73f85 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
@@ -16,9 +16,12 @@
           )
       .flex.flex-col
         tooth-formula-table(
-          v-for="config in data.formulaConfig", 
-          :config="config", :data="protocol[data.state]", 
-          :toothConfig="data.toothConfig"
+          v-for="config in data.formulaConfig",
+          :key="`table_${config.name}`", 
+          :config="config", 
+          :data="protocol[data.state]", 
+          :toothConfig="data.toothConfig",
+          :is-edit="isEdit"
           )
     template(v-slot:right-corner)
       .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
index f5da72c..7c1a0bf 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
@@ -2,49 +2,32 @@
   .table.flex.flex-col.w-full.box-border(
     :class="{'rounded-t': config.name === 'upper', 'rounded-b': config.name === 'lower','border-botton-none': config.name === 'upper',}",
     )
-    .row.flex.w-full(v-for="row in config.rowMap", :style="{'height': heightRow[row.key]}")
+    .row.flex.w-full(
+      v-for="row in config.rowMap",
+      :key="`${config.name}_${row.key}`",
+      :style="{'height': heightRow[row.key]}"
+      )
       .cell.flex.justify-start.items-center.pl-4.h-full(:style="{'width': '20%', 'minWidth': '146px'}")
         span.font-medium.text-smm.whitespace-nowrap(:style="{'color': 'var(--font-grey-color)'}") {{ row.label }}
-      .cell.flex.justify-center.items-center.h-full(
+      tooth-formula-cell(
         v-for="cell in config.columns",
-        :style="{'width': '5%'}"
+        v-model="data.formula[cell.tooth_number]",
+        :is-edit="isEdit",
+        :jaw-position="config.name",
+        :row-key="row.key",
+        :config="cell",
+        :tooth-config="toothConfig"
         )
-        .flex.flex-col.gap-y-5px.items-center(v-if="row.key === 'tooth_number'")
-          tooth-low-svg(
-            :opacity="data.formula[cell.tooth_number].dental_condition.general === 'О' ? 0.2 : 1"
-            :type="cell.type",
-            :position="cell?.position",
-            :jaw="config.name"
-            )
-          span.font-medium.text-smm {{ cell.tooth_number }}
-        .flex.flex-col.gap-y-1.items-center(v-if="row.key === 'dental_condition'")
-          span.text-smm.font-medium {{ data.formula[cell.tooth_number].dental_condition.general }}
-          .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
-            v-if="getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length",
-            @click="()=>openConditionsInfo()"
-            )
-            span.text-xsx.font-medium {{`+${getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length}`}}
-            tooth-conditions-info(
-              v-model="isOpenConditions",
-              :general="data.formula[cell.tooth_number].dental_condition.general",
-              :conditions="getFiiledConditions(data.formula[cell.tooth_number].dental_condition)"
-              :config="toothConfig.conditions"
-              )
-        span.text-smm.font-medium(v-if="row.key === 'tooth_mobility'") {{ toothConfig.mobility.find((el) => el.id === data.formula[cell.tooth_number].tooth_mobility)?.label || null }}
 </template>
 
 <script>
-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 ToothFormulaCell from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue";
 
 export default {
   name: "ToothFormulaTable",
-  components: { ToothLowSvg, ToothConditionsInfo },
+  components: { ToothFormulaCell },
   data() {
     return {
-      isOpenConditions: false,
-      getFiiledConditions,
       heightRow: {
         tooth_mobility: "36px",
         dental_condition: "64px",
@@ -56,12 +39,10 @@ export default {
     toothConfig: Object,
     config: Object,
     data: Object,
+    modelValue: Object,
+    isEdit: Boolean,
   },
-  methods: {
-    openConditionsInfo() {
-      this.isOpenConditions = true;
-    },
-  },
+  emits: ["update:modelValue"],
 };
 </script>
 
@@ -76,12 +57,4 @@ export default {
     border-bottom-width: 0
 .cell
   border-right: 1px solid var(--border-light-grey-color)
-  &:last-child
-    border-right-width: 0
-.conditions
-  background-color: var(--bg-light-grey)
-  &:hover
-    background-color: var(--font-grey-color-0)
-  &.active
-    background-color: var(--btn-blue-color)
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index be3f5ea..ebccfa9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -66,6 +66,7 @@ module.exports = {
         "74px": "74px",
         "92px": "92px",
         "102px": "102px",
+        "143px": "143px",
         "148px": "148px",
       },
     },