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

src/components/base/BaseInputDate.vue

@@ -0,0 +1,145 @@
+<template lang="pug">
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
+    q-input(
+      v-model="value",
+      :name="name",
+      :class="{'circle': circle, 'font-input': true}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
+      :borderless="borderless",
+      :placeholder="placeholder",
+      :outlined="outlined",
+      :dense="dense",
+      :readonly="readonly",
+      :disable="disabled",
+      :filled="filled",
+      :bg-color="filled || standout ? '' : 'white'",
+      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      :no-error-icon="noErrorIcon",
+      :maxlength="maxLength",
+      :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
+      :accept="accept",
+      :debounce="debounce",
+      hide-bottom-space
+    )
+      template(v-slot:append)
+        q-icon(
+          name="app:calendar",
+          class="cursor-pointer",
+          size="16px"
+        )
+          q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
+            q-date(v-model="value", mask="YYYY-MM-DD")
+              .flex.items-center.justify-end
+                q-btn(
+                  v-close-popup,
+                  label="Закрыть",
+                  color="primary",
+                  flat,
+                  no-caps
+                )
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
+export default {
+  name: "BaseInputDate",
+  components: { BaseInputContainer },
+  props: {
+    circle: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    resize: {
+      type: String,
+      default: "none",
+    },
+    debounce: [String, Number],
+    width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
+    rule: Array,
+    lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
+    itemAligned: Boolean,
+    modelValue: Date,
+    placeholder: String,
+    disabled: Boolean,
+    label: String,
+    readonly: Boolean,
+    iconLeft: Boolean,
+    name: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+          ? this.modelValue
+              ?.toISOString()
+              .split("T")[0]
+              .split("-")
+              .reverse()
+              .join(".")
+          : null;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value ? new Date(value) : null);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+
+.circle
+  width: 100%
+  height: 100%
+  border-radius: 50%
+  z-index: 5
+  opacity: 0
+  cursor: pointer
+</style>
+<style lang="sass">
+.q-field--standout.q-field--readonly .q-field__control:before
+  border: none !important
+.q-field--standout .q-field__control
+  background: var(--bg-light-grey) !important
+</style>

src/components/base/BaseInputTime.vue

@@ -0,0 +1,139 @@
+<template lang="pug">
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
+    q-input(
+      v-model="value",
+      :name="name",
+      :class="{'circle': circle, 'font-input': true}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
+      :borderless="borderless",
+      :placeholder="placeholder",
+      :outlined="outlined",
+      :dense="dense",
+      :readonly="readonly",
+      :disable="disabled",
+      :filled="filled",
+      :bg-color="filled || standout ? '' : 'white'",
+      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      :no-error-icon="noErrorIcon",
+      mask="time",
+      :maxlength="maxLength",
+      :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
+      :accept="accept",
+      :debounce="debounce",
+      hide-bottom-space
+    )
+      template(v-slot:append)
+        q-icon(
+          name="app:time",
+          class="cursor-pointer",
+          size="16px"
+        )
+          q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
+            q-time(v-model="value", mask="HH:mm")
+              .flex.items-center.justify-end
+                q-btn(
+                  v-close-popup,
+                  label="Закрыть",
+                  color="primary",
+                  flat,
+                  no-caps
+                )
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
+export default {
+  name: "BaseInputTime",
+  components: { BaseInputContainer },
+  props: {
+    circle: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    resize: {
+      type: String,
+      default: "none",
+    },
+    debounce: [String, Number],
+    width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
+    rule: Array,
+    lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
+    itemAligned: Boolean,
+    modelValue: String,
+    placeholder: String,
+    disabled: Boolean,
+    label: String,
+    readonly: Boolean,
+    iconLeft: Boolean,
+    name: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue ? this.modelValue : null;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+
+.circle
+  width: 100%
+  height: 100%
+  border-radius: 50%
+  z-index: 5
+  opacity: 0
+  cursor: pointer
+</style>
+<style lang="sass">
+.q-field--standout.q-field--readonly .q-field__control:before
+  border: none !important
+.q-field--standout .q-field__control
+  background: var(--bg-light-grey) !important
+</style>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -19,8 +19,26 @@
           span.text-smm.font-medium {{ titleDelete }}
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit")
-        base-button.text-base.font-semibold(outlined :size="40" @click="cancel") Отменить
+        q-btn(
-        base-button.text-base.font-semibold(v-if="isCheckChange" :size="40" @click="save") Сохранить изменения
+          color="primary",
+          outline,
+          size="16px",
+          no-caps,
+          label="Отменить",
+          :style="{width: '126px', height: '40px'}",
+          padding="0",
+          @click="cancel"
+        )
+        q-btn(
+          v-if="isCheckChange",
+          color="primary",
+          size="16px",
+          no-caps,
+          label="Сохранить изменения",
+          :style="{width: '222px', height: '40px'}",
+          padding="0",
+          @click="save"
+        )
 </template>
 
 <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.avatar.object-cover(
+        img.object-cover(
           v-if="protocolData.employee?.photo" 
           :src="protocolData.employee?.photo" 
           alt="avatar"

src/pages/newMedicalCard/components/MedicalProtocolCreateModal.vue

@@ -0,0 +1,110 @@
+<template lang="pug">
+  .modal.pt-6
+    .flex.gap-x-4.mb-4
+      base-input-date(
+        v-model="protocolData.date"
+        label="Дата осмотра",
+        placeholder="Выберите дату"
+        :width="202",
+        type="date",
+        textColor="var(--font-dark-blue-color)"
+        outlined,
+        disabled
+      )
+      base-input-time(
+        v-model="protocolData.startTime"
+        label="Время осмотра",
+        :width="202",
+        outlined,
+        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 Врач
+      .flex.gap-x-2
+        base-avatar(:size="40")
+          img.object-cover.h-full(
+            v-if="userData?.photo",
+            :src="userData?.photo",
+            alt="avatar"
+          )
+          span.text-sm.color-blue(v-else) {{ avatar }}
+        .flex.flex-col
+          span.text-sm.color-blue.line-height.mb-2px {{ employeeName }}
+          span.color-grey.line-height.text-sm {{ userData?.job_title ? userData?.job_title : "Терапевт" }}
+    .flex.gap-2.mt-8
+      q-btn(
+        color="primary",
+        outline,
+        size="16px",
+        no-caps,
+        label="Отменить"
+        :style="{width: '126px', height: '40px'}",
+        padding="0",
+        @click="changeShownCreateModal(false)"
+      )
+      q-btn(
+        color="primary",
+        size="16px",
+        no-caps,
+        label="Создать осмотр"
+        :style="{width: '174px', height: '40px'}",
+        padding="0",
+        @click="changeShownCreateModal(false)"
+      )
+</template>
+
+<script>
+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";
+export default {
+  name: "MedicalProtocolCreateModal",
+  components: { BaseInput, BaseAvatar, BaseInputDate, BaseInputTime },
+  props: {
+    changeShownCreateModal: Function,
+  },
+  data() {
+    return {
+      protocolData: {
+        date: null,
+        startTime: "",
+        endTime: "",
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      userData: "getUserData",
+    }),
+    avatar() {
+      let firstName = this.userData?.first_name
+        ? this.userData?.first_name[0]
+        : this.userData?.last_name[1];
+      return this.userData?.last_name[0] + firstName;
+    },
+    employeeName() {
+      let firstName = this.userData?.first_name
+        ? ` ${this.userData?.first_name}`
+        : "";
+      let patronymic = this.userData?.patronymic
+        ? ` ${this.userData?.patronymic}`
+        : "";
+      return this.userData?.last_name + firstName + patronymic;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.modal
+  width: 422px
+.color-grey
+  color: var(--font-grey-color)
+.line-height
+  line-height: 135%
+</style>

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 },
+  components: {
-  props: { openInspection: Function, createInspection: Function },
+    BaseSelect,
+    BaseAvatar,
+    MedicalProtocolCard,
+    BaseModal,
+    MedicalProtocolCreateModal,
+  },
+  props: {
+    openInspection: Function,
+    createInspection: Function,
+  },
   data() {
     return {
       sorting: false,
       sortingYear: "",
       activeProtocolId: 1,
-      protocolsData: [
+      protocolsData: null,
-        {
+      showModal: false,
-          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",
-        },
-      ],
     };
   },
   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>

src/store/index.js

@@ -5,6 +5,7 @@ export default createStore({
   state: {
     url: "https://astra-dev.dopcore.com",
     routingHistory: window.history,
+    userData: JSON.parse(localStorage.getItem("userData")),
   },
   modules: {
     medical,
@@ -13,5 +14,16 @@ export default createStore({
     getUrl(state) {
       return state.url;
     },
+    getUserData(state) {
+      let data = {};
+      Object.keys(state.userData).forEach((key) => {
+        if (key !== "photo") data[key] = state.userData[key];
+        else
+          data[key] = state.userData[key]
+            ? state.url + state.userData[key]
+            : "";
+      });
+      return data;
+    },
   },
 });

src/store/modules/medicalCard.js

@@ -60,6 +60,73 @@ const state = () => ({
   avatar: "",
   benefitData: [],
   events: [],
+  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",
+    },
+  ],
 });
 
 const getters = {