[WIP] Разделил форму создания записи на компоненты, фикс стилей и отображения оставшихся услуг

2023-06-19 17:12:02 +03:00
parent 07672e4afc
commit f3a5d04e0d
2 changed files with 151 additions and 110 deletions
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/src/pages/newCalendar/components/HeaderRecordForm.vue
@@ -0,0 +1,125 @@
+<template lang="pug">
+  .flex.gap-x-10
+    .flex.flex-col.gap-y-4.text-smm
+      .flex.gap-x-3.items-center
+        .text.font-semibold Статус
+        .flex.gap-x-1
+          .input.flex.items-center.pl-4.gap-x-1.rounded-md
+            img(:src="currentStatus.icon")
+            .dark-blue.font-medium {{currentStatus.name}}
+          q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
+            img(:src="folder")
+            q-menu
+              .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+                v-for="status in statuses",
+                @click="choiceStatus(status)",
+                v-close-popup
+              )
+                img(:src="status.icon")
+                span {{status.name}}
+      .flex.gap-x-3.items-center
+        .text.font-semibold Дата:
+        .flex.gap-x-1
+          .input.flex.items-center.pl-4.rounded-md
+            .dark-blue.font-medium {{currentDate.format("DD MMMM YYYY")}}
+          q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
+            img(:src="calendar")
+            q-menu(
+              transition-show="scale",
+              transition-hide="scale",
+              self="top middle",
+              :offset="[118, 14]",
+            )
+              base-calendar(v-model="currentDate")
+      .flex.gap-x-3.items-center
+        .text.font-semibold Время:
+        .flex.gap-x-1
+          .input.flex.items-center.pl-4.rounded-md
+            .dark-blue.font-medium 13:00 - 14:00
+          q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
+            img(:src="time")
+          base-modal(v-model="isShowTime", title="Время", modal-padding)
+            base-time-modal(:times="times", :close-modal-time="closeModalTime")
+    .flex.h-14.gap-x-3.items-center.text-smm
+      .text.font-semibold Медкарта:
+      .flex.gap-x-1 
+        .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
+          .photo.flex.h-10.w-10.items-center.justify-center
+            img(:src="noname")
+          .flex.flex-col.font-medium
+            .dark-blue Имя Фамилия
+            .grey-color.text-xsx.rounded-md Дата
+        .change.flex.items-center.rounded-md
+          q-btn(dense, padding="24px 8px")
+            q-icon(name="app:icon-plus", size="12px")
+</template>
+
+<script>
+import folder from "@/assets/icons/folder.svg";
+import time from "@/assets/icons/time.svg";
+import noname from "@/assets/icons/noname.svg";
+import calendar from "@/assets/icons/calendar-grey.svg";
+import BaseCalendar from "@/components/base/BaseCalendar.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
+import * as moment from "moment/moment";
+
+export default {
+  name: "HeaderRecordForm",
+  components: { BaseCalendar, BaseModal, BaseTimeModal },
+  props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
+  data() {
+    return {
+      folder,
+      calendar,
+      time,
+      noname,
+      currentDate: moment().clone(),
+      isShowTime: false,
+      times: { from: "8:30", to: "10:30" },
+    };
+  },
+  methods: {
+    closeModalTime() {
+      this.isShowTime = false;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input
+  width: 200px
+  background: var(--bg-light-grey)
+
+.dark-blue
+  color: var(--font-dark-blue-color)
+  min-width: 50px
+
+.change
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+
+.status
+  padding: 8px 8px 8px 5px
+  &:hover
+    background: var(--bg-light-grey)
+    cursor: pointer
+
+.text
+  color: var(--font-grey-color)
+  width: 76px
+
+.name
+  background: var(--bg-light-grey)
+  border-bottom-color: var(--border-light-grey-color)
+  border-bottom-width: 4px
+  width: 200px
+
+.photo
+  background: var(--border-light-grey-color)
+  border-radius: 50%
+
+.grey-color
+  color: var(--font-grey-color)
+</style>