WIP Доделала превью карточки

src/assets/sass/variables.sass

@@ -73,6 +73,9 @@
   --bg-disable-grey-color: #f0f0f0
   --bg-grey-color: rgba(37, 40, 80, 0.15)
   --bg-aqua-blue: #55c5e8
-  --bg-status-green: #55CD76
+  --bg-status-green: #55cd76
-  --bg-light-blue-color: #E7EDFF
+  --bg-light-blue-color: #e7edff
+  --bg-chip-blue-color: #d8e3ff
+  --bg-chip-yellow-color: #fff0ca
+  --bg-chip-pink-color: #F7D9FF
 

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -7,13 +7,13 @@
           name="arrow_back_ios_new",
           size="10px",
           v-if="expandedTime",
-          @click="changeTimeDisplay(false)"
+          @click.stop="changeTimeDisplay(false)"
         )
         q-icon.cursor-pointer(
           v-if="!expandedType && !expandedTime",
           name="app:time",
           size="16px",
-          @click="changeTimeDisplay(true)"
+          @click.stop="changeTimeDisplay(true)"
         )
       .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
         :class="{'pl-6px collapsed-name': expandedTime}"

src/pages/newCalendar/components/CalendarRecordPreview.vue

@@ -1,21 +1,53 @@
 <template lang="pug">
   .preview-wrapper.bg-white
-    .header.flex.gap-x-24.mb-6
+    .header.flex.mb-6
       .title.font-bold.text-xl.color-dark-blue Запись на {{ date }}, {{ time }}
       .icons.flex.items-center.gap-x-3.-mt-5.-mr-4.p-1
-        q-icon(name="app:dots", size="20px", color="dark")
+        q-icon(name="app:dots", size="18px", color="dark")
-        q-icon(name="app:cancel", size="20px", color="dark", @click="hidePreview")
+        q-icon(name="app:cancel", size="18px", color="dark", @click="hidePreview")
-    .body.gap-y-4
+    .body.gap-y-4.text.text-sm
       .flex.items-center.gap-x-3(v-for="field in previewConfig", :key="field?.title")
-        .field.flex.items-center.justify-start.font-semibold {{ field?.title }}
+        .field.color-grey.flex.items-center.justify-start.font-semibold {{ field?.title }}:
-        .info.flex-1.rounded.h-full.py-2.px-4.flex.items-center.gap-x-1
+        .info.flex-1.rounded.h-full.py-2.px-4.flex.items-center.gap-x-1.color-dark-blue(v-if="field?.data")
           img.h-5.w-5(:src="field?.icon ? this[field?.icon] : ''", v-if="field?.icon")
           span {{ field?.data ? this[field?.data] : "" }}
+        .flex.gap-x-1.flex-1(v-if="field?.title === 'Медкарта'")
+          .nameplate.rounded.px-4.pt-2.pb-1.flex.gap-x-2.info.flex-1
+            q-avatar(size="40px")
+              img(:src="memberData?.photo")
+            .flex.flex-col.gap-y-2px
+              span.color-dark-blue {{ trimName(memberData?.last_name, memberData?.first_name, memberData?.patronymic) }}
+              span.color-grey {{ birthday }}
+          q-btn.flex-1(
+            color="primary",
+            no-caps,
+            label="Полная медкарта",
+            :style="{'font-weight': 500}"
+          )
+            q-icon.arrow(name="app:long-arrow", size="18px", right)
+        .flex.gap-x-1.flex-1.h-full(v-if="field?.title === 'Услуги'")
+          .rounded.h-full.services.flex.flex-wrap.gap-1.p-1
+            .py-2.px-4.color-dark-blue.rounded.h-7.relative(
+              v-for="chip in services.list",
+              :key="chip?.title",
+              :id="chip?.title",
+              :class="chipClass(chip?.title)"
+              :style="{'background-color': chip?.color}"
+            )
+              span {{chip?.title}}
+              .gradient.h-7.w-11.absolute.right-0(
+                :id="chip?.title+'gradient'",
+                :style="{background: `linear-gradient(270deg, ${chip?.color} 0%, rgba(255, 255, 255, 0.00) 100%)`}"
+              )
+            .info.color-dark-blue.rounded.h-7.px-4(v-if="services.remains > 0") +{{ services.remains }}
+          .rounded.info.color-grey.h-full.cost.flex.items-center.justify-center {{ services.cost }} ₽
+          
 </template>
 
 <script>
 import * as moment from "moment/moment";
 import { mapState } from "vuex";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import {
   recordList,
   recordPreviewConfig,
@@ -29,6 +61,7 @@ export default {
   data() {
     return {
       previewConfig: recordPreviewConfig,
+      trimName: trimName,
     };
   },
   computed: {
@@ -68,25 +101,75 @@ export default {
         (elem) => elem.value === this.record?.status
       ).icon;
     },
+    memberData() {
+      return this.record?.member;
+    },
+    birthday() {
+      return moment(this.memberData?.birth_date)?.format("MM.DD.YYYY");
+    },
+    services() {
+      let croppedServices = JSON.parse(JSON.stringify(this.record?.services));
+      let remains = this.record?.services?.length - 3;
+      if (remains > 0) croppedServices.length = 3;
+      else remains = 0;
+      return {
+        list: croppedServices,
+        remains: remains,
+        cost: this.record?.services?.reduce((acc, curr) => acc + curr.cost, 0),
+      };
+    },
   },
   methods: {
     hidePreview() {
       this.internalPreview = false;
     },
+    chipClass(id) {
+      this.$nextTick(() => {
+        let chipRef = document.getElementById(id);
+        if (chipRef?.offsetWidth > 200) {
+          chipRef.classList.add("overflow");
+          let gradient = document.getElementById(id + "gradient");
+          gradient.style.display = "block";
+        }
+      });
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.header
+  gap: 0 93px
 .color-dark-blue
   color: var(--font-dark-blue-color)
+.color-grey
+  color: var(--font-grey-color)
 .body
   display: grid
   grid-template-rows: repeat(3, 28px) 56px 68px
 .field
-  width: 82px
+  width: 76px
-  color: var(--font-grey-color)
 .info
   background-color: var(--bg-light-grey)
-  color: var(--font-dark-blue-color)
+.nameplate
+  border-bottom: 4px solid var(--bg-aqua-blue)
+.arrow
+  transform: rotate(180deg)
+.cost
+  width: 82px
+.services
+  border: 1px solid var(--bg-light-grey)
+  flex-wrap: wrap !important
+  width: 322px
+  & > div
+    display: flex
+    align-items: center
+    justify-content: center
+.overflow
+  width: 200px
+  justify-content: start !important
+  overflow: hidden
+  white-space: nowrap
+.gradient
+  display: none
 </style>

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -3,7 +3,7 @@
     :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
   )
     calendar-header.w-full.mb-1(v-model="displayType")
-    .schedule-body.h-full.bg-white.w-full
+    .schedule-body.h-full.bg-white.w-full(:class="{rounded: !expandedDisplayType}")
       .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
           v-for="date in dateRange",

src/pages/newCalendar/utils/calendarConfig.js

@@ -285,8 +285,8 @@ export const patientData = {
 export const recordList = [
   {
     id: "c3df0a95-8093-41f1-9584-5b70ee05e71c",
-    start: "2023-06-26T10:00:00Z",
+    start: "2023-07-05T10:00:00Z",
-    end: "2023-06-26T11:00:00Z",
+    end: "2023-07-05T11:00:00Z",
     employee: {
       id: "464101e6-b4e6-46a4-8ef6-08ecb2921493",
       last_name: "Каневский",
@@ -299,6 +299,7 @@ export const recordList = [
       first_name: "Ольга",
       patronymic: "Васильевна",
       birth_date: "1990-03-12",
+      photo: personImage,
       contacts: [
         {
           value: "+7 (910) 424–13–13",
@@ -315,32 +316,22 @@ export const recordList = [
       status: "partially_filled",
     },
     services: [
-      {
-        title: "Чистка зубов",
-        cost: 500,
-      },
-      {
-        title: "Осмотр",
-        cost: 0,
-      },
-      {
-        title: "Лечение среднего кариеса",
-        cost: 2000,
-      },
       {
         title: "Изготовление коронки",
         cost: 2700,
+        color: "var(--bg-chip-blue-color)",
       },
       {
         title: "Снятие слепков",
         cost: 400,
+        color: "var(--bg-chip-yellow-color)",
       },
     ],
   },
   {
     id: "ba931000-7140-4977-bd09-1ac212b8b8e5",
-    start: "2023-06-28T15:00:00Z",
+    start: "2023-07-06T15:00:00Z",
-    end: "2023-06-28T15:30:00Z",
+    end: "2023-07-06T15:30:00Z",
     employee: {
       id: "464101e6-b4e6-46a4-8ef6-08ecb2921493",
       last_name: "Каневский",
@@ -353,6 +344,7 @@ export const recordList = [
       first_name: "Наталья",
       patronymic: "Романовна",
       birth_date: "1990-04-12",
+      photo: personImage,
       contacts: [
         {
           value: "+7 (910) 424–13–13",
@@ -369,21 +361,20 @@ export const recordList = [
       status: "not_filled",
     },
     services: [
-      {
-        title: "Чистка зубов",
-        cost: 500,
-      },
       {
         title: "Осмотр",
         cost: 0,
+        color: "var(--bg-chip-blue-color)",
       },
       {
         title: "Лечение среднего кариеса",
         cost: 2000,
+        color: "var(--bg-chip-yellow-color)",
       },
       {
         title: "Изготовление коронки",
         cost: 2700,
+        color: "var(--bg-chip-pink-color)",
       },
       {
         title: "Снятие слепков",
@@ -393,8 +384,8 @@ export const recordList = [
   },
   {
     id: "4cd94bec-a0df-4a18-879d-f64cd6d7098e",
-    start: "2023-06-30T13:00:00Z",
+    start: "2023-07-03T13:00:00Z",
-    end: "2023-06-30T14:30:00Z",
+    end: "2023-07-03T14:30:00Z",
     employee: {
       id: "464101e6-b4e6-46a4-8ef6-08ecb2921493",
       last_name: "Каневский",
@@ -407,6 +398,7 @@ export const recordList = [
       first_name: "Ольга",
       patronymic: "Васильевна",
       birth_date: "1990-05-12",
+      photo: personImage,
       contacts: [
         {
           value: "+7 (910) 424–13–13",
@@ -422,14 +414,17 @@ export const recordList = [
       {
         title: "Чистка зубов",
         cost: 500,
+        color: "var(--bg-chip-blue-color)",
       },
       {
         title: "Осмотр",
         cost: 0,
+        color: "var(--bg-chip-yellow-color)",
       },
       {
         title: "Лечение среднего кариеса",
         cost: 2000,
+        color: "var(--bg-chip-pink-color)",
       },
       {
         title: "Изготовление коронки",