.sidebar.flex.flex-col.gap-y-px
.button.flex.rounded-t
q-btn.button-open(
@click="openSidebar",
dense,
padding="8px"
)
img(:src="arrow")
.button.flex
base-button(width="40px", @click="createForm")
q-icon.plus(name="app:plus", size="24px")
.button.flex.relative.btn-sidebar.button-svg.cursor-pointer(
@click="()=>showActive(svg.name)",
v-for="svg in patientData.arrSvg"
v-click-outside="hideActive"
)
q-btn(
:class="{'active-btn': findActiveBtn(svg.name)}",
dense,
style="borderRadius: 50%",
:padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'"
)
calendar-sidebar-svg.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'}"
)
.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")
span {{status.name}}
q-menu(
v-if="svg.name === 'medcard'",
anchor="center start",
self="top right",
:style="{'margin-left': '8px !important'}"
)
.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")
span {{medical.name}}
q-menu.overflow-hidden(
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="{maxHeight: '391px'}")
.flex.flex-col.gap-y-2
.flex.h-8.w-full.items-center.justify-between
base-input.input(
v-model="foundPerson",
@keyup.enter="searchPerson",
@input="searchPerson",
id="input",
placeholder="Найти пациента...",
:width="160"
size="S",
:iconLeft="!foundPerson",
iconRight
)
template(v-slot:iconLeft)
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
template(v-slot:iconRight)
q-icon.cursor-pointer(
@click="copyValue(foundPerson)"
name="app:icon-copy",
size="16px",
style="color: var(--font-grey-color)"
)
q-btn.ml-2(
@click="sortPerson(patientsData)",
:style="{width: '32px', height: '32px', border: '1px solid var(--gray-secondary)'}",
padding="0",
:class="sortingClass"
)
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.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.h-55(
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)}}
.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")