From 36d4c7bc31b379b80d34328bd396a05a2f36faf7 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Thu, 8 Jun 2023 17:17:08 +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=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B2=D1=82=D0=BE=D1=80=D0=BE=D0=B3=D0=BE=20?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B4=D0=B0=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Forms/ToothFormula/DetailedToothSvg.vue   | 186 ++++++++++++++++++
 .../{ToothLowSvg.vue => SimpleToothSvg.vue}   |   2 +-
 .../Forms/ToothFormula/ToothFormulaCell.vue   |   6 +-
 .../Forms/ToothFormula/ToothFormulaForm.vue   |  13 +-
 .../Forms/ToothFormula/ToothFormulaTable.vue  |  26 ++-
 5 files changed, 222 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue
 rename src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/{ToothLowSvg.vue => SimpleToothSvg.vue} (99%)

diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue
new file mode 100644
index 0000000..b770e85
--- /dev/null
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue
@@ -0,0 +1,186 @@
+<template lang="pug">
+  svg(
+    v-if="partTooth === 'crown'",
+    width="41",
+    height="40",
+    viewBox="0 0 41 40",
+    fill="none",
+    xmlns="http://www.w3.org/2000/svg"
+  )
+    g(clip-path="url(#clip0_4088_279519)")
+      g
+        path(
+          d="M26.1322 26.1118C22.6171 29.624 16.918 29.624 13.4029 26.1118M13.3926 26.1015C9.89147 22.5922 9.89126 16.9137 13.392 13.4041M13.4029 13.3932C16.918 9.88102 22.6171 9.88102 26.1322 13.3932M26.1431 13.4041C29.6439 16.9137 29.6437 22.5922 26.1425 26.1015M25.7788 25.7581C22.459 29.0752 17.0762 29.0752 13.7563 25.7581C10.4367 22.4413 10.4367 17.0637 13.7563 13.7469C17.0762 10.4298 22.459 10.4298 25.7788 13.7469C29.0985 17.0637 29.0985 22.4413 25.7788 25.7581ZM7.75075 32.4661L13.4121 26.8095C17.0188 30.0581 22.5164 30.0581 26.1231 26.8095L31.7844 32.4661C30.2369 33.9263 28.4346 35.0932 26.4654 35.9082C24.342 36.787 22.066 37.2394 19.7676 37.2394C17.4691 37.2394 15.1932 36.787 13.0697 35.9082C11.1006 35.0932 9.2983 33.9263 7.75075 32.4661ZM32.4919 31.7593L26.8305 26.1027C30.0813 22.4989 30.0813 17.0061 26.8305 13.4023L32.4919 7.74571C33.9536 9.29209 35.1216 11.093 35.9374 13.0607C36.8169 15.1823 37.2696 17.4561 37.2696 19.7525C37.2696 22.0488 36.8169 24.3227 35.9374 26.4443C35.1216 28.412 33.9536 30.2129 32.4919 31.7593ZM26.1231 12.6955C22.5164 9.44691 17.0188 9.44691 13.4121 12.6955L7.75075 7.03892C9.2983 5.57869 11.1006 4.41176 13.0697 3.59679C15.1932 2.71796 17.4691 2.26562 19.7676 2.26562C22.066 2.26563 24.342 2.71796 26.4654 3.59679C28.4346 4.41176 30.2369 5.57869 31.7844 7.03892L26.1231 12.6955ZM12.7047 26.1027L7.04333 31.7593C5.58161 30.2129 4.41354 28.412 3.59783 26.4443C2.71831 24.3227 2.26562 22.0488 2.26562 19.7525C2.26562 17.4561 2.7183 15.1823 3.59783 13.0607C4.41354 11.093 5.58161 9.29209 7.04333 7.74571L12.7047 13.4023C9.45391 17.0061 9.45391 22.4989 12.7047 26.1027Z",
+          stroke="#252850"
+        )
+        path(
+          :class="{'edit-part': isEdit}",
+          d="M29.5234 31.7754C29.802 32.0662 29.7555 32.5373 29.4182 32.7575C26.5287 34.6441 23.1246 36.0162 19.6995 35.9394C16.2673 35.8624 12.8886 34.7337 10.0788 32.7673C9.75567 32.5412 9.72375 32.0808 10.0001 31.7996L13.1122 28.6337C13.3445 28.3973 13.7156 28.3737 13.9901 28.5594C15.7771 29.7687 17.5777 30.0976 19.8296 30.1481C22.0882 30.1988 23.8151 29.7034 25.6461 28.5283C25.9184 28.3536 26.2784 28.3877 26.5021 28.6212L29.5234 31.7754Z",
+          fill="#D3D4DC"
+        )
+        path(
+          :class="{'edit-part': isEdit}",
+          d="M10.02 7.83259C9.73773 7.54247 9.78271 7.06817 10.1218 6.84692C13.0102 4.96209 16.4123 3.59159 19.8354 3.66837C23.2653 3.74529 26.6418 4.87262 29.4506 6.83662C29.7757 7.06395 29.8058 7.52786 29.5252 7.80822L26.2828 11.048C26.0499 11.2806 25.6816 11.3026 25.4106 11.1157C23.6415 9.89566 21.9585 9.51017 19.7053 9.45964C17.4456 9.40896 15.8222 9.95753 14.0063 11.1421C13.737 11.3177 13.3792 11.2851 13.155 11.0547L10.02 7.83259Z",
+          fill="#D3D4DC"
+        )
+        path(
+          :class="{'edit-part': isEdit}",
+          d="M31.759 10.0672C32.0484 9.7804 32.5272 9.82331 32.75 10.1644C34.6342 13.049 36.0037 16.4456 35.9269 19.8633C35.8499 23.2903 34.7217 26.6639 32.756 29.4704C32.5285 29.7952 32.0642 29.8253 31.7836 29.5449L28.5411 26.3052C28.3083 26.0725 28.2862 25.7045 28.4733 25.4337C29.6944 23.6662 30.0802 21.9845 30.1308 19.7333C30.1815 17.4738 29.6311 15.9223 28.4438 14.1173C28.2686 13.8509 28.2992 13.4965 28.5257 13.2719L31.759 10.0672Z",
+          fill="#D3D4DC"
+        )
+        path(
+          :class="{'edit-part': isEdit}",
+          d="M7.84119 10.0499C7.55039 9.77014 7.07763 9.81602 6.85683 10.1537C4.96938 13.0404 3.59672 16.4408 3.67359 19.8623C3.75057 23.2893 4.87885 26.663 6.8445 29.4694C7.07202 29.7943 7.53632 29.8243 7.81691 29.544L11.0594 26.3042C11.2922 26.0716 11.3143 25.7036 11.1272 25.4328C9.90611 23.6652 9.52029 21.9836 9.46972 19.7323C9.41901 17.4751 9.92564 15.7802 11.1039 13.9551C11.2789 13.684 11.2454 13.3252 11.0129 13.1015L7.84119 10.0499Z",
+          fill="#D3D4DC"
+        )
+      g
+        ellipse(
+          :class="{'edit-part': isEdit}",
+          cx="19.7675",
+          cy="19.7948",
+          rx="7.0722",
+          ry="7.06627",
+          fill="#D3D4DC"
+        )
+    g
+      defs
+        clipPath(id="clip0_4088_279519")
+         rect(
+          width="40",
+          height="40",
+          fill="white",
+          transform="translate(0.25)"
+          )
+  svg(
+    v-if="partTooth === 'general'",
+    :class="{'rotate-180': jawPosition === 'upper' }",
+    :width="size[toothConfig.type].width",
+    :height="size[toothConfig.type].height",
+    :viewBox="size[toothConfig.type].viewBox",
+    fill="none",
+    xmlns="http://www.w3.org/2000/svg"
+    )
+    g(v-if="toothConfig.type === 'molars'")
+      path(
+        d="M36.2801 11.7305C36.7934 24.8374 35.8401 55.1414 32.5406 55.1426C27.5631 55.1444 30.5612 27.6442 25.5018 27.6424C20.3477 27.6406 22.4222 41.5053 18.6826 41.5053C14.9431 41.5053 17.0173 27.6372 11.8632 27.6389C6.80382 27.6407 9.80148 55.1426 4.82406 55.1408C1.5246 55.1396 0.571265 24.8384 1.08438 11.7305H18.6822H36.2801Z",
+        fill="white"
+        )
+      path(
+        d="M1.08451 11.7287C0.57124 24.8357 1.52446 55.1396 4.82406 55.1408M4.82406 55.1408C9.80148 55.1426 6.80382 27.6407 11.8632 27.6389C17.0173 27.6372 14.9431 41.5053 18.6826 41.5053C22.4222 41.5053 20.3477 27.6406 25.5018 27.6424C30.5612 27.6442 27.5631 55.1444 32.5406 55.1426C35.8402 55.1414 36.7934 24.8374 36.2801 11.7305H18.6822H1.08438C0.571265 24.8384 1.5246 55.1396 4.82406 55.1408Z",
+        stroke="#252850",
+        stroke-linecap="square"
+        )
+      path(
+        d="M19.0714 4.25161L18.6827 4.73195L18.2941 4.25161C16.5099 2.04667 13.7835 0.638338 10.7278 0.638338C5.35529 0.638338 1 4.9937 1 10.3663V13.5484C1 15.8368 2.82085 18.036 6.05365 19.6928C9.25995 21.3361 13.7242 22.3672 18.6827 22.3672C23.6412 22.3672 28.1055 21.3361 31.3118 19.6928C34.5446 18.036 36.3655 15.8368 36.3655 13.5484V10.3663C36.3655 4.9937 32.0102 0.638338 26.6377 0.638338C23.582 0.638338 20.8556 2.04667 19.0714 4.25161Z",
+        fill="white",
+        stroke="#252850"
+        )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M34.5713 13.3113C34.5713 17.2416 27.0496 20.4277 18.8213 20.4277C10.593 20.4277 3.07129 17.2416 3.07129 13.3113V10.8813C3.07129 6.56757 6.95639 3.07059 11.5848 3.07059C14.2175 3.07059 17.2849 5.80103 18.8213 7.57059C20.3577 5.80103 23.4251 3.07059 26.0578 3.07059C30.6862 3.07059 34.5713 6.56757 34.5713 10.8813V13.3113Z",
+        fill="#D3D4DC"
+        )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M4.81804 51.5043C3.25298 49.9392 3.08382 32.4872 3.07204 22.6833C3.07152 22.2535 3.68699 22.002 4.03135 22.2593C4.96781 22.9589 6.28013 23.7063 7.28315 24.161C7.45558 24.2392 7.56669 24.4067 7.55941 24.5959C7.17711 34.5275 6.43755 53.1238 4.81804 51.5043Z",
+        fill="#D3D4DC"
+        )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M32.3199 51.5043C33.8853 49.9389 34.5356 31.7491 34.5891 21.8825C34.5915 21.4526 34.0164 21.2387 33.7092 21.5394C32.7619 22.4667 31.3903 23.6221 30.3561 24.1534C30.1877 24.2399 30.0761 24.4067 30.0831 24.5959C30.4552 34.5275 30.7004 53.1238 32.3199 51.5043Z",
+        fill="#D3D4DC"
+        )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M16.669 25.9951C17.4383 32.3528 16.9336 38.7773 18.6832 38.7773C20.4366 38.7773 20.1845 32.3251 20.9795 25.9541C21.0207 25.6243 20.7074 25.3586 20.3838 25.4346C18.9844 25.7636 18.0072 25.6611 17.2903 25.4763C16.9589 25.3908 16.6278 25.6553 16.669 25.9951Z",
+        fill="#D3D4DC"
+        )
+    g(v-if="toothConfig.type === 'pre-molars' || toothConfig.type === 'fangs'")
+      path(
+      d="M36.6163 19.8282C36.5326 22.3195 35.8468 25.8084 34.7419 29.7043C33.564 33.8575 31.9208 38.4352 30.0632 42.6914C28.2041 46.9511 26.1384 50.8698 24.1203 53.715C23.1104 55.1386 22.125 56.2756 21.1971 57.0517C20.2606 57.8351 19.4397 58.2032 18.75 58.2032C18.0603 58.2032 17.2394 57.8351 16.3029 57.0517C15.375 56.2756 14.3896 55.1386 13.3797 53.715C11.3616 50.8698 9.29587 46.9511 7.43677 42.6914C5.57916 38.4352 3.93603 33.8575 2.75813 29.7043C1.65321 25.8084 0.967415 22.3195 0.883675 19.8282L1.81897 19.8282L5.75689 19.8284L18.75 19.8286L31.7431 19.8284L35.681 19.8282L36.6163 19.8282Z",
+      fill="white",
+      stroke="#252850"
+      )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M27.6106 31.75C27.9904 31.5726 28.5857 31.8793 28.5671 32.298C28.193 40.7601 23.9204 54.7656 18.75 54.7656C13.5545 54.7656 8.9633 40.6236 8.60111 32.175C8.58393 31.7742 9.10691 31.4947 9.47075 31.6638C10.7255 32.2471 13.473 33.1093 18.75 33.1093C23.7725 33.1093 26.3734 32.3282 27.6106 31.75Z",
+        fill="#D3D4DC"
+        )
+      path(
+        d="M36.625 19.3281C36.625 17.6844 35.9524 15.7204 34.7882 13.6711C33.6289 11.6305 32.0063 9.54771 30.1651 7.67697C28.3239 5.80617 26.2763 4.15994 24.2749 2.98465C22.264 1.80382 20.3451 1.125 18.75 1.125C17.1549 1.125 15.236 1.80382 13.2251 2.98465C11.2237 4.15994 9.17611 5.80617 7.33487 7.67697C5.49369 9.54771 3.87111 11.6305 2.71184 13.6711C1.54763 15.7204 0.875 17.6844 0.875 19.3281C0.875 22.6414 2.79677 25.4533 6.02112 27.4602C9.24982 29.4698 13.7467 30.6406 18.75 30.6406C23.7533 30.6406 28.2502 29.4698 31.4789 27.4602C34.7032 25.4533 36.625 22.6414 36.625 19.3281Z",
+        fill="white",
+        stroke="#252850"
+        )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M33.8438 18.8624C33.8438 13.0868 24.4102 3.57812 18.75 3.57812C13.0898 3.57812 3.65625 13.0868 3.65625 18.8624C3.65625 24.638 10.414 28.5156 18.75 28.5156C27.086 28.5156 33.8438 24.638 33.8438 18.8624Z",
+        fill="#D3D4DC"
+        )
+    g(v-if="toothConfig.type === 'incisors'")
+      path(
+      d="M37.8045 21.8282C37.7267 24.3241 37.089 27.8166 36.0628 31.7134C34.9686 35.8679 33.4425 40.4466 31.7173 44.7036C29.9906 48.9641 28.072 52.8836 26.1978 55.7292C25.2598 57.1533 24.3453 58.2893 23.4856 59.0636C22.615 59.8478 21.8654 60.2031 21.25 60.2031C20.6346 60.2031 19.885 59.8478 19.0144 59.0636C18.1547 58.2892 17.2402 57.1533 16.3022 55.7291C14.428 52.8836 12.5094 48.9641 10.7827 44.7036C9.05748 40.4465 7.53135 35.8678 6.43725 31.7133C5.41102 27.8165 4.77328 24.3241 4.69554 21.8282L5.52833 21.8282L9.18497 21.8284L21.25 21.8286L33.315 21.8284L36.9717 21.8282L37.8045 21.8282Z",
+      fill="white",
+      stroke="#252850"
+      )
+      path(
+        d="M38.7973 19.3594C38.7973 17.1778 38.8488 15.2799 38.8969 13.6327C38.9003 13.5151 38.9037 13.3989 38.9071 13.2839C38.9511 11.7848 38.9886 10.5089 38.9768 9.41334C38.951 7.01994 38.6835 5.6581 37.9037 4.8089C37.1244 3.96035 35.7199 3.50281 33.0292 3.29267C30.7528 3.11489 27.6757 3.11846 23.4964 3.1233C22.7807 3.12413 22.0326 3.125 21.2507 3.125C20.8514 3.125 20.461 3.12489 20.0791 3.12478C15.3488 3.12343 11.9416 3.12246 9.47669 3.33842C6.79044 3.57378 5.38278 4.05918 4.6005 4.92826C3.81627 5.7995 3.54946 7.17611 3.52364 9.55182C3.51178 10.6437 3.54948 11.9116 3.59365 13.3972C3.59688 13.5059 3.60015 13.6157 3.60343 13.7267C3.65149 15.3514 3.70294 17.2187 3.70294 19.3594C3.70294 22.7019 5.5742 26.0144 8.73114 28.508C11.8833 30.9978 16.2852 32.6406 21.2507 32.6406C26.2161 32.6406 30.6177 30.9978 33.7696 28.508C36.9263 26.0144 38.7973 22.702 38.7973 19.3594Z",
+        fill="white",
+        stroke="#252850"
+      )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M36.1934 18.8948C36.1934 5.05857 38.9103 5.5807 21.2504 5.5807C3.59053 5.5807 6.3065 5.31963 6.3065 18.8948C6.3065 24.5178 12.8475 29.8594 21.2504 29.8594C29.6533 29.8594 36.1934 24.5178 36.1934 18.8948Z",
+        fill="#D3D4DC"
+      )
+      path(
+        :class="{'edit-part': isEdit}",
+        d="M30.1106 33.75C30.4904 33.5726 31.0857 33.8793 31.0671 34.2981C30.693 42.7601 26.4204 56.7656 21.25 56.7656C16.0796 56.7656 11.807 42.7601 11.4329 34.2981C11.4143 33.8793 12.0096 33.5726 12.3894 33.75C13.6266 34.3282 16.2275 35.1094 21.25 35.1094C26.2725 35.1094 28.8734 34.3282 30.1106 33.75Z",
+        fill="#D3D4DC"
+      )
+</template>
+
+<script>
+export default {
+  name: "SimpleToothSvg",
+  data() {
+    return {
+      size: {
+        molars: {
+          width: "37",
+          height: "56",
+          viewBox: "0 0 37 56",
+        },
+        "pre-molars": {
+          width: "38",
+          height: "59",
+          viewBox: "0 0 38 59",
+        },
+        incisors: {
+          width: "43",
+          height: "63",
+          viewBox: "0 0 43 63",
+        },
+        fangs: {
+          width: "38",
+          height: "59",
+          viewBox: "0 0 38 59",
+        },
+      },
+    };
+  },
+  props: {
+    partTooth: String,
+    toothConfig: Object,
+    jawPosition: String,
+    data: Object,
+    isEdit: Boolean,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.edit-part
+  cursor: pointer
+  &:hover
+    fill: #F3CED0
+</style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/SimpleToothSvg.vue
similarity index 99%
rename from src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue
rename to src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/SimpleToothSvg.vue
index fd80f64..849b631 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/SimpleToothSvg.vue
@@ -33,7 +33,7 @@
 
 <script>
 export default {
-  name: "ToothLowSvg",
+  name: "SimpleToothSvg",
   props: {
     opacity: {
       type: Number,
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
index 6b67dc6..265f61e 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -23,7 +23,7 @@
     .flex.flex-col.gap-y-5px.items-center(
       v-if="rowKey === 'tooth_number'",
       )
-      tooth-low-svg(
+      simple-tooth-svg(
         :opacity="value.dental_condition.general === 'О' ? 0.2 : 1",
         :type="config.type",
         :position="config?.position",
@@ -82,7 +82,7 @@
 
 <script>
 import DentalConditionForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue";
-import ToothLowSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue";
+import SimpleToothSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/SimpleToothSvg.vue";
 import ToothConditionsInfo from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue";
 import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
 import {
@@ -93,7 +93,7 @@ import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "ToothFormulaCell",
-  components: { ToothLowSvg, ToothConditionsInfo, DentalConditionForm },
+  components: { SimpleToothSvg, ToothConditionsInfo, DentalConditionForm },
   data() {
     return {
       isEditCondition: false,
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
index 69e0c32..0bf86a2 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
@@ -25,7 +25,8 @@
           :config="config", 
           :data="protocol[data.state]", 
           :form-config="data.conditionsForm",
-          :is-edit="isEdit"
+          :is-edit="isEdit",
+          :view-type="isShowSecondView",
           )
       formula-filter(
         v-model="filtredTooths",
@@ -35,14 +36,14 @@
       .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
         q-btn.w-12.h-full.rounded(
           size="12px",
-          :style="{'backgroundColor': viewToothFormula ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
-          @click="()=>{ viewToothFormula=true }",
+          :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+          @click="()=>{ isShowSecondView=true }",
         )
           img(:src="teeth")
         q-btn.w-12.h-full.rounded(
           size="12px",
-          :style="{'backgroundColor': !viewToothFormula ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
-          @click="()=>{ viewToothFormula=false }",
+          :style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+          @click="()=>{ isShowSecondView=false }",
         )
           img(:src="teeth_2")
 </template>
@@ -65,7 +66,7 @@ export default {
       filtredTooths: [],
       isEdit: false,
       component: false,
-      viewToothFormula: true,
+      isShowSecondView: true,
     };
   },
   props: {
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
index e328fe1..2739ccd 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
@@ -3,6 +3,7 @@
     :class="{'rounded-t': config.name === 'upper', 'rounded-b': config.name === 'lower','border-botton-none': config.name === 'upper',}",
     )
     .row.flex.w-full(
+      v-if="viewType"
       v-for="row in config.rowMap",
       :key="`${config.name}_${row.key}`",
       :style="{'height': heightRow[row.key]}"
@@ -19,14 +20,34 @@
         :config="cell",
         :form-config="formConfig"
         )
+    .flex(v-else)
+      .cell.flex.flex-col.gap-y-7px.py-11px.items-center(
+        v-for="cell in config.columns",
+        :class="{'flex-col-reverse': config.name === 'upper'}"
+        :style="{'width': '6.25%', 'minWidth': '55px'}",
+        )
+        span.text-smm.font-medium {{cell.tooth_number}}
+        detailed-tooth-svg(
+          part-tooth="crown",
+          :data="data.formula[cell.tooth_number].dental_condition",
+          :is-edit="isEdit"
+          )
+        detailed-tooth-svg(
+          part-tooth="general",
+          :tooth-config="cell",
+          :jaw-position="config.name",
+          :data="data.formula[cell.tooth_number].dental_condition",
+          :is-edit="isEdit"
+          )
 </template>
 
 <script>
 import ToothFormulaCell from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue";
+import DetailedToothSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue";
 
 export default {
   name: "ToothFormulaTable",
-  components: { ToothFormulaCell },
+  components: { ToothFormulaCell, DetailedToothSvg },
   data() {
     return {
       heightRow: {
@@ -43,6 +64,7 @@ export default {
     isEdit: Boolean,
     formConfig: Object,
     filtredTooths: Array,
+    viewType: Boolean,
   },
   emits: ["update:modelValue"],
 };
@@ -59,4 +81,6 @@ export default {
     border-bottom-width: 0
 .cell
   border-right: 1px solid var(--border-light-grey-color)
+  &:last-child
+    border-right-width: 0
 </style>