WIP Начала карточку записи

2023-06-23 17:59:17 +03:00
parent e0bde79592
commit 52c3997054
2 changed files with 102 additions and 2 deletions
--- a/src/pages/newCalendar/components/CalendarRecordCard.vue
+++ b/src/pages/newCalendar/components/CalendarRecordCard.vue
@@ -0,0 +1,97 @@
+<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 }}
+      .color-black.flex.items-center.px-4.flex-1.font-semibold Харитонова О. В.
+      .info-block
+      .last-item.info-block(@click="outputRef")
+    .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
+        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} услуги`}}
+</template>
+
+<script>
+import * as moment from "moment/moment";
+export default {
+  name: "CalendarRecordCard",
+  props: {
+    columnRef: Node,
+  },
+  data() {
+    return {
+      pixelsPerHalfHour: 33,
+      start: "2023-06-24T13:00:00Z",
+      end: "2023-06-24T14:30:00Z",
+      servicesCount: 4,
+    };
+  },
+  computed: {
+    startTime() {
+      return moment.parseZone(this.start);
+    },
+    endTime() {
+      return moment.parseZone(this.end);
+    },
+    recordTime() {
+      return (
+        this.startTime?.format("HH:mm") + " – " + this.endTime?.format("HH:mm")
+      );
+    },
+    recordDuration() {
+      if (this.endTime.isAfter(this.startTime))
+        return this.endTime.diff(this.startTime, "minutes");
+      return null;
+    },
+    bodyHeight() {
+      let halfHourCount = parseInt(this.recordDuration / 30, 10) - 1;
+      if (halfHourCount)
+        return {
+          height: `${36 + 40 * (halfHourCount - 1)}px`,
+        };
+      return {
+        display: "none",
+      };
+    },
+    bodyClass() {
+      if (parseInt(this.bodyHeight?.height, 10) >= 76)
+        return {
+          "flex-col": true,
+          "gap-y-2": true,
+        };
+      return {};
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="sass" scoped>
+.header
+  height: 30px
+  & > div
+    background-color: var(--bg-light-grey)
+.first-item
+  border-top-left-radius: 4px
+  border-bottom-left-radius: 4px
+  width: 130px
+.last-item
+  border-top-right-radius: 4px
+  border-bottom-right-radius: 4px
+.background-grey
+  background-color: var(--bg-light-grey)
+.color-black
+  color: var(--font-dark-blue-color)
+.color-grey
+  color: var(--font-dark-blue-color-0)
+.info-block
+  width: 30px
+  height: 30px
+.body
+  border-bottom-left-radius: 4px
+  border-bottom-right-radius: 4px
+</style>