Merge branch 'master' of https://gitlab.dopcore.com/andrusyakka/urban-couscous

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,28 +38,25 @@
           .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")
+            base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
     .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")
+            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,13 +68,20 @@ export default {
   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" },
+      data: [
+        {
+          start: "8:00",
+          end: "8:30",
+        },
+        {
+          start: "11:30",
+          end: "12:00",
+        },
+      ],
     };
   },
   methods: {
@@ -90,7 +95,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 +109,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

src/pages/newCalendar/components/ServicesModal.vue

@@ -0,0 +1,221 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
+    .flex.flex-col.gap-y-4
+      base-input.search(
+        placeholder="Поиск",
+        :width="422",
+        iconLeft
+        size="M"
+      )
+        template(v-slot:iconLeft)
+          q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+      .flex.gap-x-2
+        base-button(
+          @click="choiceService(item.name)",
+          v-for="item in baseServices",
+          size="S",
+          width="100px",
+          type="grey"
+        ) {{item.name}}
+      template(v-for="item in baseServices")
+        .serice-wrapper.flex.flex-col(v-if="item.check")
+          .service.flex.items-center(v-for="serve in item.data")
+            q-checkbox(v-model="serve.checked")
+            .info-block.flex.justify-between.w-full
+              .flex.flex-col.gap-y-1
+                .text-m {{serve.title}}
+                .grey-color.text-smm {{item.name}}
+              .flex.flex-col.gap-y-1
+                .text-m.font-bold {{serve.price}}
+                .grey-color.text-smm {{serve.time}}
+    .footer.flex.gap-2
+      base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
+      base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+
+export default {
+  name: "SevicesModal",
+  components: { BaseInput, BaseButton },
+  props: {
+    closeServices: Function,
+  },
+  data() {
+    return {
+      baseServices: [
+        {
+          name: "Терапия",
+          check: true,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "3 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "5 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "50 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "3 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "5 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "50 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Хирургия",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Ортопедия  ",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Ортодонтия",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    choiceService(name) {
+      this.baseServices.forEach((e) => {
+        e.check = false;
+        if (e.name === name) e.check = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 422px
+
+.search :deep(path)
+  fill: var(--font-grey-color)
+
+.search :deep(.q-field__prepend)
+  padding-right: 4px
+
+.base-service
+  border-radius: 4px
+  border: 1px solid var(--gray-secondary)
+  background: var(--gray-thirdly)
+
+.serice-wrapper
+  overflow: auto
+  max-height: 546px
+  margin-right: -18px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 16px
+
+.service
+  height: 67px
+  margin-right: 14px
+  &:last-child .info-block
+    border-bottom: none
+
+.info-block
+  padding: 11px 0px
+  border-bottom: 1px solid var(--gray-secondary)
+
+.footer
+  border-top: 1px solid var(--gray-secondary)
+  margin: 0px -32px -12px
+  padding: 16px 32px 0px 32px
+
+.dark-blue
+  color: var(--font-dark-blue-color)
+
+.grey-color
+  color: var(--font-grey-color)
+</style>

src/pages/newCalendar/components/del_RecordCreationForm copy.vue

@@ -26,8 +26,10 @@
             )
           .other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
         .price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
-        q-btn.change.flex.w-7.h-9.rounded-md(dense, padding="4px 4px")
-          img(:src="folder")
+        q-btn.change.flex.w-7.h-9.rounded-md(@click="isShowServices = true", dense, padding="4px 4px")
+          q-icon.icon(name="app:folder", size="20px")
+        base-modal(v-model="isShowServices", title="Услуги", modal-padding)
+          services-modal(:close-services="closeServices")
     base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex
@@ -68,6 +70,8 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import ServicesModal from "./ServicesModal.vue";
 
 export default {
   name: "RecordCreationForm",
@@ -80,6 +84,8 @@ export default {
     BaseCalendar,
     HeaderRecordForm,
     BaseButton,
+    BaseModal,
+    ServicesModal,
   },
   props: { isShowForm: Boolean, closeForm: Function },
   mixins: [v_model],
@@ -126,6 +132,7 @@ export default {
       networksSettings: column.find((el) => el.name === "networks")?.settings,
       otherColor: null,
       otherServices: [],
+      isShowServices: false,
     };
   },
   computed: {
@@ -181,6 +188,9 @@ export default {
       });
       this.otherColor = this.otherServices[0]?.style.background;
     },
+    closeServices() {
+      this.isShowServices = false;
+    },
   },
   mounted() {
     this.addShadow();
@@ -244,4 +254,7 @@ export default {
   border-top: 1px solid var(--border-light-grey-color)
   margin: 40px -32px 0px
   padding: 16px 32px 0px 32px
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
 </style>