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="Documents" />
<Subtitle :value="patient_info.name" /> <Subtitle :value="patient_info.name" />
<div class="row"> <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 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> <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 }"> <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"> <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"> <div class="row">
@ -22,7 +22,10 @@
</div> </div>
<div v-if="selection_text" class="col-12 col-xl-8"> <div v-if="selection_text" class="col-12 col-xl-8">
<div class="card mb-3 shadow"> <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 class="detail card-body">{{selection_text}}</div>
</div> </div>
</div> </div>
@ -35,7 +38,7 @@
top: 1.15rem; top: 1.15rem;
z-index: 1; z-index: 1;
} }
ul.scroller { ul.scroller.list-skinny {
max-height: 25vh; max-height: 25vh;
overflow-y: auto; overflow-y: auto;
} }
@ -59,6 +62,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
a.close {
cursor: default;
text-decoration: none;
}
div.detail { div.detail {
font-family: monospace; font-family: monospace;
white-space: pre-wrap; white-space: pre-wrap;
@ -67,7 +74,7 @@
div.selector { div.selector {
position: static; position: static;
} }
ul.scroller { ul.scroller.list-skinny {
max-height: 75vh; max-height: 75vh;
} }
div.cell.secondary { div.cell.secondary {
@ -105,7 +112,8 @@
resultset: [], resultset: [],
selection: null, selection: null,
selection_text: null, selection_text: null,
observer_bottom: null observer_scroller: null,
observer_viewport: null
}; };
}, },
watch: { watch: {
@ -164,9 +172,6 @@
} finally { } finally {
this.is_loading = false; this.is_loading = false;
} }
},
handle_bottom([entry]) {
if((entry.isIntersecting) && (this.has_more) && (!this.is_loading)) this.load_more();
} }
}, },
created() { created() {
@ -189,11 +194,14 @@
); );
}, },
mounted() { mounted() {
this.observer_bottom = new IntersectionObserver(this.handle_bottom, { root: this.$refs.scroller, rootMargin: '25%' }); 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_bottom.observe(this.$refs.bottom); 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() { 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> </script>