jyio/nuVistA
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic layout for document display

Browse Source
This commit is contained in:
Jiang Yio 2023-05-25 06:25:41 -04:00
parent f011b88bf4
commit 4b9d27b553
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
htdocs/RoutePatientDocuments.vue
View File

@ -2,10 +2,10 @@
<Subtitle value="Documents" />
<Subtitle :value="patient_info.name" />
<div class="row">
<div class="selector col-12 col-xl-4">
<div class="selector col-12" :class="{ 'col-xl-4': selection_text }">
<div class="card mb-3 shadow">
<div class="card-header"><template v-if="resultset.length > 0">{{resultset.length}}<template v-if="has_more">+</template></template><template v-else-if="is_loading">Loading</template><template v-else>No</template> record{{resultset.length == 1 ? '' : 's'}}</div>
<ul class="scroller list-group list-group-flush" ref="scroller">
<ul class="scroller list-group list-group-flush" :class="{ 'list-skinny': selection_text }" ref="scroller">
<router-link v-for="item in resultset" :to="'/patient/' + patient_dfn + '/document/' + item.IEN" replace custom v-slot="{ navigate, href }">
<li :key="item" class="record list-group-item" :class="{ 'active': selection == item.IEN }" :title="datetimestring(strptime_vista(item.time)) + '\n' + item.title + '\n' + item.location + '\n' + item.author.byline" @click="navigate">
<div class="row">
@ -22,7 +22,10 @@
</div>
<div v-if="selection_text" class="col-12 col-xl-8">
<div class="card mb-3 shadow">
<div class="card-header">{{doctitle(selection_text) || 'Document'}}</div>
<div class="card-header d-flex justify-content-between align-items-center">
<span>{{doctitle(selection_text) || 'Document'}}</span>
<router-link class="close" :to="'/patient/' + patient_dfn + '/document'" replace>❌</router-link>
</div>
<div class="detail card-body">{{selection_text}}</div>
</div>
</div>
@ -35,7 +38,7 @@
top: 1.15rem;
z-index: 1;
}
ul.scroller {
ul.scroller.list-skinny {
max-height: 25vh;
overflow-y: auto;
}
@ -59,6 +62,10 @@
text-overflow: ellipsis;
white-space: nowrap;
}
a.close {
cursor: default;
text-decoration: none;
}
div.detail {
font-family: monospace;
white-space: pre-wrap;
@ -67,7 +74,7 @@
div.selector {
position: static;
}
ul.scroller {
ul.scroller.list-skinny {
max-height: 75vh;
}
div.cell.secondary {
@ -105,7 +112,8 @@
resultset: [],
selection: null,
selection_text: null,
observer_bottom: null
observer_scroller: null,
observer_viewport: null
};
},
watch: {
@ -164,9 +172,6 @@
} finally {
this.is_loading = false;
}
},
handle_bottom([entry]) {
if((entry.isIntersecting) && (this.has_more) && (!this.is_loading)) this.load_more();
}
},
created() {
@ -189,11 +194,14 @@
);
},
mounted() {
this.observer_bottom = new IntersectionObserver(this.handle_bottom, { root: this.$refs.scroller, rootMargin: '25%' });
this.observer_bottom.observe(this.$refs.bottom);
this.observer_scroller = new IntersectionObserver(([entry]) => { if((entry.isIntersecting) && (this.selection_text) && (this.has_more) && (!this.is_loading)) this.load_more(); }, { root: this.$refs.scroller, rootMargin: '25%' });
this.observer_scroller.observe(this.$refs.bottom);
this.observer_viewport = new IntersectionObserver(([entry]) => { if((entry.isIntersecting) && (!this.selection_text) && (this.has_more) && (!this.is_loading)) this.load_more(); }, { rootMargin: '25%' });
this.observer_viewport.observe(this.$refs.bottom);
},
destroyed() {
if(this.observer_bottom) this.observer_bottom.disconnect();
if(this.observer_viewport) this.observer_viewport.disconnect();
if(this.observer_scroller) this.observer_scroller.disconnect();
}
};
</script>