Merge branch 'ASTRA-143' into 'master'

Resolve ASTRA-143

See merge request andrusyakka/urban-couscous!497

src/assets/sass/variables.sass

@@ -96,4 +96,6 @@
   --system-color-red: #f34549
   --system-color-green: #21ba72
   --gray-background: #e9e9ed
+  --aqua-color: #2cc3e5
+  --system-color-yellow: #ffB931
 

src/components/base/BaseModal.vue

@@ -6,7 +6,7 @@
     ref="dialog"
   )
     .base-content(
-      :class="{'draggable': draggable, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}",
+      :class="{'draggable': draggable, 'none-padding': nonePadding, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}",
       ref="contentRef",
       :style="{...contentStyles, height}"
     )
@@ -29,6 +29,7 @@ export default {
     showCloseIcon: Boolean,
     draggable: Boolean,
     hideOverlay: Boolean,
+    nonePadding: Boolean,
     defaultPadding: Boolean,
     modalPadding: Boolean,
     hideHeader: Boolean,
@@ -139,6 +140,9 @@ export default {
 .base-modal-default
   padding: 28px 32px
 
+.none-padding
+  padding: 0px
+
 .base-content
   overflow: hidden
   width: auto

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -39,13 +39,18 @@
     .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
+        .name.flex.rounded-md.flex-col(@click="showMedcard")
-          .photo.flex.h-10.w-10.items-center.justify-center
+          .flex.items-center.px-4.py-2.gap-x-2(:class="{'medcard': patient}")
-            img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
+            .photo.flex.h-10.w-10.items-center.justify-center
-            q-icon.icon(v-else, name="app:noname", size="24px")
+              img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
-          .flex.flex-col.font-medium
+              q-icon.icon(v-else, name="app:noname", size="24px")
-            .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
+            .flex.flex-col.font-medium.gap-y-2px
-            .grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}}
+              .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
+              .grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}}
+          .indicator-default.flex.w-full.h-1
+            .indicator.flex.h-1(:style="{width: patient ? patient.fill : '0%'}")
+        base-modal(v-model="isShowMedcard", none-padding)
+          medcard-modal(:data="patient")
         .change.flex.items-center.rounded-md
           q-btn(dense, padding="18px 4px", @click="isShowMedcards = true")
             q-icon.icon(name="app:folder", size="20px")
@@ -68,6 +73,7 @@ import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import * as moment from "moment/moment";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { v_model } from "@/shared/mixins/v-model";
+import MedcardModal from "./MedcardModal.vue";
 
 export default {
   name: "HeaderRecordForm",
@@ -77,6 +83,7 @@ export default {
     BaseModal,
     BaseTimeModal,
     MedcardsModal,
+    MedcardModal,
   },
   mixins: [v_model],
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
@@ -86,6 +93,7 @@ export default {
       currentDate: moment().clone(),
       isShowTime: false,
       isShowMedcards: false,
+      isShowMedcard: false,
       patients: patientList.find(({ id }) => id === 2).data,
       times: "",
       data: [
@@ -119,6 +127,9 @@ export default {
     },
   },
   methods: {
+    fixedFill(fill) {
+      return 100 - fill.slice(0, -1) + "%";
+    },
     closeModalMedcards() {
       this.isShowMedcards = false;
     },
@@ -126,6 +137,9 @@ export default {
       this.isShowMedcards = false;
       this.patient = medcard;
     },
+    showMedcard() {
+      if (this.patient) this.isShowMedcard = true;
+    },
     validateTimeString(value = "") {
       const [start = "", end = ""] = value.split(" - ");
       this.validateTime(start);
@@ -167,6 +181,7 @@ export default {
 .change
   background: var(--bg-light-grey)
   color: var(--font-grey-color)
+  border: 1px solid var(--gray-secondary)
 
 .status
   width: 160px
@@ -180,16 +195,28 @@ export default {
   color: var(--font-grey-color)
   width: 76px
 
+.medcard
+  cursor: pointer
+  &:hover
+    background: var(--gray-secondary)
+
 .name
-  background: var(--bg-light-grey)
+  background: var(--default-white)
-  border-bottom-color: var(--border-light-grey-color)
-  border-bottom-width: 4px
   width: 200px
+  border: 1px solid var(--gray-secondary)
 
 .photo
   background: var(--border-light-grey-color)
   border-radius: 50%
 
+.indicator-default
+  background: var(--gray-secondary)
+  border-end-end-radius: 4px
+
+.indicator
+  background: var(--aqua-color)
+  border-end-start-radius: 4px
+
 .grey-color
   color: var(--font-grey-color)
 </style>

src/pages/newCalendar/components/MedcardModal.vue

@@ -0,0 +1,156 @@
+<template lang="pug">
+  .wrapper.flex.font-medium.flex-col.text-smm
+    .header.flex.flex-col.gap-y-6
+      .grey-color.text-smm.font-semibol {{"Медицинская карта: " + data.medicalNumber}}
+      .flex.gap-x-4.w-full
+        img.h-20.w-20.rounded-full(:src="data?.avatar")
+        .flex.items-center.justify-between.w-full
+          .info.flex.flex-col.gap-y-2
+            .text-5xl.font-bold {{data.last_name + " " + data.first_name + " " + data.patronymic}}
+            .flex.flex-col.text-m
+              span {{data.birthday}}
+              .flex.gap-x-2.items-center
+                span Приоритет:
+                .white-color.flex.grey-color.rounded.items-center.px-3.h-6.w-fit(
+                  :class="selectedPriority"
+                ) {{selectedPriorityName}}
+          .circle.flex.rounded-full.items-center.justify-center(
+            :style="{background: choiceFill(data.fill)}"
+          )
+            .flex.flex-col.items-center
+              .text-5xl.font-bold {{data.fill}}
+              .grey-color.text-xsx Заполнено
+    .body.flex.px-8.py-6.flex-col.gap-y-4
+      .flex.gap-x-4.items-center
+        .title.flex.text-m.grey-color Соцсети:
+        .wrap.flex.gap-1
+          .network.flex.h-7.items-center.gap-x-2.cursor-pointer(
+            v-for="network in data.networks"
+          )
+            q-icon.blue-fill(:name="network.icon", size="24px")
+            span {{network.name}}
+      .flex.gap-x-4.items-center
+        .title.flex.text-m.grey-color Телефон:
+        .flex {{data?.phone}}
+      .flex.gap-x-4.items-center
+        .title.flex.text-m.grey-color Email:
+        .flex {{data?.email}}
+      .flex.gap-x-4.items-center
+        .title.flex.text-m.grey-color Страхование:
+        .flex.gap-x-2.items-center
+          span {{data?.company}}
+          .policy.flex.items-center.gap-x-2.pl-3.pr-2.h-7
+            span {{data?.policy}}
+            q-icon.cursor-pointer.grey-fill(
+              @click="copyValue(data.policy)",
+              name="app:copy", size="18px"
+            )
+      .flex.gap-x-4.items-center
+        .title.flex.text-m.grey-color Особые отметки:
+        .wrap.flex.gap-x-1.gap-y-1
+          .flex.h-7.w-fit.items-center.px-3.rounded(
+            v-for="mark in data.marks", :style="{background: mark.color}"
+          ) {{mark.name}}
+    .footer.flex
+</template>
+
+<script>
+export default {
+  name: "MedcardModal",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      priorities: [
+        { id: 0, color: "none-priority", name: "Без приоритета" },
+        { id: 1, color: "red-color", name: "Высокий" },
+        { id: 2, color: "yellow-color", name: "Средний" },
+        { id: 3, color: "green-color", name: "Низкий" },
+      ],
+      information: [
+        { title: "Соцсети: ", data: [] },
+        { title: "Телефон: ", data: [] },
+        { title: "Email: ", data: [] },
+        { title: "Страхование: ", data: [] },
+        { title: "Особые отметки: ", data: [] },
+      ],
+    };
+  },
+  computed: {
+    selectedPriority() {
+      return this.priorities.find((e) => e.id === this.data.priority).color;
+    },
+    selectedPriorityName() {
+      return this.priorities.find((e) => e.id === this.data.priority).name;
+    },
+  },
+  methods: {
+    choiceFill(fill) {
+      return `radial-gradient(closest-side, white 45px, transparent 80% 100%), conic-gradient(var(--aqua-color) ${fill}, var(--gray-secondary) 0%)`;
+    },
+    copyValue(policy) {
+      navigator.clipboard.writeText(policy);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 744px
+  color: var(--font-dark-blue-color)
+
+.header
+  border-bottom: 1px solid var(--gray-secondary)
+  padding: 16px 32px 25px 33px
+
+.info
+  max-width: 424px
+
+.circle
+  width: 100px
+  height: 100px
+
+.title
+  width: 132px
+
+.policy
+  border-radius: 4px
+  border: 1px solid var(--gray-scondary)
+  background: var(--gray-thirdly)
+
+.network
+  padding: 8px 8px 8px 2px
+  border-radius: 28px
+  border: 1px solid var(--gray-secondary)
+  &:hover
+    background: var(--gray-secondary)
+
+.wrap
+  flex-wrap: wrap !important
+
+.none-priority
+  background: var(--font-grey-color)
+
+.red-color
+  background: var(--system-color-red)
+
+.yellow-color
+  background: var(--system-color-yellow)
+
+.green-color
+  background: var(--system-color-green)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.white-color
+  color: var(--default-white)
+
+.grey-fill :deep(path)
+  fill: var(--font-grey-color)
+
+.blue-fill :deep(path)
+  fill: var(--btn-blue-color)
+</style>

src/pages/newCalendar/components/MedcardsModal.vue

@@ -17,18 +17,18 @@
           :class="sortingClass"
         )
           calendar-sidebar-svg(name-svg="sort", :active="sort")
-      .medcards-wrapper.flex.flex-col.overflow-auto
+      .medcards-wrapper.flex.flex-col.overflow-auto.w-full
         .medcard.flex.items-center.cursor-pointer(
           v-for="patient in patients",
           @click="selectMedcard(patient)"
         )
-          .flex.justify-between.w-full.items-center
+          .name.flex.justify-between.w-full.items-center.h-14
             .info-block.flex.justify-between.gap-x-2
               img.h-10.w-10.object-cover.rounded-full(:src="patient.avatar")
               .flex.flex-col.gap-y-1
                 .text-m {{trimPatientName(patient.last_name, patient.first_name, patient.patronymic)}}
                 .grey-color.text-smm {{patient.birthday}}
-            q-icon.ok-icon(name="app:ok", v-if="patient.check" size="24px")
+            q-icon.ok-icon(name="app:ok", v-if="patient.check", size="24px")
     .footer.flex.gap-2
       base-button(type="secondary", label="Отменить", width="125px", @click="closeMedcards")
       base-button(
@@ -98,17 +98,22 @@ export default {
 .search :deep(.q-field__prepend)
   padding-right: 4px
 
+.name
+  margin: 4px 0px
+  &:hover
+    border-radius: 4px
+    background: var(--gray-thirdly)
+
 .medcard
   height: 64px
   margin-right: 14px
   border-bottom: 1px solid var(--gray-secondary)
   &:last-child
     border-bottom: none
-  &:hover
+
-    border-radius: 4px
-    background: var(--gray-thirdly)
 
 .medcards-wrapper
+  width: 440px
   max-height: 563px
   margin-right: -18px
   &::-webkit-scrollbar

src/pages/newCalendar/utils/calendarConfig.js

@@ -111,6 +111,7 @@ export const patientList = [
         patronymic: "Александрович",
         birthday: "28.03.1980",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -121,6 +122,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "33%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 1,
@@ -129,6 +152,7 @@ export const patientList = [
         patronymic: "Олегович",
         birthday: "01.03.1975",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -139,6 +163,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "20%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 2,
@@ -147,6 +193,7 @@ export const patientList = [
         patronymic: "Васильевич",
         birthday: "13.07.1999",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -157,6 +204,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 3,
@@ -165,6 +234,7 @@ export const patientList = [
         patronymic: "Робертович",
         birthday: "11.11.1991",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -175,6 +245,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 4,
@@ -183,6 +275,7 @@ export const patientList = [
         patronymic: "Алексеевич",
         birthday: "12.03.1989",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -193,6 +286,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 5,
@@ -201,6 +316,7 @@ export const patientList = [
         patronymic: "Васильевич",
         birthday: "31.07.1949",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -211,6 +327,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 6,
@@ -219,6 +357,7 @@ export const patientList = [
         patronymic: "Олеговна",
         birthday: "12.11.1995",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -229,6 +368,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 7,
@@ -237,6 +398,7 @@ export const patientList = [
         patronymic: "Алексеевич",
         birthday: "15.05.1989",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -247,6 +409,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 8,
@@ -255,6 +439,7 @@ export const patientList = [
         patronymic: "Васильевич",
         birthday: "13.07.2000",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -265,6 +450,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 9,
@@ -273,6 +480,7 @@ export const patientList = [
         patronymic: "Федорович",
         birthday: "12.12.1986",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -283,6 +491,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
       {
         id: 10,
@@ -291,6 +521,7 @@ export const patientList = [
         patronymic: "Алексеевич",
         birthday: "13.03.1979",
         avatar: personImage,
+        medicalNumber: "#12314",
         check: false,
         view: false,
         viewDate: "",
@@ -301,6 +532,28 @@ export const patientList = [
         email: "gaevaia@yandex.ru",
         company: "ООО «АльфаСтрахование»",
         policy: "№ 2131-1331-4142",
+        fill: "50%",
+        marks: [
+          {
+            id: 0,
+            name: "Неправильный прикус",
+            color: "#D8E3FF",
+          },
+          {
+            id: 1,
+            name: "Нервозность",
+            color: "#CEF1F3",
+          },
+          {
+            id: 2,
+            name: "Парадантит",
+            color: "#EBDBFF",
+          },
+        ],
+        networks: [
+          { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" },
+          { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" },
+        ],
       },
     ],
     choice: false,

tailwind.config.js

@@ -58,6 +58,7 @@ module.exports = {
         "19px": "19px",
         "22px": "22px",
         "23px": "23px",
+        "25px": "25px",
         "27px": "27px",
         "29_25px": "29.25px",
         "30px": "30px",