[WIP] Добавил формы на модальном окне создания записи

2023-06-09 19:41:04 +03:00
parent 900cc7b2ba
commit 10c72e8b61
10 changed files with 297 additions and 86 deletions
--- a/src/components/base/BaseTimeModal.vue
+++ b/src/components/base/BaseTimeModal.vue
@@ -0,0 +1,91 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-6.pt-6
+    .table-time.flex.p-4
+      .flex.flex-col.gap-1(v-for="time in timeCoil")
+        .flex {{ time }}
+        .side.flex.p-1.h-9(:style="{columnGap: '2px'}")
+          q-btn.left-side(size="9px", padding="0 8px", color="primary")
+            q-icon(name="app:icon-ok")
+          q-btn.right-side(size="4px", padding="0 4px")
+            img(:src="lockIcon")
+    .flex.justify-between.items-center
+      .flex.gap-2
+        q-btn(
+          color="primary",
+          outline,
+          size="16px",
+          no-caps,
+          label="Отмена",
+          :style="{width: '108px', height: '40px'}",
+          padding="0",
+          @click="closeModalTime"
+        )
+        q-btn(
+          color="primary",
+          size="16px",
+          no-caps,
+          label="Сохранить"
+          :style="{width: '132px', height: '40px'}",
+          padding="0",
+          @click="closeModalTime"
+        )
+      .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
+</template>
+
+<script>
+import lockIcon from "@/assets/icons/locked.svg";
+
+export default {
+  name: "BaseTimeModal",
+  props: { times: Object, closeModalTime: Function },
+  data() {
+    return { lockIcon, select: false };
+  },
+  computed: {
+    validateStartTime() {
+      return this.verifyTime("8:00");
+    },
+    validateEndTime() {
+      return this.verifyTime("19:00");
+    },
+    timeCoil() {
+      let time = [];
+      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+        time.push(`${i}:00`);
+      }
+      return time;
+    },
+  },
+  methods: {
+    verifyTime(dayTime) {
+      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
+      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
+      return newTime;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.table-time
+  width: 463px
+  height: 174px
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 6px
+  flex-wrap: wrap !important
+
+.text
+  color: var(--font-dark-blue-color)
+
+.side
+  border-left: 1px solid var(--border-light-grey-color)
+  border-right: 1px solid var(--border-light-grey-color)
+
+.left-side
+  border-radius: 6px 1px 1px 6px
+  background: #4772F2
+
+.right-side
+  border-radius: 1px 6px 6px 1px
+  background: #FF6565
+</style>