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

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

@@ -1,6 +1,6 @@
 <template lang="pug">
   medcard-form-wrapper(v-if="patient", title="Пациент на приеме", title-link="Медкарта")
-    .flex.flex-col
+    .flex.flex-col.h-full
       .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")
@@ -12,16 +12,15 @@
             .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}}
+      .flex.h-full
+        .data.flex.w-full.h-full.flex-col.px-6.py-4.gap-y-6.overflow-hidden(v-for="item in data")
+          .text-m.font-bold {{item.title}}
+          .flex.flex-col.text-smm.overflow-hidden.relative.gap-y-1
+            .grey-color {{item.firstLabel}}
+            .insurance.flex.font-medium {{item.firstDescription}}
+          .flex.flex-col.text-smm.gap-y-1
+            .grey-color {{item.secondLabel}}
+            .font-medium {{item.secondDescription}}
 </template>
 
 <script>
@@ -48,9 +47,9 @@ export default {
         { name: "Низский", id: 3, class: "low-priority" },
       ],
       data: [
-        { title: "Запись", text1: "Дата", text2: "Время" },
-        { title: "Данные", text1: "Телефон", text2: "Email" },
-        { title: "Страхование", text1: "Компания", text2: "Полис" },
+        { title: "Запись", firstLabel: "Дата", secondLabel: "Время" },
+        { title: "Данные", firstLabel: "Телефон", secondLabel: "Email" },
+        { title: "Страхование", firstLabel: "Компания", secondLabel: "Полис" },
       ],
     };
   },
@@ -75,15 +74,15 @@ export default {
       deep: true,
       immediate: true,
       handler() {
-        this.data[0].first = moment().format("DD MMMM");
-        this.data[0].second =
+        this.data[0].firstDescription = moment().format("DD MMMM");
+        this.data[0].secondDescription =
           this.patient?.time?.from + "-" + this.patient?.time?.to;
 
-        this.data[1].first = this.patient?.phone;
-        this.data[1].second = this.patient?.email;
+        this.data[1].firstDescription = this.patient?.phone;
+        this.data[1].secondDescription = this.patient?.email;
 
-        this.data[2].first = this.patient?.company;
-        this.data[2].second = this.patient?.policy;
+        this.data[2].firstDescription = this.patient?.company;
+        this.data[2].secondDescription = this.patient?.policy;
       },
     },
   },
@@ -101,8 +100,28 @@ export default {
 
 .data
   border-right: 1px solid var(--gray-scondary)
+  &:first-child
+    max-width: 154px
   &:last-child
+    @media (max-width: 1820px)
+      max-width: 282px
     border-right: none
+    max-width: 214px
+    .insurance
+      width: 209px
+      overflow: hidden
+      &: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: 234px
 
 .high-priority
   background: var(--system-color-red)

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)
 

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

@@ -1,14 +1,141 @@
 <template lang="pug">
   medcard-form-wrapper(title="Недавно просмотренные медкарты")
+    .form-wrapper.flex.flex-col.overflow-y-auto(
+      @scroll="scrollTo",
+      :class="{'default-params': viewPatients.length <= 3}"
+    )
+      .patient.flex.items-center.p-4.justify-between(
+        v-for="(patient, index) in viewPatients",
+        :class="{'default-params': viewPatients.length <= 3}"
+      )
+        .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.gap-y-1
+            .name.flex.relative {{trimName(patient.last_name, patient.first_name, patient.patronymic)}}
+            .grey-color.text-smm {{"Медкарта #" + patient.id}}
+        .flex.flex-col.font-medium.text-m.gap-y-1(:style="{width: '140px'}")
+          span {{patient.viewDate}}
+          .grey-color.text-smm Дата просмотра
+        .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>
 
 <script>
 import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
 
 export default {
   name: "ViewedMedicalRecordsForm",
   components: { MedcardFormWrapper },
+  data() {
+    return {
+      viewPatients: [],
+      patientsData: patientList.find(({ label }) => label === "Пациенты").data,
+      isGradient: false,
+    };
+  },
+  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;
+    },
+  },
+  watch: {
+    patientsData: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (localStorage.getItem("view"))
+          this.viewPatients.push(...JSON.parse(localStorage.getItem("view")));
+      },
+    },
+  },
 };
 </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
+  &: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
+
+.patient
+  border-bottom: 1px solid var(--gray-scondary)
+  border-right: 1px solid var(--gray-scondary)
+  margin-right: 8px
+  &:last-child
+    border-bottom: none
+
+.default-params
+  margin-right: 0px
+  border-right: none
+  &:last-child
+    border-bottom: 1px solid var(--gray-scondary)
+
+.default-params.form-wrapper
+  border-right: none
+  margin-right: 0px
+  &:last-child
+    border-bottom: none
+
+.btn
+  border: 1px solid var(--gray-scondary)
+  color: var(--font-grey-color)
+  background: var(--bg-light-grey)
+
+.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/medcards/components/MedcardFormWrapper.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .form-wrapper.flex.flex-col.w-full.rounded
+  .wrapper.flex.flex-col.w-full.rounded
     .header.flex.items-center.text-sm.font-bold.justify-between.w-full.px-6.py-5
       .left-side.flex.gap-x-2.items-center
         span {{title}}
@@ -22,7 +22,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.form-wrapper
+.wrapper
   height: 360px
   background: var(--default-white)
   color: var(--font-dark-blue-color)

src/pages/medcards/components/TablePatients.vue

@@ -2,7 +2,7 @@
   .table-wrapper.flex.gap-x-2    
     todays-patients-form
     current-patient-form
-    viewed-medical-records-form
+    viewed-medical-records-form.viev
 </template>
 
 <script>
@@ -20,4 +20,8 @@ export default {
 };
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.viev
+  @media (max-width: 1820px)
+    display: none
+</style>