Tagged schedule view

This commit is contained in:
Jiang Yio 2023-05-01 04:13:20 -04:00
parent ece8338ac8
commit 4bc854bf00

View File

@ -3,12 +3,13 @@
<div v-if="age == Infinity" class="alert alert-danger"> update error</div> <div v-if="age == Infinity" class="alert alert-danger"> update error</div>
<div v-else-if="age >= 90000" class="alert alert-warning">⚠ last updated <template v-if="age < 3600000">{{ts.toLocaleString()}}</template><template v-else>{{ts.toLocaleString()}}</template></div> <div v-else-if="age >= 90000" class="alert alert-warning">⚠ last updated <template v-if="age < 3600000">{{ts.toLocaleString()}}</template><template v-else>{{ts.toLocaleString()}}</template></div>
</template> </template>
<div v-if="filter_array.length > 0"><span class="tag badge bg-primary" @click="filter = {}">CLEAR {{filter_array.length}} TAG{{filter_array.length > 1 ? 'S' : ''}}</span><span v-for="key in filter_array" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="delete filter[key]"> {{key.toUpperCase()}}</span></div>
<table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0"> <table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0">
<thead> <thead>
<tr><th style="width: 7rem;">Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr> <tr><th style="width: 7rem;">Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr>
</thead> </thead>
<tbody class="striped"> <tbody class="striped">
<tr v-for="row in appointments" :class="{ voided: (row.CANCELLED != '0') || (row.NOSHOW != '0') }" :style="{ backgroundColor: strHashHSL(row.RESOURCENAME, '90%') }"> <tr v-for="row in appointments" v-show="(filter_array.length < 1) || (filter_conj(gettags(row)))" :class="{ voided: (row.CANCELLED != '0') || (row.NOSHOW != '0') }" :style="{ backgroundColor: strHashHSL(row.RESOURCENAME, '90%') }">
<td v-if="row.CANCELLED != '0'" title="Cancelled"><div><span class="emoji">❌</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td> <td v-if="row.CANCELLED != '0'" title="Cancelled"><div><span class="emoji">❌</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
<td v-else-if="row.NOSHOW != '0'" title="No show"><div><span class="emoji"></span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td> <td v-else-if="row.NOSHOW != '0'" title="No show"><div><span class="emoji"></span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
<td v-else-if="row.CHECKOUT" :title="'Checked out ' + row.CHECKOUT"><div><span class="emoji"></span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td> <td v-else-if="row.CHECKOUT" :title="'Checked out ' + row.CHECKOUT"><div><span class="emoji"></span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
@ -16,7 +17,7 @@
<td v-else title="Scheduled"><div><span class="emoji"></span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td> <td v-else title="Scheduled"><div><span class="emoji"></span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
<td>{{row.RESOURCENAME}}</td> <td>{{row.RESOURCENAME}}</td>
<td><router-link :to="'/patient/' + row.PATIENTID">{{row.PATIENTNAME}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link></td> <td><router-link :to="'/patient/' + row.PATIENTID">{{row.PATIENTNAME}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link></td>
<td><template v-if="row.WALKIN != '0'">[Walk-in] </template>{{row.NOTE}}</td> <td>{{row.NOTE}}<span v-for="(value, key) in gettags(row)" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="filter[key] = true">{{value}}</span></td>
<td><Autocomplete :modelValue="practitioner[row.PATIENTNAME]" @update:modelValue="x => practitioner[row.PATIENTNAME] = x" :items="practitioner_list" /></td> <td><Autocomplete :modelValue="practitioner[row.PATIENTNAME]" @update:modelValue="x => practitioner[row.PATIENTNAME] = x" :items="practitioner_list" /></td>
</tr> </tr>
</tbody> </tbody>
@ -50,6 +51,10 @@
"Android Emoji", "Android Emoji",
sans-serif; sans-serif;
} }
.badge.tag {
cursor: pointer;
margin-right: 0.35em;
}
</style> </style>
<script> <script>
@ -74,10 +79,14 @@
return { return {
appointments: [], appointments: [],
ts: null, ts: null,
age: undefined age: undefined,
filter: {}
}; };
}, },
computed: { computed: {
filter_array() {
return Object.keys(this.filter).sort();
},
practitioner() { practitioner() {
return this.client.remotestate.practitioner || (this.client.remotestate.practitioner = {}); return this.client.remotestate.practitioner || (this.client.remotestate.practitioner = {});
}, },
@ -87,6 +96,22 @@
}, },
methods: { methods: {
strHashHSL, strHashHSL,
gettags(row) {
var res = {}, matches;
if((row.RESOURCENAME) && (matches = row.RESOURCENAME.replace(/\W+/g, '-').replace(/^-+|-+$/g, ''))) res[matches.toLowerCase()] = matches;
if(row.WALKIN != '0') res['walkin'] = 'WALKIN';
if(row.CANCELLED != '0') res['cancelled'] = 'CANCELLED';
else if(row.NOSHOW != '0') res['noshow'] = 'NOSHOW';
else if(row.CHECKOUT) res['checkedout'] = 'CHECKEDOUT';
else if(row.CHECKIN) res['checkedin'] = 'CHECKEDIN';
if((row.NOTE) && (matches = row.NOTE.match(/#[0-9a-z][\w-]*/gi))) matches.reduce((acc, val) => (acc[val.substring(1).toLowerCase()] = val.substring(1), acc), res);
return res;
},
filter_conj(tags) {
var filter_array = this.filter_array;
for(var i = this.filter_array.length - 1; i >= 0; --i) if(!tags[this.filter_array[i]]) return false;
return true;
},
async update() { async update() {
try { try {
this.appointments = (await this.client.SDEC_CRSCHED(this.selection.join('|') + '|', strfdate_vista(this.date_begin), strfdate_vista(this.date_end) + '@2359')).sort((a, b) => (new Date(a.START_TIME)) - (new Date(b.START_TIME))); this.appointments = (await this.client.SDEC_CRSCHED(this.selection.join('|') + '|', strfdate_vista(this.date_begin), strfdate_vista(this.date_end) + '@2359')).sort((a, b) => (new Date(a.START_TIME)) - (new Date(b.START_TIME)));