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

---
 app/src/protyle/render/av/col.ts      | 18 ++++++++++++++----
 app/src/protyle/render/av/relation.ts | 21 +++++++++++----------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 3228aacd4..dc9380117 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -161,10 +161,10 @@ export const getEditHTML = (options: {
     <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-top: 8px" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.title}">
+    <input 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: 8px 0;" class="b3-button fn__block" data-type="updateRelation">${window.siyuan.languages.confirm}</button>
+    <button style="margin: 4px 0 8px;" class="b3-button fn__block" data-type="updateRelation">${window.siyuan.languages.confirm}</button>
 </div>`;
     }
     return `<div class="b3-menu__items">
@@ -335,10 +335,20 @@ export const bindEditEvent = (options: {
         });
         const goSearchElement = options.menuElement.querySelector('[data-type="goSearchAV"]') as HTMLElement;
         const oldValue = JSON.parse(goSearchElement.getAttribute("data-old-value"))
+        const inputElement =  options.menuElement.querySelector('[data-type="colName"]') as HTMLInputElement
+        inputElement.addEventListener("input", () => {
+            toggleUpdateRelationBtn(options.menuElement, avID);
+        })
         if (oldValue.avID) {
             fetchPost("/api/av/getAttributeView", {id: oldValue.avID}, (response) => {
-                console.log(response);
-                // TODO input old value
+                goSearchElement.querySelector(".b3-menu__accelerator").textContent = response.data.av.name || window.siyuan.languages.title;
+                response.data.av.keyValues.find((item: { key: { id: string, name: string } }) => {
+                    if (item.key.id === oldValue.backKeyID) {
+                        inputElement.setAttribute("data-old-value", item.key.name || window.siyuan.languages.title);
+                        inputElement.value = item.key.name || window.siyuan.languages.title;
+                        return true;
+                    }
+                })
             });
         } else {
             openSearchAV(avID, goSearchElement);
diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts
index 788601d11..f00f70976 100644
--- a/app/src/protyle/render/av/relation.ts
+++ b/app/src/protyle/render/av/relation.ts
@@ -119,32 +119,33 @@ export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: str
     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 inputElement = switchItemElement.nextElementSibling as HTMLInputElement;
-    const btnElement = inputElement.nextElementSibling;
+    const inputItemElement = switchItemElement.nextElementSibling;
+    const btnElement = inputItemElement.nextElementSibling;
     const oldValue = JSON.parse(searchElement.dataset.oldValue);
     if (oldValue.avID) {
         if (searchElement.dataset.avId !== avId) {
             switchItemElement.classList.remove("fn__none");
             if (switchElement.checked) {
-                inputElement.classList.remove("fn__none");
+                inputItemElement.classList.remove("fn__none");
             } else {
-                inputElement.classList.add("fn__none");
+                inputItemElement.classList.add("fn__none");
             }
         } else {
             switchItemElement.classList.add("fn__none");
-            inputElement.classList.add("fn__none");
+            inputItemElement.classList.add("fn__none");
         }
-        if (oldValue.avID !== searchElement.dataset.avId || oldValue.isTwoWay !== switchElement.checked || inputElement.dataset.oldValue !== inputElement.value) {
-            btnElement.classList.add("fn__none");
-        } else {
+        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 {
+            btnElement.classList.add("fn__none");
         }
     } else if (searchElement.dataset.avId) {
         switchItemElement.classList.remove("fn__none");
         if (switchElement.checked) {
-            inputElement.classList.remove("fn__none");
+            inputItemElement.classList.remove("fn__none");
         } else {
-            inputElement.classList.add("fn__none");
+            inputItemElement.classList.add("fn__none");
         }
         btnElement.classList.remove("fn__none");
     }