Merge branch 'ASTRA-139' into 'master'

Resolve ASTRA-139

See merge request andrusyakka/urban-couscous!486

src/assets/sass/variables.sass

@@ -91,6 +91,8 @@
   --bg-chip-yellow-color: #fff0ca
   --bg-chip-pink-color: #F7D9FF
   --gray-thirdly: #f4f4f6
-  --surface-blue-big: #ECF0FE
+  --surface-blue-big: #ecf0fe
-  --gray-scondary:#DDDDE8
+  --gray-scondary: #dddde8
+  --system-color-red: #f34549
+  --system-color-green: #21ba72
 

src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue

@@ -1,14 +1,130 @@
 <template lang="pug">
-  medcard-form-wrapper(title="Пациент на приеме", title-link="Медкарта")
+  medcard-form-wrapper(v-if="patient", title="Пациент на приеме", title-link="Медкарта")
+    .flex.flex-col
+      .header.flex.px-6.py-5.justify-between
+        .flex.text-base.font-medium.gap-x-3
+          img.h-14.w-14.object-cover.rounded-full(:src="patient?.avatar")
+          .flex.flex-col.justify-center.gap-y-1
+            .font-bold.text-xll {{patient.last_name + " " + patient.first_name + " " + patient.patronymic}}
+            .grey-color.text-smm {{patient?.birthday}}
+        .flex.flex-col.gap-y-1.text-smm.font-medium
+          .flex.items-center.gap-x-2
+            .priority.flex(:class="choiceClass(patient.priority)")
+            .text-smm(:class="choiceColor(patient.priority)") {{choicePriority(patient.priority)}}
+          .grey-color.text-smm Приоритет
+      .flex
+        .data.flex.w-full.h-full(v-for="item in data")
+          .flex.flex-col.px-6.py-4.gap-y-6
+            .text-m.font-bold {{item.title}}
+            .flex.flex-col.text-smm 
+              .grey-color {{item.text1}}
+              .font-medium {{item.first}}
+            .flex.flex-col.text-smm
+              .grey-color {{item.text2}}
+              .font-medium {{item.second}}
 </template>
 
 <script>
 import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
+import * as moment from "moment";
 
 export default {
   name: "CurrentPatientForm",
   components: { MedcardFormWrapper },
+  data() {
+    return {
+      patient: patientList
+        .find(({ label }) => label === "Пациенты")
+        .data.find(
+          ({ time }) =>
+            time.from <= moment().format("HH:MM") &&
+            time.to >= moment().format("HH:MM")
+        ),
+      prioritys: [
+        { name: "Без приоритета", id: 0, class: "none-priority" },
+        { name: "Высокий", id: 1, class: "high-priority" },
+        { name: "Средний", id: 2, class: "middle-priority" },
+        { name: "Низский", id: 3, class: "low-priority" },
+      ],
+      data: [
+        { title: "Запись", text1: "Дата", text2: "Время" },
+        { title: "Данные", text1: "Телефон", text2: "Email" },
+        { title: "Страхование", text1: "Компания", text2: "Полис" },
+      ],
+    };
+  },
+  methods: {
+    choiceClass(priority) {
+      return this.prioritys.find(({ id }) => id === priority).class;
+    },
+    choicePriority(priority) {
+      return this.prioritys.find(({ id }) => id === priority).name;
+    },
+    choiceColor(priority) {
+      return {
+        "grey-color": !priority,
+        "red-color": priority === 1,
+        "blue-color": priority === 2,
+        "green-color": priority === 3,
+      };
+    },
+  },
+  watch: {
+    patient: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.data[0].first = moment().format("DD MMMM");
+        this.data[0].second =
+          this.patient?.time?.from + "-" + this.patient?.time?.to;
+
+        this.data[1].first = this.patient?.phone;
+        this.data[1].second = this.patient?.email;
+
+        this.data[2].first = this.patient?.company;
+        this.data[2].second = this.patient?.policy;
+      },
+    },
+  },
 };
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.header
+  border-bottom: 1px solid var(--gray-scondary)
+
+.priority
+  height: 8px
+  width: 8px
+  border-radius: 50%
+
+.data
+  border-right: 1px solid var(--gray-scondary)
+  &:last-child
+    border-right: none
+
+.high-priority
+  background: var(--system-color-red)
+
+.middle-priority
+  background: var(--btn-blue-color)
+
+.low-priority
+  background: var(--system-color-green)
+
+.none-priority
+  border: 1.5px solid var(--font-grey-color)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.red-color
+  color: var(--system-color-red)
+
+.blue-color
+  color: var(--btn-blue-color)
+
+.green-color
+  color: var(--system-color-green)
+</style>

src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue

@@ -1,15 +1,105 @@
 <template lang="pug">
-  medcard-form-wrapper(title="Пациенты на сегодня", :quantity="13", title-link="Календарь")
+  medcard-form-wrapper.relative(
-    .flex gwiefujm
+    title="Пациенты на сегодня",
+    :quantity="patientsData.length",
+    title-link="Календарь"
+  )
+    .form-wrapper.flex.flex-col.overflow-y-auto(@scroll="scrollTo")
+      .patient.flex.items-center.gap-x-6.p-4(v-for="(patient, index) in patientsData")
+        .flex.text-base.font-medium.gap-x-3
+          img.h-11.w-11.object-cover.rounded-full(:src="patient.avatar")
+          .flex.flex-col.justify-center
+            .name.flex.relative {{trimName(patient.last_name, patient.first_name, patient.patronymic)}}
+              .gradient.flex.absolute
+            .grey-color.text-smm {{patient.birthday}}
+        .flex.flex-col.justify-center
+          .text-m.font-bold {{patient.time.from + " - " + patient.time.to}}
+          .grey-color.font-medium.text-smm(
+            :class="{'red-color': !index}"
+            ) {{index ? "Время посещения" : "Скоро прием" }}
+        .flex
+      .gradient-name.flex.absolute(v-if="isGradient")
 </template>
 
 <script>
+import * as moment from "moment";
 import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
 
 export default {
   name: "TodaysPatientsForm",
   components: { MedcardFormWrapper },
+  data() {
+    return {
+      patientsData: patientList
+        .find(({ label }) => label === "Пациенты")
+        .data.sort((a, b) => {
+          if (a.time.from > b.time.from) return 1;
+          if (a.time.from < b.time.from) return -1;
+          return 0;
+        })
+        .filter(({ reception }) => reception === moment().format("DD.MM.YYYY")),
+      isGradient: true,
+    };
+  },
+  methods: {
+    trimName(last, first, patronymic) {
+      let fullName = last + " " + first + " " + patronymic;
+      if (fullName.length > 30) return fullName.slice(0, 30);
+      return fullName;
+    },
+    scrollTo(event) {
+      if (
+        Math.abs(
+          event.currentTarget.scrollHeight -
+            event.currentTarget.clientHeight -
+            event.currentTarget.scrollTop
+        ) < 1
+      )
+        return (this.isGradient = false);
+      this.isGradient = true;
+    },
+  },
 };
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.form-wrapper
+  margin-right: 8px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-top: 16px
+    margin-bottom: 16px
+
+.name
+  width: 272px
+
+.patient
+  border-bottom: 1px solid var(--gray-scondary)
+  border-right: 1px solid var(--gray-scondary)
+  margin-right: 8px
+  &:last-child
+    border-bottom: none
+
+.gradient
+  background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.24) 50.73%, rgba(255, 255, 255, 0.00) 100%)
+  width: 72px
+  height: 24px
+  right: 0
+  top: 0
+  transform: rotate(180deg)
+
+.gradient-name
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)
+  width: 580px
+  height: 43px
+  bottom: 0
+  left: 0
+
+.grey-color
+  color: var(--font-grey-color)
+
+.red-color
+  color: var(--system-color-red)
+</style>

src/pages/newCalendar/utils/calendarConfig.js

@@ -119,6 +119,13 @@ export const patientList = [
         birthday: "28.03.1980",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "12:00", to: "23:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 1,
@@ -128,6 +135,13 @@ export const patientList = [
         birthday: "01.03.1975",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "11:00", to: "12:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 2,
@@ -137,6 +151,13 @@ export const patientList = [
         birthday: "13.07.1999",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "14:00", to: "16:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 3,
@@ -146,6 +167,13 @@ export const patientList = [
         birthday: "11.11.1991",
         avatar: personImage,
         check: false,
+        reception: "27.07.2023",
+        time: { from: "12:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 4,
@@ -155,6 +183,13 @@ export const patientList = [
         birthday: "12.03.1989",
         avatar: personImage,
         check: false,
+        reception: "27.07.2023",
+        time: { from: "11:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 5,
@@ -164,6 +199,13 @@ export const patientList = [
         birthday: "23.07.1949",
         avatar: personImage,
         check: false,
+        reception: "28.07.2023",
+        time: { from: "18:00", to: "19:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 6,
@@ -173,6 +215,13 @@ export const patientList = [
         birthday: "12.11.1995",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "16:00", to: "17:00" },
+        priority: 0,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 7,
@@ -182,6 +231,13 @@ export const patientList = [
         birthday: "15.05.1989",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "20:00", to: "21:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 8,
@@ -191,6 +247,13 @@ export const patientList = [
         birthday: "13.07.2000",
         avatar: personImage,
         check: false,
+        reception: "31.06.2023",
+        time: { from: "12:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 9,
@@ -200,6 +263,13 @@ export const patientList = [
         birthday: "12.12.1986",
         avatar: personImage,
         check: false,
+        reception: "30.07.2023",
+        time: { from: "12:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 10,
@@ -209,6 +279,13 @@ export const patientList = [
         birthday: "13.03.1979",
         avatar: personImage,
         check: false,
+        reception: "27.07.2023",
+        time: { from: "09:00", to: "10:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
     ],
     choice: false,

tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
         lg: ["18px", { lineHeight: "21px" }],
         lgx: ["22px", { lineHeight: "25.83px" }],
         xl: ["20px", { lineHeight: "23px" }],
+        xll: ["20px", { lineHeight: "24px" }],
         xxl: ["24px", { lineHeight: "26px" }],
         "2xl": ["28px", { lineHeight: "33px" }],
         "3xl": ["60px", { lineHeight: "70px" }],