Merge branch 'ASTRA-143' into 'master'

Resolve ASTRA-143

See merge request andrusyakka/urban-couscous!495

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -46,13 +46,20 @@
       .flex.gap-x-1 
         .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
           .photo.flex.h-10.w-10.items-center.justify-center
-            q-icon.icon(name="app:noname", size="24px")
+            img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
+            q-icon.icon(v-else, name="app:noname", size="24px")
           .flex.flex-col.font-medium
-            .dark-blue Имя Фамилия
+            .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
-            .grey-color.text-xsx.rounded-md Дата
+            .grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}}
         .change.flex.items-center.rounded-md
-          q-btn(dense, padding="18px 4px")
+          q-btn(dense, padding="18px 4px", @click="isShowMedcards = true")
             q-icon.icon(name="app:folder", size="20px")
+          base-modal(v-model="isShowMedcards", title="Медкарты", modal-padding)
+            medcards-modal(
+              :save-medcard="saveMedcard",
+              :close-medcards="closeModalMedcards",
+              :patients="patients"
+            )
 </template>
 
 <script>
@@ -60,17 +67,22 @@ import noname from "@/assets/icons/noname.svg";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
+import MedcardsModal from "./MedcardsModal.vue";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import * as moment from "moment/moment";
 
 export default {
   name: "HeaderRecordForm",
-  components: { BaseCalendar, BaseModal, BaseTimeModal },
+  components: { BaseCalendar, BaseModal, BaseTimeModal, MedcardsModal },
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
       noname,
       currentDate: moment().clone(),
       isShowTime: false,
+      isShowMedcards: false,
+      patients: patientList.find(({ id }) => id === 2).data,
       times: { from: "8:30", to: "10:30" },
       data: [
         {
@@ -82,12 +94,21 @@ export default {
           end: "12:00",
         },
       ],
+      patient: null,
+      trimPatientName: trimName,
     };
   },
   methods: {
     closeModalTime() {
       this.isShowTime = false;
     },
+    closeModalMedcards() {
+      this.isShowMedcards = false;
+    },
+    saveMedcard(medcard) {
+      this.isShowMedcards = false;
+      this.patient = medcard;
+    },
   },
 };
 </script>

src/pages/newCalendar/components/MedcardsModal.vue

@@ -0,0 +1,141 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
+    .flex.flex-col.gap-y-4
+      .flex.justify-between.w-full
+        base-input.search(
+          placeholder="Поиск",
+          :width="422",
+          iconLeft,
+          size="M"
+        )
+          template(v-slot:iconLeft)
+            q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+        q-btn.ml-2(
+          @click="sortPerson(patients)",
+          :style="{width: '45px', height: '40px', border: '1px solid var(--gray-secondary)'}",
+          padding="0px",
+          :class="sortingClass"
+        )
+          calendar-sidebar-svg(name-svg="sort", :active="sort")
+      .medcards-wrapper.flex.flex-col.overflow-auto
+        .medcard.flex.items-center.cursor-pointer(
+          v-for="patient in patients",
+          @click="selectMedcard(patient)"
+        )
+          .flex.justify-between.w-full.items-center
+            .info-block.flex.justify-between.gap-x-2
+              img.h-10.w-10.object-cover.rounded-full(:src="patient.avatar")
+              .flex.flex-col.gap-y-1
+                .text-m {{trimPatientName(patient.last_name, patient.first_name, patient.patronymic)}}
+                .grey-color.text-smm {{patient.birthday}}
+            q-icon.ok-icon(name="app:ok", v-if="patient.check" size="24px")
+    .footer.flex.gap-2
+      base-button(type="secondary", label="Отменить", width="125px", @click="closeMedcards")
+      base-button(
+        width="132px",
+        label="Сохранить",
+        @click="saveMedcard(selectedMedcard)",
+        :disabled="!selectedMedcard"
+      )
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
+
+export default {
+  name: "MedcardsModal",
+  components: { BaseInput, BaseButton, CalendarSidebarSvg },
+  props: { patients: Array, closeMedcards: Function, saveMedcard: Function },
+  data() {
+    return {
+      trimPatientName: trimName,
+      selectedMedcard: null,
+      sort: false,
+    };
+  },
+  computed: {
+    sortingClass() {
+      return this.sort
+        ? {
+            "sort-icon-active": true,
+          }
+        : {
+            "sort-icon-default": true,
+          };
+    },
+  },
+  methods: {
+    selectMedcard(patient) {
+      this.selectedMedcard = patient;
+      this.patients.map((e) => {
+        e.check = false;
+        if (e.id === patient.id) e.check = true;
+      });
+    },
+    sortPerson(arr) {
+      if (!this.sort) {
+        this.sort = true;
+        arr.sort((a, b) => (a.last_name > b.last_name ? 1 : -1));
+      } else {
+        this.sort = false;
+        arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 422px
+
+.search :deep(path)
+  fill: var(--font-grey-color)
+
+.search :deep(.q-field__prepend)
+  padding-right: 4px
+
+.medcard
+  height: 64px
+  margin-right: 14px
+  border-bottom: 1px solid var(--gray-secondary)
+  &:last-child
+    border-bottom: none
+  &:hover
+    border-radius: 4px
+    background: var(--gray-thirdly)
+
+.medcards-wrapper
+  max-height: 563px
+  margin-right: -18px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 14px
+
+.info-block
+  padding: 11px 0px
+
+.footer
+  border-top: 1px solid var(--gray-secondary)
+  margin: 0px -32px -12px
+  padding: 16px 32px 0px 32px
+
+.sort-icon-default
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  border: 1px solid var(--gray-secondary)
+
+.sort-icon-active
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.ok-icon :deep(path)
+  fill: var(--system-color-green)
+</style>

src/pages/newCalendar/components/ServicesModal.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
   .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
-    .flex.flex-col.gap-y-4
+    .basic.flex.flex-col.gap-y-4
       base-input.search(
         placeholder="Поиск",
         :width="422",
-        iconLeft
+        iconLeft,
         size="M"
       )
         template(v-slot:iconLeft)
@@ -17,150 +17,42 @@
           width="100px",
           type="grey"
         ) {{item.name}}
+      .tags-wrapper.flex(v-if="selectedServices.length")
+        .tag.flex.gap-x-2.rounded.items-center.pl-4.pr-1.py-2(v-for="(item, index) in selectedServices", :style="{background: item?.color}")
+          span {{item?.title}}
+          q-icon.cursor-pointer(@click="removeTag(index)", name="app:cancel-mini", size="24px")
       template(v-for="item in baseServices")
         .serice-wrapper.flex.flex-col(v-if="item.check")
-          .service.flex.items-center(v-for="serve in item.data")
+          .service.flex.items-center.gap-x-1.5px(v-for="service in item.data")
-            q-checkbox(v-model="serve.checked")
+            q-checkbox.checkbox(checked-icon="app:checkbox-on", v-model="selectedServices" :val="service" size="34px")
             .info-block.flex.justify-between.w-full
               .flex.flex-col.gap-y-1
-                .text-m {{serve.title}}
+                .text-m {{service.title}}
                 .grey-color.text-smm {{item.name}}
               .flex.flex-col.gap-y-1
-                .text-m.font-bold {{serve.price}}
+                .text-m.font-bold {{service.price}}
-                .grey-color.text-smm {{serve.time}}
+                .grey-color.text-smm {{service.time}}
     .footer.flex.gap-2
       base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
-      base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
+      base-button(width="132px", label="Сохранить", @click="saveServices(selectedServices)", :disabled="!selectedServices.length")
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import { services } from "@/pages/newCalendar/utils/calendarConfig.js";
 
 export default {
   name: "SevicesModal",
   components: { BaseInput, BaseButton },
   props: {
     closeServices: Function,
+    saveServices: Function,
   },
   data() {
     return {
-      baseServices: [
+      selectedServices: [],
-        {
+      baseServices: services,
-          name: "Терапия",
-          check: true,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "3 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "5 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "50 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "3 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "5 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "50 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-        {
-          name: "Хирургия",
-          check: false,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-        {
-          name: "Ортопедия  ",
-          check: false,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-        {
-          name: "Ортодонтия",
-          check: false,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-      ],
     };
   },
   methods: {
@@ -170,6 +62,9 @@ export default {
         if (e.name === name) e.check = true;
       });
     },
+    removeTag(index) {
+      this.selectedServices.splice(index, 1);
+    },
   },
 };
 </script>
@@ -178,12 +73,24 @@ export default {
 .wrapper
   width: 422px
 
+.basic
+  height: 563px
+
 .search :deep(path)
   fill: var(--font-grey-color)
 
 .search :deep(.q-field__prepend)
   padding-right: 4px
 
+.tags-wrapper
+  row-gap: 8px
+  flex-wrap: wrap !important
+  column-gap: 8px
+
+.tag
+  width: fit-content
+  height: 32px
+
 .base-service
   border-radius: 4px
   border: 1px solid var(--gray-secondary)
@@ -218,4 +125,14 @@ export default {
 
 .grey-color
   color: var(--font-grey-color)
+
+.checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1.5px solid var(--font-grey-color)
+
+.checkbox :deep(.q-icon)
+  font-size: 24px
+
+.checkbox :deep(rect)
+  fill: var(--btn-blue-color)
 </style>

src/pages/newCalendar/components/del_RecordCreationForm copy.vue

@@ -20,7 +20,7 @@
               v-else,
               v-for="service in services",
               :style="{background: service.color}"
-            ) {{service.name}}
+            ) {{service.title}}
             .gradient.flex.absolute(
               :style="{background: `linear-gradient(270deg, ${otherColor} 0%, rgba(247, 217, 255, 0) 100%)`}"
             )
@@ -29,7 +29,7 @@
         q-btn.change.flex.w-7.h-9.rounded-md(@click="isShowServices = true", dense, padding="4px 4px")
           q-icon.icon(name="app:folder", size="20px")
         base-modal(v-model="isShowServices", title="Услуги", modal-padding)
-          services-modal(:close-services="closeServices")
+          services-modal(:close-services="closeServices", :save-services="saveServices")
     base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex
@@ -96,15 +96,15 @@ export default {
       patientData: patientData,
       currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
       services: [
-        { id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
+        { id: 0, title: "Чистка зубов", price: 500, color: "#D8E3FF" },
-        { id: 1, name: "Осмотр", price: 1300, color: "#FFF0CA" },
+        { id: 1, title: "Осмотр", price: 1300, color: "#FFF0CA" },
         {
           id: 2,
-          name: "Лечение среднего кариеса",
+          title: "Лечение среднего кариеса",
           price: 500,
           color: "#F7D9FF",
         },
-        { id: 3, name: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
+        { id: 3, title: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
       ],
       forms: [
         {
@@ -191,6 +191,10 @@ export default {
     closeServices() {
       this.isShowServices = false;
     },
+    saveServices(selectedServices) {
+      this.isShowServices = false;
+      selectedServices.forEach((e) => this.services.push(e));
+    },
   },
   mounted() {
     this.addShadow();

src/pages/newCalendar/utils/calendarConfig.js

@@ -374,6 +374,136 @@ export const patientData = {
   ],
 };
 
+export const services = [
+  {
+    name: "Терапия",
+    check: true,
+    data: [
+      {
+        title: "Пломбирование кариеса",
+        price: "350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Консультация стоматолога",
+        price: "1 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Пломбирование кариеса",
+        price: "2 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Пломбирование кариеса",
+        price: "3 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Пломбирование кариеса",
+        price: "5 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Пломбирование кариеса",
+        price: "50 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Пломбирование кариеса",
+        price: "3 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Пломбирование кариеса",
+        price: "5 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Пломбирование кариеса",
+        price: "50 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+    ],
+  },
+  {
+    name: "Хирургия",
+    check: false,
+    data: [
+      {
+        title: "Пломбирование кариеса",
+        price: "2 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Консультация стоматолога",
+        price: "1 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+    ],
+  },
+  {
+    name: "Ортопедия  ",
+    check: false,
+    data: [
+      {
+        title: "Пломбирование кариеса",
+        price: "2 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+      {
+        title: "Консультация стоматолога",
+        price: "1 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+        color: "var(--bg-chip-blue-color)",
+      },
+    ],
+  },
+  {
+    name: "Ортодонтия",
+    check: false,
+    data: [
+      {
+        title: "Пломбирование кариеса",
+        price: "2 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+      },
+      {
+        title: "Консультация стоматолога",
+        price: "1 350 ₽",
+        time: "1 ч. 30 мин.",
+        checked: false,
+      },
+    ],
+  },
+];
+
 export const recordList = [
   {
     id: "c3df0a95-8093-41f1-9584-5b70ee05e71c",