WIP Добавила модалку

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -9,7 +9,7 @@
         icon="add",
         :style="{width: '100%', height: '40px'}"
         padding="0",
-        @click="createInspection"
+        @click="changeShownCreateModal(true)"
       )
     .p-4.rounded.background.list
       .flex
@@ -34,88 +34,39 @@
           :protocol-data="protocol",
           @click="openInspection"
         )
+    base-modal(
+      v-model="showModal",
+      title="Создание осмотра"
+    )
+      medical-protocol-create-modal(:change-shown-create-modal="changeShownCreateModal")
 </template>
 
 <script>
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import MedicalProtocolCard from "@/pages/newMedicalCard/components/MedicalProtocolCard.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import MedicalProtocolCreateModal from "./MedicalProtocolCreateModal.vue";
 export default {
   name: "MedicalProtocolsList",
-  components: { BaseSelect, BaseAvatar, MedicalProtocolCard },
-  props: { openInspection: Function, createInspection: Function },
+  components: {
+    BaseSelect,
+    BaseAvatar,
+    MedicalProtocolCard,
+    BaseModal,
+    MedicalProtocolCreateModal,
+  },
+  props: {
+    openInspection: Function,
+    createInspection: Function,
+  },
   data() {
     return {
       sorting: false,
       sortingYear: "",
       activeProtocolId: 1,
-      protocolsData: [
-        {
-          id: 1,
-          employee: {
-            last_name: "Захаров",
-            first_name: "Алексей",
-            patronymic: "Сергеевич",
-            job_title: "Хирург",
-            photo: "",
-          },
-          start: "2023-03-23T13:00:00+03:00",
-          end: "2023-03-23T13:40:00+03:00",
-          status: "filled",
-        },
-        {
-          id: 2,
-          employee: {
-            last_name: "Лаврентьев",
-            first_name: "Сергей",
-            patronymic: "Анатольевич",
-            job_title: "Терапевт",
-            photo: "",
-          },
-          start: "2023-04-11T18:00:00+03:00",
-          end: "2023-04-11T18:30:00+03:00",
-          status: "partially filled",
-        },
-        {
-          id: 3,
-          employee: {
-            last_name: "Захаров",
-            first_name: "Алексей",
-            patronymic: "Сергеевич",
-            job_title: "Хирург",
-            photo: "",
-          },
-          start: "2021-08-23T10:00:00+03:00",
-          end: "2021-08-23T13:00:00+03:00",
-          status: "filled",
-        },
-        {
-          id: 4,
-          employee: {
-            last_name: "Щевьева",
-            first_name: "Лариса",
-            patronymic: "Николаевна",
-            job_title: "Ортодонт",
-            photo: "",
-          },
-          start: "2023-05-23T14:10:00+03:00",
-          end: "2023-05-23T15:10:00+03:00",
-          status: "",
-        },
-        {
-          id: 5,
-          employee: {
-            last_name: "Захаров",
-            first_name: "Алексей",
-            patronymic: "Сергеевич",
-            job_title: "Хирург",
-            photo: "",
-          },
-          start: "2022-01-23T13:10:00+03:00",
-          end: "2022-01-23T13:30:00+03:00",
-          status: "filled",
-        },
-      ],
+      protocolsData: null,
+      showModal: false,
     };
   },
   computed: {
@@ -129,6 +80,7 @@ export default {
           };
     },
     sortingYears() {
+      if (!this.protocolsData) return [];
       let years = this.protocolsData
         .map((elem) => {
           return elem?.start.slice(0, 4);
@@ -137,6 +89,7 @@ export default {
       return [...new Set(years)];
     },
     sortingProtocols() {
+      if (!this.protocolsData) return [];
       let protocols = [];
       this.protocolsData.forEach((elem) =>
         protocols.push({
@@ -173,6 +126,12 @@ export default {
     invertSorting() {
       this.sorting = !this.sorting;
     },
+    changeShownCreateModal(value) {
+      this.showModal = value;
+    },
+  },
+  mounted() {
+    this.protocolsData = this.$store.state.medical?.protocolsData;
   },
 };
 </script>