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

2023-05-04 17:53:43 +03:00
parent 8e28adde77
commit 0390e96eb4
8 changed files with 523 additions and 73 deletions
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/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") Отменить
-        base-button.text-base.font-semibold(v-if="isCheckChange" :size="40" @click="save") Сохранить изменения
+        q-btn(
+          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>
--- a/src/pages/newMedicalCard/components/MedicalProtocolCard.vue
+++ b/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"
--- a/src/pages/newMedicalCard/components/MedicalProtocolCreateModal.vue
+++ b/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>
--- a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
+++ b/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>