76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template lang="pug">
|
|
.list-wrapper.rounded.w-full(id="listWrapper")
|
|
.w-full.header.h-10.flex
|
|
.h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
|
|
v-for="field in headerConfig",
|
|
:key="field.title",
|
|
:style="headerStyle(field)"
|
|
) {{ field.title }}
|
|
.h-full.w-8(v-if="scrollPresence")
|
|
.body.w-full
|
|
row(
|
|
v-for="medcard in medcardsInfo",
|
|
:key="medcard.id"
|
|
:scroll-presence="scrollPresence",
|
|
:header-style="headerStyle",
|
|
:medcard-info="medcard",
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
searchListConfig,
|
|
medcardsList,
|
|
} from "@/pages/medcards/utils/medcardsConfig.js";
|
|
import Row from "@/pages/medcards/components/MedicalCardSearchRow.vue";
|
|
|
|
export default {
|
|
name: "MedicalCardSearchList",
|
|
components: { Row },
|
|
data() {
|
|
return {
|
|
headerConfig: searchListConfig,
|
|
medcardsInfo: medcardsList,
|
|
};
|
|
},
|
|
computed: {
|
|
scrollPresence() {
|
|
return this.medcardsInfo.length > 9;
|
|
// const wrapper = document.getElementById("listWrapper");
|
|
// return wrapper?.scrollHeight > wrapper?.clientHeight;
|
|
},
|
|
},
|
|
methods: {
|
|
headerStyle(field) {
|
|
return {
|
|
width:
|
|
!this.scrollPresence && field.spareWidth
|
|
? field.spareWidth
|
|
: field.width,
|
|
"min-width":
|
|
this.scrollPresence && field.compressedMinWidth
|
|
? field.compressedMinWidth
|
|
: field.minWidth,
|
|
"justify-content": field.title === "Do" ? "center" : "",
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.header
|
|
background-color: var(--gray-thirdly)
|
|
border-bottom: 1px solid var(--gray-secondary)
|
|
.grey-color
|
|
color: var(--font-grey-color)
|
|
.body
|
|
height: calc(100vh - 56px - 24px - 360px - 72px - 40px)
|
|
overflow-y: auto
|
|
&::-webkit-scrollbar-track
|
|
margin: 24px 0 24px 0
|
|
background: #E9E9ED
|
|
&::-webkit-scrollbar-thumb
|
|
background: var(--font-grey-color)
|
|
</style>
|