WIP Адаптировала карточки под календарь

src/pages/newCalendar/components/CalendarColumn.vue

@@ -1,15 +1,22 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col(ref="columnRef")
+  .calendar-column-wrapper.flex.flex-col
     .header.flex.flex-col.items-center.justify-center.top-0.pt-3.pb-10px
       span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
       span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
     .body.h-full.px-1.py-1
-      calendar-record-card(:column-ref="$refs.columnRef")
+      calendar-record-card(
+        v-for="record in filteredRecords",
+        :key="record?.id",
+        :record="record",
+        :expanded-type="expandedDisplayType"
+      )
     .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
       span.text-smm.color-grey 0 записей
 </template>
 
 <script>
+import * as moment from "moment/moment";
+import { recordList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarRecordCard from "@/pages/newCalendar/components/CalendarRecordCard.vue";
 export default {
   name: "CalendarColumn",
@@ -18,6 +25,15 @@ export default {
     date: Object,
     expandedDisplayType: Boolean,
   },
+  computed: {
+    filteredRecords() {
+      return recordList.filter(
+        (elem) =>
+          moment.parseZone(elem.start).format("YYYY-MM-DD") ===
+          this.date.format("YYYY-MM-DD")
+      );
+    },
+  },
   methods: {
     transformDayName(name) {
       return name[0]?.toUpperCase() + name?.slice(1);

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -82,6 +82,7 @@ import icon_ok from "@/assets/icons/icon_ok.svg";
 import sort_word from "@/assets/icons/sort_word.svg";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 
 export default {
   name: "CalendarOpenSidebar",
@@ -97,6 +98,7 @@ export default {
       sortData: [],
       patientList: patientList,
       sort: false,
+      trimOwnerName: trimName,
     };
   },
   methods: {
@@ -120,11 +122,6 @@ export default {
         return (this.patientList.find((e) => e.id === idx).choice = false);
       this.patientList.find((e) => e.id === idx).choice = true;
     },
-    trimOwnerName(lastName, firstName, patronymic) {
-      let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
-      let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
-      return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
-    },
     checkPerson(index, arr) {
       arr.map((e) => {
         if (e.id === index) e.check = !e.check;

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -1,41 +1,78 @@
 <template lang="pug">
   .card-wrapper.w-full.flex.gap-y-2px.flex-col
     .header.w-full.flex.gap-x-2px.text-sm
-      .first-item.color-black.px-4.flex.items-center.justify-center.font-semibold {{ recordTime }}
+      .first-item.color-black.justify-center.gap-x-2(:class="timeClass")
-      .color-black.flex.items-center.px-4.flex-1.font-semibold Харитонова О. В.
+        span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
-      .info-block
+        q-icon(
-      .last-item.info-block(@click="outputRef")
+          name="arrow_back_ios_new",
+          size="10px",
+          v-if="expandedTime",
+          @click="changeTimeDisplay(false)"
+        )
+        q-icon.cursor-pointer(
+          v-if="!expandedType && !expandedTime",
+          name="app:time",
+          size="16px",
+          @click="changeTimeDisplay(true)"
+        )
+      .color-black.pl-4.flex-1.font-semibold {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
+      .info-block.justify-center
+        img.w-5.h-5(:src="recordingStatus?.icon")
+      .last-item.info-block.justify-center(v-if="expandedType")
+        img.w-5.h-5(:src="medicalСardStatus?.icon")
     .body.background-grey.flex.pl-4.pr-2.py-10px.color-grey.gap-x-12(:style="bodyHeight", :class="bodyClass")
       .flex.gap-x-2.items-center
         q-icon(name="app:phone", size="14px")
         .text-xxs +7 (910) 424–13–13
-      .flex.gap-x-2.items-center
+        .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
+          v-if="collapsedDisplayCondition"
+        ) +1
+      .flex.gap-x-2.items-center(v-if="!collapsedDisplayCondition")
         q-icon(name="app:mail", size="14px")
         .text-xxs Haritonich@mail.ru
-      span.text-xxs.self-end(v-if="servicesCount && Object.keys(bodyClass)?.length") {{`${4} услуги`}}
+      span.text-xxs.self-end(v-if="servicesCount && bodyClass?.['flex-col']") {{`${4} услуги`}}
 </template>
 
 <script>
 import * as moment from "moment/moment";
+import {
+  recordingStatuses,
+  medicalСardStatuses,
+} from "@/pages/newCalendar/utils/calendarConfig.js";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 export default {
   name: "CalendarRecordCard",
   props: {
-    columnRef: Node,
+    expandedType: Boolean,
+    record: Object,
   },
   data() {
     return {
       pixelsPerHalfHour: 33,
-      start: "2023-06-24T13:00:00Z",
-      end: "2023-06-24T14:30:00Z",
       servicesCount: 4,
+      trimPatientName: trimName,
+      expandedTime: false,
     };
   },
   computed: {
+    collapsedDisplayCondition() {
+      return !this.bodyClass?.["flex-col"] && !this.expandedType;
+    },
+    recordingStatus() {
+      return recordingStatuses.find(
+        (elem) => elem.value === this.record?.status
+      );
+    },
+    medicalСardStatus() {
+      return medicalСardStatuses.find(
+        (elem) => elem.value === this.record?.medicalCard?.status
+      );
+    },
     startTime() {
-      return moment.parseZone(this.start);
+      return moment.parseZone(this.record?.start);
     },
     endTime() {
-      return moment.parseZone(this.end);
+      return moment.parseZone(this.record?.end);
     },
     recordTime() {
       return (
@@ -65,8 +102,25 @@ export default {
         };
       return {};
     },
+    timeClass() {
+      if (this.expandedType)
+        return {
+          expanded: true,
+        };
+      if (this.expandedTime)
+        return {
+          "expanded-time": true,
+        };
+      return {
+        collapsed: true,
+      };
+    },
+  },
+  methods: {
+    changeTimeDisplay(value) {
+      this.expandedTime = value;
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -75,15 +129,24 @@ export default {
   height: 30px
   & > div
     background-color: var(--bg-light-grey)
+    display: flex
+    align-items: center
 .first-item
   border-top-left-radius: 4px
   border-bottom-left-radius: 4px
+.expanded
   width: 130px
+.collapsed
+  width: 30px
+.expanded-time
+  width: 138px
 .last-item
   border-top-right-radius: 4px
   border-bottom-right-radius: 4px
 .background-grey
   background-color: var(--bg-light-grey)
+.background-dark-grey
+  background-color: var(--border-light-grey-color)
 .color-black
   color: var(--font-dark-blue-color)
 .color-grey

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -114,6 +114,7 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 
 export default {
   name: "CalendarSidebar",
@@ -131,6 +132,7 @@ export default {
       foundPerson: "",
       sortData: [],
       sort: false,
+      trimOwnerName: trimName,
     };
   },
   computed: {
@@ -152,11 +154,6 @@ export default {
         return { ...e, active: false };
       });
     },
-    trimOwnerName(lastName, firstName, patronymic) {
-      let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
-      let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
-      return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
-    },
     checkPerson(index, arr) {
       arr.map((e) => {
         if (e.id === index) e.check = !e.check;

src/pages/newCalendar/utils/calendarConfig.js

@@ -7,6 +7,49 @@ import filled from "@/assets/icons/medcard_filled.svg";
 import partially_filled from "@/assets/icons/medcard_partially_filled.svg";
 import not_filled from "@/assets/icons/medcard_not_filled.svg";
 
+export const recordingStatuses = [
+  {
+    label: "Не принят",
+    icon: not_accepted,
+    value: "not_accepted",
+  },
+  {
+    label: "Принят",
+    icon: accepted,
+    value: "accepted",
+  },
+  {
+    label: "Отказ",
+    icon: rejected,
+    value: "rejected",
+  },
+  {
+    label: "На приеме",
+    icon: reception,
+    value: "reception",
+  },
+];
+
+export const medicalСardStatuses = [
+  {
+    label: "Не заполнена",
+    icon: not_filled,
+    value: "not_filled",
+  },
+  {
+    label: "Частично заполнена",
+    icon: partially_filled,
+    value: "partially_filled",
+  },
+  {
+    label: "Заполнена",
+    icon: filled,
+    value: "filled",
+  },
+];
+
+// TODO Статусы приема и статусы заполнения медкарты должны быть общими, чтобы не дублировать в каждом экспорте. Исправить
+// TODO patientList - исправить название
 export const patientList = [
   {
     label: "Статус приема",
@@ -203,3 +246,69 @@ export const patientData = {
     { name: "group", text: "Пациенты", active: false },
   ],
 };
+
+export const recordList = [
+  {
+    id: "c3df0a95-8093-41f1-9584-5b70ee05e71c",
+    start: "2023-06-26T10:00:00Z",
+    end: "2023-06-26T11:00:00Z",
+    employee: {
+      id: "464101e6-b4e6-46a4-8ef6-08ecb2921493",
+      last_name: "Каневский",
+      first_name: "Леонид",
+      patronymic: "Семенович",
+    },
+    member: {
+      id: "3e6e54e4-2706-47d3-8b54-b841ee8f0943",
+      last_name: "Харитонова",
+      first_name: "Ольга",
+      patronymic: "Васильевна",
+    },
+    status: "not_accepted",
+    medicalCard: {
+      status: "partially_filled",
+    },
+  },
+  {
+    id: "ba931000-7140-4977-bd09-1ac212b8b8e5",
+    start: "2023-06-28T15:00:00Z",
+    end: "2023-06-28T15:30:00Z",
+    employee: {
+      id: "464101e6-b4e6-46a4-8ef6-08ecb2921493",
+      last_name: "Каневский",
+      first_name: "Леонид",
+      patronymic: "Семенович",
+    },
+    member: {
+      id: "d340d344-4fc7-4fbe-9db8-b7562b70438d",
+      last_name: "Гаранова",
+      first_name: "Наталья",
+      patronymic: "Романовна",
+    },
+    status: "accepted",
+    medicalCard: {
+      status: "not_filled",
+    },
+  },
+  {
+    id: "4cd94bec-a0df-4a18-879d-f64cd6d7098e",
+    start: "2023-06-30T13:00:00Z",
+    end: "2023-06-30T14:30:00Z",
+    employee: {
+      id: "464101e6-b4e6-46a4-8ef6-08ecb2921493",
+      last_name: "Каневский",
+      first_name: "Леонид",
+      patronymic: "Семенович",
+    },
+    member: {
+      id: "0b2d1db1-6aab-4e29-b857-fc7c9777280f",
+      last_name: "Харитонова",
+      first_name: "Ольга",
+      patronymic: "Васильевна",
+    },
+    status: "reception",
+    medicalCard: {
+      status: "filled",
+    },
+  },
+];

src/pages/newCalendar/utils/calendarFunctions.js

@@ -1,3 +1,9 @@
 export function convertTime(str, startIndex, endIndex) {
   return parseInt(str?.slice(startIndex, endIndex), 10);
 }
+
+export function trimName(lastName, firstName, patronymic) {
+  let checkedFirstName = firstName !== null ? firstName[0] + ". " : "";
+  let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
+  return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
+}