initial

ts_web/elements/tsview-mongo-collections.ts

@@ -0,0 +1,159 @@
+import * as plugins from '../plugins.js';
+import { apiService, type IMongoCollection } from '../services/index.js';
+
+const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+
+@customElement('tsview-mongo-collections')
+export class TsviewMongoCollections extends DeesElement {
+  @property({ type: String })
+  public accessor databaseName: string = '';
+
+  @property({ type: String })
+  public accessor selectedCollection: string = '';
+
+  @state()
+  private accessor collections: IMongoCollection[] = [];
+
+  @state()
+  private accessor loading: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .collections-list {
+        padding-left: 12px;
+      }
+
+      .collection-item {
+        padding: 6px 12px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        transition: background 0.1s;
+      }
+
+      .collection-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      .collection-item.selected {
+        background: rgba(99, 102, 241, 0.15);
+        color: #818cf8;
+      }
+
+      .collection-name {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .collection-icon {
+        width: 14px;
+        height: 14px;
+        color: #888;
+      }
+
+      .collection-count {
+        font-size: 11px;
+        color: #666;
+        background: rgba(255, 255, 255, 0.1);
+        padding: 2px 6px;
+        border-radius: 10px;
+      }
+
+      .loading-state {
+        padding: 8px 12px;
+        color: #666;
+        font-size: 12px;
+      }
+
+      .empty-state {
+        padding: 8px 12px;
+        color: #666;
+        font-size: 12px;
+        font-style: italic;
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.loadCollections();
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('databaseName')) {
+      this.loadCollections();
+    }
+  }
+
+  private async loadCollections() {
+    if (!this.databaseName) return;
+
+    this.loading = true;
+    try {
+      this.collections = await apiService.listCollections(this.databaseName);
+    } catch (err) {
+      console.error('Error loading collections:', err);
+      this.collections = [];
+    }
+    this.loading = false;
+  }
+
+  private selectCollection(name: string) {
+    this.dispatchEvent(
+      new CustomEvent('collection-selected', {
+        detail: name,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private formatCount(count?: number): string {
+    if (count === undefined) return '';
+    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+    if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+    return count.toString();
+  }
+
+  render() {
+    if (this.loading) {
+      return html`<div class="loading-state">Loading collections...</div>`;
+    }
+
+    if (this.collections.length === 0) {
+      return html`<div class="empty-state">No collections</div>`;
+    }
+
+    return html`
+      <div class="collections-list">
+        ${this.collections.map(
+          (coll) => html`
+            <div
+              class="collection-item ${this.selectedCollection === coll.name ? 'selected' : ''}"
+              @click=${() => this.selectCollection(coll.name)}
+            >
+              <span class="collection-name">
+                <svg class="collection-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                </svg>
+                ${coll.name}
+              </span>
+              ${coll.count !== undefined
+                ? html`<span class="collection-count">${this.formatCount(coll.count)}</span>`
+                : ''}
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+}