.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