WIP Разделила календари

src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue

@@ -0,0 +1,63 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col
+    .header.flex.items-center.justify-between.top-0.py-2.px-6
+      .flex.h-full.items-center.h-11
+        q-avatar.mr-2(
+          size="40px",
+          round
+        )
+          img(:src="employee?.photo || defaultPhoto", alt="doctor")
+        .flex.flex-col.justify-between
+          span.text-dark {{trimName(employee?.last_name, employee?.first_name, employee?.patronymic)}}
+          span.text-xsx.color-grey {{employee?.job || "Терапевт"}}
+      button(@click="locked = !locked")
+        q-icon.lock-icon(
+          :name="locked ? 'app:lock' : 'app:lock-open'",
+          size="24px"
+        )
+    .body.h-full.px-1.py-1
+      calendar-record-card(
+        v-for="record in filteredRecords",
+        :key="record?.id",
+        :record="record",
+        :expanded-type="true",
+        :style="eventCardPosition(record.start, record.end)",
+        @click="changeSelectedRecordId(record?.id)",
+      )
+</template>
+
+<script>
+import { columnMixin } from "@/pages/newCalendar/mixins/columnMixin.js";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import { recordList } from "@/pages/newCalendar/utils/calendarConfig";
+import doctorAvatar from "@/assets/images/doctor.png";
+export default {
+  name: "CalendarColumn",
+  mixins: [columnMixin],
+  props: {
+    employee: Object,
+  },
+  data() {
+    return {
+      trimName: trimName,
+      configEvents: recordList,
+      defaultPhoto: doctorAvatar,
+      locked: false,
+    };
+  },
+  computed: {
+    filteredRecords() {
+      // return this.configEvents.filter(
+      //   (elem) => elem?.employee?.id === this.employee?.id
+      // );
+      return [];
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+@import "@/pages/newCalendar/mixins/columnStyle.sass"
+.lock-icon :deep(path)
+  fill: var(--font-grey-color)
+</style>