feat: ui preferences to localstorage

src/components/nodes-table/ExpandedNode.vue

@@ -581,23 +581,46 @@ export default {
 		currentTab() {
 			this.scrollBottom()
 		},
+		inverseSort() {
+			this.savePreferences()
+		},
+		autoScroll() {
+			this.savePreferences()
+		},
 	},
 	data() {
 		return {
 			currentTab: 0,
 			autoScroll: true,
-			inverseSort: false,
+			inverseSort: true,
 			searchEvents: '',
 			advancedShowDialog: false,
 			showStatistics: false,
 		}
 	},
+	mounted() {
+		const pref = useBaseStore().getPreference('eventsList', {
+			inverseSort: true,
+			autoScroll: true,
+		})
+
+		this.inverseSort = pref.inverseSort
+		this.autoScroll = pref.autoScroll
+	},
 	methods: {
 		...mapActions(useBaseStore, [
 			'showSnackbar',
 			'setValue',
 			'getDateTimeString',
 		]),
+		savePreferences() {
+			useBaseStore().savePreferences({
+				eventsList: {
+					inverseSort: this.inverseSort,
+					autoScroll: this.autoScroll,
+				},
+			})
+		},
 		async updateValue(v, customValue) {
 			if (v) {
 				// in this way I can check when the value receives an update

src/stores/base.js

@@ -19,6 +19,10 @@ const useBaseStore = defineStore('base', {
 		user: {},
 		tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
 		locale: undefined, // uses default browser locale
+		preferences: settings.load('preferences', {
+			eventsList: {},
+			smartStartTable: {},
+		}),
 		zwave: {
 			port: '/dev/zwave',
 			allowBootloaderOnly: false,
@@ -541,6 +545,18 @@ const useBaseStore = defineStore('base', {
 			settings.store('compact', value)
 			this.ui.compactMode = value
 		},
+		getPreference(key, defaultValue) {
+			return {
+				...defaultValue,
+				...(this.preferences[key] || {}),
+			}
+		},
+		savePreferences(pref) {
+			settings.store(
+				'preferences',
+				pref ? Object.assign(this.preferences, pref) : this.preferences,
+			)
+		},
 	},
 })
 

src/views/SmartStart.vue

@@ -5,6 +5,7 @@
 			:items="items"
 			class="elevation-1"
 			style="margin-bottom: 80px"
+			:options.sync="tableOptions"
 		>
 			<template v-slot:top>
 				<h2 class="ma-3">Provisioning Entries</h2>
@@ -180,14 +181,26 @@ import InstancesMixin from '../mixins/InstancesMixin.js'
 export default {
 	name: 'SmartStart',
 	mixins: [InstancesMixin],
-	watch: {},
+	watch: {
+		tableOptions: {
+			handler() {
+				useBaseStore().savePreferences({
+					smartStartTable: this.tableOptions,
+				})
+			},
+			deep: true,
+		},
+	},
 	computed: {
 		...mapState(useBaseStore, ['nodes']),
 	},
 	data() {
 		return {
 			items: [],
 			fab: false,
+			tableOptions: {
+				sortBy: ['nodeId'],
+			},
 			headers: [
 				{ text: 'ID', value: 'nodeId' },
 				{ text: 'Name', value: 'name' },
@@ -216,6 +229,17 @@ export default {
 		}
 	},
 	mounted() {
+		this.tableOptions = useBaseStore().getPreference('smartStartTable', {
+			page: 1,
+			itemsPerPage: 10,
+			sortBy: ['nodeId'],
+			sortDesc: [false],
+			groupBy: [],
+			groupDesc: [],
+			mustSort: false,
+			multiSort: false,
+		})
+
 		this.refreshItems()
 	},
 	methods: {