Use store in components

Signed-off-by: Grigory V <scratchx@gmx.com>

src/components/AppNavigation/AppointmentConfigList.vue

@@ -68,8 +68,8 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import AppointmentConfigModal from '../AppointmentConfigModal.vue'
 import AppointmentConfig from '../../models/appointmentConfig.js'
 import logger from '../../utils/logger.js'
-import { mapGetters } from 'vuex'
 import NoEmailAddressWarning from '../AppointmentConfigModal/NoEmailAddressWarning.vue'
+import useAppointmentConfigsStore from '../../store/appointmentConfigs.js'
 
 export default {
 	name: 'AppointmentConfigList',
@@ -87,9 +87,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters({
-			configs: 'allConfigs',
-		}),
+		configs() {
+			const store = useAppointmentConfigsStore()
+			return store.allConfigs
+		},
 		defaultConfig() {
 			return AppointmentConfig.createDefault(
 				this.calendarUrlToUri(this.$store.getters.ownSortedCalendars[0].url),

src/components/AppointmentConfigModal.vue

@@ -164,6 +164,7 @@ import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelec
 import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect.vue'
 import logger from '../utils/logger.js'
 import Confirmation from './AppointmentConfigModal/Confirmation.vue'
+import useAppointmentConfigsStore from '../store/appointmentConfigs.js'
 
 export default {
 	name: 'AppointmentConfigModal',
@@ -201,6 +202,7 @@ export default {
 			enableFutureLimit: false,
 			rateLimitingReached: false,
 			showConfirmation: false,
+			store: useAppointmentConfigsStore(),
 		}
 	},
 	computed: {
@@ -308,10 +310,12 @@ export default {
 			try {
 				if (this.isNew) {
 					logger.info('Creating new config', { config })
-					this.editing = await this.$store.dispatch('createConfig', { config })
+					// this.editing = await this.$store.dispatch('createConfig', { config })
+					this.editing = await this.store.createConfig({ config })
 				} else {
 					logger.info('Saving config', { config })
-					this.editing = await this.$store.dispatch('updateConfig', { config })
+					// this.editing = await this.$store.dispatch('updateConfig', { config })
+					this.editing = await this.store.updateConfig({ config })
 				}
 				this.showConfirmation = true
 			} catch (error) {

src/main.js

@@ -42,6 +42,7 @@ import VTooltip from 'v-tooltip'
 import VueShortKey from 'vue-shortkey'
 import windowTitleService from './services/windowTitleService.js'
 import { createPinia, PiniaVuePlugin } from 'pinia'
+import useAppointmentConfigsStore from './store/appointmentConfigs.js'
 
 Vue.use(PiniaVuePlugin)
 const pinia = createPinia()
@@ -73,15 +74,13 @@ Vue.prototype.n = translatePlural
 
 windowTitleService(router, store)
 
-store.commit(
-	'addInitialConfigs',
-	loadState('calendar', 'appointmentConfigs', []).map(config => new AppointmentConfig(config))
-)
-
 export default new Vue({
 	el: '#content',
 	router,
 	store,
 	render: h => h(App),
 	pinia,
 })
+
+const appointmentsConfigsStore = useAppointmentConfigsStore()
+appointmentsConfigsStore.addInitialConfigs(loadState('calendar', 'appointmentConfigs', []).map(config => new AppointmentConfig(config)))

src/store/appointmentConfigs.js

@@ -31,11 +31,16 @@ export default defineStore('appointmentConfig', {
 		}
 	},
 	getters: {
-		allConfigs(state) {
-			return Object.values(state.configs)
+		allConfigs() {
+			return Object.values(this.configs)
 		},
 	},
 	actions: {
+		addInitialConfigs(configs) {
+			for (const config of configs) {
+				this.configs[config.id] = config
+			}
+		},
 		async updateConfig({ config }) {
 			try {
 				const updatedConfig = await updateConfig(config)