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

Compare commits

base: jyio:cc5ec1f69f355683d4efa07f83cfa82ca90f447e
Branches Tags
jyio:main
...
compare: jyio:789e11e572490c1be9c247e6c8340c8d241bd78f
Branches Tags
jyio:main

5 Commits
cc5ec1f69f ... 789e11e572

Author SHA1 Message Date
inportb
789e11e572 Multi-level navigation 2023-05-08 20:19:10 -04:00
inportb
45dda6f51d Fix sensitive record indicator inconsistency (always check) 2023-05-08 20:03:40 -04:00
inportb
4a25b2f823 Fix navbar style 2023-05-08 19:45:47 -04:00
inportb
cdfa3b2f04 RoutePatient nested routes 2023-05-08 18:48:29 -04:00
inportb
c15f7ed885 RouteLookup (refactored from RoutePatientLookup) 2023-05-08 17:58:34 -04:00
9 changed files with 196 additions and 185 deletions
Show Stats Expand all files Collapse all files

28
htdocs/App.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<Submenu :value="menu" />
<div class="container-fluid" style="padding-top: 5rem;"> <div class="container-fluid" style="padding-top: 5rem;">
<Navbar v-model:server="server" :user="user" /> <Navbar v-model:server="server" :user="user" />
<Throbber :client="client" /> <Throbber :client="client" />
@ -10,11 +11,13 @@
</template> </template>
<script> <script>
import Submenu from './Submenu.vue';
import Navbar from './Navbar.vue'; import Navbar from './Navbar.vue';
import Throbber from './Throbber.vue'; import Throbber from './Throbber.vue';
import Login from './Login.vue'; import Login from './Login.vue';
import RouteSchedule from './RouteSchedule.vue'; import RouteSchedule from './RouteSchedule.vue';
import RoutePatientLookup from './RoutePatientLookup.vue'; import RouteLookup from './RouteLookup.vue';
import RoutePatient from './RoutePatient.vue';
import RoutePatientDetail from './RoutePatientDetail.vue'; import RoutePatientDetail from './RoutePatientDetail.vue';
import RoutePatientVisits from './RoutePatientVisits.vue'; import RoutePatientVisits from './RoutePatientVisits.vue';
import RoutePatientOrders from './RoutePatientOrders.vue'; import RoutePatientOrders from './RoutePatientOrders.vue';
@ -23,7 +26,7 @@
export default { export default {
components: { components: {
Navbar, Throbber, Login Submenu, Navbar, Throbber, Login
}, },
props: { props: {
secret: String secret: String
@ -35,7 +38,16 @@
user: null, user: null,
heartbeat: null, heartbeat: null,
banner: '', banner: '',
authenticated: false authenticated: false,
menu: {
name: 'Main',
items: [
{ name: 'Schedule', href: '/' },
{ name: 'Lookup', href: '/lookup' },
{ name: 'Planner', href: '/planner' },
{ name: 'Recall', href: '/recall' }
]
}
}; };
}, },
watch: { watch: {
@ -44,10 +56,12 @@
else { else {
[ [
{ path: '/', component: RouteSchedule }, { path: '/', component: RouteSchedule },
{ path: '/patient', component: RoutePatientLookup }, { path: '/lookup', component: RouteLookup },
{ path: '/patient/:id', component: RoutePatientDetail }, { path: '/patient/:id', component: RoutePatient, children: [
{ path: '/patient/:id/visits', component: RoutePatientVisits }, { path: '', component: RoutePatientDetail },
{ path: '/patient/:id/orders', component: RoutePatientOrders }, { path: 'visits', component: RoutePatientVisits },
{ path: 'orders', component: RoutePatientOrders },
] },
{ path: '/planner', component: RoutePlanner }, { path: '/planner', component: RoutePlanner },
{ path: '/recall', component: RouteRecall }, { path: '/recall', component: RouteRecall },
].forEach(route => this.$root.$router.addRoute(route)); ].forEach(route => this.$root.$router.addRoute(route));

38
htdocs/Navbar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<nav class="navbar navbar-expand-lg fixed-top bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div class="container-fluid"> <div class="container-fluid">
<router-link class="navbar-brand" to="/"><img src="/icon.svg" style="height: 1.875rem;" /></router-link> <router-link class="navbar-brand" to="/"><img src="/icon.svg" style="height: 1.875rem;" /></router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -7,25 +7,16 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li v-if="menustate.length > 0" v-for="item in menustate[0].items" class="nav-item">
<router-link class="nav-link" to="/">Schedule</router-link> <router-link class="nav-link" :to="item.href">{{item.name}}</router-link>
</li> </li>
<li class="nav-item"> <li v-if="menustate.length > 1" v-for="menu in menustate.slice(1)" class="nav-item dropdown">
<router-link class="nav-link" to="/patient">Patient</router-link> <button class="nav-link btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">{{menu.name}}</button>
</li> <ul class="dropdown-menu dropdown-menu-dark">
<template v-if="($route.matched.length > 0) && ($route.matched[0].path == '/patient/:id')"> <li v-for="item in menu.items" class="nav-item">
<li class="nav-item"> <router-link class="nav-link" :to="item.href">{{item.name}}</router-link>
<router-link class="nav-link" :to="'/patient/' + $route.params.id + '/visits'">Visits</router-link> </li>
</li> </ul>
<li class="nav-item">
<router-link class="nav-link" :to="'/patient/' + $route.params.id + '/orders'">Orders</router-link>
</li>
</template>
<li class="nav-item">
<router-link class="nav-link" to="/planner">Planner</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/recall">Recall</router-link>
</li> </li>
<li class="nav-item" v-if="server"> <li class="nav-item" v-if="server">
<a class="nav-link disabled"><template v-if="user">{{user[2]}} @ </template>{{server.domain}}</a> <a class="nav-link disabled"><template v-if="user">{{user[2]}} @ </template>{{server.domain}}</a>
@ -41,13 +32,14 @@
</template> </template>
<style scoped> <style scoped>
a.router-link-exact-active { .navbar-nav .nav-link.router-link-exact-active {
color: #bbb; color: #fff;
} }
</style> </style>
<script> <script>
import vistax from './vistax.mjs'; import vistax from './vistax.mjs';
import { menustate } from './common.mjs';
export default { export default {
props: { props: {
@ -61,7 +53,9 @@
} }
}, },
data() { data() {
return {}; return {
menustate
};
} }
}; };
</script> </script>

0
htdocs/RoutePatientLookup.vue → htdocs/RouteLookup.vue
View File

88
htdocs/RoutePatient.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<Subtitle value="Patient" />
<div v-if="(sensitive) && (!patient_info)" class="alert alert-danger text-center mb-3 shadow" role="alert">
<Subtitle value="Restricted Record" />
<h1>Warning: Restricted Record</h1>
<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p>
<router-link class="btn btn-danger" :to="'/patient/' + patient_dfn + '?viewsensitive'">Proceed</router-link>
</div>
<template v-if="patient_info">
<Submenu :value="menu" />
<div class="card mb-3 shadow">
<div class="card-header">{{patient_info.name}} <span :title="patient_info.pid">{{patient_info.pid.slice(-4)}}</span> #{{patient_dfn}}</div>
<div class="card-body row" style="font-family: monospace;">
<div class="col" v-if="patient_info.dob"><strong>DOB:</strong> {{strptime_vista(patient_info.dob).toLocaleDateString('sv-SE')}}</div>
<div class="col" v-if="patient_info.age"><strong>Age:</strong> {{patient_info.age}}</div>
<div class="col" v-if="patient_info.sex"><strong>Sex:</strong> {{patient_info.sex}}</div>
<div class="col" v-if="patient_info.sc_percentage"><strong>SC%:</strong> {{patient_info.sc_percentage}}</div>
<div class="col" v-if="patient_info.type"><strong>Type:</strong> {{patient_info.type}}</div>
<div class="col" v-if="patient_info.ward"><strong>Ward:</strong> {{patient_info.ward}}</div>
<div class="col" v-if="patient_info.room_bed"><strong>Room/bed:</strong> {{patient_info.room_bed}}</div>
</div>
</div>
<router-view :client="client" :sensitive="sensitive" :patient_dfn="patient_dfn" :patient_info="patient_info"></router-view>
</template>
</template>
<script>
import { strptime_vista } from './util.mjs';
import Subtitle from './Subtitle.vue';
import Submenu from './Submenu.vue';
export default {
components: {
Subtitle, Submenu
},
props: {
client: Object
},
data() {
return {
sensitive: false,
patient_dfn: null,
patient_info: null
};
},
computed: {
menu() {
return this.patient_info ? {
name: this.patient_info.name,
items: [
{ name: 'Patient', href: '/patient/' + this.patient_dfn + (this.sensitive && '?viewsensitive' || '') },
{ name: 'Visits', href: '/patient/' + this.patient_dfn + '/visits' + (this.sensitive && '?viewsensitive' || '') },
{ name: 'Orders', href: '/patient/' + this.patient_dfn + '/orders' + (this.sensitive && '?viewsensitive' || '') }
]
} : null;
}
},
methods: {
strptime_vista,
async loadinfo(dfn, viewsensitive) {
this.patient_dfn = dfn;
this.sensitive = await this.client.ORWPT_SELCHK(dfn);
this.patient_info = (this.sensitive) && (!viewsensitive) ? null : await this.client.ORWPT16_ID_INFO(dfn);
}
},
async mounted() {
if(this.$route.params.id.startsWith('$')) {
var id = this.$route.params.id.substring(1);
if(id.length == 9) {
var patient = await this.client.ORWPT_FULLSSN(id);
this.$router.replace('/patient/' + patient[0].dfn);
} else if(id.length == 5) {
var name = this.$route.query.name.toUpperCase();
var patient = await this.client.ORWPT_LAST5(id);
for(var i = 0; i < patient.length; ++i) if(name == patient[i].name) {
this.$router.replace('/patient/' + patient[i].dfn);
break;
}
}
} else this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
},
async beforeRouteUpdate(to, from, next) {
this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
next();
}
};
</script>

71
htdocs/RoutePatientDetail.vue
View File

@ -1,39 +1,18 @@
<template> <template>
<Subtitle value="Detail" /> <Subtitle value="Detail" />
<div v-if="(sensitive) && (!info)" class="alert alert-danger text-center mb-3 shadow" role="alert"> <Subtitle :value="patient_info.name" />
<h1>Warning: Restricted Record</h1> <div class="card mb-3 shadow">
<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p> <div class="card-header d-flex justify-content-between align-items-center">
<router-link class="btn btn-danger" :to="'/patient/' + dfn + '?viewsensitive'">Proceed</router-link> <span>Data</span>
</div> <DateRangePicker range="1M" direction="-1" v-model:date="report_date" v-model:date_end="report_date_begin" />
<div v-if="info">
<Subtitle :value="info.name" />
<div class="card mb-3 shadow">
<div class="card-header">{{info.name}} <span :title="info.pid">{{info.pid.slice(-4)}}</span> #{{dfn}}</div>
<div class="card-body row" style="font-family: monospace;">
<div class="col" v-if="info.dob"><strong>DOB:</strong> {{strptime_vista(info.dob).toLocaleDateString('sv-SE')}}</div>
<div class="col" v-if="info.age"><strong>Age:</strong> {{info.age}}</div>
<div class="col" v-if="info.sex"><strong>Sex:</strong> {{info.sex}}</div>
<div class="col" v-if="info.sc_percentage"><strong>SC%:</strong> {{info.sc_percentage}}</div>
<div class="col" v-if="info.type"><strong>Type:</strong> {{info.type}}</div>
<div class="col" v-if="info.ward"><strong>Ward:</strong> {{info.ward}}</div>
<div class="col" v-if="info.room_bed"><strong>Room/bed:</strong> {{info.room_bed}}</div>
</div>
</div> </div>
<div class="card mb-3 shadow"> <div class="card-body">
<div class="card-header d-flex justify-content-between align-items-center"> <ViewVitalsLabs :client="client" :dfn="patient_dfn" :date_begin="report_date_begin" :date_end="report_date" />
<span>Data</span>
<DateRangePicker range="1M" direction="-1" v-model:date="report_date" v-model:date_end="report_date_begin" />
</div>
<div class="card-body">
<ViewVitalsLabs :client="client" :dfn="dfn" :date_begin="report_date_begin" :date_end="report_date" />
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { strptime_vista } from './util.mjs';
import Subtitle from './Subtitle.vue'; import Subtitle from './Subtitle.vue';
import DateRangePicker from './DateRangePicker.vue'; import DateRangePicker from './DateRangePicker.vue';
import ViewVitalsLabs from './ViewVitalsLabs.vue'; import ViewVitalsLabs from './ViewVitalsLabs.vue';
@ -45,47 +24,19 @@
Subtitle, DateRangePicker, ViewVitalsLabs Subtitle, DateRangePicker, ViewVitalsLabs
}, },
props: { props: {
client: Object client: Object,
sensitive: Boolean,
patient_dfn: String,
patient_info: Object
}, },
data() { data() {
return { return {
dfn: null,
sensitive: false,
info: null,
report_date: now, report_date: now,
report_date_begin: now, report_date_begin: now,
orders_filter: 2, orders_filter: 2,
orders_date: now, orders_date: now,
orders_date_begin: now orders_date_begin: now
}; };
},
methods: {
strptime_vista,
async loadinfo(dfn, viewsensitive) {
this.dfn = dfn;
this.sensitive = viewsensitive ? false : await this.client.ORWPT_SELCHK(dfn);
this.info = this.sensitive ? null : await this.client.ORWPT16_ID_INFO(dfn);
}
},
async mounted() {
if(this.$route.params.id.startsWith('$')) {
var id = this.$route.params.id.substring(1);
if(id.length == 9) {
var patient = await this.client.ORWPT_FULLSSN(id);
this.$router.replace('/patient/' + patient[0].dfn);
} else if(id.length == 5) {
var name = this.$route.query.name.toUpperCase();
var patient = await this.client.ORWPT_LAST5(id);
for(var i = 0; i < patient.length; ++i) if(name == patient[i].name) {
this.$router.replace('/patient/' + patient[i].dfn);
break;
}
}
} else this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
},
async beforeRouteUpdate(to, from, next) {
this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
next();
} }
}; };
</script> </script>

64
htdocs/RoutePatientOrders.vue
View File

@ -1,42 +1,21 @@
<template> <template>
<Subtitle value="Orders" /> <Subtitle value="Orders" />
<div v-if="(sensitive) && (!info)" class="alert alert-danger text-center mb-3 shadow" role="alert"> <Subtitle :value="patient_info.name" />
<h1>Warning: Restricted Record</h1> <div class="card mb-3 shadow">
<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p> <div class="card-header">Order entry</div>
<router-link class="btn btn-danger" :to="'/patient/' + dfn + '/orders?viewsensitive'">Proceed</router-link> <div class="card-body"><ViewOrderMenu :client="client" :dfn="patient_dfn" /></div>
</div> </div>
<div v-if="info"> <div class="card mb-3 shadow">
<Subtitle :value="info.name" /> <div class="card-header d-flex justify-content-between align-items-center">
<div class="card mb-3 shadow"> <span>Order view</span>
<div class="card-header">{{info.name}} <span :title="info.pid">{{info.pid.slice(-4)}}</span> #{{dfn}}</div> <OrderFilterPicker :client="client" v-model="orders_filter" />
<div class="card-body row" style="font-family: monospace;"> <DateRangePicker range="6M" direction="-1" v-model:date="orders_date" v-model:date_end="orders_date_begin" />
<div class="col" v-if="info.dob"><strong>DOB:</strong> {{strptime_vista(info.dob).toLocaleDateString('sv-SE')}}</div>
<div class="col" v-if="info.age"><strong>Age:</strong> {{info.age}}</div>
<div class="col" v-if="info.sex"><strong>Sex:</strong> {{info.sex}}</div>
<div class="col" v-if="info.sc_percentage"><strong>SC%:</strong> {{info.sc_percentage}}</div>
<div class="col" v-if="info.type"><strong>Type:</strong> {{info.type}}</div>
<div class="col" v-if="info.ward"><strong>Ward:</strong> {{info.ward}}</div>
<div class="col" v-if="info.room_bed"><strong>Room/bed:</strong> {{info.room_bed}}</div>
</div>
</div>
<div class="card mb-3 shadow">
<div class="card-header">Order entry</div>
<div class="card-body"><ViewOrderMenu :client="client" :dfn="dfn" /></div>
</div>
<div class="card mb-3 shadow">
<div class="card-header d-flex justify-content-between align-items-center">
<span>Order view</span>
<OrderFilterPicker :client="client" v-model="orders_filter" />
<DateRangePicker range="6M" direction="-1" v-model:date="orders_date" v-model:date_end="orders_date_begin" />
</div>
<div class="card-body"><ViewOrders :client="client" :dfn="dfn" :filter="orders_filter" :date_begin="orders_date_begin" :date_end="orders_date" /></div>
</div> </div>
<div class="card-body"><ViewOrders :client="client" :dfn="patient_dfn" :filter="orders_filter" :date_begin="orders_date_begin" :date_end="orders_date" /></div>
</div> </div>
</template> </template>
<script> <script>
import { strptime_vista } from './util.mjs';
import Subtitle from './Subtitle.vue'; import Subtitle from './Subtitle.vue';
import DateRangePicker from './DateRangePicker.vue'; import DateRangePicker from './DateRangePicker.vue';
import OrderFilterPicker from './OrderFilterPicker.vue'; import OrderFilterPicker from './OrderFilterPicker.vue';
@ -50,32 +29,17 @@
Subtitle, DateRangePicker, OrderFilterPicker, ViewOrderMenu, ViewOrders Subtitle, DateRangePicker, OrderFilterPicker, ViewOrderMenu, ViewOrders
}, },
props: { props: {
client: Object client: Object,
sensitive: Boolean,
patient_dfn: String,
patient_info: Object
}, },
data() { data() {
return { return {
dfn: null,
sensitive: false,
info: null,
orders_filter: 2, orders_filter: 2,
orders_date: now, orders_date: now,
orders_date_begin: now orders_date_begin: now
}; };
},
methods: {
strptime_vista,
async loadinfo(dfn, viewsensitive) {
this.dfn = dfn;
this.sensitive = viewsensitive ? false : await this.client.ORWPT_SELCHK(dfn);
this.info = this.sensitive ? null : await this.client.ORWPT16_ID_INFO(dfn);
}
},
async mounted() {
this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
},
async beforeRouteUpdate(to, from, next) {
this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
next();
} }
}; };
</script> </script>

56
htdocs/RoutePatientVisits.vue
View File

@ -1,37 +1,16 @@
<template> <template>
<Subtitle value="Visits" /> <Subtitle value="Visits" />
<div v-if="(sensitive) && (!info)" class="alert alert-danger text-center mb-3 shadow" role="alert"> <Subtitle :value="patient_info.name" />
<h1>Warning: Restricted Record</h1> <div class="card mb-3 shadow">
<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p> <div class="card-header d-flex justify-content-between align-items-center">
<router-link class="btn btn-danger" :to="'/patient/' + dfn + '/orders?viewsensitive'">Proceed</router-link> <span>Visits</span>
</div> <DateRangePicker range="6M" direction="-1" v-model:date="visits_date" v-model:date_end="visits_date_begin" />
<div v-if="info">
<Subtitle :value="info.name" />
<div class="card mb-3 shadow">
<div class="card-header">{{info.name}} <span :title="info.pid">{{info.pid.slice(-4)}}</span> #{{dfn}}</div>
<div class="card-body row" style="font-family: monospace;">
<div class="col" v-if="info.dob"><strong>DOB:</strong> {{strptime_vista(info.dob).toLocaleDateString('sv-SE')}}</div>
<div class="col" v-if="info.age"><strong>Age:</strong> {{info.age}}</div>
<div class="col" v-if="info.sex"><strong>Sex:</strong> {{info.sex}}</div>
<div class="col" v-if="info.sc_percentage"><strong>SC%:</strong> {{info.sc_percentage}}</div>
<div class="col" v-if="info.type"><strong>Type:</strong> {{info.type}}</div>
<div class="col" v-if="info.ward"><strong>Ward:</strong> {{info.ward}}</div>
<div class="col" v-if="info.room_bed"><strong>Room/bed:</strong> {{info.room_bed}}</div>
</div>
</div>
<div class="card mb-3 shadow">
<div class="card-header d-flex justify-content-between align-items-center">
<span>Visits</span>
<DateRangePicker range="6M" direction="-1" v-model:date="visits_date" v-model:date_end="visits_date_begin" />
</div>
<div class="card-body"><ViewVisits :client="client" :dfn="dfn" :date_begin="visits_date_begin" :date_end="visits_date" /></div>
</div> </div>
<div class="card-body"><ViewVisits :client="client" :dfn="patient_dfn" :date_begin="visits_date_begin" :date_end="visits_date" /></div>
</div> </div>
</template> </template>
<script> <script>
import { strptime_vista } from './util.mjs';
import Subtitle from './Subtitle.vue'; import Subtitle from './Subtitle.vue';
import DateRangePicker from './DateRangePicker.vue'; import DateRangePicker from './DateRangePicker.vue';
import OrderFilterPicker from './OrderFilterPicker.vue'; import OrderFilterPicker from './OrderFilterPicker.vue';
@ -44,32 +23,17 @@
Subtitle, DateRangePicker, OrderFilterPicker, ViewVisits Subtitle, DateRangePicker, OrderFilterPicker, ViewVisits
}, },
props: { props: {
client: Object client: Object,
sensitive: Boolean,
patient_dfn: String,
patient_info: Object
}, },
data() { data() {
return { return {
dfn: null,
sensitive: false,
info: null,
orders_filter: 2, orders_filter: 2,
visits_date: now, visits_date: now,
visits_date_begin: now visits_date_begin: now
}; };
},
methods: {
strptime_vista,
async loadinfo(dfn, viewsensitive) {
this.dfn = dfn;
this.sensitive = viewsensitive ? false : await this.client.ORWPT_SELCHK(dfn);
this.info = this.sensitive ? null : await this.client.ORWPT16_ID_INFO(dfn);
}
},
async mounted() {
this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
},
async beforeRouteUpdate(to, from, next) {
this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
next();
} }
}; };
</script> </script>

33
htdocs/Submenu.vue Normal file
View File

@ -0,0 +1,33 @@
<script>
import { menustate } from './common.mjs';
export default {
props: ['value'],
data() {
return { ptr: null };
},
watch: {
value: {
handler(value) {
this.update(value);
}, immediate: true
}
},
methods: {
update(value) {
var idx = this.ptr ? menustate.indexOf(this.ptr) : -1;
if(idx >= 0) menustate.splice(idx, 1);
if(value) {
this.ptr = value;
if(idx >= 0) menustate.splice(idx, 0, this.ptr);
else menustate.unshift(this.ptr);
} else this.ptr = null;
console.log(menustate)
}
},
unmounted() {
this.update();
},
render() {}
};
</script>

3
htdocs/common.mjs Normal file
View File

@ -0,0 +1,3 @@
import { reactive } from 'vue';
export const menustate = reactive([]);