Фикс модального окна создания тэга, стилей

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -3,7 +3,7 @@
     .header.w-full.flex.gap-x-2px.text-sm
       .first-item.color-black.justify-center.gap-x-2(:class="timeClass")
         span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
-        q-icon(
+        q-icon.cursor-pointer(
           name="arrow_back_ios_new",
           size="10px",
           v-if="expandedTime",

src/pages/newCalendar/components/CalendarRecordPreview.vue

@@ -3,8 +3,8 @@
     .header.flex.mb-6
       .title.font-bold.text-xl.color-dark-blue Запись на {{ date }}, {{ time }}
       .icons.flex.items-center.gap-x-3.-mt-5.-mr-4.p-1
-        q-icon(name="app:dots", size="18px", color="dark")
+        q-icon.cursor-pointer(name="app:dots", size="18px", color="dark")
-        q-icon(name="app:cancel", size="18px", color="dark", @click="hidePreview")
+        q-icon.cursor-pointer(name="app:cancel", size="18px", color="dark", @click="hidePreview")
     .body.gap-y-4.text.text-sm
       .flex.items-center.gap-x-3(v-for="field in previewConfig", :key="field?.title")
         .field.color-grey.flex.items-center.justify-start.font-semibold {{ field?.title }}:

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue

@@ -63,7 +63,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")
-        tag-creation-form(:show-modal="showModal", :close-modal="closeModal", :create-tag="createTag")
+        base-modal(v-model="showModal", title="Создание тега", modal-padding)
+          tag-creation-form(: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}}
@@ -101,15 +102,23 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra
 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 BaseModal from "@/components/base/BaseModal.vue";
 import { mapState } from "vuex";
 
 export default {
   name: "DataForm",
-  components: { MedicalFormWrapper, BaseButton, BaseInput, TagCreationForm },
+  components: {
+    MedicalFormWrapper,
+    BaseButton,
+    BaseInput,
+    TagCreationForm,
+    BaseModal,
+  },
   props: {
     abc: Array,
     data: Object,
     fillInspection: Boolean,
+
     inspection: Boolean,
   },
   data() {

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue

@@ -50,7 +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")
-        tag-creation-form(:show-modal="showModal", :close-modal="closeModal", :create-tag="createTag")
+        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")
@@ -62,6 +63,7 @@ import BaseButton from "@/components/base/BaseButton.vue";
 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 BaseModal from "@/components/base/BaseModal.vue";
 import { mapState } from "vuex";
 
 export default {
@@ -69,6 +71,7 @@ export default {
   components: {
     BaseButton,
     BaseInput,
+    BaseModal,
     MedicalFormWrapper,
     TagCreationForm,
   },

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue

@@ -1,69 +1,67 @@
 <template lang="pug">
-  base-modal(v-model="showModal", title="Создание тега", modal-padding)
+  .flex.flex-col
-    .flex.flex-col
+    .flex.flex-col.justify-between.py-6(:style="{height: '194px'}")
-      .flex.flex-col.justify-between.py-6(:style="{height: '194px'}")
+      .flex.flex-col(class="gap-y-1.5")
-        .flex.flex-col(class="gap-y-1.5")
+        .label.font-semibold.text-smm Категория
-          .label.font-semibold.text-smm Категория
+        .select.flex.items-center.justify-between.cursor-pointer.py-2.px-4.rounded(
-          .select.flex.items-center.justify-between.cursor-pointer.py-2.px-4.rounded(
+          :class="{'open-select': isOpen}",
-            :class="{'open-select': isOpen}",
+          @click="openMenu",
-            @click="openMenu",
+          v-click-outside="closeMenu"
-            v-click-outside="closeMenu"
+        ) {{model.category ? model.category : "Выберите категорию"}}
-          ) {{model.category ? model.category : "Выберите категорию"}}
+          .flex.duration-100(:class="{'open-menu': isOpen}")
-            .flex.duration-100(:class="{'open-menu': isOpen}")
+            q-icon(name="app:down-arrow")
-              q-icon(name="app:down-arrow")
+        q-menu(
-          q-menu(
+          v-if="isOpen",
-            v-if="isOpen",
+          :style="{rowGap: '6px'}",
-            :style="{rowGap: '6px'}",
+          style="margin-top: 4px !important",
-            style="margin-top: 4px !important",
+          fit,
-            fit,
+          anchor="bottom left",
-            anchor="bottom left",
+          self="top 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"
           )
-            .menu-wrapper.flex.flex-col.h-40.overflow-y-auto
+            q-icon(name="app:icon-plus", size="10px",)
-              .options.flex(v-for="item in options")
+            span Добавить категорию
-                .item.flex.py-2.px-4.items-center.cursor-pointer(
+      .flex.flex-col(class="gap-x-1.5")
-                  @click="selected(item.label)"
+        base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тег", outlined)
-                ) {{item.label}}
+    .buttons-group.flex
-            .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
+      q-btn(
-              @click="addCategory"
+        @click="closeModal",
-            )
+        color="primary",
-              q-icon(name="app:icon-plus", size="10px",)
+        outline,
-              span Добавить категорию
+        size="16px",
-        .flex.flex-col(class="gap-x-1.5")
+        no-caps,
-          base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тэг", outlined)
+        label="Отменить",
-      .buttons-group.flex
+        :style="{width: '100%', height: '40px'}",
-        q-btn(
+        padding="10px 24px"
-          @click="closeModal",
+      )
-          color="primary",
+      q-btn(
-          outline,
+        :disable="!(model.category && model.tag)",
-          size="16px",
+        @click="createTag(model)",
-          no-caps,
+        color="primary",
-          label="Отменить",
+        size="16px",
-          :style="{width: '100%', height: '40px'}",
+        no-caps,
-          padding="10px 24px"
+        label="Создать"
-        )
+        :style="{width: '100%', height: '40px'}",
-        q-btn(
+        padding="10px 24px"
-          @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, BaseModal },
+  components: { BaseInput },
   props: {
     closeModal: Function,
     createTag: Function,
-    showModal: Boolean,
   },
   data() {
     return {