[WIP] Добавил форму запланированных пациентов

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
 

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>

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,