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

---
 app/src/protyle/render/av/col.ts      | 34 +++++++++++---------
 app/src/protyle/render/av/relation.ts | 45 ++++++++++++++++++++++++---
 app/src/protyle/render/av/render.ts   | 11 ++++---
 3 files changed, 66 insertions(+), 24 deletions(-)

diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 34b7236fd..3228aacd4 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -8,6 +8,7 @@ import {getLabelByNumberFormat} from "./number";
 import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action";
 import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
 import {focusBlock} from "../../util/selection";
+import {openSearchAV, toggleUpdateRelationBtn} from "./relation";
 
 export const duplicateCol = (options: {
     protyle: IProtyle,
@@ -148,22 +149,22 @@ 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-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?.isTwoWay && isSelf) ? " fn__none" : ""}">
+<label class="b3-menu__item${!colData.relation || (colData.relation?.isTwoWay && isSelf) ? " 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?.isTwoWay && isSelf) ? " fn__none" : ""}" data-type="nobg">
-    <input data-type="colName" style="margin: 8px 0" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.title}">
+<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}">
 </div>
 <div class="b3-menu__item fn__flex-column fn__none" data-type="nobg">
-    <button style="margin-bottom: 8px;" class="b3-button fn__block" data-type="updateRelation">${window.siyuan.languages.confirm}</button>
+    <button style="margin: 8px 0;" class="b3-button fn__block" data-type="updateRelation">${window.siyuan.languages.confirm}</button>
 </div>`;
     }
     return `<div class="b3-menu__items">
@@ -330,16 +331,17 @@ export const bindEditEvent = (options: {
     const backRelationElement = options.menuElement.querySelector('[data-type="backRelation"]') as HTMLInputElement;
     if (backRelationElement) {
         backRelationElement.addEventListener("change", () => {
-            backRelationElement.parentElement.nextElementSibling.classList.toggle("fn__none");
+            toggleUpdateRelationBtn(options.menuElement, avID);
         });
-        const oldValueStr = options.menuElement.querySelector('[data-type="goSearchAV" ]').getAttribute("data-old-value")
-        if (oldValueStr) {
-            const oldValue = JSON.parse(oldValueStr);
-            if (oldValue.isTwoWay) {
-                fetchPost("/api/av/getAttributeView", {id: ""}, (response) => {
-                    console.log(response);
-                });
-            }
+        const goSearchElement = options.menuElement.querySelector('[data-type="goSearchAV"]') as HTMLElement;
+        const oldValue = JSON.parse(goSearchElement.getAttribute("data-old-value"))
+        if (oldValue.avID) {
+            fetchPost("/api/av/getAttributeView", {id: oldValue.avID}, (response) => {
+                console.log(response);
+                // TODO input old value
+            });
+        } else {
+            openSearchAV(avID, goSearchElement);
         }
     }
 };
@@ -443,7 +445,9 @@ export const addAttrViewColAnimation = (options: {
         previousElement.insertAdjacentHTML("afterend", html);
     });
     window.siyuan.menus.menu.remove();
-    showColMenu(options.protyle, options.blockElement, options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${options.id}"]`));
+    if (options.type !== "relation") {
+        showColMenu(options.protyle, options.blockElement, options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${options.id}"]`));
+    }
 };
 
 export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElement: HTMLElement) => {
diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts
index 2d348015c..788601d11 100644
--- a/app/src/protyle/render/av/relation.ts
+++ b/app/src/protyle/render/av/relation.ts
@@ -31,10 +31,14 @@ const genSearchList = (element: Element, keyword: string, avId: string, cb?: ()
     })
 }
 
-const setDatabase = (element: HTMLElement, item: HTMLElement) => {
+const setDatabase = (avId: string, element: HTMLElement, item: HTMLElement) => {
     element.dataset.avId = item.dataset.avId;
     element.dataset.blockId = item.dataset.blockId;
     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);
+    }
 }
 
 export const openSearchAV = (avId: string, target: HTMLElement) => {
@@ -64,7 +68,7 @@ export const openSearchAV = (avId: string, target: HTMLElement) => {
                 if (event.key === "Enter") {
                     event.preventDefault();
                     event.stopPropagation();
-                    setDatabase(target, listElement.querySelector(".b3-list-item--focus"));
+                    setDatabase(avId, target, listElement.querySelector(".b3-list-item--focus"));
                     window.siyuan.menus.menu.remove();
                 }
             });
@@ -76,7 +80,7 @@ export const openSearchAV = (avId: string, target: HTMLElement) => {
                 const listItemElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
                 if (listItemElement) {
                     event.stopPropagation();
-                    setDatabase(target, listItemElement)
+                    setDatabase(avId, target, listItemElement)
                     window.siyuan.menus.menu.remove();
                 }
             });
@@ -111,6 +115,37 @@ export const updateRelation = (options: {
     options.avElement.remove();
 }
 
-export const toggleUpdateRelationBtn = () => {
-
+export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: string) => {
+    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 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");
+            } else {
+                inputElement.classList.add("fn__none");
+            }
+        } else {
+            switchItemElement.classList.add("fn__none");
+            inputElement.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 {
+            btnElement.classList.remove("fn__none");
+        }
+    } else if (searchElement.dataset.avId) {
+        switchItemElement.classList.remove("fn__none");
+        if (switchElement.checked) {
+            inputElement.classList.remove("fn__none");
+        } else {
+            inputElement.classList.add("fn__none");
+        }
+        btnElement.classList.remove("fn__none");
+    }
 }
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index a5aeab7a6..c66675278 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -7,6 +7,7 @@ import {focusBlock} from "../../util/selection";
 import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
 import {stickyRow} from "./row";
 import {getCalcValue} from "./calc";
+import {openMenuPanel} from "./openMenuPanel";
 
 export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string) => {
     let avElements: Element[] = [];
@@ -292,14 +293,16 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation, isUndo: bool
                 item.removeAttribute("data-render");
                 const isCurrent = item.querySelector(".av__pulse"); // ctrl+D 后点击添加行
                 avRender(item, protyle, () => {
-                    // https://github.com/siyuan-note/siyuan/issues/9599
-                    if (!isUndo && operation.action === "insertAttrViewBlock" && operation.isDetached && isCurrent) {
-                        popTextCell(protyle, [item.querySelector(`.av__row[data-id="${operation.srcIDs[0]}"] .av__cell[data-detached="true"]`)], "block");
-                    }
                     if (operation.action === "insertAttrViewBlock") {
                         item.querySelectorAll(".av__cell--select").forEach((cellElement: HTMLElement) => {
                             cellElement.classList.remove("av__cell--select");
                         });
+                        // https://github.com/siyuan-note/siyuan/issues/9599
+                        if (!isUndo && operation.isDetached && isCurrent) {
+                            popTextCell(protyle, [item.querySelector(`.av__row[data-id="${operation.srcIDs[0]}"] .av__cell[data-detached="true"]`)], "block");
+                        }
+                    } else if (operation.action === "addAttrViewCol") {
+                        openMenuPanel({protyle, blockElement: item, type: "edit", colId: operation.id});
                     }
                 }, ["addAttrViewView", "duplicateAttrViewView"].includes(operation.action) ? operation.id :
                     (operation.action === "removeAttrViewView" ? null : undefined));