From 770a9cfb2e1c1fbb9677ad26e269d2de76fa9af7 Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Mon, 29 May 2023 18:27:52 -0400
Subject: [PATCH] Persistent tag display in schedule view

---
 htdocs/ViewSchedule.vue | 47 +++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/htdocs/ViewSchedule.vue b/htdocs/ViewSchedule.vue
index f377bbe..d6b7f03 100644
--- a/htdocs/ViewSchedule.vue
+++ b/htdocs/ViewSchedule.vue
@@ -3,14 +3,17 @@
 		<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>
 	</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>
+	<div v-if="tag_list.length > 0">
+		<span v-if="filter_array.length > 0" class="tag badge bg-danger" @click="filter = {}">🗑{{filter_array.length}}</span><span v-else class="tag badge">🏷</span>
+		<span v-for="key in tag_list" class="tag badge" :style="{ color: filter[key] ? null : 'rgba(var(--bs-dark-rgb), var(--bs-text-opacity))', backgroundColor: filter[key] ? strHashHSL(key, '50%') : null }" @click="filter[key] ? delete filter[key] : filter[key] = true">{{key.toUpperCase()}}</span>
+	</div>
 	<datalist :id="'datalist-' + uid"><option v-for="item in practitioner_list" :value="item" /></datalist>
 	<table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0">
 		<thead>
 			<tr><th style="width: 7rem;">Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr>
 		</thead>
 		<tbody class="striped">
-			<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%') }">
+			<tr v-for="row in appointments" v-show="(filter_array.length < 1) || (filter_conj(tag_map[row.APPOINTMENTID]))" :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-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>
@@ -18,7 +21,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>{{row.RESOURCENAME}}</td>
 				<td><router-link :to="'/patient/' + row.PATIENTID">{{row.PATIENTNAME}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link> <span v-if="row.SENSITIVE != '0'" class="emoji">⚠</span></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>{{row.NOTE}}<span v-for="(value, key) in tag_map[row.APPOINTMENTID]" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="filter[key] = true">{{value}}</span></td>
 				<td><input class="form-control" :list="'datalist-' + uid" :value="practitioner[row.PATIENTNAME]" @input="e => practitioner[row.PATIENTNAME] = e.target.value" /></td>
 			</tr>
 		</tbody>
@@ -89,6 +92,29 @@
 			};
 		},
 		computed: {
+			tag_map() {
+				var res0 = {}, practitioner = this.practitioner;
+				if(this.appointments) this.appointments.forEach(function(row) {
+					var res1 = res0[row.APPOINTMENTID] = {}, re, matches;
+					if((row.RESOURCENAME) && (matches = row.RESOURCENAME.replace(/\W+/g, '-').replace(/^-+|-+$/g, ''))) res1[matches.toLowerCase()] = matches;
+					if(row.WALKIN != '0') res1['walkin'] = 'WALKIN';
+					if((row.CANCELLED != '0') || (row.NOSHOW != '0')) res1['inactive'] = 'INACTIVE';
+					else res1['active'] = 'ACTIVE';
+					if(row.NOTE) {
+						re = /#([0-9a-z][\w-]*)/gi;
+						while(matches = re.exec(row.NOTE)) res1[matches[1].toLowerCase()] = matches[1];
+						re = /Dr[\.\s]*\b([a-z][\w-]*)/gi;
+						while(matches = re.exec(row.NOTE)) res1[matches[1].toLowerCase()] = matches[1];
+					}
+					if((matches = practitioner[row.PATIENTNAME]) && (matches = matches.replace(/\W+/g, '-').replace(/^-+|-+$/g, ''))) res1[matches.toLowerCase()] = matches.toUpperCase();
+				});
+				return res0;
+			},
+			tag_list() {
+				var res = {}, tag_map = this.tag_map;
+				if(tag_map) for(var k in tag_map) if(tag_map.hasOwnProperty(k)) Object.assign(res, tag_map[k]);
+				return Object.keys(res).sort();
+			},
 			filter_array() {
 				return Object.keys(this.filter).sort();
 			},
@@ -101,21 +127,6 @@
 		},
 		methods: {
 			strHashHSL,
-			gettags(row) {
-				var res = {}, re, 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') || (row.NOSHOW != '0')) res['inactive'] = 'INACTIVE';
-				else res['active'] = 'ACTIVE';
-				if(row.NOTE) {
-					re = /#([0-9a-z][\w-]*)/gi;
-					while(matches = re.exec(row.NOTE)) res[matches[1].toLowerCase()] = matches[1];
-					re = /Dr[\.\s]*\b([a-z][\w-]*)/gi;
-					while(matches = re.exec(row.NOTE)) res[matches[1].toLowerCase()] = matches[1];
-				}
-				if((matches = this.practitioner[row.PATIENTNAME]) && (matches = matches.replace(/\W+/g, '-').replace(/^-+|-+$/g, ''))) res[matches.toLowerCase()] = matches.toUpperCase();
-				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;