From f61c405f0f4c426509f39d7ffc65bfcfd7f69c3b Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Thu, 29 Jun 2023 16:58:33 +0300
Subject: [PATCH 1/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BC=D0=BE=D0=B6=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B5=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D1=81=D0=BE=D0=B7=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F=20=D1=82=D1=8D=D0=B3=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Forms/MedicalFormTag.vue                  |  11 +-
 .../Forms/TagCreationForm.vue                 | 105 +++++++++++++++++-
 2 files changed, 108 insertions(+), 8 deletions(-)

diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
index ae14168..1ff0c9a 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
@@ -50,8 +50,8 @@
           .flex.h-10.w-10.absolute.right-4.bottom-4
             q-btn(@click="showModal = true", color="primary", dense, padding="4px 12px")
               q-icon(name="app:icon-plus", size="17px")
-        base-modal(v-model="showModal", title="Создание тега")
-          tag-creation-form
+        base-modal(v-model="showModal", title="Создание тега", modal-padding)
+          tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
     .flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}")
       q-btn(no-caps, flat padding="2px 4px")
         q-icon(left, name="app:plus", size="11px")
@@ -111,6 +111,13 @@ export default {
     closeCard() {
       this.change = false;
     },
+    closeModal() {
+      this.showModal = false;
+    },
+    createTag(model) {
+      this.showModal = false;
+      this.protocolData[this.data.state].push(model.tag);
+    },
   },
   watch: {
     fillInspection: {
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
index e95ff0a..e8e9fda 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
@@ -1,17 +1,48 @@
 <template lang="pug">
-  .wrapper.flex.flex-col
-    .flex.flex-col
+  .flex.flex-col
+    .flex.flex-col.justify-between.py-6(:style="{height: '194px'}")
+      .flex.flex-col(class="gap-y-1.5")
+        .label.font-semibold.text-smm Категория
+        .select.flex.items-center.justify-between.cursor-pointer.py-2.px-4.rounded(
+          :class="{'open-select': isOpen}",
+          @click="openMenu",
+          v-click-outside="closeMenu"
+        ) {{model.category ? model.category : "Выберите категорию"}}
+          .flex.duration-100(:class="{'open-menu': isOpen}")
+            q-icon(name="app:down-arrow")
+        q-menu(
+          v-if="isOpen",
+          :style="{rowGap: '6px'}",
+          style="margin-top: 4px !important",
+          fit,
+          anchor="bottom left",
+          self="top left"
+        )
+          .menu-wrapper.flex.flex-col.h-40.overflow-y-auto
+            .options.flex(v-for="item in options")
+              .item.flex.py-2.px-4.items-center.cursor-pointer(
+                @click="selected(item.label)"
+              ) {{item.label}}
+          .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
+            @click="addCategory"
+          )
+            q-icon(name="app:icon-plus", size="10px",)
+            span Добавить категорию
+      .flex.flex-col(class="gap-x-1.5")
+        base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тэг", outlined)
     .buttons-group.flex
       q-btn(
+        @click="closeModal",
         color="primary",
         outline,
         size="16px",
         no-caps,
-        label="Отмена",
+        label="Отменить",
         :style="{width: '100%', height: '40px'}",
         padding="10px 24px"
       )
       q-btn(
+        @click="createTag(model)",
         color="primary",
         size="16px",
         no-caps,
@@ -22,27 +53,89 @@
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput.vue";
+
 export default {
   name: "TagCreationForm",
+  components: { BaseInput },
+  props: {
+    closeModal: Function,
+    createTag: Function,
+  },
   data() {
     return {
-      model: null,
+      model: { category: null, tag: "" },
       options: [
         { label: "Какая-то категория 1" },
         { label: "Какая-то категория 2" },
         { label: "Какая-то категория 3" },
         { label: "Какая-то категория 4" },
+        { label: "Какая-то категория 5" },
+        { label: "Какая-то категория 6" },
       ],
+      isOpen: false,
     };
   },
+  methods: {
+    closeMenu() {
+      this.isOpen = false;
+    },
+    addCategory() {
+      this.options.push({
+        label: `Какая-то категория ${this.options.length + 1}`,
+      });
+    },
+    openMenu() {
+      this.isOpen = !this.isOpen;
+    },
+    selected(label) {
+      this.model.category = label;
+      this.isOpen = false;
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
+.label
+  color: var(--font-grey-color)
+
+.select
+  border: 1px solid var(--border-light-grey-color)
+  width: 436px
+
+.open-menu
+  transform: rotate(180deg)
+
+.open-select
+  border: 1.5px solid var(--btn-blue-color)
+
+.menu-wrapper
+  margin-right: 5px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-top: 23px
+
+.options
+  border-bottom: 1px solid var(--border-light-grey-color)
+  width: 419px
+  &:last-child
+    border-bottom: none
+
+.item
+  width: 419px
+  &:hover
+    background: var(--bg-hover-row-table)
+
+.tag
+  border-top: 1px solid var(--border-light-grey-color)
+  color: var(--btn-blue-color)
+
 .buttons-group
   padding: 16px 168px 0px 32px
   border-top: 1px solid var(--border-light-grey-color)
-  margin-left: -40px
-  margin-right: -40px
+  margin-left: -32px
+  margin-right: -32px
   column-gap: 7px
 </style>

From e6015ba458610e37958ff6c7c266ebf221f06937 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Thu, 29 Jun 2023 17:13:42 +0300
Subject: [PATCH 2/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B5=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D1=81=D0=BE=D0=B7=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F=20=D1=82=D1=8D=D0=B3=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D1=85=20=D0=BE=D0=B1=D1=81=D0=BB=D0=B5=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F,=20=D1=84=D0=B8=D0=BA=D1=81=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Forms/DataForm.vue                        |  14 ++-
 .../Forms/MedicalFormTag.vue                  |   5 +-
 .../Forms/TagCreationForm.vue                 | 105 +++++++++---------
 3 files changed, 67 insertions(+), 57 deletions(-)

diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
index 7f9b949..d979978 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
@@ -61,8 +61,9 @@
                 )
                 .name.flex.items-center.font-medium.text-smm {{ name }}
           .flex.h-10.w-10.absolute.right-4.bottom-4
-            q-btn(color="primary", dense, padding="4px 12px")
+            q-btn(@click="showModal = true", color="primary", dense, padding="4px 12px")
               q-icon(name="app:icon-plus", size="17px")
+        tag-creation-form(:show-modal="showModal", :close-modal="closeModal", :create-tag="createTag")
     .flex.gap-x-20.w-full(v-if="change || fillInspection")
       .flex.flex-col.gap-y-3.w-full(v-for="file in protocolData[data.state].files")
         .title.text-smm.font-semibold {{file.name}}
@@ -97,13 +98,14 @@
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import TagCreationForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { mapState } from "vuex";
 
 export default {
   name: "DataForm",
-  components: { MedicalFormWrapper, BaseButton, BaseInput },
+  components: { MedicalFormWrapper, BaseButton, BaseInput, TagCreationForm },
   props: {
     abc: Array,
     data: Object,
@@ -113,6 +115,7 @@ export default {
   data() {
     return {
       change: false,
+      showModal: false,
     };
   },
   computed: {
@@ -183,6 +186,13 @@ export default {
         reader.readAsDataURL(file);
       });
     },
+    closeModal() {
+      this.showModal = false;
+    },
+    createTag(model) {
+      this.showModal = false;
+      this.protocolData[this.data.state].complaints.push(model.tag);
+    },
   },
   watch: {
     fillInspection: {
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
index 1ff0c9a..db8471f 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
@@ -50,8 +50,7 @@
           .flex.h-10.w-10.absolute.right-4.bottom-4
             q-btn(@click="showModal = true", color="primary", dense, padding="4px 12px")
               q-icon(name="app:icon-plus", size="17px")
-        base-modal(v-model="showModal", title="Создание тега", modal-padding)
-          tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
+        tag-creation-form(:show-modal="showModal", :close-modal="closeModal", :create-tag="createTag")
     .flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}")
       q-btn(no-caps, flat padding="2px 4px")
         q-icon(left, name="app:plus", size="11px")
@@ -64,7 +63,6 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import TagCreationForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue";
 import { mapState } from "vuex";
-import BaseModal from "@/components/base/BaseModal.vue";
 
 export default {
   name: "MedicalFormTag",
@@ -73,7 +71,6 @@ export default {
     BaseInput,
     MedicalFormWrapper,
     TagCreationForm,
-    BaseModal,
   },
   props: { data: Object, abc: Array, fillInspection: Boolean },
   data() {
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
index e8e9fda..3d37c9c 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
@@ -1,66 +1,69 @@
 <template lang="pug">
-  .flex.flex-col
-    .flex.flex-col.justify-between.py-6(:style="{height: '194px'}")
-      .flex.flex-col(class="gap-y-1.5")
-        .label.font-semibold.text-smm Категория
-        .select.flex.items-center.justify-between.cursor-pointer.py-2.px-4.rounded(
-          :class="{'open-select': isOpen}",
-          @click="openMenu",
-          v-click-outside="closeMenu"
-        ) {{model.category ? model.category : "Выберите категорию"}}
-          .flex.duration-100(:class="{'open-menu': isOpen}")
-            q-icon(name="app:down-arrow")
-        q-menu(
-          v-if="isOpen",
-          :style="{rowGap: '6px'}",
-          style="margin-top: 4px !important",
-          fit,
-          anchor="bottom left",
-          self="top left"
-        )
-          .menu-wrapper.flex.flex-col.h-40.overflow-y-auto
-            .options.flex(v-for="item in options")
-              .item.flex.py-2.px-4.items-center.cursor-pointer(
-                @click="selected(item.label)"
-              ) {{item.label}}
-          .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
-            @click="addCategory"
+  base-modal(v-model="showModal", title="Создание тега", modal-padding)
+    .flex.flex-col
+      .flex.flex-col.justify-between.py-6(:style="{height: '194px'}")
+        .flex.flex-col(class="gap-y-1.5")
+          .label.font-semibold.text-smm Категория
+          .select.flex.items-center.justify-between.cursor-pointer.py-2.px-4.rounded(
+            :class="{'open-select': isOpen}",
+            @click="openMenu",
+            v-click-outside="closeMenu"
+          ) {{model.category ? model.category : "Выберите категорию"}}
+            .flex.duration-100(:class="{'open-menu': isOpen}")
+              q-icon(name="app:down-arrow")
+          q-menu(
+            v-if="isOpen",
+            :style="{rowGap: '6px'}",
+            style="margin-top: 4px !important",
+            fit,
+            anchor="bottom left",
+            self="top left"
           )
-            q-icon(name="app:icon-plus", size="10px",)
-            span Добавить категорию
-      .flex.flex-col(class="gap-x-1.5")
-        base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тэг", outlined)
-    .buttons-group.flex
-      q-btn(
-        @click="closeModal",
-        color="primary",
-        outline,
-        size="16px",
-        no-caps,
-        label="Отменить",
-        :style="{width: '100%', height: '40px'}",
-        padding="10px 24px"
-      )
-      q-btn(
-        @click="createTag(model)",
-        color="primary",
-        size="16px",
-        no-caps,
-        label="Создать"
-        :style="{width: '100%', height: '40px'}",
-        padding="10px 24px"
-      )
+            .menu-wrapper.flex.flex-col.h-40.overflow-y-auto
+              .options.flex(v-for="item in options")
+                .item.flex.py-2.px-4.items-center.cursor-pointer(
+                  @click="selected(item.label)"
+                ) {{item.label}}
+            .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
+              @click="addCategory"
+            )
+              q-icon(name="app:icon-plus", size="10px",)
+              span Добавить категорию
+        .flex.flex-col(class="gap-x-1.5")
+          base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тэг", outlined)
+      .buttons-group.flex
+        q-btn(
+          @click="closeModal",
+          color="primary",
+          outline,
+          size="16px",
+          no-caps,
+          label="Отменить",
+          :style="{width: '100%', height: '40px'}",
+          padding="10px 24px"
+        )
+        q-btn(
+          @click="createTag(model)",
+          color="primary",
+          size="16px",
+          no-caps,
+          label="Создать"
+          :style="{width: '100%', height: '40px'}",
+          padding="10px 24px"
+        )
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
 
 export default {
   name: "TagCreationForm",
-  components: { BaseInput },
+  components: { BaseInput, BaseModal },
   props: {
     closeModal: Function,
     createTag: Function,
+    showModal: Boolean,
   },
   data() {
     return {