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

Compare commits

base: jyio:d08f76ec99a508272dc358858b0e3e963c813147
Branches Tags
jyio:main
..
compare: jyio:ffc2d4c6fa2e2f4c69dc5f4661c6e26f6f146409
Branches Tags
jyio:main

5 Commits
d08f76ec99 ... ffc2d4c6fa

Author SHA1 Message Date
inportb
ffc2d4c6fa Non-anchoring bottom element 2023-05-28 21:15:56 -04:00
inportb
4b9d27b553 Dynamic layout for document display 2023-05-28 21:14:10 -04:00
inportb
f011b88bf4 Fix list group item styling 2023-05-28 20:51:40 -04:00
inportb
6fcd3825c8 Conservative lookahead in reportloader_chunk 2023-05-28 20:17:27 -04:00
inportb
cdbcc51927 More selective scroll detection 2023-05-27 09:39:56 -04:00
2 changed files with 38 additions and 19 deletions
Show Stats Expand all files Collapse all files

39
htdocs/RoutePatientDocuments.vue
View File

@ -2,12 +2,12 @@
<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" :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">
<div class="cell col-4"><router-link :to="href" replace>{{datestring(strptime_vista(item.time))}}</router-link></div> <div class="cell col-4"><router-link :to="href" replace>{{datestring(strptime_vista(item.time))}}</router-link></div>
<div class="cell col-8">{{item.title}}</div> <div class="cell col-8">{{item.title}}</div>
@ -16,13 +16,16 @@
</div> </div>
</li> </li>
</router-link> </router-link>
<li ref="bottom" /> <li class="bottom list-group-item" ref="bottom" />
</ul> </ul>
</div> </div>
</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;
} }
@ -54,11 +57,18 @@
color: #fff; color: #fff;
background-color: #0d6efd; background-color: #0d6efd;
} }
li.bottom {
overflow-anchor: none;
}
div.cell { div.cell {
overflow: hidden; overflow: hidden;
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 +77,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 +115,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 +175,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 +197,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>

18
htdocs/RoutePatientReports.vue
View File

@ -82,6 +82,9 @@
color: #fff; color: #fff;
background-color: #0d6efd; background-color: #0d6efd;
} }
li.bottom {
overflow-anchor: none;
}
li.bottom button { li.bottom button {
width: 100%; width: 100%;
} }
@ -292,7 +295,13 @@
} }
function data_endtime(data) { function data_endtime(data) {
for(var i = data.length - 1; i >= 0; --i) if((data[i].time) && (!isNaN(data[i].time))) return data[i].time; for(var i = data.length - 1, time; i >= 0; --i) if((time = data[i].time) && (!isNaN(time))) return time;
}
function data_endtime_conservative(data) {
var dt_end = data_endtime(data);
if(dt_end) for(var i = data.length - 1, time; i >= 0; --i) if((time = data[i].time) && (time > dt_end)) return time;
return dt_end;
} }
function data_interval(data) { function data_interval(data) {
@ -388,8 +397,7 @@
} else var res = []; } else var res = [];
if(hasmore) { // lookahead if(hasmore) { // lookahead
var batch = (await client.ORWRP_REPORT_TEXT_LONGCACHE(dfn, rpt_id, '', SZ_RANGE, '', -1, cursor.toFixed(9))).map(fn_map).sort((a, b) => b.time - a.time); var batch = (await client.ORWRP_REPORT_TEXT_LONGCACHE(dfn, rpt_id, '', SZ_RANGE, '', -1, cursor.toFixed(9))).map(fn_map).sort((a, b) => b.time - a.time);
res.dt_next = data_endtime(batch); if(res.dt_next = (batch.length >= SZ_WINDOW ? data_endtime_conservative : data_endtime)(batch)) res.next = strftime_vista(res.dt_next);
if(res.dt_next) res.next = strftime_vista(res.dt_next);
} }
if((!res.dt_next) && (cursor) && (data.length > 0) && ((res.length < 1) || (res[res.length - 1] !== data[data.length - 1]))) res.dt_next = strptime_vista(res.next = cursor); if((!res.dt_next) && (cursor) && (data.length > 0) && ((res.length < 1) || (res[res.length - 1] !== data[data.length - 1]))) res.dt_next = strptime_vista(res.next = cursor);
return res; return res;
@ -532,9 +540,9 @@
); );
}, },
mounted() { mounted() {
this.observer_scroller = new IntersectionObserver(() => { if((this.date_next) && (!this.query.replace(/^\s+|\s+$/g, '')) && (this.selection)) this.date_begin = this.date_next; }, { root: this.$refs.scroller, rootMargin: '25%' }); this.observer_scroller = new IntersectionObserver(([entry]) => { if((entry.isIntersecting) && (this.selection) && (this.date_next) && (!this.is_loading) && (!this.query.replace(/^\s+|\s+$/g, ''))) this.date_begin = this.date_next; }, { root: this.$refs.scroller, rootMargin: '25%' });
this.observer_scroller.observe(this.$refs.bottom); this.observer_scroller.observe(this.$refs.bottom);
this.observer_viewport = new IntersectionObserver(() => { if((this.date_next) && (!this.query.replace(/^\s+|\s+$/g, '')) && (!this.selection)) this.date_begin = this.date_next; }, { rootMargin: '25%' }); this.observer_viewport = new IntersectionObserver(([entry]) => { if((entry.isIntersecting) && (!this.selection) && (this.date_next) && (!this.is_loading) && (!this.query.replace(/^\s+|\s+$/g, ''))) this.date_begin = this.date_next; }, { rootMargin: '25%' });
this.observer_viewport.observe(this.$refs.bottom); this.observer_viewport.observe(this.$refs.bottom);
}, },
destroyed() { destroyed() {