From 16f2394eec0b5e7a997c319df1d0306ed405ec0d Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 31 Jul 2023 11:49:36 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=20=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B7=D0=B0=D0=BF=D0=B8=D1=81=D0=B8,=20?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D0=BF=D0=B0=D1=86=D0=B8=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=B4=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseTimeModal.vue         | 44 ++++++++++--------
 .../components/HeaderRecordForm.vue           | 46 +++++++++----------
 src/pages/newCalendar/utils/calendarConfig.js | 26 +++++------
 3 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/src/components/base/BaseTimeModal.vue b/src/components/base/BaseTimeModal.vue
index 089e4b6..7ac954c 100644
--- a/src/components/base/BaseTimeModal.vue
+++ b/src/components/base/BaseTimeModal.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6
+  .flex.flex-col.gap-y-6.pt-6.dark-blue
     .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")
+      .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
+        .timeline.flex.text-smm.font-medium {{time}}
+        .side.flex.p-1.h-9
+          q-btn.plus-btn(size="9px", padding="0 8px")
+            q-icon.icon-grey(name="app:plus", size="20px")
+          q-btn.lock-btn(size="4px", padding="0 4px")
+            q-icon.icon(name="app:lock", size="20px")
     .flex.justify-between.items-center
       .flex.gap-2
         base-button(
@@ -21,11 +21,10 @@
           label="Сохранить",
           @click="closeModalTime"
         )
-      .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
+      .dark-blue.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
 </template>
 
 <script>
-import lockIcon from "@/assets/icons/locked.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
@@ -33,7 +32,7 @@ export default {
   props: { times: Object, closeModalTime: Function },
   components: { BaseButton },
   data() {
-    return { lockIcon, select: false };
+    return { select: false };
   },
   computed: {
     validateStartTime() {
@@ -64,22 +63,29 @@ export default {
 .table-time
   width: 463px
   height: 174px
-  border: 1px solid var(--border-light-grey-color)
   border-radius: 6px
   flex-wrap: wrap !important
+  border: 1px solid var(--gray-secondary)
 
-.text
+.dark-blue
   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)
+  border-left: 1px solid var(--font-dark-blue-color)
+  margin-left: 16px
+  margin-bottom: 24px
 
-.left-side
+.plus-btn
   border-radius: 6px 1px 1px 6px
-  background: #4772F2
+  border: 1px solid var(--gray-secondary)
 
-.right-side
+.lock-btn
   border-radius: 1px 6px 6px 1px
-  background: #FF6565
+  border: 1px solid var(--gray-secondary)
+
+.icon :deep(path)
+  fill: var(--system-color-red)
+
+.icon-grey :deep(path)
+  fill: var(--font-grey-color)
 </style>
diff --git a/src/pages/newCalendar/components/HeaderRecordForm.vue b/src/pages/newCalendar/components/HeaderRecordForm.vue
index 51fa07e..483691f 100644
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/src/pages/newCalendar/components/HeaderRecordForm.vue
@@ -2,28 +2,29 @@
   .flex.gap-x-10
     .flex.flex-col.gap-y-4.text-smm
       .flex.gap-x-3.items-center
-        .text.font-semibold Статус
+        .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}}
+            q-icon.icon(name="app:folder", size="20px")
+            q-menu(:offset="[140, 8]")
+              .flex.p-2.flex-col
+                .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-icon.icon(name="app:calendar", size="20px")
             q-menu(
               transition-show="scale",
               transition-hide="scale",
@@ -37,7 +38,7 @@
           .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")
+            q-icon.icon(name="app:time", size="20px")
           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
@@ -45,20 +46,17 @@
       .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")
+            q-icon.icon(name="app:noname", size="24px")
           .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")
+          q-btn(dense, padding="18px 4px")
+            q-icon.icon(name="app:folder", size="20px")
 </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/Calendar/BaseCalendar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
@@ -70,9 +68,6 @@ export default {
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
-      folder,
-      calendar,
-      time,
       noname,
       currentDate: moment().clone(),
       isShowTime: false,
@@ -90,7 +85,10 @@ export default {
 <style lang="sass" scoped>
 .input
   width: 200px
-  background: var(--bg-light-grey)
+  border: 1px solid var(--gray-secondary)
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
 
 .dark-blue
   color: var(--font-dark-blue-color)
@@ -101,7 +99,9 @@ export default {
   color: var(--font-grey-color)
 
 .status
-  padding: 8px 8px 8px 5px
+  width: 160px
+  height: 40px
+  padding: 8px 10px
   &:hover
     background: var(--bg-light-grey)
     cursor: pointer
diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js
index e6747ce..d17e607 100644
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -114,8 +114,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "11:00", to: "12:00" },
+        reception: "31.07.2023",
+        time: { from: "12:00", to: "13:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -132,8 +132,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "12:00", to: "13:00" },
+        reception: "31.07.2023",
+        time: { from: "13:00", to: "14:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -150,8 +150,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "13:00", to: "14:00" },
+        reception: "31.07.2023",
+        time: { from: "14:00", to: "15:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -168,8 +168,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "14:00", to: "16:00" },
+        reception: "31.07.2023",
+        time: { from: "15:00", to: "17:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -186,8 +186,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "16:00", to: "20:00" },
+        reception: "31.07.2023",
+        time: { from: "17:00", to: "20:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -199,13 +199,13 @@ export const patientList = [
         first_name: "Анатолий",
         last_name: "Петров",
         patronymic: "Васильевич",
-        birthday: "23.07.1949",
+        birthday: "31.07.1949",
         avatar: personImage,
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "18:00", to: "19:00" },
+        reception: "31.07.2023",
+        time: { from: "10:00", to: "12:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",