From a09e1cd88e73b306edd91929f79d6ada8f98acd3 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 17:40:22 -0400
Subject: [PATCH 1/3] Start on new translations interface

---
 .../interfaces/translations/translations.vue  | 316 ++++--------------
 1 file changed, 57 insertions(+), 259 deletions(-)

diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index ae397188da..21c9df182e 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -1,44 +1,21 @@
 <template>
-	<div v-if="itemsLoading || languagesLoading" class="loader">
+	<div v-if="languagesLoading">
 		<v-skeleton-loader v-for="n in 5" :key="n" />
 	</div>
 
-	<v-item-group v-else scope="translations" class="translations">
-		<v-item
-			scope="translations"
-			class="row"
-			v-for="(item, index) in languages"
-			:key="item[languagesPrimaryKeyField.field]"
-			#default="{ active, toggle }"
-		>
-			<div class="header" @click="toggle">
-				<render-template :template="rowTemplate" :collection="languagesCollection" :item="item" />
-			</div>
-			<transition-expand>
-				<div v-if="active">
-					<div class="form">
-						<v-divider />
-						<v-form
-							:initial-values="existing[index]"
-							:collection="translationsCollection"
-							:primary-key="existing[index][translationsPrimaryKeyField.field] || '+'"
-							:edits="edits[index]"
-							@input="emitValue($event, existing[index][translationsPrimaryKeyField.field])"
-						/>
-					</div>
-				</div>
-			</transition-expand>
-		</v-item>
-	</v-item-group>
+	<div class="translations" v-else>
+		<button v-for="languageItem in languages" :key="languageItem[languagesPrimaryKeyField]">
+			<render-template :template="languagesTemplate" :collection="languagesCollection" :item="languageItem" />
+		</button>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, toRefs, watch, PropType } from '@vue/composition-api';
-import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
-import useCollection from '@/composables/use-collection';
+import { defineComponent, PropType, computed, ref, watch } from '@vue/composition-api';
+import { useRelationsStore, useFieldsStore } from '@/stores/';
 import api from '@/api';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 import { Relation } from '@/types';
+import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 
 export default defineComponent({
 	props: {
@@ -59,140 +36,94 @@ export default defineComponent({
 			default: null,
 		},
 		value: {
-			type: Array as PropType<Record<string, any>[]>,
+			type: Array as PropType<(string | number | Record<string, any>)[]>,
 			default: () => [],
 		},
 	},
 	setup(props, { emit }) {
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
 		const relationsStore = useRelationsStore();
+		const fieldsStore = useFieldsStore();
 
-		const {
-			relations,
-			translationsCollection,
-			languagesCollection,
-			languageField,
-			translationsPrimaryKeyField,
-		} = useRelation();
-
+		const { relationsForField, relationTranslations, relationLanguages } = useRelations();
 		const {
 			languages,
 			loading: languagesLoading,
 			error: languagesError,
+			template: languagesTemplate,
+			collection: languagesCollection,
 			primaryKeyField: languagesPrimaryKeyField,
 		} = useLanguages();
 
-		const { items, loading: itemsLoading, error: itemsError } = useCurrent();
-		const { existing, edits, emitValue } = useValues();
-
-		const rowTemplate = computed(() => {
-			const { info, primaryKeyField } = useCollection(languagesCollection);
-			const defaultTemplate = info.value?.meta?.display_template;
-
-			return props.template || defaultTemplate || `{{ ${primaryKeyField.value.field} }}`;
-		});
-
 		return {
-			relations,
-			translationsCollection,
-			languagesCollection,
+			relationsForField,
+			relationTranslations,
+			relationLanguages,
 			languages,
-			languagesLoading,
-			languagesError,
+			languagesTemplate,
+			languagesCollection,
 			languagesPrimaryKeyField,
-			items,
-			itemsLoading,
-			itemsError,
-			existing,
-			edits,
-			emitValue,
-			rowTemplate,
-			translationsPrimaryKeyField,
+			languagesLoading,
 		};
 
-		function useRelation() {
-			const relations = computed(() => {
+		function useRelations() {
+			const relationsForField = computed(() => {
 				return relationsStore.getRelationsForField(props.collection, props.field);
 			});
 
-			const translationsRelation = computed(() => {
-				if (!relations.value || relations.value.length === 0) return null;
-
+			const relationTranslations = computed(() => {
+				if (!relationsForField.value) return null;
 				return (
-					relations.value.find((relation: Relation) => {
-						return relation.one_collection === props.collection && relation.one_field === props.field;
-					}) || null
+					relationsForField.value.find(
+						(relation: Relation) =>
+							relation.one_collection === props.collection && relation.one_field === props.field
+					) || null
 				);
 			});
 
-			const translationsCollection = computed(() => {
-				if (!translationsRelation.value) return null;
-				return translationsRelation.value.many_collection;
-			});
-
-			const translationsPrimaryKeyField = computed(() => {
-				return fieldsStore.getPrimaryKeyFieldForCollection(translationsCollection.value);
-			});
-
-			const languagesRelation = computed(() => {
-				if (!relations.value || relations.value.length === 0) return null;
-
+			const relationLanguages = computed(() => {
+				if (!relationsForField.value) return null;
 				return (
-					relations.value.find((relation: Relation) => {
-						return relation.one_collection !== props.collection && relation.one_field !== props.field;
-					}) || null
+					relationsForField.value.find((relation: Relation) => relation !== relationTranslations.value) ||
+					null
 				);
 			});
 
-			const languagesCollection = computed(() => {
-				if (!languagesRelation.value) return null;
-				return languagesRelation.value.one_collection;
-			});
-
-			const languageField = computed(() => {
-				if (!languagesRelation.value) return null;
-				return languagesRelation.value.many_field;
-			});
-
-			return {
-				relations,
-				translationsCollection,
-				languagesCollection,
-				languageField,
-				translationsPrimaryKeyField,
-			};
+			return { relationsForField, relationTranslations, relationLanguages };
 		}
 
 		function useLanguages() {
-			const languages = ref<Record<string, any> | null>(null);
+			const languages = ref();
 			const loading = ref(false);
-			const error = ref(null);
+			const error = ref<any>(null);
 
-			const { primaryKeyField } = useCollection(languagesCollection);
+			const collection = computed(() => {
+				if (!relationLanguages.value) return null;
+				return relationLanguages.value.one_collection;
+			});
 
-			watch(languagesCollection, fetchLanguages, { immediate: true });
+			const primaryKeyField = computed(() => {
+				if (!collection.value) return null;
+				return fieldsStore.getPrimaryKeyFieldForCollection(collection.value).field;
+			});
 
-			return { languages, loading, error, primaryKeyField };
+			const template = computed(() => {
+				if (!primaryKeyField.value) return '';
+				return props.template || `{{ ${primaryKeyField.value} }}`;
+			});
+
+			watch(collection, fetchLanguages, { immediate: true });
+
+			return { languages, loading, error, collection, template, primaryKeyField };
 
 			async function fetchLanguages() {
+				if (!collection.value) return;
+
+				const fields = getFieldsFromTemplate(template.value);
+
 				loading.value = true;
 
-				// const fields = getFieldsFromTemplate(props.template);
-				const fields = ['*'];
-
-				if (fields.includes(primaryKeyField.value.field) === false) {
-					fields.push(primaryKeyField.value.field);
-				}
-
 				try {
-					const response = await api.get(`/items/${languagesCollection.value}`, {
-						params: {
-							fields: fields,
-							limit: -1,
-						},
-					});
-
+					const response = await api.get(`/items/${collection.value}`, { params: { fields } });
 					languages.value = response.data.data;
 				} catch (err) {
 					error.value = err;
@@ -201,143 +132,10 @@ export default defineComponent({
 				}
 			}
 		}
-
-		function useCurrent() {
-			const loading = ref(false);
-			const items = ref<any[]>([]);
-			const error = ref(null);
-
-			watch(
-				() => props.primaryKey,
-				(newKey) => {
-					if (newKey !== null && newKey !== '+') {
-						fetchCurrent();
-					}
-				},
-				{
-					immediate: true,
-				}
-			);
-
-			return { loading, items, error };
-
-			async function fetchCurrent() {
-				loading.value = true;
-
-				try {
-					const response = await api.get(`/items/${props.collection}/${props.primaryKey}`, {
-						params: {
-							fields: props.field + '.*',
-						},
-					});
-
-					items.value = response.data.data[props.field];
-				} catch (err) {
-					error.value = err;
-				} finally {
-					loading.value = false;
-				}
-			}
-		}
-
-		function useValues() {
-			const existing = computed(() => {
-				if (!languages.value) return [];
-
-				return languages.value.map((language: any) => {
-					const existing =
-						items.value.find(
-							(item) => item[languageField.value] === language[languagesPrimaryKeyField.value.field]
-						) || {};
-
-					return existing;
-				});
-			});
-
-			const edits = computed(() => {
-				if (!languages.value) return [];
-
-				return languages.value.map((language: any) => {
-					const edits =
-						(props.value || []).find(
-							(edit) => edit[languageField.value] === language[languagesPrimaryKeyField.value.field]
-						) || {};
-
-					edits[languageField.value] = language[languagesPrimaryKeyField.value.field];
-
-					return edits;
-				});
-			});
-
-			return { existing, edits, emitValue };
-
-			function emitValue(newEdit: any, existingPrimaryKey: undefined | string | number) {
-				const currentEdits = [...(props.value || [])];
-
-				if (existingPrimaryKey) {
-					newEdit = {
-						...newEdit,
-						[translationsPrimaryKeyField.value.field]: existingPrimaryKey,
-					};
-				}
-
-				if (currentEdits.some((edit) => edit[languageField.value] === newEdit[languageField.value])) {
-					emit(
-						'input',
-						currentEdits.map((edit) => {
-							if (edit[languageField.value] === newEdit[languageField.value]) {
-								return newEdit;
-							}
-
-							return edit;
-						})
-					);
-				} else {
-					currentEdits.push(newEdit);
-					emit('input', currentEdits);
-				}
-			}
-		}
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles.scss';
-
-.loader .v-skeleton-loader + .v-skeleton-loader {
-	margin-top: 8px;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	padding: 12px;
-	cursor: pointer;
-}
-
-.row {
-	background-color: var(--background-subdued);
-	border-radius: var(--border-radius);
-
-	& + .row {
-		margin-top: 8px;
-	}
-}
-
-.v-divider {
-	margin-bottom: 12px;
-}
-
-.form {
-	--v-form-vertical-gap: 24px;
-	--v-form-horizontal-gap: 12px;
-
-	padding: 12px;
-	padding-top: 0;
-
-	::v-deep .type-label {
-		@include type-text;
-	}
-}
+//
 </style>

From c390063a2affc0db00f1fb36432a05c188b4085d Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 17:56:46 -0400
Subject: [PATCH 2/3] Fetch / render languages

---
 .../interfaces/translations/translations.vue  | 54 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index 21c9df182e..34b34cfa1b 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -4,8 +4,16 @@
 	</div>
 
 	<div class="translations" v-else>
-		<button v-for="languageItem in languages" :key="languageItem[languagesPrimaryKeyField]">
+		<button
+			v-for="languageItem in languages"
+			:key="languageItem[languagesPrimaryKeyField]"
+			@click="startEditing(languageItem[languagesPrimaryKeyField])"
+			class="language-row"
+		>
+			<v-icon class="translate" name="translate" />
 			<render-template :template="languagesTemplate" :collection="languagesCollection" :item="languageItem" />
+			<div class="spacer" />
+			<v-icon class="launch" name="launch" />
 		</button>
 	</div>
 </template>
@@ -45,6 +53,7 @@ export default defineComponent({
 		const fieldsStore = useFieldsStore();
 
 		const { relationsForField, relationTranslations, relationLanguages } = useRelations();
+
 		const {
 			languages,
 			loading: languagesLoading,
@@ -54,6 +63,8 @@ export default defineComponent({
 			primaryKeyField: languagesPrimaryKeyField,
 		} = useLanguages();
 
+		const { startEditing } = useEdits();
+
 		return {
 			relationsForField,
 			relationTranslations,
@@ -63,6 +74,7 @@ export default defineComponent({
 			languagesCollection,
 			languagesPrimaryKeyField,
 			languagesLoading,
+			startEditing,
 		};
 
 		function useRelations() {
@@ -132,10 +144,48 @@ export default defineComponent({
 				}
 			}
 		}
+
+		function useEdits() {
+			return { startEditing };
+
+			function startEditing(language: string | number) {
+				console.log('start editing ' + language);
+			}
+		}
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-//
+.language-row {
+	--v-icon-color: var(--foreground-subdued);
+
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: 12px;
+	text-align: left;
+	background-color: var(--background-subdued);
+	border-radius: var(--border-radius);
+
+	& + & {
+		margin-top: 8px;
+	}
+
+	.translate {
+		margin-right: 12px;
+	}
+
+	.spacer {
+		flex-grow: 1;
+	}
+
+	.launch {
+		transition: color var(--fast) var(--transition);
+	}
+
+	&:hover .launch {
+		--v-icon-color: var(--foreground-normal);
+	}
+}
 </style>

From 3d05b8cbe5db37f576a4b722dc8d00a753ab5ec6 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 18:59:00 -0400
Subject: [PATCH 3/3] Finish translations

---
 api/src/utils/parse-filter.ts                 |   3 +-
 .../interfaces/translations/translations.vue  | 232 +++++++++++++++---
 .../components/drawer-item/drawer-item.vue    |   3 +-
 3 files changed, 206 insertions(+), 32 deletions(-)

diff --git a/api/src/utils/parse-filter.ts b/api/src/utils/parse-filter.ts
index 92c8888648..eef2d5aecd 100644
--- a/api/src/utils/parse-filter.ts
+++ b/api/src/utils/parse-filter.ts
@@ -1,12 +1,13 @@
 import { Filter, Accountability } from '../types';
 import { deepMap } from './deep-map';
+import { toArray } from '../utils/to-array';
 
 export function parseFilter(filter: Filter, accountability: Accountability | null) {
 	return deepMap(filter, (val: any, key: string) => {
 		if (val === 'true') return true;
 		if (val === 'false') return false;
 
-		if (key === '_in' || key === '_nin') return val.split(',').filter((val: any) => val);
+		if (key === '_in' || key === '_nin') return toArray(val);
 
 		if (val === '$NOW') return new Date();
 		if (val === '$CURRENT_USER') return accountability?.user || null;
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index 34b34cfa1b..ebb5c79740 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -15,17 +15,29 @@
 			<div class="spacer" />
 			<v-icon class="launch" name="launch" />
 		</button>
+
+		<drawer-item
+			v-if="editing"
+			active
+			:collection="translationsCollection"
+			:primary-key="editing"
+			:edits="edits"
+			@input="stageEdits"
+			@update:active="cancelEdit"
+		/>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, computed, ref, watch } from '@vue/composition-api';
-import { useRelationsStore, useFieldsStore } from '@/stores/';
+import { useRelationsStore } from '@/stores/';
 import api from '@/api';
 import { Relation } from '@/types';
 import getFieldsFromTemplate from '@/utils/get-fields-from-template';
+import DrawerItem from '@/views/private/components/drawer-item/drawer-item.vue';
 
 export default defineComponent({
+	components: { DrawerItem },
 	props: {
 		collection: {
 			type: String,
@@ -50,31 +62,43 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const relationsStore = useRelationsStore();
-		const fieldsStore = useFieldsStore();
 
-		const { relationsForField, relationTranslations, relationLanguages } = useRelations();
+		const {
+			relationsForField,
+			translationsRelation,
+			translationsCollection,
+			translationsPrimaryKeyField,
+			languagesRelation,
+			languagesCollection,
+			languagesPrimaryKeyField,
+			translationsLanguageField,
+		} = useRelations();
 
 		const {
 			languages,
 			loading: languagesLoading,
 			error: languagesError,
 			template: languagesTemplate,
-			collection: languagesCollection,
-			primaryKeyField: languagesPrimaryKeyField,
 		} = useLanguages();
 
-		const { startEditing } = useEdits();
+		const { startEditing, editing, edits, stageEdits, cancelEdit } = useEdits();
 
 		return {
 			relationsForField,
-			relationTranslations,
-			relationLanguages,
+			translationsRelation,
+			translationsCollection,
+			languagesRelation,
 			languages,
 			languagesTemplate,
 			languagesCollection,
 			languagesPrimaryKeyField,
 			languagesLoading,
 			startEditing,
+			translationsLanguageField,
+			editing,
+			stageEdits,
+			cancelEdit,
+			edits,
 		};
 
 		function useRelations() {
@@ -82,7 +106,7 @@ export default defineComponent({
 				return relationsStore.getRelationsForField(props.collection, props.field);
 			});
 
-			const relationTranslations = computed(() => {
+			const translationsRelation = computed(() => {
 				if (!relationsForField.value) return null;
 				return (
 					relationsForField.value.find(
@@ -92,15 +116,49 @@ export default defineComponent({
 				);
 			});
 
-			const relationLanguages = computed(() => {
+			const translationsCollection = computed(() => {
+				if (!translationsRelation.value) return null;
+				return translationsRelation.value.many_collection;
+			});
+
+			const translationsPrimaryKeyField = computed(() => {
+				if (!translationsRelation.value) return null;
+				return translationsRelation.value.many_primary;
+			});
+
+			const languagesRelation = computed(() => {
 				if (!relationsForField.value) return null;
 				return (
-					relationsForField.value.find((relation: Relation) => relation !== relationTranslations.value) ||
+					relationsForField.value.find((relation: Relation) => relation !== translationsRelation.value) ||
 					null
 				);
 			});
 
-			return { relationsForField, relationTranslations, relationLanguages };
+			const languagesCollection = computed(() => {
+				if (!languagesRelation.value) return null;
+				return languagesRelation.value.one_collection;
+			});
+
+			const languagesPrimaryKeyField = computed(() => {
+				if (!languagesRelation.value) return null;
+				return languagesRelation.value.one_primary;
+			});
+
+			const translationsLanguageField = computed(() => {
+				if (!languagesRelation.value) return null;
+				return languagesRelation.value.many_field;
+			});
+
+			return {
+				relationsForField,
+				translationsRelation,
+				translationsCollection,
+				translationsPrimaryKeyField,
+				languagesRelation,
+				languagesCollection,
+				languagesPrimaryKeyField,
+				translationsLanguageField,
+			};
 		}
 
 		function useLanguages() {
@@ -108,34 +166,24 @@ export default defineComponent({
 			const loading = ref(false);
 			const error = ref<any>(null);
 
-			const collection = computed(() => {
-				if (!relationLanguages.value) return null;
-				return relationLanguages.value.one_collection;
-			});
-
-			const primaryKeyField = computed(() => {
-				if (!collection.value) return null;
-				return fieldsStore.getPrimaryKeyFieldForCollection(collection.value).field;
-			});
-
 			const template = computed(() => {
-				if (!primaryKeyField.value) return '';
-				return props.template || `{{ ${primaryKeyField.value} }}`;
+				if (!languagesPrimaryKeyField.value) return '';
+				return props.template || `{{ ${languagesPrimaryKeyField.value} }}`;
 			});
 
-			watch(collection, fetchLanguages, { immediate: true });
+			watch(languagesCollection, fetchLanguages, { immediate: true });
 
-			return { languages, loading, error, collection, template, primaryKeyField };
+			return { languages, loading, error, template };
 
 			async function fetchLanguages() {
-				if (!collection.value) return;
+				if (!languagesCollection.value) return;
 
 				const fields = getFieldsFromTemplate(template.value);
 
 				loading.value = true;
 
 				try {
-					const response = await api.get(`/items/${collection.value}`, { params: { fields } });
+					const response = await api.get(`/items/${languagesCollection.value}`, { params: { fields } });
 					languages.value = response.data.data;
 				} catch (err) {
 					error.value = err;
@@ -146,10 +194,134 @@ export default defineComponent({
 		}
 
 		function useEdits() {
-			return { startEditing };
+			const keyMap = ref<Record<string, string | number>[]>();
+
+			const loading = ref(false);
+			const error = ref<any>(null);
+
+			const editing = ref<boolean | string | number>(false);
+			const edits = ref<Record<string, any>>();
+
+			const existingPrimaryKeys = computed(() => {
+				return (props.value || [])
+					.map((value) => {
+						if (typeof value === 'string' || typeof value === 'number') return value;
+						return value[translationsPrimaryKeyField.value];
+					})
+					.filter((key) => key);
+			});
+
+			watch(() => props.value, fetchKeyMap, { immediate: true });
+
+			return { startEditing, editing, edits, stageEdits, cancelEdit };
 
 			function startEditing(language: string | number) {
-				console.log('start editing ' + language);
+				edits.value = {
+					[translationsLanguageField.value]: language,
+				};
+
+				const existingEdits = (props.value || []).find((val) => {
+					if (typeof val === 'string' || typeof val === 'number') return false;
+					return val[translationsLanguageField.value] === language;
+				});
+
+				if (existingEdits) {
+					edits.value = {
+						...edits.value,
+						...(existingEdits as Record<string, any>),
+					};
+				}
+
+				const primaryKey =
+					keyMap.value?.find((record) => record[translationsLanguageField.value] === language)?.[
+						translationsPrimaryKeyField.value
+					] || '+';
+
+				if (primaryKey !== '+') {
+					edits.value = {
+						...edits.value,
+						[translationsPrimaryKeyField.value]: primaryKey,
+					};
+				}
+
+				editing.value = primaryKey;
+			}
+
+			async function fetchKeyMap() {
+				if (!props.value) return;
+				if (keyMap.value) return;
+
+				const collection = translationsRelation.value.many_collection;
+				const fields = [translationsPrimaryKeyField.value, translationsLanguageField.value];
+
+				loading.value = true;
+
+				try {
+					const response = await api.get(`/items/${collection}`, {
+						params: {
+							fields,
+							filter: {
+								[translationsPrimaryKeyField.value]: {
+									_in: existingPrimaryKeys.value,
+								},
+							},
+						},
+					});
+
+					keyMap.value = response.data.data;
+				} catch (err) {
+					error.value = err;
+				} finally {
+					loading.value = false;
+				}
+			}
+
+			function stageEdits(edits: any) {
+				const editedLanguage = edits[translationsLanguageField.value];
+
+				const languageAlreadyEdited = !!(props.value || []).find((val) => {
+					if (typeof val === 'string' || typeof val === 'number') return false;
+					return val[translationsLanguageField.value] === editedLanguage;
+				});
+
+				if (languageAlreadyEdited === true) {
+					emit(
+						'input',
+						props.value.map((val) => {
+							if (typeof val === 'string' || typeof val === 'number') return val;
+
+							if (val[translationsLanguageField.value] === editedLanguage) {
+								return edits;
+							}
+
+							return val;
+						})
+					);
+				} else {
+					if (editing.value === '+') {
+						emit('input', [...(props.value || []), edits]);
+					} else {
+						emit(
+							'input',
+							props.value.map((val) => {
+								if (typeof val === 'string' || typeof val === 'number') {
+									if (val === editing.value) return edits;
+								} else {
+									if (val[translationsPrimaryKeyField.value] === editing.value) return edits;
+								}
+
+								return val;
+							})
+						);
+					}
+				}
+
+				editing.value = false;
+			}
+
+			function cancelEdit() {
+				edits.value = {};
+				editing.value = false;
 			}
 		}
 	},
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 7cff5a1c8c..e0bb93588e 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -177,7 +177,8 @@ export default defineComponent({
 						item.value = null;
 						localEdits.value = {};
 					}
-				}
+				},
+				{ immediate: true }
 			);
 
 			return { _edits, loading, error, item, fetchItem };