[WIP] Фикс процента заполнения медкарты

src/assets/sass/variables.sass

@@ -96,4 +96,5 @@
   --system-color-red: #f34549
   --system-color-green: #21ba72
   --gray-background: #e9e9ed
+  --aqua-color: #2cc3e5
 

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -39,13 +39,16 @@
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
       .flex.gap-x-1
-        .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
+        .name.flex.rounded-md.flex-col
+          .flex.items-center.px-4.py-2.gap-x-2(:class="{'medcard': patient}")
             .photo.flex.h-10.w-10.items-center.justify-center
               img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
               q-icon.icon(v-else, name="app:noname", size="24px")
-          .flex.flex-col.font-medium
+            .flex.flex-col.font-medium.gap-y-2px
               .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
               .grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}}
+          .indicator-default.flex.w-full.h-1
+            .indicator.flex.h-1(:style="{width: patient ? patient.fill : '0%'}")
         .change.flex.items-center.rounded-md
           q-btn(dense, padding="18px 4px", @click="isShowMedcards = true")
             q-icon.icon(name="app:folder", size="20px")
@@ -119,6 +122,9 @@ export default {
     },
   },
   methods: {
+    fixedFill(fill) {
+      return 100 - fill.slice(0, -1) + "%";
+    },
     closeModalMedcards() {
       this.isShowMedcards = false;
     },
@@ -167,6 +173,7 @@ export default {
 .change
   background: var(--bg-light-grey)
   color: var(--font-grey-color)
+  border: 1px solid var(--gray-secondary)
 
 .status
   width: 160px
@@ -180,16 +187,28 @@ export default {
   color: var(--font-grey-color)
   width: 76px
 
+.medcard
+  cursor: pointer
+  &:hover
+    background: var(--gray-secondary)
+
 .name
-  background: var(--bg-light-grey)
+  background: var(--default-white)
-  border-bottom-color: var(--border-light-grey-color)
-  border-bottom-width: 4px
   width: 200px
+  border: 1px solid var(--gray-secondary)
 
 .photo
   background: var(--border-light-grey-color)
   border-radius: 50%
 
+.indicator-default
+  background: var(--gray-secondary)
+  border-end-end-radius: 4px
+
+.indicator
+  background: var(--aqua-color)
+  border-end-start-radius: 4px
+
 .grey-color
   color: var(--font-grey-color)
 </style>

src/pages/newCalendar/components/MedcardsModal.vue

@@ -17,18 +17,18 @@
           :class="sortingClass"
         )
           calendar-sidebar-svg(name-svg="sort", :active="sort")
-      .medcards-wrapper.flex.flex-col.overflow-auto
+      .medcards-wrapper.flex.flex-col.overflow-auto.w-full
         .medcard.flex.items-center.cursor-pointer(
           v-for="patient in patients",
           @click="selectMedcard(patient)"
         )
-          .flex.justify-between.w-full.items-center
+          .name.flex.justify-between.w-full.items-center.h-14
             .info-block.flex.justify-between.gap-x-2
               img.h-10.w-10.object-cover.rounded-full(:src="patient.avatar")
               .flex.flex-col.gap-y-1
                 .text-m {{trimPatientName(patient.last_name, patient.first_name, patient.patronymic)}}
                 .grey-color.text-smm {{patient.birthday}}
-            q-icon.ok-icon(name="app:ok", v-if="patient.check" size="24px")
+            q-icon.ok-icon(name="app:ok", v-if="patient.check", size="24px")
     .footer.flex.gap-2
       base-button(type="secondary", label="Отменить", width="125px", @click="closeMedcards")
       base-button(
@@ -98,17 +98,22 @@ export default {
 .search :deep(.q-field__prepend)
   padding-right: 4px
 
+.name
+  margin: 4px 0px
+  &:hover
+    border-radius: 4px
+    background: var(--gray-thirdly)
+
 .medcard
   height: 64px
   margin-right: 14px
   border-bottom: 1px solid var(--gray-secondary)
   &:last-child
     border-bottom: none
-  &:hover
+
-    border-radius: 4px
-    background: var(--gray-thirdly)
 
 .medcards-wrapper
+  width: 440px
   max-height: 563px
   margin-right: -18px
   &::-webkit-scrollbar

src/pages/newCalendar/utils/calendarConfig.js

@@ -121,6 +121,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "90%",
       },
       {
         id: 1,
@@ -139,6 +140,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "20%",
       },
       {
         id: 2,
@@ -157,6 +159,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 3,
@@ -175,6 +178,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 4,
@@ -193,6 +197,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 5,
@@ -211,6 +216,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 6,
@@ -229,6 +235,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 7,
@@ -247,6 +254,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 8,
@@ -265,6 +273,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 9,
@@ -283,6 +292,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
       {
         id: 10,
@@ -301,6 +311,7 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
       },
     ],
     choice: false,