Merge branch 'ASTRA-108' into 'master'

Resolve ASTRA-108

See merge request andrusyakka/urban-couscous!428

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>

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -1,76 +1,32 @@
 <template lang="pug">
   .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
-    .flex.gap-x-10
+    header-record-form(
-      .flex.flex-col.gap-y-4.text-smm
+      :current-status="currentStatus",
-        .flex.gap-x-3.items-center
+      :statuses="patientData.statuses",
-          .text.font-semibold Статус
+      :choice-status="choiceStatus"
-          .flex.gap-x-1
-            .input.flex.items-center.pl-4.gap-x-1
-              img(:src="currentStatus.icon")
-              .text-input.font-medium {{currentStatus.name}}
-            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
-              img(:src="folder")
-              q-menu
-                .status.flex.items-center.gap-x-1.font-medium.text-smm(
-                  v-for="status in patientData.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
-              .text-input.font-medium {{currentDate.format("DD MMMM YYYY")}}
-            q-btn.change.flex.w-7.h-7(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
-              .text-input.font-medium 13:00 - 14:00
-            q-btn.change.flex.w-7.h-7(@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
-            .photo.flex.h-10.w-10.items-center.justify-center
-              img(:src="noname")
-            .flex.flex-col.font-medium
-              .text-input Имя Фамилия
-              .name-date.text-xsx Дата
-          .change.flex.items-center
-            q-btn(dense, padding="24px 8px")
-              q-icon(name="app:icon-plus", size="12px")
     .flex.items-center.gap-x-3.text-smm
       .text.font-semibold Услуги:
       .flex.gap-x-1
-        .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9(
+        .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9.rounded-md(
           :class="{'other-serivices': services.length}"
+        )
+          .service.flex.gap-x-1.items-center.rounded.relative(
+            :style="{ width: otherColor ? '415px' : 'full'}"
           )
             span(v-if="!services.length") Выберите услуги
-          .service.flex.px-4.items-center(
+            .dark-blue.flex.px-4.items-center.rounded.h-7(
-            id="miDuv",
+              id="service",
               v-else,
               v-for="service in services",
-            :style="{background: service.color, display: service.id <=2 ? 'flex' : 'none'}"
+              :style="{background: service.color}"
             ) {{service.name}}
-          .other.flex.h-7.items-center.justify-center(
+            .gradient.flex.absolute(
-            v-if="services.length > 3"
+              :style="{background: `linear-gradient(270deg, ${otherColor} 0%, rgba(247, 217, 255, 0) 100%)`}"
-          ) {{`+${services.length - 3}`}}
+            )
-        .price.flex.items-center.items-center.justify-center(v-if="services.length") {{sumService}}
+          .other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
-        q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+        .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")
     base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
@@ -117,13 +73,9 @@
 </template>
 
 <script>
+import folder from "@/assets/icons/folder.svg";
 import { column } from "@/pages/clients/utils/tableConfig";
 import { v_model } from "@/shared/mixins/v-model";
-import BaseModal from "@/components/base/BaseModal.vue";
-import noname from "@/assets/icons/noname.svg";
-import folder from "@/assets/icons/folder.svg";
-import time from "@/assets/icons/time.svg";
-import calendar from "@/assets/icons/calendar-grey.svg";
 import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
 import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
@@ -132,13 +84,11 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
 import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import BaseCalendar from "@/components/base/BaseCalendar.vue";
-import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
+import HeaderRecordForm from "./HeaderRecordForm.vue";
-import * as moment from "moment/moment";
 
 export default {
   name: "RecordCreationForm",
   components: {
-    BaseModal,
     FormCreateBasicInfo,
     FormCreateIdentityDocuments,
     FormCreateAddresses,
@@ -146,25 +96,26 @@ export default {
     BaseInput,
     BaseInputFullName,
     BaseCalendar,
-    BaseTimeModal,
+    HeaderRecordForm,
   },
   props: { isShowForm: Boolean, closeForm: Function },
   mixins: [v_model],
   data() {
     return {
-      noname,
       folder,
-      time,
-      calendar,
       isPhoto: false,
       patientData: patientData,
       currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
-      currentDate: moment().clone(),
-      isShowTime: false,
-      times: { from: "8:30", to: "10:30" },
       services: [
         { id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
         { id: 1, name: "Осмотр", price: 1300, color: "#FFF0CA" },
+        {
+          id: 2,
+          name: "Лечение",
+          price: 500,
+          color: "#F7D9FF",
+        },
+        { id: 3, name: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
       ],
       forms: [
         {
@@ -190,6 +141,8 @@ export default {
       ],
       currentForm: "form-create-basic-info",
       networksSettings: column.find((el) => el.name === "networks")?.settings,
+      otherColor: null,
+      otherServices: [],
     };
   },
   computed: {
@@ -236,24 +189,28 @@ export default {
     choiceStatus(e) {
       this.currentStatus = e;
     },
-    closeModalTime() {
+    addShadow() {
-      this.isShowTime = false;
+      let defaultWidth = 415;
+      const target = document.querySelectorAll("#service");
+      target.forEach((e) => {
+        defaultWidth = defaultWidth - e.offsetWidth;
+        if (defaultWidth <= 10) return this.otherServices.push(e);
+      });
+      this.otherColor = this.otherServices[0]?.__vnode?.props?.style.background;
     },
   },
+  mounted() {
+    this.addShadow();
+  },
 };
 </script>
 
 <style lang="sass" scoped>
-.input
-  width: 200px
-  background: var(--bg-light-grey)
-  border-radius: 6px
 
-.text-input
+
+.dark-blue
   color: var(--font-dark-blue-color)
-
+  min-width: 50px
-.name-date
-  color: var(--font-grey-color)
 
 .text
   color: var(--font-grey-color)
@@ -261,47 +218,36 @@ export default {
 
 .change
   background: var(--bg-light-grey)
-  border-radius: 6px
   color: var(--font-grey-color)
 
-.name
-  background: var(--bg-light-grey)
-  border-radius: 6px
-  border-bottom-color: var(--border-light-grey-color)
-  border-bottom-width: 4px
-  width: 200px
-
-.photo
-  background: var(--border-light-grey-color)
-  border-radius: 50%
-
 .services
   background: var(--bg-light-grey)
   color: var(--font-grey-color)
-  border-radius: 6px
   width: 560px
 
 .service
-  color: var(--font-dark-blue-color)
+  display: -webkit-box
-  border-radius: 4px
+  overflow: hidden
+
+.gradient
+  width: 10%
   height: 28px
+  right: 0
 
 .other-serivices
   width: 474px
   padding: 4px
-  border: 1px solid #D3D4DC
+  border: 1px solid var(--border-light-grey-color)
   background: var(--default-white)
 
 .other
   width: 46px
-  height: 28px
   background: var(--bg-light-grey)
 
 .price
   background: var(--bg-light-grey)
-  border-radius: 6px
   width: 82px
-  color: #9294A7
+  color: var(--font-grey-color)
 
 .title-info
   color: var(--font-grey-color)
@@ -317,12 +263,4 @@ export default {
   border-top: 1px solid var(--border-light-grey-color)
   margin: 40px -32px 0px
   padding: 16px 32px 0px 32px
-
-.status
-  border-radius: 4px
-  height: 28px
-  padding: 8px 8px 8px 5px
-  &:hover
-    background: var(--bg-light-grey)
-    cursor: pointer
 </style>