feat(s3,web-ui): add S3 deletePrefix and getObjectUrl endpoints and add context menus in UI for S3 and Mongo views

ts_web/elements/tsview-mongo-documents.ts

@@ -3,6 +3,7 @@ import { apiService } from '../services/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
 @customElement('tsview-mongo-documents')
 export class TsviewMongoDocuments extends DeesElement {
@@ -330,6 +331,74 @@ export class TsviewMongoDocuments extends DeesElement {
     }
   }
 
+  private handleDocumentContextMenu(event: MouseEvent, doc: Record<string, unknown>) {
+    event.preventDefault();
+    const docId = doc._id as string;
+
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View/Edit',
+        iconName: 'lucide:edit',
+        action: async () => {
+          this.selectDocument(doc);
+        },
+      },
+      {
+        name: 'Copy as JSON',
+        iconName: 'lucide:copy',
+        action: async () => {
+          await navigator.clipboard.writeText(JSON.stringify(doc, null, 2));
+        },
+      },
+      {
+        name: 'Duplicate',
+        iconName: 'lucide:copyPlus',
+        action: async () => {
+          const { _id, ...docWithoutId } = doc;
+          const newDoc = { ...docWithoutId, createdAt: new Date().toISOString() };
+          try {
+            const insertedId = await apiService.insertDocument(
+              this.databaseName,
+              this.collectionName,
+              newDoc
+            );
+            await this.loadDocuments();
+            this.selectedId = insertedId;
+            this.dispatchEvent(
+              new CustomEvent('document-selected', {
+                detail: { documentId: insertedId },
+                bubbles: true,
+                composed: true,
+              })
+            );
+          } catch (err) {
+            console.error('Error duplicating document:', err);
+          }
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete document "${docId}"?`)) {
+            const result = await apiService.deleteDocument(
+              this.databaseName,
+              this.collectionName,
+              docId
+            );
+            if (result.success) {
+              await this.loadDocuments();
+              if (this.selectedId === docId) {
+                this.selectedId = '';
+              }
+            }
+          }
+        },
+      },
+    ]);
+  }
+
   render() {
     const startRecord = (this.page - 1) * this.pageSize + 1;
     const endRecord = Math.min(this.page * this.pageSize, this.total);
@@ -362,6 +431,7 @@ export class TsviewMongoDocuments extends DeesElement {
                     <div
                       class="document-row ${this.selectedId === doc._id ? 'selected' : ''}"
                       @click=${() => this.selectDocument(doc)}
+                      @contextmenu=${(e: MouseEvent) => this.handleDocumentContextMenu(e, doc)}
                     >
                       <div class="document-id">_id: ${doc._id}</div>
                       <div class="document-preview">${this.getDocumentPreview(doc)}</div>