Fix bookmarks not updating properly (#4134)

* first try on fixing bookmarks

* fix bookmarks and search not updating on single word

* Fix double inject on paste

Fixes #3792

* Remove unused import

* Set bookmark saved state on clear local value

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/composables/use-items/use-items.ts

@@ -106,7 +106,7 @@ export function useItems(collection: Ref<string>, query: Query) {
 		searchQuery,
 		throttle(
 			async (after, before) => {
-				if (!before || isEqual(after, before)) {
+				if (isEqual(after, before)) {
 					return;
 				}
 				page.value = 1;

app/src/composables/use-preset/use-preset.ts

@@ -1,6 +1,6 @@
 import { usePresetsStore, useUserStore } from '@/stores';
 import { ref, Ref, computed, watch } from '@vue/composition-api';
-import { debounce } from 'lodash';
+import { debounce, isEqual } from 'lodash';
 import { useCollection } from '@/composables/use-collection';
 
 import { Filter, Preset } from '@/types/';
@@ -15,46 +15,50 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 
 	const bookmarkExists = computed(() => {
 		if (!bookmark.value) return false;
-		return !!presetsStore.state.collectionPresets.find((preset) => preset.id === bookmark.value);
+		return !!presetsStore.getBookmark(bookmark.value);
 	});
 
 	const localPreset = ref<Partial<Preset>>({});
 	initLocalPreset();
 
-	const bookmarkSaved = computed(() => localPreset.value.$saved !== false);
+	const bookmarkSaved = ref(true);
 	const bookmarkIsMine = computed(() => localPreset.value.user === userStore.state.currentUser!.id);
 
+	/**
+	 * Saves the preset to the database
+	 * @param preset The preset that should be saved
+	 */
 	const savePreset = async (preset?: Partial<Preset>) => {
 		busy.value = true;
+
 		const updatedValues = await presetsStore.savePreset(preset ? preset : localPreset.value);
 		localPreset.value = {
 			...localPreset.value,
 			id: updatedValues.id,
 			user: updatedValues.user,
 		};
+		bookmarkSaved.value = true;
 		busy.value = false;
 		return updatedValues;
 	};
 
-	const saveLocal = () => {
-		presetsStore.saveLocal(localPreset.value);
-	};
-
-	const clearLocalSave = async () => {
-		busy.value = true;
-		await presetsStore.clearLocalSave(localPreset.value);
-		initLocalPreset();
-		busy.value = false;
-	};
-
 	const autoSave = debounce(async () => {
-		if (!bookmark || bookmark.value === null) {
-			savePreset();
-		} else {
-			saveLocal();
-		}
+		savePreset();
 	}, 450);
 
+	/**
+	 * If no bookmark is present, save periodically to the DB,
+	 * otherwhise update the saved status if changes where made.
+	 */
+	function handleChanges() {
+		if (bookmarkExists.value) {
+			const bookmarkInStore = presetsStore.getBookmark(Number(bookmark.value));
+			bookmarkSaved.value = isEqual(localPreset.value, bookmarkInStore);
+		} else {
+			autoSave();
+		}
+	}
+
 	watch([collection, bookmark], () => {
 		initLocalPreset();
 	});
@@ -75,7 +79,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 				},
 			};
 
-			autoSave();
+			handleChanges();
 		},
 	});
 
@@ -94,7 +98,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 				},
 			};
 
-			autoSave();
+			handleChanges();
 		},
 	});
 
@@ -108,7 +112,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 				layout: val,
 			};
 
-			autoSave();
+			handleChanges();
 		},
 	});
 
@@ -122,7 +126,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 				filters: val,
 			};
 
-			autoSave();
+			handleChanges();
 		},
 	});
 
@@ -136,7 +140,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 				search: val,
 			};
 
-			autoSave();
+			handleChanges();
 		},
 	});
 
@@ -170,8 +174,18 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		bookmarkIsMine,
 		busy,
 		clearLocalSave,
+		localPreset,
 	};
 
+	/**
+	 * Resets the localPreset to the value that is in the store.
+	 */
+	function clearLocalSave() {
+		const defaultPreset = presetsStore.getBookmark(Number(bookmark.value));
+		if (defaultPreset) localPreset.value = { ...defaultPreset };
+		bookmarkSaved.value = true;
+	}
+
 	async function resetPreset() {
 		localPreset.value = {
 			...localPreset.value,
@@ -194,7 +208,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 			if (bookmarkExists.value === false) return;
 
 			localPreset.value = {
-				...presetsStore.getBookmark(+bookmark.value),
+				...presetsStore.getBookmark(Number(bookmark.value)),
 			};
 		}
 

app/src/stores/presets.ts

@@ -3,7 +3,7 @@ import { Preset } from '@/types';
 import { useUserStore } from '@/stores/';
 import api from '@/api';
 import { nanoid } from 'nanoid';
-import { merge, cloneDeep } from 'lodash';
+import { merge, cloneDeep, isEqual } from 'lodash';
 
 const defaultPreset: Omit<Preset, 'collection'> = {
 	bookmark: null,
@@ -239,6 +239,7 @@ export const usePresetsStore = createStore({
 		 * Saves the given preset. If it's the default preset, it saves it as a new preset. If the
 		 * preset already exists, but doesn't have a user associated, it will create a preset for
 		 * the user. If the preset already exists and is for a user, we update the preset.
+		 * The response gets added to the store.
 		 */
 		async savePreset(preset: Preset) {
 			const userStore = useUserStore();
@@ -272,10 +273,7 @@ export const usePresetsStore = createStore({
 		saveLocal(updatedPreset: Preset) {
 			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
 				if (preset.id === updatedPreset.id) {
-					return {
-						...updatedPreset,
-						$saved: false,
-					};
+					return { ...updatedPreset };
 				}
 
 				return preset;

app/src/types/presets.ts

@@ -35,7 +35,4 @@ export type Preset = {
 	layout: string | null;
 	layout_query: { [layout: string]: any } | null;
 	layout_options: { [layout: string]: any } | null;
-
-	// App flag to indicate that the local copy hasn't been saved to the API yet
-	$saved?: false;
 };

app/src/views/private/components/search-input/search-input.vue

@@ -7,13 +7,7 @@
 		v-tooltip.bottom="active ? null : $t('search')"
 	>
 		<v-icon name="search" />
-		<input
-			ref="input"
-			:value="value"
-			@input="$emit('input', $event.target.value)"
-			@paste="$emit('input', $event.clipboardData.getData('text/plain'))"
-			:placeholder="$t('search_items')"
-		/>
+		<input ref="input" :value="value" @input="emitValue" @paste="emitValue" :placeholder="$t('search_items')" />
 		<v-icon v-if="value" class="empty" name="close" @click.stop="emptyAndClose" />
 	</div>
 </template>
@@ -39,7 +33,7 @@ export default defineComponent({
 			}
 		});
 
-		return { active, disable, input, emptyAndClose };
+		return { active, disable, input, emptyAndClose, emitValue };
 
 		function disable() {
 			active.value = false;
@@ -49,6 +43,12 @@ export default defineComponent({
 			emit('input', null);
 			active.value = false;
 		}
+
+		function emitValue() {
+			if (!input.value) return;
+			const value = input.value?.value;
+			emit('input', value);
+		}
 	},
 });
 </script>