[WIP] Добавил форму недавно просмотренных медкарт, фикс стилей

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

@@ -2,22 +2,36 @@
   medcard-form-wrapper.relative(
     title="Пациенты на сегодня",
     :quantity="patientsData.length",
+    :link="redirectCalendar",
     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")
+    .form-wrapper.flex.flex-col.overflow-y-auto(
+      @scroll="scrollTo",
+      :class="{'default-form': patientsData.length <= 3}"
+    )
+      .patient.flex.items-center.p-4.justify-between(
+        v-for="(patient, index) in patientsData",
+        :class="{'default-patient': patientsData.length <= 3}",
+        @click="changeView(patient.id)"
+      )
         .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
+          .flex.flex-col.justify-center.gap-y-1
             .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
+        .flex.flex-col.justify-center.w-full(:style="{width: '140px'}")
           .text-m.font-bold {{patient.time.from + " - " + patient.time.to}}
           .grey-color.font-medium.text-smm(
             :class="{'red-color': !index}"
             ) {{index ? "Время посещения" : "Скоро прием" }}
         .flex
+          q-btn.btn(
+            icon="app:medcard",
+            size="18px",
+            dense,
+            padding="8px",
+            style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+          )
       .gradient-name.flex.absolute(v-if="isGradient")
 </template>
 
@@ -38,8 +52,12 @@ export default {
           if (a.time.from < b.time.from) return -1;
           return 0;
         })
-        .filter(({ reception }) => reception === moment().format("DD.MM.YYYY")),
-      isGradient: true,
+        .filter(
+          (e) =>
+            e.reception === moment().format("DD.MM.YYYY") &&
+            e.time.from > moment().format("HH:MM")
+        ),
+      isGradient: false,
     };
   },
   methods: {
@@ -48,6 +66,20 @@ export default {
       if (fullName.length > 30) return fullName.slice(0, 30);
       return fullName;
     },
+    changeView(id) {
+      let view = [];
+      this.patientsData.map((e) => {
+        if (e.id === id) {
+          e.view = true;
+          view.push(e);
+          e.viewDate = moment().format("DD.MM.YYYY");
+        }
+      });
+      localStorage.view = JSON.stringify(view);
+    },
+    redirectCalendar() {
+      this.$router.push("/calendar");
+    },
     scrollTo(event) {
       if (
         Math.abs(
@@ -74,6 +106,18 @@ export default {
 
 .name
   width: 272px
+  &:after
+    content: ""
+    text-align: right
+    position: absolute
+    bottom: 0
+    right: 0
+    width: 72px
+    height: 24px
+    background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.24) 50.73%, rgba(255, 255, 255, 0.00) 100%)
+    pointer-events: none
+  @media (max-width: 1820px)
+    width: 340px
 
 .patient
   border-bottom: 1px solid var(--gray-scondary)
@@ -82,13 +126,16 @@ export default {
   &: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)
+.default-patient
+  margin-right: 0px
+  border-right: none
+  &:last-child
+    border-bottom: 1px solid var(--gray-scondary)
+
+.default-form
+  margin-right: 0px
+  &:last-child
+    border-bottom: none
 
 .gradient-name
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)
@@ -97,6 +144,11 @@ export default {
   bottom: 0
   left: 0
 
+.btn
+  border: 1px solid var(--gray-scondary)
+  color: var(--font-grey-color)
+  background: var(--bg-light-grey)
+
 .grey-color
   color: var(--font-grey-color)