WIP Начала модалку предпросмотра

2023-06-29 18:06:58 +03:00
parent 692b4a4ddd
commit 99c0c8449a
6 changed files with 221 additions and 4 deletions
--- a/src/pages/newCalendar/components/CalendarRecordPreview.vue
+++ b/src/pages/newCalendar/components/CalendarRecordPreview.vue
@@ -0,0 +1,92 @@
+<template lang="pug">
+  .preview-wrapper.bg-white
+    .header.flex.gap-x-24.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:cancel", size="20px", color="dark", @click="hidePreview")
+    .body.gap-y-4
+      .flex.items-center.gap-x-3(v-for="field in previewConfig", :key="field?.title")
+        .field.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
+          img.h-5.w-5(:src="field?.icon ? this[field?.icon] : ''", v-if="field?.icon")
+          span {{ field?.data ? this[field?.data] : "" }}
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import { mapState } from "vuex";
+import {
+  recordList,
+  recordPreviewConfig,
+  recordingStatuses,
+} from "@/pages/newCalendar/utils/calendarConfig.js";
+export default {
+  name: "CalendarRecordPreview",
+  props: {
+    previewVisibility: Boolean,
+  },
+  data() {
+    return {
+      previewConfig: recordPreviewConfig,
+    };
+  },
+  computed: {
+    internalPreview: {
+      get() {
+        return this.previewVisibility;
+      },
+      set(value) {
+        this.$emit("update:previewVisibility", value);
+      },
+    },
+    ...mapState({
+      selectedRecordId: (state) => state.calendar.selectedRecordId,
+    }),
+    record() {
+      return recordList?.find((elem) => elem.id === this.selectedRecordId);
+    },
+    start() {
+      return moment.parseZone(this.record?.start);
+    },
+    end() {
+      return moment.parseZone(this.record?.end);
+    },
+    date() {
+      return this.start?.format("D MMMM YYYY");
+    },
+    time() {
+      return this.start?.format("HH:mm") + " – " + this.end?.format("HH:mm");
+    },
+    statusLabel() {
+      return recordingStatuses.find(
+        (elem) => elem.value === this.record?.status
+      ).label;
+    },
+    statusIcon() {
+      return recordingStatuses.find(
+        (elem) => elem.value === this.record?.status
+      ).icon;
+    },
+  },
+  methods: {
+    hidePreview() {
+      this.internalPreview = false;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.color-dark-blue
+  color: var(--font-dark-blue-color)
+.body
+  display: grid
+  grid-template-rows: repeat(3, 28px) 56px 68px
+.field
+  width: 82px
+  color: var(--font-grey-color)
+.info
+  background-color: var(--bg-light-grey)
+  color: var(--font-dark-blue-color)
+</style>