refactor(views/table): move attribute detail widget to view

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -295,6 +295,7 @@ interface AttributeDetailOpts {
     x: number;
     y: number;
     focus?: "name";
+    parent?: HTMLElement;
 }
 
 interface SearchRelatedResponse {
@@ -560,19 +561,22 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
 
         this.toggleInt(true);
 
-        const offset = this.parent?.$widget.offset() || { top: 0, left: 0 };
+        const offset = this.parent?.$widget?.offset() || { top: 0, left: 0 };
         const detPosition = this.getDetailPosition(x, offset);
         const outerHeight = this.$widget.outerHeight();
         const height = $(window).height();
 
-        if (detPosition && outerHeight && height) {
+        if (!detPosition || !outerHeight || !height) {
-            this.$widget
+            console.warn("Can't position popup, is it attached?");
-                .css("left", detPosition.left)
+            return;
-                .css("right", detPosition.right)
-                .css("top", y - offset.top + 70)
-                .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
         }
 
+        this.$widget
+            .css("left", detPosition.left)
+            .css("right", detPosition.right)
+            .css("top", y - offset.top + 70)
+            .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
+
         if (focus === "name") {
             this.$inputName.trigger("focus").trigger("select");
         }

apps/client/src/widgets/note_list.ts

@@ -3,8 +3,6 @@ import NoteListRenderer from "../services/note_list_renderer.js";
 import type FNote from "../entities/fnote.js";
 import type { CommandListener, CommandListenerData, CommandMappings, CommandNames, EventData, EventNames } from "../components/app_context.js";
 import type ViewMode from "./view_widgets/view_mode.js";
-import AttributeDetailWidget from "./attribute_widgets/attribute_detail.js";
-import { Attribute } from "../services/attribute_parser.js";
 
 const TPL = /*html*/`
 <div class="note-list-widget">
@@ -39,7 +37,6 @@ export default class NoteListWidget extends NoteContextAwareWidget {
     private noteIdRefreshed?: string;
     private shownNoteId?: string | null;
     private viewMode?: ViewMode<any> | null;
-    private attributeDetailWidget: AttributeDetailWidget;
     private displayOnlyCollections: boolean;
 
     /**
@@ -47,9 +44,7 @@ export default class NoteListWidget extends NoteContextAwareWidget {
      */
     constructor(displayOnlyCollections: boolean) {
         super();
-        this.attributeDetailWidget = new AttributeDetailWidget()
+
-                .contentSized()
-                .setParent(this);
         this.displayOnlyCollections = displayOnlyCollections;
     }
 
@@ -72,7 +67,6 @@ export default class NoteListWidget extends NoteContextAwareWidget {
         this.$widget = $(TPL);
         this.contentSized();
         this.$content = this.$widget.find(".note-list-widget-content");
-        this.$widget.append(this.attributeDetailWidget.render());
 
         const observer = new IntersectionObserver(
             (entries) => {
@@ -91,23 +85,6 @@ export default class NoteListWidget extends NoteContextAwareWidget {
         setTimeout(() => observer.observe(this.$widget[0]), 10);
     }
 
-    addNoteListItemEvent() {
-        const attr: Attribute = {
-            type: "label",
-            name: "label:myLabel",
-            value: "promoted,single,text"
-        };
-
-        this.attributeDetailWidget!.showAttributeDetail({
-            attribute: attr,
-            allAttributes: [ attr ],
-            isOwned: true,
-            x: 100,
-            y: 200,
-            focus: "name"
-        });
-    }
-
     checkRenderStatus() {
         // console.log("this.isIntersecting", this.isIntersecting);
         // console.log(`${this.noteIdRefreshed} === ${this.noteId}`, this.noteIdRefreshed === this.noteId);

apps/client/src/widgets/view_widgets/table_view/index.ts

@@ -14,6 +14,7 @@ import buildFooter from "./footer.js";
 import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows.js";
 import { AttributeDefinitionInformation, buildColumnDefinitions } from "./columns.js";
 import { setupContextMenu } from "./context_menu.js";
+import AttributeDetailWidget from "../../attribute_widgets/attribute_detail.js";
 
 const TPL = /*html*/`
 <div class="table-view">
@@ -105,6 +106,8 @@ export default class TableView extends ViewMode<StateInfo> {
     private api?: Tabulator;
     private newAttribute?: Attribute;
     private persistentData: StateInfo["tableData"];
+    private attributeDetailWidget: AttributeDetailWidget;
+
 
     constructor(args: ViewModeArgs) {
         super(args, "table");
@@ -114,6 +117,11 @@ export default class TableView extends ViewMode<StateInfo> {
         this.spacedUpdate = new SpacedUpdate(() => this.onSave(), 5_000);
         this.persistentData = {};
         args.$parent.append(this.$root);
+
+        this.attributeDetailWidget = new AttributeDetailWidget()
+                .contentSized()
+                .setParent(glob.getComponentByEl(args.$parent[0]));
+        args.$parent.append(this.attributeDetailWidget.render());
     }
 
     async renderList() {
@@ -226,6 +234,23 @@ export default class TableView extends ViewMode<StateInfo> {
         console.log("Save attributes", this.newAttribute);
     }
 
+    addNoteListItemEvent() {
+        const attr: Attribute = {
+            type: "label",
+            name: "label:myLabel",
+            value: "promoted,single,text"
+        };
+
+        this.attributeDetailWidget!.showAttributeDetail({
+            attribute: attr,
+            allAttributes: [ attr ],
+            isOwned: true,
+            x: 0,
+            y: 75,
+            focus: "name"
+        });
+    }
+
     addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
         const parentNotePath = customNotePath ?? this.args.parentNotePath;
         if (parentNotePath) {