Merge branch 'ASTRA-104' into 'master'

[WIP] Поправил отображение форм зубной формулы

See merge request andrusyakka/urban-couscous!402

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

@@ -4,18 +4,19 @@
       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
+      .options-wrapper.flex.flex-col.h-250px.overflow-y-auto.gap-y-1.pb-14px
-        q-expansion-item.expansion-item.rounded.mr-2(
+        q-expansion-item.expansion-item.rounded.mr-2.w-318px(
           v-for="(kind, key) in formConfig.conditions", 
           :label="kind.label"
           )
-          .flex.flex-col.pl-4(v-if="!kind?.partsTooth")
+          .general-expaction.flex.flex-col.pl-4(v-if="!kind?.partsTooth")
-            .flex.gap-11px.items.center.h-10.w-full(
+            .condition-item.flex.gap-11px.items-center.h-10.w-full(
               v-for="option in kind.options"
             )
               q-radio(
                 v-model="data[key]",
                 :val="option.value"
+                @update:model-value="updateConditions"
                 dense,
                 checked-icon="check_box",
                 unchecked-icon="check_box_outline_blank",
@@ -25,29 +26,64 @@
                 span.font-medium {{ option.label }}
           .flex.flex-col.pl-4(v-else)
             .flex.flex-col.gap-y-3
-              .flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
+              .part-item.flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
-                span.option-label.text-smm.font-medium {{part.label}}
+                span.part-label.text-smm.font-medium {{part.label}}
-                q-option-group(
+                .condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in kind.options")
-                  v-model="data[key][partKey]",
+                  q-checkbox(
-                  :options="kind.options",
+                    v-model="data[key][partKey]", 
-                  size="30px",
+                    :val="option.value",
-                  dense,
+                    @update:model-value="updateConditions"
-                  type="checkbox",
+                    checked-icon="check_box",
-                )
+                    unchecked-icon="check_box_outline_blank",
-                  template(v-slot:label="opt")
+                    dense,
-                    .condition-label.flex.gap-x-2.h-10.w-full.items-center.text-smm
+                    )
-                      span.font-semibold {{ opt.value }}
+                  .condition-label.flex.gap-x-2.h-full.w-full.items-center.text-smm
-                      span.font-medium {{ opt.label }}
+                    span.font-semibold {{ option.value }}
+                    span.font-medium {{ option.label }}
+    q-menu.h-258px(
+      v-model="isOpenInfoSelected",
+      anchor="top right",
+      no-parent-event,
+      :offset="[4,0]"
+    )
+      .flex.flex-col.px-4.py-2.gap-y-3
+        .flex.gap-x-2.text-m.font-bold
+          span Выбранное
+          span(:style="{'color': 'var(--font-grey-color)'}") {{countSelected}}
 </template>
 
 <script>
+import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+
 export default {
   name: "DentalConditionForm",
+  data() {
+    return {
+      isOpenInfoSelected: false,
+      countSelected: 0,
+      getFiiledConditions,
+    };
+  },
   props: {
     data: Object,
     cellConfig: Object,
     formConfig: Object,
   },
+  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) {
+        this.isOpenInfoSelected = true;
+      } else {
+        this.isOpenInfoSelected = false;
+      }
+    },
+  },
+  created() {
+    this.updateConditions();
+  },
 };
 </script>
 
@@ -56,7 +92,15 @@ export default {
   border: 1px solid var(--border-light-grey-color)
 .expansion-item
   border: 1px solid var(--bg-light-grey)
-.option-label
+  & .general-expaction
+    & .condition-item:last-child
+      & .condition-label
+        border-bottom: none
+  & .part-item:last-child
+    & .condition-item:last-child
+      & .condition-label
+        border-bottom: none
+.part-label
   color: var(--font-grey-color)
 .condition-label
   border-bottom: 1px solid var(--bg-light-grey)

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

@@ -1,8 +1,8 @@
 <template lang="pug">
   q-menu(
-    v-model="modelValue",
     anchor="bottom left",
     :offset="[160,5]",
+    @before-hide="closePopup"
     )
     .flex.flex-col.p-4.gap-15px.text-smm.font-medium
       .general.w-full.flex.justify-start.pb-15px
@@ -11,6 +11,8 @@
 </template>
 
 <script>
+import { v_model } from "@/shared/mixins/v-model";
+
 export default {
   name: "ToothConditionsInfo",
   props: {
@@ -18,8 +20,14 @@ export default {
     general: String,
     conditions: Array,
     modelValue: Boolean,
+    hideEvent: Function,
+  },
+  mixins: [v_model],
+  methods: {
+    closePopup() {
+      this.value = false;
+    },
   },
-  emits: ["update:modelValue"],
 };
 </script>
 

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

@@ -23,7 +23,7 @@
     v-if="rowKey === 'tooth_number'",
     )
     tooth-low-svg(
-      :opacity="value.dental_condition.general === 'О' ? 0.2 : 1"
+      :opacity="value.dental_condition.general === 'О' ? 0.2 : 1",
       :type="config.type",
       :position="config?.position",
       :jaw="jawPosition"
@@ -37,6 +37,7 @@
     .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
       v-if="getFiiledConditions(value[rowKey]).length",
       @click="()=>openConditionsInfo()",
+      :class="{'active': isOpenConditionsInfo}"
       )
       span.text-xsx.font-medium {{`+${getFiiledConditions(value[rowKey]).length}`}}
       tooth-conditions-info(
@@ -50,11 +51,13 @@
     :class="{'cell-info': isEdit}"
     ) {{ mobilityConfig.find((el) => el.id === value[rowKey])?.label || null }}
   q-menu(
-    v-if="isEdit",
+    v-if="isEdit && rowKey === 'tooth_mobility'",
     v-model="isEditCondition",
+    anchor="top left",
+    :offset="[0,168]",
     )
-    .flex.flex-col.p-4(v-if="rowKey === 'tooth_mobility'")
+    .flex.flex-col.p-2.w-40.gap-y-1
-      .mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-15px.rounded.w-143px.cursor-pointer(
+      .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)"
         )
@@ -63,8 +66,14 @@
           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(
-      v-if="rowKey === 'dental_condition'",
       :data="value.dental_condition"
       :cell-config="config",
       :form-config="formConfig"
@@ -104,9 +113,7 @@ export default {
   },
   watch: {
     isEdit() {
-      if (!this.isEdit) {
+      this.isEditCondition = false;
-        this.isEditCondition = false;
-      }
     },
   },
   methods: {
@@ -138,8 +145,9 @@ export default {
   background-color: var(--bg-light-grey)
   &:hover
     background-color: var(--font-grey-color-0)
-  &:active
+  &.active
     background-color: var(--btn-blue-color)
+    color: var(--default-white)
 .edit-cell
   background-color: var(--bg-light-grey)
   color: var(--font-grey-color)

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

@@ -7,13 +7,16 @@
      )
     .flex.flex-col.gap-y-4
       .flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? 'var(--default-white)': 'var(--bg-light-grey)'}")
-        q-checkbox.font-medium.text-smm(
+        q-checkbox(
           v-model="protocol[data.state].lacticBite",
           dense,
+          size="38px",
+          checked-icon="check_box",
+          unchecked-icon="check_box_outline_blank",
           :disable="!isEdit",
-          label="Молочный прикус",
           :color="isEdit ? 'primary' : 'grey'"
           )
+        span.font-medium.text-smm Молочный прикус
       .flex.flex-col
         tooth-formula-table(
           v-for="config in data.formulaConfig",

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

@@ -4,8 +4,8 @@
     :width="getSize.width",
     :height="getSize.height",
     :viewBox="getSize.viewBox",
-    :fill-opacity="opacity"
+    :fill-opacity="opacity",
-    fill="#252850",
+    fill="none"
     xmlns="http://www.w3.org/2000/svg",
     )
     path(

tailwind.config.js

@@ -70,6 +70,8 @@ module.exports = {
         "148px": "148px",
         "212px": "212px",
         "250px": "250px",
+        "258px": "258px",
+        "318px": "318px",
         "350px": "350px",
       },
     },