feat(views/table): display a dialog to add a new column

apps/client/src/widgets/note_list.ts

@@ -1,8 +1,10 @@
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import NoteListRenderer from "../services/note_list_renderer.js";
 import type FNote from "../entities/fnote.js";
-import type { CommandListener, CommandListenerData, EventData } from "../components/app_context.js";
+import type { CommandListener, CommandListenerData, CommandMappings, CommandNames, EventData } 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">
@@ -37,6 +39,14 @@ export default class NoteListWidget extends NoteContextAwareWidget {
     private noteIdRefreshed?: string;
     private shownNoteId?: string | null;
     private viewMode?: ViewMode<any> | null;
+    private attributeDetailWidget: AttributeDetailWidget;
+
+    constructor() {
+        super();
+        this.attributeDetailWidget = new AttributeDetailWidget()
+                .contentSized()
+                .setParent(this);
+    }
 
     isEnabled() {
         return super.isEnabled() && this.noteContext?.hasNoteList();
@@ -46,6 +56,7 @@ 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) => {
@@ -64,6 +75,23 @@ 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

@@ -8,6 +8,7 @@ import server from "../../../services/server.js";
 import type { GridApi, GridState } from "ag-grid-community";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import branches from "../../../services/branches.js";
+import type { CommandListenerData } from "../../../components/app_context.js";
 
 const TPL = /*html*/`
 <div class="table-view">
@@ -33,6 +34,10 @@ const TPL = /*html*/`
     }
     </style>
 
+    <div class="header">
+        <button data-trigger-command="addNoteListItem">Add new column</button>
+    </div>
+
     <div class="table-view-container"></div>
 </div>
 `;
@@ -158,5 +163,17 @@ export default class TableView extends ViewMode<StateInfo> {
         };
         return config;
     }
+
+    async saveAttributesCommand() {
+        console.log("Save attributes");
+    }
+
+    async reloadAttributesCommand() {
+        console.log("Reload attributes");
+    }
+
+    async updateAttributeListCommand({ attributes }: CommandListenerData<"updateAttributeList">) {
+        console.log("Update attributes", { attributes });
+    }
 }
 

apps/client/src/widgets/view_widgets/view_mode.ts

@@ -1,6 +1,8 @@
 import type { EventData } from "../../components/app_context.js";
+import Component from "../../components/component.js";
 import type FNote from "../../entities/fnote.js";
 import type { ViewTypeOptions } from "../../services/note_list_renderer.js";
+import type NoteListWidget from "../note_list.js";
 import ViewModeStorage from "./view_mode_storage.js";
 
 export interface ViewModeArgs {
@@ -10,13 +12,14 @@ export interface ViewModeArgs {
     showNotePath?: boolean;
 }
 
-export default abstract class ViewMode<T extends object> {
+export default abstract class ViewMode<T extends object> extends Component {
 
     private _viewStorage: ViewModeStorage<T> | null;
     protected parentNote: FNote;
     protected viewType: ViewTypeOptions;
 
     constructor(args: ViewModeArgs, viewType: ViewTypeOptions) {
+        super();
         this.parentNote = args.parentNote;
         this._viewStorage = null;
         // note list must be added to the DOM immediately, otherwise some functionality scripting (canvas) won't work