Merge branch 'ASTRA-70' into 'master'

WIP Навесила скролл

See merge request andrusyakka/urban-couscous!345

src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue

@@ -19,7 +19,7 @@ export default {
 </script>
 <style lang="sass" scoped>
 .wrapper
-  width: 83.2%
+  flex: 1
   overflow-y: auto
   @media (max-width: 600px)
     width: fit-content

src/pages/newMedicalCard/components/MedicalProtocolCard.vue

@@ -0,0 +1,99 @@
+<template lang="pug">
+  .w-full.border.rounded.border-grey.p-4.background.cursor-pointer()
+    .flex.justify-between(:style="{'margin-bottom': '26px'}")
+      .flex.flex-col.gap-y-1
+        span.text-xl.font-bold.color-blue.line-height {{ `${protocolDate?.year} г.` }}
+        .text-smm.color-grey.flex.items-center.gap-x-6px.line-height
+          span.align-middle {{ protocolDate?.dayMonth }}
+          .rounded-full.h-1.w-1.background-grey
+          span.align-middle {{ `${protocolData?.start_time} - ${protocolData?.end_time}` }}
+      .flex.items-center.justify-center.h-6.w-6.rounded(
+        :style="statusСolors"
+      )
+        img.teeth-icon(src="@/assets/icons/teeth.svg")
+    .flex.items-center.gap-x-2
+      base-avatar(:size="40")
+        img.avatar.object-cover(
+          v-if="protocolData.employee?.photo" 
+          :src="protocolData.employee?.photo" 
+          alt="avatar"
+        )
+        span.text-sm.color-blue(v-else) {{ avatar }}
+      .flex.flex-col
+        span.line-height.text-sm.color-blue.mb-2px {{ employeeName }}
+        span.line-height.text-xxs.color-grey {{ protocolData.employee?.job_title}}
+</template>
+
+<script>
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import * as moment from "moment/moment";
+export default {
+  name: "MedicalProtocolCard",
+  components: { BaseAvatar },
+  props: {
+    protocolData: Object,
+  },
+  computed: {
+    avatar() {
+      let firstName = this.protocolData?.employee?.first_name
+        ? this.protocolData.employee?.first_name[0]
+        : this.protocolData.employee?.last_name[1];
+      return this.protocolData.employee?.last_name[0] + firstName;
+    },
+    employeeName() {
+      let firstName = this.protocolData?.employee?.first_name
+        ? ` ${this.protocolData.employee.first_name[0]}.`
+        : "";
+      let patronymic = this.protocolData?.employee?.patronymic
+        ? ` ${this.protocolData.employee.patronymic[0]}.`
+        : "";
+      return this.protocolData.employee?.last_name + firstName + patronymic;
+    },
+    statusСolors() {
+      switch (this.protocolData?.status) {
+        case "filled":
+          return {
+            "background-color": "var(--bg-event-green-color)",
+          };
+        case "partially filled":
+          return {
+            "background-color": "var(--bg-event-orange-color)",
+          };
+        default:
+          return {
+            "background-color": "var(--border-red-color)",
+          };
+      }
+    },
+    protocolDate() {
+      let date = moment(this.protocolData?.date)
+        .format("DD.MM.YYYY")
+        .split(".");
+      return {
+        year: date[2],
+        dayMonth: date[0] + "." + date[1],
+      };
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.background
+  background-color: var(--default-white)
+.background:hover
+  background-color: var(--bg-light-grey)
+.color-grey
+  color: var(--font-grey-color)
+.background-grey
+  background-color: var(--font-grey-color)
+.border-grey
+  border-color: var(--border-grey-color)
+.color-blue
+  color: var(--font-dark-blue-color)
+.line-height
+  line-height: 135%
+.teeth-icon
+  width: 16px
+  height: 16px
+</style>

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -7,45 +7,101 @@
         label="Создать осмотр",
         no-caps,
         icon="add",
-        :style="{width: '100%'}"
+        :style="{width: '100%', height: '40px'}"
+        padding="0",
       )
-    .p-4.rounded.background.h-full
+    .p-4.rounded.background.list
       .flex
         base-select(
           :style="{flex: 1}",
         )
         q-btn.ml-2(
-          icon="sort"
+          icon="app:sort-number",
           :style="{width: '40px', height: '40px'}",
-          padding="0"
-          :class="sortingClass"
+          padding="0",
+          :class="sortingClass",
           @click="invertSorting"
         )
       .flex.py-4.w-full.color-grey.text-base.justify-center
         span.opacity-50 Осмотров: 5
-      .flex.gap-y-2
-        .w-full.border.rounded.border-grey.p-4(@click="openInspection")
-          .flex.justify-between.mb-7
-            .flex.flex-col.gap-y-1
-              span.text-xl.font-bold.color-blue.line-height 2023 г.
-              .text-smm.color-grey.flex.items-center.gap-x-6px.line-height
-                span.align-middle 22.02
-                .rounded-full.h-1.w-1.background-grey
-                span.align-middle 18:30 - 19:30
-            .flex.items-center.justify-center.h-6.w-6.rounded.background-grey
-              img.teeth-icon(src="@/assets/icons/teeth.svg")
-          .h-10
+      .flex.flex-col.gap-y-2
+        medical-protocol-card(
+          v-for="protocol in protocolsData", :key="protocol.id",
+          :protocol-data="protocol",
+          @click="openInspection"
+        )
 </template>
 
 <script>
 import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import MedicalProtocolCard from "@/pages/newMedicalCard/components/MedicalProtocolCard.vue";
 export default {
   name: "MedicalProtocolsList",
-  components: { BaseSelect },
+  components: { BaseSelect, BaseAvatar, MedicalProtocolCard },
   props: { openInspection: Function },
   data() {
     return {
       sorting: false,
+      activeProtocolId: 1,
+      protocolsData: [
+        {
+          id: 1,
+          employee: {
+            last_name: "Захаров",
+            first_name: "Алексей",
+            patronymic: "Сергеевич",
+            job_title: "Хирург",
+            photo: "",
+          },
+          date: "2023-04-20",
+          start_time: "18:30",
+          end_time: "19:00",
+          status: "filled",
+        },
+        {
+          id: 2,
+          employee: {
+            last_name: "Лаврентьев",
+            first_name: "Сергей",
+            patronymic: "Анатольевич",
+            job_title: "Терапевт",
+            photo: "",
+          },
+          date: "2077-03-20",
+          start_time: "15:30",
+          end_time: "16:00",
+          status: "partially filled",
+        },
+        {
+          id: 3,
+          employee: {
+            last_name: "Захаров",
+            first_name: "Алексей",
+            patronymic: "Сергеевич",
+            job_title: "Хирург",
+            photo: "",
+          },
+          date: "2023-02-15",
+          start_time: "18:30",
+          end_time: "19:00",
+          status: "filled",
+        },
+        {
+          id: 4,
+          employee: {
+            last_name: "Щевьева",
+            first_name: "Лариса",
+            patronymic: "Николаевна",
+            job_title: "Ортодонт",
+            photo: "",
+          },
+          date: "2023-05-21",
+          start_time: "13:30",
+          end_time: "15:00",
+          status: "",
+        },
+      ],
     };
   },
   computed: {
@@ -70,6 +126,11 @@ export default {
 <style lang="sass" scoped>
 .list-wrapper
   width: 19.6%
+.list
+  height: calc(100% - 76px)
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
 .background
   background-color: var(--default-white)
 .sort-icon-default
@@ -80,15 +141,4 @@ export default {
   color: var(--default-white)
 .color-grey
   color: var(--font-grey-color)
-.background-grey
-  background-color: var(--font-grey-color)
-.border-grey
-  border-color: var(--border-grey-color)
-.color-blue
-  color: var(--font-dark-blue-color)
-.line-height
-  line-height: 135%
-.teeth-icon
-  width: 16px
-  height: 16px
 </style>

src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue

@@ -25,6 +25,6 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper
-  width: 83.2%
+  flex: 1
   overflow-y: auto
 </style>