[WIP] Фикс багов и скролла страницы медкартотчек

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

@@ -7,6 +7,7 @@
   )
     .form-wrapper.flex.flex-col.overflow-y-auto(
       @scroll="scrollTo",
+      id="scroll",
       :class="{'default-form': patientsData.length <= 3}"
     )
       .patient.flex.items-center.p-4.justify-between(
@@ -91,6 +92,14 @@ export default {
         return (this.isGradient = false);
       this.isGradient = true;
     },
+    checkScroll() {
+      let elem = document.getElementById("scroll");
+      if (Math.abs(elem.scrollHeight - elem.clientHeight - elem.scrollTop))
+        this.isGradient = true;
+    },
+  },
+  mounted() {
+    this.checkScroll();
   },
 };
 </script>
@@ -123,6 +132,7 @@ export default {
   border-bottom: 1px solid var(--gray-secondary)
   border-right: 1px solid var(--gray-secondary)
   margin-right: 8px
+  height: 77px
   &:last-child
     border-bottom: none
 

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

@@ -1,12 +1,13 @@
 <template lang="pug">
-  medcard-form-wrapper(title="Недавно просмотренные медкарты")
+  medcard-form-wrapper.relative(title="Недавно просмотренные медкарты")
     .form-wrapper.flex.flex-col.overflow-y-auto(
       @scroll="scrollTo",
-      :class="{'default-params': viewPatients.length <= 3}"
+      id="scroll-view",
+      :class="{'default-form': viewPatients.length <= 3}"
     )
       .patient.flex.items-center.p-4.justify-between(
         v-for="(patient, index) in viewPatients",
-        :class="{'default-params': viewPatients.length <= 3}"
+        :class="{'default-patient': viewPatients.length <= 3}"
       )
         .flex.text-base.font-medium.gap-x-3
           img.h-11.w-11.object-cover.rounded-full(:src="patient.avatar")
@@ -58,6 +59,11 @@ export default {
         return (this.isGradient = false);
       this.isGradient = true;
     },
+    checkScroll() {
+      let elem = document.getElementById("scroll-view");
+      if (Math.abs(elem.scrollHeight - elem.clientHeight - elem.scrollTop) < 1)
+        this.isGradient = true;
+    },
   },
   watch: {
     patientsData: {
@@ -68,6 +74,16 @@ export default {
           this.viewPatients.push(...JSON.parse(localStorage.getItem("view")));
       },
     },
+    viewPatients: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (this.viewPatients.length > 3) this.checkScroll();
+      },
+    },
+  },
+  mounted() {
+    this.checkScroll();
   },
 };
 </script>
@@ -95,26 +111,26 @@ export default {
     pointer-events: none
 
 .patient
-  border-bottom: 1px solid var(--gray-scondary)
-  border-right: 1px solid var(--gray-scondary)
+  border-bottom: 1px solid var(--gray-secondary)
+  border-right: 1px solid var(--gray-secondary)
   margin-right: 8px
+  height: 77px
   &: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
+.default-form
   margin-right: 0px
   &:last-child
     border-bottom: none
 
+.default-patient
+  margin-right: 0px
+  border-right: none
+  &:last-child
+    border-bottom: 1px solid var(--gray-secondary)
+
 .btn
-  border: 1px solid var(--gray-scondary)
+  border: 1px solid var(--gray-secondary)
   color: var(--font-grey-color)
   background: var(--bg-light-grey)