From 4d8d8f410ebbaad2fcf95e3ccfec51ec80859bb8 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 25 Jul 2023 14:01:04 +0300
Subject: [PATCH 1/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=BF=D0=BB=D0=B0=D0=BD=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D1=85=20=D0=BF=D0=B0=D1=86=D0=B8=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  5 +-
 .../BasicDataForms/TodaysPatientsForm.vue     | 96 ++++++++++++++++++-
 src/pages/newCalendar/utils/calendarConfig.js | 22 +++++
 3 files changed, 118 insertions(+), 5 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 3ac4b5d..eb70ee6 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -91,6 +91,7 @@
   --bg-chip-yellow-color: #fff0ca
   --bg-chip-pink-color: #F7D9FF
   --gray-thirdly: #f4f4f6
-  --surface-blue-big: #ECF0FE
-  --gray-scondary:#DDDDE8
+  --surface-blue-big: #ecf0fe
+  --gray-scondary: #dddde8
+  --system-color-red: #f34549
 
diff --git a/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue b/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
index 1dccefe..f15038c 100644
--- a/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
+++ b/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
@@ -1,15 +1,105 @@
 <template lang="pug">
-  medcard-form-wrapper(title="Пациенты на сегодня", :quantity="13", title-link="Календарь")
-    .flex gwiefujm
+  medcard-form-wrapper.relative(
+    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>
diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js
index 258ed09..8ca6ad6 100644
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -119,6 +119,8 @@ export const patientList = [
         birthday: "28.03.1980",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "12:00", to: "14:00" },
       },
       {
         id: 1,
@@ -128,6 +130,8 @@ export const patientList = [
         birthday: "01.03.1975",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "11:00", to: "12:00" },
       },
       {
         id: 2,
@@ -137,6 +141,8 @@ export const patientList = [
         birthday: "13.07.1999",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "09:00", to: "11:00" },
       },
       {
         id: 3,
@@ -146,6 +152,8 @@ export const patientList = [
         birthday: "11.11.1991",
         avatar: personImage,
         check: false,
+        reception: "27.07.2023",
+        time: { from: "12:00", to: "14:00" },
       },
       {
         id: 4,
@@ -155,6 +163,8 @@ export const patientList = [
         birthday: "12.03.1989",
         avatar: personImage,
         check: false,
+        reception: "27.07.2023",
+        time: { from: "11:00", to: "14:00" },
       },
       {
         id: 5,
@@ -164,6 +174,8 @@ export const patientList = [
         birthday: "23.07.1949",
         avatar: personImage,
         check: false,
+        reception: "28.07.2023",
+        time: { from: "18:00", to: "19:00" },
       },
       {
         id: 6,
@@ -173,6 +185,8 @@ export const patientList = [
         birthday: "12.11.1995",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "16:00", to: "17:00" },
       },
       {
         id: 7,
@@ -182,6 +196,8 @@ export const patientList = [
         birthday: "15.05.1989",
         avatar: personImage,
         check: false,
+        reception: "25.07.2023",
+        time: { from: "20:00", to: "21:00" },
       },
       {
         id: 8,
@@ -191,6 +207,8 @@ export const patientList = [
         birthday: "13.07.2000",
         avatar: personImage,
         check: false,
+        reception: "31.06.2023",
+        time: { from: "12:00", to: "14:00" },
       },
       {
         id: 9,
@@ -200,6 +218,8 @@ export const patientList = [
         birthday: "12.12.1986",
         avatar: personImage,
         check: false,
+        reception: "30.07.2023",
+        time: { from: "12:00", to: "14:00" },
       },
       {
         id: 10,
@@ -209,6 +229,8 @@ export const patientList = [
         birthday: "13.03.1979",
         avatar: personImage,
         check: false,
+        reception: "27.07.2023",
+        time: { from: "09:00", to: "10:00" },
       },
     ],
     choice: false,

From 286b17b77f21575bc4a3d3113e8d1a06e8132828 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 25 Jul 2023 18:09:17 +0300
Subject: [PATCH 2/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D1=83?=
 =?UTF-8?q?=20=D0=BF=D0=B0=D1=86=D0=B8=D0=B5=D0=BD=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=BF=D1=80=D0=B8=D0=B5=D0=BC=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |   1 +
 .../BasicDataForms/CurrentPatientForm.vue     | 120 +++++++++++++++++-
 .../BasicDataForms/TodaysPatientsForm.vue     |   2 +-
 src/pages/newCalendar/utils/calendarConfig.js |  59 ++++++++-
 tailwind.config.js                            |   1 +
 5 files changed, 178 insertions(+), 5 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index eb70ee6..b0adb93 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -94,4 +94,5 @@
   --surface-blue-big: #ecf0fe
   --gray-scondary: #dddde8
   --system-color-red: #f34549
+  --system-color-green: #21ba72
 
diff --git a/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue b/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
index 6ad92e0..c1d8093 100644
--- a/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
+++ b/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>
diff --git a/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue b/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
index f15038c..4fd7027 100644
--- a/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
+++ b/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
@@ -16,7 +16,7 @@
           .text-m.font-bold {{patient.time.from + " - " + patient.time.to}}
           .grey-color.font-medium.text-smm(
             :class="{'red-color': !index}"
-          ) {{index ? "Время посещения" : "Скоро прием" }}
+            ) {{index ? "Время посещения" : "Скоро прием" }}
         .flex
       .gradient-name.flex.absolute(v-if="isGradient")
 </template>
diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js
index 8ca6ad6..2520152 100644
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -120,7 +120,12 @@ export const patientList = [
         avatar: personImage,
         check: false,
         reception: "25.07.2023",
-        time: { from: "12:00", to: "14:00" },
+        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,
@@ -132,6 +137,11 @@ export const patientList = [
         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,
@@ -142,7 +152,12 @@ export const patientList = [
         avatar: personImage,
         check: false,
         reception: "25.07.2023",
-        time: { from: "09:00", to: "11:00" },
+        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,
@@ -154,6 +169,11 @@ export const patientList = [
         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,
@@ -165,6 +185,11 @@ export const patientList = [
         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,
@@ -176,6 +201,11 @@ export const patientList = [
         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,
@@ -187,6 +217,11 @@ export const patientList = [
         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,
@@ -198,6 +233,11 @@ export const patientList = [
         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,
@@ -209,6 +249,11 @@ export const patientList = [
         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,
@@ -220,6 +265,11 @@ export const patientList = [
         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,
@@ -231,6 +281,11 @@ export const patientList = [
         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,
diff --git a/tailwind.config.js b/tailwind.config.js
index 066ab8c..e1fd109 100644
--- a/tailwind.config.js
+++ b/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" }],