diff --git a/src/assets/icons/not_accepted.svg b/src/assets/icons/not_accepted.svg
new file mode 100644
index 0000000..43c9351
--- /dev/null
+++ b/src/assets/icons/not_accepted.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/status_accepted.svg b/src/assets/icons/status_accepted.svg
index accc53a..86281ad 100644
--- a/src/assets/icons/status_accepted.svg
+++ b/src/assets/icons/status_accepted.svg
@@ -1,4 +1,5 @@
diff --git a/src/assets/icons/status_reception.svg b/src/assets/icons/status_reception.svg
index 7f50989..c62eff9 100644
--- a/src/assets/icons/status_reception.svg
+++ b/src/assets/icons/status_reception.svg
@@ -1,5 +1,5 @@
diff --git a/src/assets/icons/status_rejected.svg b/src/assets/icons/status_rejected.svg
index 00bb1ba..c2e5a83 100644
--- a/src/assets/icons/status_rejected.svg
+++ b/src/assets/icons/status_rejected.svg
@@ -1,4 +1,5 @@
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 90a1ba5..3ac4b5d 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -91,4 +91,6 @@
--bg-chip-yellow-color: #fff0ca
--bg-chip-pink-color: #F7D9FF
--gray-thirdly: #f4f4f6
+ --surface-blue-big: #ECF0FE
+ --gray-scondary:#DDDDE8
diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
index 74bfbe9..3715ec9 100644
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -1,7 +1,7 @@
.sidebar-wrapper.flex.flex-col.gap-y-1
.form.flex.items-center.justify-end.py-4.pr-4.rounded-t
- q-btn.rotate-180(
+ q-btn.rotate-180.button-open(
@click="openSidebar(); hideSidebar()",
dense,
padding="8px",
@@ -55,17 +55,22 @@
)
q-btn.ml-2(
@click="sortPerson(elem.data)",
- icon="app:sort-number",
:class="sortingClass",
:style="{width: '32px', height: '32px'}",
padding="0"
)
- .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+ calendar-sidebar-svg(name-svg="sort", :active="sort")
+ .flex.items-center.justify-between.font-medium.text-smm.h-55.py-2.cursor-pointer(
@click="checkAll(elem.data)"
)
- .flex.items-center.h-6 Все
+ .flex.items-center.gap-x-2
+ .all-icon.flex.items-center.justify-center
+ calendar-sidebar-svg.p-6px(name-svg="group", active)
+ .flex.flex-col.font-medium
+ .text-smm Все
+ .grey-color.text.text-xsx {{ elem.data?.length + " пациентов" }}
img(v-if="selectAll(elem.data)", :src="icon_ok")
- .person-wrapper.flex.flex-col
+ .person-wrapper.flex.flex-col(@scroll="scrollTo", id="persons")
.person.items-center.flex.justify-between.py-2.cursor-pointer(
v-for="(person, index) in choiceData(elem.data)",
@click="checkPerson(index, elem.data)"
@@ -76,6 +81,7 @@
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
.grey-color.text-xsx {{person.birthday}}
img.h-6.w-6(v-if="person.check", :src="icon_ok")
+ .gradient.flex.absolute(v-if="isGradient")
@@ -201,11 +229,28 @@ export default {
.expansion :deep(.q-item__section--side)
color: var(--font-dark-blue-color)
+.expansion :deep(.q-icon)
+ font-size: 20px
+
+.button-open
+ border: 1px solid var(--gray-scondary)
+ color: var(--font-grey-color)
+ background: var(--bg-light-grey)
+
.select
padding-bottom: 2px
&:last-child
padding-bottom: 16px
+.h-55
+ height: 55px
+
+.all-icon
+ height: 40px
+ width: 40px
+ border-radius: 50%
+ background: var(--surface-blue-big)
+
.status
border-radius: 4px
height: 28px
@@ -267,8 +312,8 @@ export default {
margin-bottom: 26px
.person
- height: 56px
- width: calc(100% - 10px)
+ height: 55px
+ width: calc(100% - 6px)
border-bottom: 1px solid var(--bg-light-grey)
&:first-child
border-top: 1px solid var(--bg-light-grey)
@@ -298,4 +343,11 @@ export default {
.input :deep(.q-field__append)
padding-left: 6px
+
+.gradient
+ width: 232px
+ height: 44px
+ right: 0px
+ bottom: 0px
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
diff --git a/src/pages/newCalendar/components/CalendarSidebar.vue b/src/pages/newCalendar/components/CalendarSidebar.vue
index f7c8489..588844d 100644
--- a/src/pages/newCalendar/components/CalendarSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarSidebar.vue
@@ -1,11 +1,10 @@
- .sidebar.flex.flex-col.gap-y-1
+ .sidebar.flex.flex-col.gap-y-px
.button.flex.rounded-t
- q-btn(
+ q-btn.button-open(
@click="openSidebar",
dense,
- padding="8px",
- style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+ padding="8px"
)
img(:src="arrow")
.button.flex
@@ -34,10 +33,10 @@
self="top right",
:style="{'margin-left': '8px !important'}"
)
- .status-wrapper.flex.flex-col.gap-y-4.p-4
- .font-bold.text-xm {{svg.text}}
- .flex.flex-col.gap-2px
- .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+ .modal-wrapper.flex.flex-col.gap-y-2
+ .font-bold.text-xm.px-2 {{svg.text}}
+ .flex.flex-col
+ .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7.px-2(
v-for="status in patientData.statuses"
)
img(:src="status.icon")
@@ -48,10 +47,10 @@
self="top right",
:style="{'margin-left': '8px !important'}"
)
- .fill-wrapper.flex.flex-col.gap-y-4.p-4
- .font-bold.text-xm {{svg.text}}
- .flex.flex-col.gap-2px
- .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+ .modal-wrapper.flex.flex-col.gap-y-2
+ .font-bold.text-xm.px-2 {{svg.text}}
+ .flex.flex-col
+ .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7.px-2(
v-for="medical in medicalData"
)
img(:src="medical.icon")
@@ -88,19 +87,25 @@
style="color: var(--font-grey-color)"
)
q-btn.ml-2(
- icon="app:sort-number",
@click="sortPerson(patientsData)",
- :style="{width: '32px', height: '32px'}",
+ :style="{width: '32px', height: '32px', border: '1px solid var(--gray-scondary)'}",
padding="0",
:class="sortingClass"
)
- .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
- @click="checkAll(patientsData)"
+ calendar-sidebar-svg(name-svg="sort", :active="sort")
+ .flex.items-center.justify-between.font-medium.text-smm.h-55.py-2.cursor-pointer(
+ @click="checkAll(patientsData)",
+ v-if="!foundPerson"
)
- .flex.items-center Все
+ .flex.items-center.gap-x-2
+ .all-icon.flex.items-center.justify-center
+ calendar-sidebar-svg.p-6px(name-svg="group", active)
+ .flex.flex-col.font-medium
+ .text-smm Все
+ .grey-color.text.text-xsx {{ patientsData?.length + " пациентов" }}
img(v-if="selectAll(patientsData)", :src="icon_ok")
.person-wrapper.flex.flex-col(@scroll="scrollTo", id="persons")
- .person.items-center.flex.justify-between.py-2.cursor-pointer(
+ .person.items-center.flex.justify-between.py-2.cursor-pointer.h-55(
v-for="(person, index) in choiceData(patientsData)",
@click="checkPerson(index, patientsData)"
)
@@ -108,7 +113,7 @@
img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
.flex.flex-col.font-medium
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
- .text.text-xsx {{person.birthday}}
+ .grey-color.text.text-xsx {{person.birthday}}
img.h-6.w-6(v-if="person.check", :src="icon_ok")
.gradient.flex.absolute(v-if="isGradient")
@@ -121,6 +126,7 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import icon_patients from "@/assets/icons/person_group.svg";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";
@@ -130,6 +136,7 @@ export default {
components: { BaseInput, CalendarSidebarSvg, BaseButton },
data() {
return {
+ icon_patients,
arrow,
icon_ok,
sort_word,
@@ -176,7 +183,7 @@ export default {
},
showActive(name) {
this.patientData.arrSvg.forEach((e) => {
- if (e.name === name) e.active = true;
+ if (e.name === name) e.active = !e.active;
});
},
copyValue(text) {
@@ -213,7 +220,13 @@ export default {
}
},
scrollTo(event) {
- if (event.currentTarget.scrollTop === 305)
+ if (
+ Math.abs(
+ event.currentTarget.scrollHeight -
+ event.currentTarget.clientHeight -
+ event.currentTarget.scrollTop
+ ) < 1
+ )
return (this.isGradient = false);
this.isGradient = true;
},
@@ -222,7 +235,7 @@ export default {
foundPerson: {
immediate: true,
handler(val) {
- if (val && document.getElementById("persons").offsetHeight < 311) {
+ if (val && document.getElementById("persons").offsetHeight < 296) {
this.isGradient = false;
}
},
@@ -251,44 +264,50 @@ export default {
transition: 0.1s
opacity: 1
-.status-wrapper
- width: 232px
- height: 188px
-
-.fill-wrapper
- height: 158px
+.modal-wrapper
width: 232px
+ padding: 16px 8px 6px
.patient-wrapper
width: 232px
max-height: 445px
+ min-height: 102px
color: var(--font-dark-blue-color)
+.h-55
+ height: 55px
+
.status
- height: 28px
+ height: 40px
width: 100%
+
&:hover
- height: 28px
+ height: 40px
background: var(--gray-thirdly)
cursor: pointer
.person-wrapper
overflow-y: auto
margin-right: -10px
- max-height: 311px
+ max-height: 296px
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track:vertical
- margin-top: -28px
+ margin-top: -40px
margin-bottom: 18px
.person
- height: 56px
width: calc(100% - 10px)
border-bottom: 1px solid var(--bg-light-grey)
&:first-child
border-top: 1px solid var(--bg-light-grey)
+.all-icon
+ height: 40px
+ width: 40px
+ border-radius: 50%
+ background: var(--surface-blue-big)
+
#input :deep(.q-field__control)
height: 32px
.q-field__prepend
@@ -330,9 +349,15 @@ export default {
bottom: 0px
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
+.button-open
+ border: 1px solid var(--gray-scondary)
+ color: var(--font-grey-color)
+ background: var(--bg-light-grey)
+
.sort-icon-default
background-color: var(--bg-light-grey)
color: var(--font-grey-color)
+ border: 1px solid var(--gray-scondary)
.sort-icon-active
background-color: var(--btn-blue-color)
@@ -342,6 +367,9 @@ export default {
transition: background 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
background: var(--bg-light-blue-color)
+.grey-color
+ color: var(--font-grey-color)
+
.q-btn :deep(.q-focus-helper)
display: none
diff --git a/src/pages/newCalendar/components/CalendarSidebarSvg.vue b/src/pages/newCalendar/components/CalendarSidebarSvg.vue
index cb72ee5..aef031a 100644
--- a/src/pages/newCalendar/components/CalendarSidebarSvg.vue
+++ b/src/pages/newCalendar/components/CalendarSidebarSvg.vue
@@ -11,6 +11,11 @@
g(opacity="0.6")
path(d="M20.3457 12.077H27.66C30.0584 12.077 32.0028 14.04 32.0028 16.4616V17.3847C32.0028 18.2768 31.2865 19.0001 30.4028 19.0001H23.6888C22.357 16.8586 20.129 15.3317 17.5488 14.8961C18.2892 14.1192 18.8898 13.2091 19.3081 12.2029C19.6406 12.1206 19.9881 12.077 20.3457 12.077Z" :fill="active ? '#4772F2' : '#9294A7'")
path(d="M24.0677 9.83683C26.5477 9.83683 28.5582 7.82634 28.5582 5.34627C28.5582 2.8662 26.5477 0.855713 24.0677 0.855713C21.5876 0.855713 19.5771 2.8662 19.5771 5.34627C19.5771 7.82634 21.5876 9.83683 24.0677 9.83683Z" :fill="active ? '#4772F2' : '#9294A7'")
+ g(v-if="nameSvg === 'sort'")
+ path(fill-rule="evenodd" clip-rule="evenodd" d="M5.76088 3.12494C6.10606 3.12494 6.38588 3.40476 6.38588 3.74994V14.5787L8.55012 12.0898C8.77662 11.8293 9.17139 11.8018 9.43186 12.0283C9.69233 12.2548 9.71988 12.6496 9.49338 12.91L6.23251 16.66C6.1138 16.7966 5.94178 16.8749 5.76088 16.8749C5.57998 16.8749 5.40795 16.7966 5.28925 16.66L2.02838 12.91C1.80188 12.6496 1.82942 12.2548 2.0899 12.0283C2.35037 11.8018 2.74514 11.8293 2.97164 12.0898L5.13588 14.5787V3.74994C5.13588 3.40476 5.4157 3.12494 5.76088 3.12494Z" :fill="active ? 'var(--default-white)' : '#9294A7'")
+ path(fill-rule="evenodd" clip-rule="evenodd" d="M14.729 2.81763C14.9618 2.81763 15.1752 2.94695 15.283 3.15324L18.0222 8.39692C18.1821 8.70287 18.0636 9.08045 17.7577 9.24028C17.4517 9.4001 17.0741 9.28165 16.9143 8.9757L16.0583 7.33701H13.3998L12.5437 8.9757C12.3839 9.28165 12.0063 9.4001 11.7004 9.24028C11.3944 9.08045 11.276 8.70287 11.4358 8.39692L14.175 3.15324C14.2828 2.94695 14.4963 2.81763 14.729 2.81763ZM14.0528 6.08701H15.4053L14.729 4.79246L14.0528 6.08701Z" :fill="active ? 'var(--default-white)' : '#9294A7'")
+ path(fill-rule="evenodd" clip-rule="evenodd" d="M14.0513 10.2358C14.8116 10.071 15.6957 10.1295 16.3039 10.2174C16.6114 10.2619 16.8395 10.5254 16.8395 10.836V16.25C16.8395 16.5951 16.5597 16.875 16.2145 16.875C15.8693 16.875 15.5895 16.5951 15.5895 16.25V14.6599L12.9292 16.7421C12.6573 16.9549 12.2645 16.907 12.0518 16.6352C11.839 16.3634 11.8869 15.9705 12.1587 15.7578L14.3578 14.0366C14.2053 14.004 14.054 13.964 13.9078 13.9147C13.5445 13.7921 13.1658 13.5977 12.8743 13.2766C12.5702 12.9416 12.3977 12.5081 12.3977 11.9898C12.3977 11.4732 12.603 11.0528 12.9447 10.7511C13.2645 10.4687 13.6704 10.3184 14.0513 10.2358ZM15.5895 12.9233C15.1533 12.9047 14.6894 12.8591 14.3075 12.7303C14.0626 12.6476 13.8989 12.5455 13.7999 12.4365C13.7136 12.3414 13.6477 12.2111 13.6477 11.9898C13.6477 11.8351 13.6965 11.7548 13.772 11.6881C13.8695 11.6021 14.0441 11.5164 14.3162 11.4574C14.6968 11.3749 15.1581 11.3673 15.5895 11.3973V12.9233Z" :fill="active ? 'var(--default-white)' : '#9294A7'")
+