admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Исправил стили сайдбара на странице календаря

Browse Source
This commit is contained in:
megavrilinvv
2023-07-14 18:23:34 +03:00
parent 5fa7e3252d
commit 67e2c3f22c
5 changed files with 216 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/pages/newCalendar/components/CalendarSidebar.vue
View File

@@ -11,15 +11,15 @@
.button.flex
base-button(width="40px", @click="createForm")
q-icon(name="app:plus", size="12px")
.button.flex.relative.btn-sidebar(v-for="svg in patientData.arrSvg")
q-btn.blue-hover(
v-click-outside="hideActive",
@click="()=>clickButton(svg.name)",
.button.flex.relative.btn-sidebar.button-svg.cursor-pointer(v-for="svg in patientData.arrSvg")
q-btn(
:class="{'active-btn': findActiveBtn(svg.name)}",
@click="()=>showActive(svg.name)",
dense,
style="color: var(--font-grey-color); borderRadius: 50%",
style="borderRadius: 50%",
:padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'"
)
calendar-sidebar-svg(:name-svg="svg.name", :active="svg.active")
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
@@ -29,7 +29,8 @@
v-if="svg.name === 'round'",
anchor="center start",
self="top right",
:style="{'margin-left': '8px !important'}"
:style="{'margin-left': '8px !important'}",
@before-hide="hideActive"
)
.status-wrapper.flex.flex-col.gap-y-4.p-4
.font-bold.text-xm {{svg.text}}
@@ -44,7 +45,8 @@
v-if="svg.name === 'medcard'",
anchor="center start",
self="top right",
:style="{'margin-left': '8px !important'}"
:style="{'margin-left': '8px !important'}",
@before-hide="hideActive"
)
.fill-wrapper.flex.flex-col.gap-y-4.p-4
.font-bold.text-xm {{svg.text}}
@@ -59,40 +61,48 @@
v-if="svg.name === 'group'",
anchor="center start",
self="top right",
:style="{'margin-left': '8px !important'}"
:style="{'margin-left': '8px !important'}",
@before-hide="hideActive"
)
.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)"
.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",
debounce="10",
@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(
icon="app:sort-number",
@click="sortPerson(patientsData)",
:style="{width: '32px', height: '32px'}",
padding="0",
:class="sortingClass"
)
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
@click="checkAll(patientsData)"
)
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
.flex.items-center Все
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(
v-for="(person, index) in choiceData(patientsData)",
@click="checkPerson(index, patientsData)"
@@ -103,19 +113,19 @@
.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
.gradient.flex.absolute(v-if="isGradient")
</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";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "CalendarSidebar",
@@ -134,6 +144,7 @@ export default {
sortData: [],
sort: false,
trimOwnerName: trimName,
isGradient: true,
};
},
computed: {
@@ -142,19 +153,39 @@ export default {
? false
: true;
},
sortingClass() {
return this.sort
? {
"sort-icon-active": true,
}
: {
"sort-icon-default": true,
};
},
},
methods: {
findActiveBtn(name) {
return this.patientData.arrSvg.find((e) => e.name === name)?.active
? true
: false;
},
hideActive() {
this.patientData.arrSvg.forEach((e) => {
if (e.active) e.active = false;
});
this.sortData = [];
this.foundPerson = "";
this.patientsData.forEach((e) => (e.check = false));
},
clickButton(name) {
showActive(name) {
this.patientData.arrSvg = this.patientData.arrSvg.map((e) => {
if (e.name === name) return { ...e, active: true };
return { ...e, active: false };
});
},
copyValue(text) {
navigator.clipboard.writeText(text);
},
checkPerson(index, arr) {
arr.map((e) => {
if (e.id === index) e.check = !e.check;
@@ -185,6 +216,21 @@ export default {
arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
}
},
scrollTo(event) {
if (event.currentTarget.scrollTop === 305)
return (this.isGradient = false);
this.isGradient = true;
},
},
watch: {
foundPerson: {
immediate: true,
handler(val) {
if (val && document.getElementById("persons").offsetHeight < 311) {
this.isGradient = false;
}
},
},
},
};
</script>
@@ -199,6 +245,9 @@ export default {
background: var(--default-white)
align-items: center
justify-content: center
&:last-child
border-bottom-left-radius: 0.25rem
border-bottom-right-radius: 0.25rem
.btn-sidebar
&:hover
@@ -215,7 +264,7 @@ export default {
.patient-wrapper
width: 232px
height: 445px
max-height: 445px
color: var(--font-dark-blue-color)
.status
@@ -229,11 +278,12 @@ export default {
.person-wrapper
overflow-y: auto
margin-right: -10px
max-height: 311px
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track:vertical
margin-top: -48px
margin-bottom: 26px
margin-top: -28px
margin-bottom: 18px
.person
height: 56px
@@ -247,6 +297,12 @@ export default {
.q-field__prepend
height: 32px
.input :deep(.q-field__prepend)
padding-right: 4px
.input :deep(.q-field__append)
padding-left: 6px
.separator
display: none
z-index: 6
@@ -269,15 +325,39 @@ export default {
border-radius: 4px
color: var(--default-white)
// .q-btn .blue-hover
// 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%)
.sort-icon-default
background-color: var(--bg-light-grey)
color: var(--font-grey-color)
.sort-icon-active
background-color: var(--btn-blue-color)
color: var(--default-white)
.active-btn
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)
.q-btn :deep(.q-focus-helper)
display: none
.q-btn :deep(.q-ripple)
display: none
.button-svg
&:hover
.svg :deep(.hover)
opacity: 1
transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
</style>
<style lang="sass">
.q-menu
box-shadow: -4px -4px 8px 0px rgba(9, 10, 21, 0.10), 4px 4px 8px 0px rgba(9, 10, 21, 0.10)
</style>