259 lines
6.9 KiB
Vue
259 lines
6.9 KiB
Vue
<template lang="pug">
|
||
.sidebar-wrapper.flex.flex-col.gap-y-1
|
||
.form.flex.items-center.justify-end.py-4.pr-4.rounded-t
|
||
q-btn.rotate-180(
|
||
@click="openSidebar",
|
||
dense,
|
||
padding="8px",
|
||
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
|
||
)
|
||
img(:src="arrow")
|
||
.form.flex.p-4
|
||
q-btn(
|
||
color="primary",
|
||
size="16px",
|
||
label="Создать запись",
|
||
@click="createForm",
|
||
no-caps,
|
||
icon="add",
|
||
:style="{width: '100%', height: '40px'}",
|
||
padding="0"
|
||
)
|
||
.flex.flex-col.gap-y-1
|
||
q-expansion-item.expansion.font-bold.text-xm(
|
||
v-for="(elem, index) in patientList",
|
||
expand-separator,
|
||
:label="elem.label",
|
||
@click="choiceForm(elem.choice, index)",
|
||
:class="{'patient': elem.label === 'Пациенты'}"
|
||
)
|
||
.select.flex.flex-col.font-medium.text-smm.px-4(
|
||
v-if="elem.label !== 'Пациенты'",
|
||
v-for="item in elem.data"
|
||
)
|
||
.status.flex.items-center.gap-x-1.px-2
|
||
img(:src="item.icon")
|
||
span {{item.name}}
|
||
.flex.flex-col.p-4.pb-0(:class="choiceState()", v-else)
|
||
.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(elem.data)",
|
||
icon="app:sort-number",
|
||
:style="{width: '32px', height: '32px'}",
|
||
padding="0"
|
||
)
|
||
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
|
||
@click="checkAll(elem.data)"
|
||
)
|
||
span Все
|
||
img(v-if="selectAll(elem.data)", :src="icon_ok")
|
||
.person-wrapper.flex.flex-col
|
||
.person.items-center.flex.justify-between.py-2.cursor-pointer(
|
||
v-for="(person, index) in choiceData(elem.data)",
|
||
@click="checkPerson(index, elem.data)"
|
||
)
|
||
.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")
|
||
</template>
|
||
|
||
<script>
|
||
import arrow from "@/assets/icons/double_left_arrow.svg";
|
||
import icon_ok from "@/assets/icons/icon_ok.svg";
|
||
import BaseInput from "@/components/base/BaseInput.vue";
|
||
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
|
||
|
||
export default {
|
||
name: "CalendarOpenSidebar",
|
||
props: { openSidebar: Function, createForm: Function },
|
||
components: { BaseInput },
|
||
data() {
|
||
return {
|
||
val: [],
|
||
arrow,
|
||
icon_ok,
|
||
foundPerson: "",
|
||
sortData: [],
|
||
patientList: patientList,
|
||
sort: false,
|
||
};
|
||
},
|
||
methods: {
|
||
choiceState() {
|
||
let num = 0;
|
||
let isPrimary = false;
|
||
this.patientList.forEach((e) => {
|
||
if (e.choice) num += 1;
|
||
if (e.choice && e.id === 1) isPrimary = true;
|
||
});
|
||
return {
|
||
"primary-form": num === 2 && isPrimary,
|
||
"one-form": num === 1,
|
||
"two-form": num === 2,
|
||
"all-form": num === 3,
|
||
default: !num,
|
||
};
|
||
},
|
||
choiceForm(choice, idx) {
|
||
if (choice)
|
||
return (this.patientList.find((e) => e.id === idx).choice = false);
|
||
this.patientList.find((e) => e.id === idx).choice = true;
|
||
},
|
||
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.patientList
|
||
.find((e) => e.label === "Пациенты")
|
||
.data.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-wrapper
|
||
width: 232px
|
||
|
||
.form
|
||
background: var(--default-white)
|
||
width: 100%
|
||
height: 72px
|
||
|
||
.expansion
|
||
height: 54px
|
||
background: var(--default-white)
|
||
border-radius: 4px
|
||
color: var(--font-dark-blue-color)
|
||
|
||
.select
|
||
padding-bottom: 2px
|
||
&:last-child
|
||
padding-bottom: 16px
|
||
|
||
.status
|
||
border-radius: 4px
|
||
height: 28px
|
||
&:hover
|
||
background: var(--bg-light-grey)
|
||
cursor: pointer
|
||
|
||
.q-expansion-item
|
||
border-radius: 0
|
||
height: 100%
|
||
|
||
.q-expansion-item :deep(.q-separator)
|
||
display: none
|
||
|
||
.patient :deep(.q-expansion-item__content)
|
||
padding-bottom: 0px
|
||
|
||
.btn
|
||
background-color: var(--bg-light-grey)
|
||
color: var(--font-grey-color)
|
||
|
||
#input :deep(.q-field__control)
|
||
height: 32px
|
||
.q-field__prepend
|
||
height: 32px
|
||
|
||
.q-expansion-item :deep(.q-item__section--main ~ .q-item__section--side)
|
||
padding-left: 0px
|
||
|
||
.q-expansion-item :deep(.q-item__label)
|
||
line-height: 135% !important
|
||
|
||
.q-expansion-item :deep(.q-item)
|
||
padding: 10px 16px !important
|
||
min-height: 54px
|
||
|
||
.text
|
||
color: var(--font-grey-color)
|
||
|
||
.q-expansion-item :deep(.q-item)
|
||
height: 54px
|
||
|
||
.person-wrapper
|
||
overflow-y: auto
|
||
margin-right: -10px
|
||
&::-webkit-scrollbar
|
||
width: 4px
|
||
&::-webkit-scrollbar-track:vertical
|
||
margin-top: -26px
|
||
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)
|
||
|
||
.one-form
|
||
max-height: calc(100vh - 394px)
|
||
transition: all 0.2s ease-in
|
||
|
||
.two-form
|
||
max-height: calc(100vh - 528px)
|
||
transition: all 0.2s ease-in
|
||
|
||
.all-form
|
||
max-height: calc(100vh - 632px)
|
||
transition: all 0.2s ease-in
|
||
|
||
.primary-form
|
||
max-height: calc(100vh - 498px)
|
||
transition: all 0.2s ease-in
|
||
|
||
.default
|
||
max-height: 0px
|
||
transition: all 0.5s ease-in
|
||
</style>
|