WIP Доделала модалку

src/pages/newMedicalCard/components/MedicalProtocolCard.vue

@@ -13,7 +13,7 @@
         img.teeth-icon(src="@/assets/icons/teeth.svg")
     .flex.items-center.gap-x-2
       base-avatar(:size="40")
-        img.object-cover(
+        img.object-cover.h-full(
           v-if="protocolData.employee?.photo" 
           :src="protocolData.employee?.photo" 
           alt="avatar"

src/pages/newMedicalCard/components/MedicalProtocolCreateModal.vue

@@ -9,7 +9,6 @@
         type="date",
         textColor="var(--font-dark-blue-color)"
         outlined,
-        disabled
       )
       base-input-time(
         v-model="protocolData.startTime"
@@ -19,7 +18,6 @@
         type="time",
         textColor="var(--font-dark-blue-color)",
         placeholder="Выберите время"
-        disabled
       )
     .flex.flex-col.gap-y-6px
       span.color-grey.line-height.text-sm.font-semibold Врач
@@ -52,7 +50,7 @@
         label="Создать осмотр"
         :style="{width: '174px', height: '40px'}",
         padding="0",
-        @click="changeShownCreateModal(false)"
+        @click="saveProtocol"
       )
 </template>
 
@@ -61,19 +59,25 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
-import { mapGetters } from "vuex";
+import * as moment from "moment/moment";
+import { mapGetters, mapActions } from "vuex";
 export default {
   name: "MedicalProtocolCreateModal",
-  components: { BaseInput, BaseAvatar, BaseInputDate, BaseInputTime },
+  components: {
+    BaseInput,
+    BaseAvatar,
+    BaseInputDate,
+    BaseInputTime,
+  },
   props: {
     changeShownCreateModal: Function,
+    createInspection: Function,
   },
   data() {
     return {
       protocolData: {
-        date: null,
-        startTime: "",
-        endTime: "",
+        date: new Date(),
+        startTime: moment().format("HH:mm"),
       },
     };
   },
@@ -97,6 +101,28 @@ export default {
       return this.userData?.last_name + firstName + patronymic;
     },
   },
+  methods: {
+    ...mapActions({
+      createProtocol: "createProtocol",
+    }),
+    saveProtocol() {
+      if (
+        !Object.keys(this.protocolData).every((key) => this.protocolData[key])
+      ) {
+        return;
+      }
+      let time = this.protocolData.startTime.split(":");
+      let start = moment(this.protocolData.date).hour(time[0]).minute(time[1]);
+      let createdProtocol = {
+        start: start.isValid() ? start.format() : null,
+        end: start.isValid() ? start.add(30, "m").format() : null,
+        status: null,
+      };
+      this.createProtocol(createdProtocol);
+      this.changeShownCreateModal(false);
+      this.createInspection();
+    },
+  },
 };
 </script>
 

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -38,7 +38,10 @@
       v-model="showModal",
       title="Создание осмотра"
     )
-      medical-protocol-create-modal(:change-shown-create-modal="changeShownCreateModal")
+      medical-protocol-create-modal(
+        :change-shown-create-modal="changeShownCreateModal",
+        :create-inspection="createInspection"
+      )
 </template>
 
 <script>
@@ -47,6 +50,7 @@ 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";
+import { mapState } from "vuex";
 export default {
   name: "MedicalProtocolsList",
   components: {
@@ -65,11 +69,13 @@ export default {
       sorting: false,
       sortingYear: "",
       activeProtocolId: 1,
-      protocolsData: null,
       showModal: false,
     };
   },
   computed: {
+    ...mapState({
+      protocolsData: (state) => state.medical.protocolsData,
+    }),
     sortingClass() {
       return this.sorting
         ? {
@@ -130,9 +136,6 @@ export default {
       this.showModal = value;
     },
   },
-  mounted() {
-    this.protocolsData = this.$store.state.medical?.protocolsData;
-  },
 };
 </script>