Cross-tab state synchronization with localStorage

htdocs/RouteRecall.vue

@@ -62,10 +62,8 @@
 			client: Object
 		},
 		data() {
-			var resources = state.resources;
 			var today = dateonly(new Date());
 			return {
-				selection: resources ? (resources.split(',').filter(x => x) || []) : [],
 				patients: [],
 				production: true,
 				date_begin: new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()),
@@ -74,6 +72,10 @@
 			};
 		},
 		computed: {
+			selection: {
+				get() { return state.resources ? (state.resources.split(',').filter(x => x) || []) : [] },
+				set(value) { state.resources = value.join(','); }
+			},
 			patients_lost() {
 				return this.patients.filter(x => x.TimeLastDiff >= 0).sort((a, b) => b.TimeLastDiff - a.TimeLastDiff);
 			},
@@ -82,8 +84,9 @@
 			}
 		},
 		watch: {
-			selection(value) {
-				this.debounced_selection(value);
+			selection: {
+				handler(value) { this.$nextTick(() => this.debounced_selection(value)); },
+				immediate: true
 			}
 		},
 		methods: {
@@ -95,7 +98,6 @@
 		},
 		created() {
 			this.debounced_selection = debounce(async function(value) {
-				state.resources = value.join(',');
 				var patients = this.selection.length > 0 ? groupByArray(await this.client.SDEC_CLINLET(this.selection.join('|') + '|', strftime_vista(this.date_begin), strftime_vista(this.date_end)), x => x.HRN) : [], now = new Date(), group, values, appt;
 				for(var i = patients.length - 1; i >= 0; --i) {
 					group = patients[i];

htdocs/RouteSchedule.vue

@@ -37,16 +37,15 @@
 			client: Object
 		},
 		data() {
-			var resources = state.resources;
 			return {
-				selection: resources ? (resources.split(',').filter(x => x) || []) : [],
 				date: dateonly(new Date()),
 				date_end: dateonly(new Date())
 			};
 		},
-		watch: {
-			selection(value, oldvalue) {
-				state.resources = value.join(',');
+		computed: {
+			selection: {
+				get() { return state.resources ? (state.resources.split(',').filter(x => x) || []) : [] },
+				set(value) { state.resources = value.join(','); }
 			}
 		}
 	};

htdocs/vistax.mjs

@@ -10,7 +10,13 @@ if((!state.cid) && (cookie.get('cid'))) state.resources = cookie.get('cid');
 if((!state.host) && (cookie.get('host'))) state.resources = cookie.get('host');
 if((!state.resources) && (cookie.get('vista.resources'))) state.resources = cookie.get('vista.resources');
 if((!state.practitioner) && (cookie.get('vista.practitioner'))) state.practitioner = JSON.parse(cookie.get('vista.practitioner'));
-watch(state, value => cookie.set('state', JSON.stringify(value), 45), { immediate: true, deep: true });
+window.addEventListener('storage', function(evt) {
+	if((evt.storageArea == window.localStorage) && (evt.key == 'state') && (evt.newValue)) Object.assign(state, JSON.parse(evt.newValue));
+});
+watch(state, function(value) {
+	cookie.set('state', value = JSON.stringify(value), 45);
+	window.localStorage.setItem('state', value);
+}, { immediate: true, deep: true });
 
 function RPCError(type, ...args) {
 	this.name = type;