From da004545d2ea4d48208ac2ec3192bcb134e503b1 Mon Sep 17 00:00:00 2001 From: Safwan Parkar Date: Tue, 8 Aug 2023 23:44:51 +0400 Subject: [PATCH 1/3] fixed incorrect array being used in comparison Use `symmetricDifference` instead of `difference`. - `difference` only returns values that are present in the edited attributes, but not in the originally fetched attribute vales. This always ends up returning an empty array. - I used `symmetricDifference` as it returns an intersection of `difference` from both sides and works perfectly for this use case, as the original attributes never change. --- .../document-[document]/data/+page.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte index ce29912195..58a16758f6 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte @@ -13,7 +13,7 @@ import { collection, type Attributes } from '../../store'; import { Container } from '$lib/layout'; import AttributeItem from '../attributeItem.svelte'; - import { difference, symmetricDifference } from '$lib/helpers/array'; + import { symmetricDifference } from '$lib/helpers/array'; import { isRelationship, isRelationshipToMany } from '../attributes/store'; const databaseId = $page.params.database; @@ -77,7 +77,7 @@ const docAttribute = $doc?.[attribute.key]; if (attribute.array) { - return !difference(Array.from(workAttribute), Array.from(docAttribute)).length; + return !symmetricDifference(Array.from(workAttribute), Array.from(docAttribute)).length; } if (isRelationship(attribute)) { From 399ec9010873be91e08d2130a71ebfc87eb53589 Mon Sep 17 00:00:00 2001 From: Safwan Parkar Date: Thu, 10 Aug 2023 09:47:53 +0400 Subject: [PATCH 2/3] use deep clone instead of reference copy - Original code creates a reference copy of `$doc` into `$work` which means that editing values of `$work` changes the values in `$doc`. - Fix this behaviour by creating a deep clone of `$doc` into `$work`, so underlying values aren't cross-referenced. --- src/lib/helpers/object.ts | 11 +++++++ .../document-[document]/data/+page.svelte | 33 ++++++++++--------- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/lib/helpers/object.ts b/src/lib/helpers/object.ts index ca6a370a34..6f7a247233 100644 --- a/src/lib/helpers/object.ts +++ b/src/lib/helpers/object.ts @@ -36,3 +36,14 @@ export function deepEqual(obj1: T, obj2: T): boolean { return true; } + +/** + * Creates a deep clone of the given object. This function uses the JSON methods for cloning, + * so it may not be suitable for objects with functions, symbols, or other non-JSON-safe data. + * + * @param obj the object to be cloned + * @returns a deep clone of the provided object + */ +export function deepClone(obj: T): T { + return JSON.parse(JSON.stringify(obj)); +} diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte index 58a16758f6..c435b460be 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte @@ -15,6 +15,7 @@ import AttributeItem from '../attributeItem.svelte'; import { symmetricDifference } from '$lib/helpers/array'; import { isRelationship, isRelationshipToMany } from '../attributes/store'; + import { deepClone } from '$lib/helpers/object'; const databaseId = $page.params.database; const collectionId = $page.params.collection; @@ -22,21 +23,23 @@ const editing = true; const work = writable( - Object.keys($doc) - .filter((key) => { - return ![ - '$id', - '$collection', - '$collectionId', - '$databaseId', - '$createdAt', - '$updatedAt' - ].includes(key); - }) - .reduce((obj, key) => { - obj[key] = $doc[key]; - return obj; - }, {}) as Models.Document + deepClone( + Object.keys($doc) + .filter((key) => { + return ![ + '$id', + '$collection', + '$collectionId', + '$databaseId', + '$createdAt', + '$updatedAt' + ].includes(key); + }) + .reduce((obj, key) => { + obj[key] = $doc[key]; + return obj; + }, {}) as Models.Document + ) ); async function updateData() { From 5ad034973eddce2e671a959f69bb0bcd413acd21 Mon Sep 17 00:00:00 2001 From: Safwan Parkar Date: Thu, 10 Aug 2023 15:53:16 +0400 Subject: [PATCH 3/3] Simplify initialization of editable attributes for clarity Instead of cramming all the steps for correct deep cloning, I split the implementation into 4 distinct steps: - define they keys to exclude - filtering the keys - reduce filtered keys into an object - returning a writable deep clone --- .../document-[document]/data/+page.svelte | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte index c435b460be..b96634b095 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte +++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte @@ -22,25 +22,29 @@ const documentId = $page.params.document; const editing = true; - const work = writable( - deepClone( - Object.keys($doc) - .filter((key) => { - return ![ - '$id', - '$collection', - '$collectionId', - '$databaseId', - '$createdAt', - '$updatedAt' - ].includes(key); - }) - .reduce((obj, key) => { - obj[key] = $doc[key]; - return obj; - }, {}) as Models.Document - ) - ); + function initWork() { + const prohibitedKeys = [ + '$id', + '$collection', + '$collectionId', + '$databaseId', + '$createdAt', + '$updatedAt' + ]; + + const filteredKeys = Object.keys($doc).filter((key) => { + return !prohibitedKeys.includes(key); + }); + + const result = filteredKeys.reduce((obj, key) => { + obj[key] = $doc[key]; + return obj; + }, {}); + + return writable(deepClone(result as Models.Document)); + } + + const work = initWork(); async function updateData() { try {