From bb71e29cba9c1e35103af5e1cd7c843bae409a7b Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 24 Dec 2023 22:29:28 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/9888

---
 app/src/protyle/render/av/col.ts      | 10 ++++++----
 app/src/protyle/render/av/relation.ts | 27 ++++++++++++++++++---------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 984e63f2c..fecc6053d 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -149,19 +149,19 @@ export const getEditHTML = (options: {
 </button>`;
     } else if (colData.type === "relation") {
         const isSelf = colData.relation?.avID === options.data.id;
-        html += `<button class="b3-menu__item" data-type="goSearchAV" data-old-value='${JSON.stringify(colData.relation || {})}'>
+        html += `<button class="b3-menu__item" data-type="goSearchAV" data-av-id="${colData.relation?.avID}" data-old-value='${JSON.stringify(colData.relation || {})}'>
     <span class="b3-menu__label">${window.siyuan.languages.relatedTo}</span>
     <span class="b3-menu__accelerator">${isSelf ? window.siyuan.languages.thisDatabase : ""}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
-<label class="b3-menu__item${!colData.relation || (colData.relation?.isTwoWay && isSelf) ? " fn__none" : ""}">
+<label class="b3-menu__item fn__none">
     <span class="fn__flex-center">${window.siyuan.languages.backRelation}</span>
     <svg class="b3-menu__icon b3-menu__icon--small fn__none"><use xlink:href="#iconHelp"></use></svg>
     <span class="fn__space fn__flex-1"></span>
     <input data-type="backRelation" type="checkbox" class="b3-switch b3-switch--menu" ${colData.relation?.isTwoWay ? "checked" : ""}>
 </label>
-<div class="b3-menu__item fn__flex-column${!colData.relation || (colData.relation?.isTwoWay && isSelf) ? " fn__none" : ""}" data-type="nobg">
-    <input data-type="colName" style="margin: 8px 0 4px" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.title}">
+<div class="b3-menu__item fn__flex-column fn__none" data-type="nobg">
+    <input data-old-value="" data-type="colName" style="margin: 8px 0 4px" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.title}">
 </div>
 <div class="b3-menu__item fn__flex-column fn__none" data-type="nobg">
     <button style="margin: 4px 0 8px;" class="b3-button fn__block" data-type="updateRelation">${window.siyuan.languages.confirm}</button>
@@ -349,9 +349,11 @@ export const bindEditEvent = (options: {
                         return true;
                     }
                 })
+                toggleUpdateRelationBtn(options.menuElement, avID);
             });
         } else {
             openSearchAV(avID, goSearchElement);
+            toggleUpdateRelationBtn(options.menuElement, avID);
         }
     }
 };
diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts
index 0839841b7..14870800e 100644
--- a/app/src/protyle/render/av/relation.ts
+++ b/app/src/protyle/render/av/relation.ts
@@ -38,7 +38,7 @@ const setDatabase = (avId: string, element: HTMLElement, item: HTMLElement) => {
     element.querySelector(".b3-menu__accelerator").textContent = item.querySelector(".b3-list-item__hinticon").classList.contains("fn__none") ? item.querySelector(".b3-list-item__text").textContent : window.siyuan.languages.thisDatabase
     const menuElement = hasClosestByClassName(element, "b3-menu__items")
     if (menuElement) {
-        toggleUpdateRelationBtn(menuElement, avId);
+        toggleUpdateRelationBtn(menuElement, avId, true);
     }
 }
 
@@ -113,7 +113,7 @@ export const updateRelation = (options: {
         action: "updateAttrViewColRelation",
         avID: options.avID,
         keyID: colId,
-        id: newAVId,
+        id: newAVId || oldValue.avID,
         backRelationKeyID: oldValue.avID === newAVId ? oldValue.backKeyID : Lute.NewNodeID(),
         isTwoWay: (options.avElement.querySelector(".b3-switch") as HTMLInputElement).checked,
         name: inputElement.value,
@@ -129,26 +129,35 @@ export const updateRelation = (options: {
     options.avElement.remove();
 }
 
-export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: string) => {
+export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: string, resetData = false) => {
     const searchElement = menuItemsElement.querySelector('.b3-menu__item[data-type="goSearchAV"]') as HTMLElement
     const switchItemElement = searchElement.nextElementSibling;
     const switchElement = switchItemElement.querySelector(".b3-switch") as HTMLInputElement;
     const inputItemElement = switchItemElement.nextElementSibling;
     const btnElement = inputItemElement.nextElementSibling;
-    const oldValue = JSON.parse(searchElement.dataset.oldValue);
+    const oldValue = JSON.parse(searchElement.dataset.oldValue) as IAVCellRelationValue;
     if (oldValue.avID) {
-        if (searchElement.dataset.avId !== avId || (searchElement.dataset.avId === avId && oldValue.avID !== avId)) {
+        const inputElement = inputItemElement.querySelector("input") as HTMLInputElement;
+        if (resetData) {
+            if (searchElement.dataset.avId !== oldValue.avID) {
+                inputElement.value = "";
+                switchElement.checked = false;
+            } else {
+                inputElement.value = inputElement.dataset.oldValue
+                switchElement.checked = oldValue.isTwoWay;
+            }
+        }
+        if (searchElement.dataset.avId === avId && oldValue.avID === avId && oldValue.isTwoWay) {
+            switchItemElement.classList.add("fn__none");
+            inputItemElement.classList.add("fn__none");
+        } else {
             switchItemElement.classList.remove("fn__none");
             if (switchElement.checked) {
                 inputItemElement.classList.remove("fn__none");
             } else {
                 inputItemElement.classList.add("fn__none");
             }
-        } else {
-            switchItemElement.classList.add("fn__none");
-            inputItemElement.classList.add("fn__none");
         }
-        const inputElement = inputItemElement.querySelector("input") as HTMLInputElement;
         if ((searchElement.dataset.avId && oldValue.avID !== searchElement.dataset.avId) || oldValue.isTwoWay !== switchElement.checked || inputElement.dataset.oldValue !== inputElement.value) {
             btnElement.classList.remove("fn__none");
         } else {