286 lines
8.4 KiB
Vue
286 lines
8.4 KiB
Vue
<template lang="pug">
|
||
.sidebar.flex.flex-col.gap-y-1
|
||
.button.flex.rounded-t
|
||
q-btn(
|
||
@click="openSidebar",
|
||
dense,
|
||
padding="8px",
|
||
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
|
||
)
|
||
img(:src="arrow")
|
||
.button.flex
|
||
q-btn(color="primary", dense, padding="14px", @click="createForm")
|
||
q-icon(name="app:icon-plus", size="12px")
|
||
.button.flex.relative.btn-sidebar(v-for="svg in patientData.arrSvg")
|
||
q-btn(
|
||
v-click-outside="hideActive",
|
||
@click="()=>clickButton(svg.name)",
|
||
dense,
|
||
style="color: var(--font-grey-color); borderRadius: 50%",
|
||
:padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'"
|
||
)
|
||
calendar-sidebar-svg(:name-svg="svg.name", :active="svg.active")
|
||
.separator.flex.absolute(v-show="allLeave")
|
||
.sidebar.flex-col.flex
|
||
.mark-top.flex.w-2.h-2
|
||
.mark-bottom.flex.w-2.h-2
|
||
.mark-text.flex.font-medium.text-sm {{svg.text}}
|
||
q-menu(
|
||
v-if="svg.name === 'round'",
|
||
anchor="center start",
|
||
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(
|
||
v-for="status in patientData.statuses",
|
||
v-close-popup
|
||
)
|
||
img(:src="status.icon")
|
||
span {{status.name}}
|
||
q-menu(
|
||
v-if="svg.name === 'medcard'",
|
||
anchor="center start",
|
||
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(
|
||
v-for="medical in medicalData",
|
||
v-close-popup
|
||
)
|
||
img(:src="medical.icon")
|
||
span {{medical.name}}
|
||
q-menu(
|
||
v-if="svg.name === 'group'",
|
||
anchor="center start",
|
||
self="top right",
|
||
:style="{'margin-left': '8px !important'}"
|
||
)
|
||
.patient-wrapper.flex.flex-col.gap-y-4.px-4.pt-4
|
||
.font-bold.text-xm {{svg.text}}
|
||
.flex.flex-col.relative(:style="{height: '391px'}")
|
||
.flex.h-8.w-full.items-center.justify-between
|
||
base-input(
|
||
v-model="foundPerson",
|
||
debounce="10",
|
||
@keyup.enter="searchPerson",
|
||
@input="searchPerson",
|
||
id="input",
|
||
placeholder="Найти пациента...",
|
||
outlined,
|
||
:width="160",
|
||
iconLeft,
|
||
fontSize="12px",
|
||
lineHeight="16px",
|
||
textColor="var(--font-grey-color)"
|
||
)
|
||
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
|
||
q-btn.btn.ml-2(
|
||
@click="sortPerson(patientsData)",
|
||
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
|
||
:style="{ width: '32px', height: '32px'}",
|
||
padding="0"
|
||
)
|
||
img(:src="sort_word")
|
||
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
|
||
@click="checkAll(patientsData)"
|
||
)
|
||
span Все
|
||
img(v-if="selectAll(patientsData)", :src="icon_ok")
|
||
.person-wrapper.flex.flex-col
|
||
.person.items-center.flex.justify-between.py-2.cursor-pointer(
|
||
v-for="(person, index) in choiceData(patientsData)",
|
||
@click="checkPerson(index, patientsData)"
|
||
)
|
||
.flex.items-center.gap-x-2
|
||
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}}
|
||
img.h-6.w-6(v-if="person.check", :src="icon_ok")
|
||
.gradient.flex.absolute
|
||
</template>
|
||
|
||
<script>
|
||
import arrow from "@/assets/icons/double_left_arrow.svg";
|
||
import icon_ok from "@/assets/icons/icon_ok.svg";
|
||
import sort_word from "@/assets/icons/sort_word.svg";
|
||
import BaseInput from "@/components/base/BaseInput.vue";
|
||
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
|
||
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
|
||
import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
|
||
|
||
export default {
|
||
name: "CalendarSidebar",
|
||
props: { openSidebar: Function, createForm: Function },
|
||
components: { BaseInput, CalendarSidebarSvg },
|
||
data() {
|
||
return {
|
||
arrow,
|
||
icon_ok,
|
||
sort_word,
|
||
patientData: patientData,
|
||
medicalData: patientList.find((e) => e.label === "Первичная медкарта")
|
||
.data,
|
||
patientsData: patientList.find((e) => e.label === "Пациенты").data,
|
||
foundPerson: "",
|
||
sortData: [],
|
||
sort: false,
|
||
};
|
||
},
|
||
computed: {
|
||
allLeave() {
|
||
return this.patientData.arrSvg.find((e) => e.active)?.active
|
||
? false
|
||
: true;
|
||
},
|
||
},
|
||
methods: {
|
||
hideActive() {
|
||
this.patientData.arrSvg.forEach((e) => {
|
||
if (e.active) e.active = false;
|
||
});
|
||
},
|
||
clickButton(name) {
|
||
this.patientData.arrSvg = this.patientData.arrSvg.map((e) => {
|
||
if (e.name === name) return { ...e, active: true };
|
||
return { ...e, active: false };
|
||
});
|
||
},
|
||
trimOwnerName(lastName, firstName, patronymic) {
|
||
let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
|
||
let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
|
||
return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
|
||
},
|
||
checkPerson(index, arr) {
|
||
arr.map((e) => {
|
||
if (e.id === index) e.check = !e.check;
|
||
});
|
||
},
|
||
selectAll(arr) {
|
||
return arr.find((e) => e.check) ? false : true;
|
||
},
|
||
checkAll(arr) {
|
||
arr.map((e) => (e.check = false));
|
||
},
|
||
searchPerson() {
|
||
this.sortData = this.patientsData.filter(
|
||
(e) =>
|
||
e.last_name.toLowerCase().substr(0, this.foundPerson.length) ===
|
||
this.foundPerson.toLowerCase()
|
||
);
|
||
},
|
||
choiceData(arr) {
|
||
return this.foundPerson ? this.sortData : arr;
|
||
},
|
||
sortPerson(arr) {
|
||
if (!this.sort) {
|
||
this.sort = true;
|
||
arr.sort((a, b) => (a.last_name > b.last_name ? 1 : -1));
|
||
} else {
|
||
this.sort = false;
|
||
arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.sidebar
|
||
color: var(--font-dark-blue-color)
|
||
|
||
.button
|
||
width: 72px
|
||
height: 72px
|
||
background: var(--default-white)
|
||
align-items: center
|
||
justify-content: center
|
||
|
||
.btn-sidebar
|
||
&:hover
|
||
& .separator
|
||
display: flex
|
||
|
||
.status-wrapper
|
||
width: 232px
|
||
height: 188px
|
||
|
||
.fill-wrapper
|
||
height: 158px
|
||
width: 232px
|
||
|
||
.patient-wrapper
|
||
width: 232px
|
||
height: 445px
|
||
color: var(--font-dark-blue-color)
|
||
|
||
.status
|
||
height: 28px
|
||
width: 100%
|
||
&:hover
|
||
height: 28px
|
||
background: var(--bg-light-grey)
|
||
cursor: pointer
|
||
|
||
.person-wrapper
|
||
overflow-y: auto
|
||
margin-right: -10px
|
||
&::-webkit-scrollbar
|
||
width: 4px
|
||
&::-webkit-scrollbar-track:vertical
|
||
margin-top: -48px
|
||
margin-bottom: 26px
|
||
|
||
.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)
|
||
|
||
#input :deep(.q-field__control)
|
||
height: 32px
|
||
.q-field__prepend
|
||
height: 32px
|
||
|
||
.separator
|
||
display: none
|
||
z-index: 6
|
||
align-items: center
|
||
left: 72px
|
||
width: max-content
|
||
height: 32px
|
||
|
||
.mark-top
|
||
border-bottom-right-radius: 10px
|
||
background: var(--bg-body-color)
|
||
|
||
.mark-bottom
|
||
border-top-right-radius: 10px
|
||
background: var(--bg-body-color)
|
||
|
||
.mark-text
|
||
padding: 8px 12px
|
||
background: var(--font-dark-blue-color)
|
||
border-radius: 4px
|
||
color: var(--default-white)
|
||
|
||
.q-btn
|
||
transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
|
||
&:hover
|
||
background: var(--bg-light-blue-color)
|
||
|
||
.gradient
|
||
width: 232px
|
||
height: 44px
|
||
right: 0px
|
||
bottom: 0px
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
|
||
</style>
|