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

src/components/base/BaseInputDate.vue

@@ -12,8 +12,9 @@
       :readonly="readonly",
       :disable="disabled",
       :filled="filled",
+      mask="##.##.####"
       :bg-color="filled || standout ? '' : 'white'",
-      :rules="rule",
+      :rules="[checkInput]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
       :no-error-icon="noErrorIcon",
@@ -23,7 +24,8 @@
       :standout="standout"
       :accept="accept",
       :debounce="debounce",
-      hide-bottom-space
+      hide-bottom-space,
+      lazy-rules
     )
       template(v-slot:append)
         q-icon(
@@ -32,7 +34,11 @@
           size="16px"
         )
           q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
-            q-date(v-model="value", mask="YYYY-MM-DD")
+            q-date(
+              v-model="value",
+              mask="DD.MM.YYYY",
+              minimal
+            )
               .flex.items-center.justify-end
                 q-btn(
                   v-close-popup,
@@ -45,7 +51,7 @@
 
 <script>
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
-
+import * as moment from "moment/moment";
 export default {
   name: "BaseInputDate",
   components: { BaseInputContainer },
@@ -92,7 +98,6 @@ export default {
     maxLength: Number,
     textColor: String,
     borderColor: String,
-    rule: Array,
     lazyRule: [Boolean, String],
     noErrorIcon: Boolean,
     itemAligned: Boolean,
@@ -108,20 +113,35 @@ export default {
   computed: {
     value: {
       get() {
-        return this.modelValue
-          ? this.modelValue
-              ?.toISOString()
-              .split("T")[0]
-              .split("-")
-              .reverse()
-              .join(".")
-          : null;
+        if (
+          moment(this.modelValue).isValid() &&
+          typeof this.modelValue === "object"
+        )
+          return moment(this.modelValue).format("DD.MM.YYYY");
+        if (moment(this.convertFormat(this.modelValue)).isValid())
+          return this.modelValue;
+        return null;
       },
       set(value) {
-        this.$emit("update:modelValue", value ? new Date(value) : null);
+        this.$emit(
+          "update:modelValue",
+          moment(this.convertFormat(value)).isValid()
+            ? new Date(moment(this.convertFormat(value)))
+            : null
+        );
       },
     },
   },
+  methods: {
+    convertFormat(date) {
+      return date && date?.length === 10
+        ? date.split(".").reverse().join("-")
+        : null;
+    },
+    checkInput(val) {
+      return moment(this.convertFormat(val)).isValid();
+    },
+  },
 };
 </script>
 

src/components/base/BaseInputTime.vue

@@ -13,7 +13,7 @@
       :disable="disabled",
       :filled="filled",
       :bg-color="filled || standout ? '' : 'white'",
-      :rules="rule",
+      :rules="[checkTime]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
       :no-error-icon="noErrorIcon",
@@ -112,10 +112,20 @@ export default {
         return this.modelValue ? this.modelValue : null;
       },
       set(value) {
-        this.$emit("update:modelValue", value);
+        this.$emit("update:modelValue", this.checkTime(value) ? value : null);
       },
     },
   },
+  methods: {
+    checkTime(val) {
+      return (
+        !!val &&
+        val.length === 5 &&
+        val?.slice(0, 2) < 24 &&
+        val?.slice(-2) < 60
+      );
+    },
+  },
 };
 </script>
 

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>
 

src/store/index.js

@@ -23,6 +23,7 @@ export default createStore({
             ? state.url + state.userData[key]
             : "";
       });
+      data.job_title = "Ортодонт";
       return data;
     },
   },

src/store/modules/medicalCard.js

@@ -293,7 +293,6 @@ const actions = {
         commit("setBenefitData", res.results);
       });
   },
-
   getMedicalCardData({ commit }) {
     fetchWrapper
       .get(
@@ -337,6 +336,11 @@ const actions = {
         localStorage.removeItem("medicalId");
       });
   },
+  createProtocol({ commit, rootGetters, state }, data) {
+    data.employee = rootGetters.getUserData;
+    data.id = state.protocolsData.length + 1;
+    commit("setProtocolsData", data);
+  },
 };
 
 const mutations = {
@@ -366,6 +370,9 @@ const mutations = {
       state.events = res.events;
     });
   },
+  setProtocolsData(state, data) {
+    state.protocolsData = [...state.protocolsData, data];
+  },
 };
 
 export default {