366 lines
8.5 KiB
TypeScript
366 lines
8.5 KiB
TypeScript
import * as plugins from '../plugins.js';
|
|
import { apiService } from '../services/index.js';
|
|
|
|
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
|
|
|
@customElement('tsview-mongo-document')
|
|
export class TsviewMongoDocument extends DeesElement {
|
|
@property({ type: String })
|
|
public accessor databaseName: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor collectionName: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor documentId: string = '';
|
|
|
|
@state()
|
|
private accessor document: Record<string, unknown> | null = null;
|
|
|
|
@state()
|
|
private accessor loading: boolean = false;
|
|
|
|
@state()
|
|
private accessor editing: boolean = false;
|
|
|
|
@state()
|
|
private accessor editContent: string = '';
|
|
|
|
@state()
|
|
private accessor error: string = '';
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.document-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.header {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #333;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 6px 12px;
|
|
background: transparent;
|
|
border: 1px solid #444;
|
|
color: #888;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
border-color: #666;
|
|
color: #aaa;
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: rgba(99, 102, 241, 0.2);
|
|
border-color: #6366f1;
|
|
color: #818cf8;
|
|
}
|
|
|
|
.action-btn.primary:hover {
|
|
background: rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.action-btn.danger {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
border-color: #ef4444;
|
|
color: #f87171;
|
|
}
|
|
|
|
.action-btn.danger:hover {
|
|
background: rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
}
|
|
|
|
.json-view {
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
color: #ccc;
|
|
}
|
|
|
|
.json-key {
|
|
color: #818cf8;
|
|
}
|
|
|
|
.json-string {
|
|
color: #a5d6a7;
|
|
}
|
|
|
|
.json-number {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.json-boolean {
|
|
color: #f87171;
|
|
}
|
|
|
|
.json-null {
|
|
color: #888;
|
|
}
|
|
|
|
.edit-area {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid #444;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
padding: 12px;
|
|
resize: none;
|
|
}
|
|
|
|
.edit-area:focus {
|
|
outline: none;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: #666;
|
|
text-align: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.empty-state svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 12px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.loading-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: #888;
|
|
}
|
|
|
|
.error-state {
|
|
padding: 16px;
|
|
color: #f87171;
|
|
text-align: center;
|
|
}
|
|
`,
|
|
];
|
|
|
|
updated(changedProperties: Map<string, unknown>) {
|
|
if (changedProperties.has('documentId')) {
|
|
this.editing = false;
|
|
if (this.documentId) {
|
|
this.loadDocument();
|
|
} else {
|
|
this.document = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
private async loadDocument() {
|
|
if (!this.documentId || !this.databaseName || !this.collectionName) return;
|
|
|
|
this.loading = true;
|
|
this.error = '';
|
|
|
|
try {
|
|
this.document = await apiService.getDocument(
|
|
this.databaseName,
|
|
this.collectionName,
|
|
this.documentId
|
|
);
|
|
} catch (err) {
|
|
console.error('Error loading document:', err);
|
|
this.error = 'Failed to load document';
|
|
}
|
|
|
|
this.loading = false;
|
|
}
|
|
|
|
private startEditing() {
|
|
this.editContent = JSON.stringify(this.document, null, 2);
|
|
this.editing = true;
|
|
}
|
|
|
|
private cancelEditing() {
|
|
this.editing = false;
|
|
this.editContent = '';
|
|
}
|
|
|
|
private async saveDocument() {
|
|
try {
|
|
const updatedDoc = JSON.parse(this.editContent);
|
|
|
|
// Remove _id from update (can't update _id)
|
|
const { _id, ...updateFields } = updatedDoc;
|
|
|
|
await apiService.updateDocument(
|
|
this.databaseName,
|
|
this.collectionName,
|
|
this.documentId,
|
|
updateFields
|
|
);
|
|
|
|
this.editing = false;
|
|
await this.loadDocument();
|
|
|
|
this.dispatchEvent(
|
|
new CustomEvent('document-updated', {
|
|
detail: { documentId: this.documentId },
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
} catch (err) {
|
|
console.error('Error saving document:', err);
|
|
this.error = 'Invalid JSON or save failed';
|
|
}
|
|
}
|
|
|
|
private async deleteDocument() {
|
|
if (!confirm('Delete this document?')) return;
|
|
|
|
try {
|
|
await apiService.deleteDocument(
|
|
this.databaseName,
|
|
this.collectionName,
|
|
this.documentId
|
|
);
|
|
|
|
this.dispatchEvent(
|
|
new CustomEvent('document-deleted', {
|
|
detail: { documentId: this.documentId },
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
|
|
this.document = null;
|
|
} catch (err) {
|
|
console.error('Error deleting document:', err);
|
|
this.error = 'Delete failed';
|
|
}
|
|
}
|
|
|
|
private formatJson(obj: unknown): string {
|
|
return JSON.stringify(obj, null, 2);
|
|
}
|
|
|
|
private syntaxHighlight(json: string): string {
|
|
// Basic syntax highlighting
|
|
return json
|
|
.replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
|
|
.replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
|
|
.replace(/: (\d+\.?\d*)/g, ': <span class="json-number">$1</span>')
|
|
.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
|
|
.replace(/: (null)/g, ': <span class="json-null">$1</span>');
|
|
}
|
|
|
|
render() {
|
|
if (!this.documentId) {
|
|
return html`
|
|
<div class="document-container">
|
|
<div class="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</svg>
|
|
<p>Select a document to view</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (this.loading) {
|
|
return html`
|
|
<div class="document-container">
|
|
<div class="loading-state">Loading...</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (this.error && !this.document) {
|
|
return html`
|
|
<div class="document-container">
|
|
<div class="error-state">${this.error}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<div class="document-container">
|
|
<div class="header">
|
|
<span class="header-title">Document</span>
|
|
<div class="header-actions">
|
|
${this.editing
|
|
? html`
|
|
<button class="action-btn" @click=${this.cancelEditing}>Cancel</button>
|
|
<button class="action-btn primary" @click=${this.saveDocument}>Save</button>
|
|
`
|
|
: html`
|
|
<button class="action-btn" @click=${this.startEditing}>Edit</button>
|
|
<button class="action-btn danger" @click=${this.deleteDocument}>Delete</button>
|
|
`}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
${this.editing
|
|
? html`
|
|
<textarea
|
|
class="edit-area"
|
|
.value=${this.editContent}
|
|
@input=${(e: Event) => (this.editContent = (e.target as HTMLTextAreaElement).value)}
|
|
></textarea>
|
|
`
|
|
: html`
|
|
<div
|
|
class="json-view"
|
|
.innerHTML=${this.syntaxHighlight(this.formatJson(this.document))}
|
|
></div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|