git.zone/tsview
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(s3): add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-28 15:35:28 +00:00
parent 4603154408
commit e379c2b6b1
11 changed files with 1064 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
changelog.md
View File

@@ -1,5 +1,15 @@
# Changelog
## 2026-01-28 - 1.10.0 - feat(s3)
add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation
- Server: added typed handlers for moveObject (copy+delete for a single object) and movePrefix (recursive list, copy all objects to dest then delete source directory). Handlers return success/error and movedCount for prefix moves.
- API: added api.service methods moveObject and movePrefix so web client can call new server handlers.
- Interfaces: introduced IReq_MoveObject and IReq_MovePrefix request/response typings in ts/interfaces.
- Web UI: added move dialogs, a move picker, drag-and-drop support for folders/files, UI states and styles in ts_web elements (tsview-s3-columns, tsview-s3-keys). Move dialogs/picker integrated into existing render flows.
- Utilities: added move-validator utility (validateMove, getParentPrefix) and exported it from utilities index to prevent invalid operations (e.g. moving a folder into itself or to the same parent).
- Behavior notes: prefix move implementation performs recursive listing, copies each object to the new prefix, then deletes the source directory (permanent). Errors are caught and surfaced; movedCount is returned for prefix moves.
## 2026-01-28 - 1.9.0 - feat(s3-columns)
load full prefix path on initial load and add folder upload support

2
ts/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@git.zone/tsview',
version: '1.9.0',
version: '1.10.0',
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
}

127
ts/api/handlers.s3.ts
View File

@@ -465,4 +465,131 @@ export async function registerS3Handlers(
}
)
);
// Move object (copy + delete)
typedrouter.addTypedHandler(
new plugins.typedrequest.TypedHandler<interfaces.IReq_MoveObject>(
'moveObject',
async (reqData) => {
const smartbucket = await tsview.getSmartBucket();
if (!smartbucket) {
return { success: false, error: 'S3 not configured' };
}
try {
const bucket = await smartbucket.getBucketByName(reqData.bucketName);
if (!bucket) {
return { success: false, error: `Bucket ${reqData.bucketName} not found` };
}
// Read source content
const content = await bucket.fastGet({ path: reqData.sourceKey });
// Write to destination
await bucket.fastPut({
path: reqData.destKey,
contents: content,
overwrite: true,
});
// Delete source
await bucket.fastRemove({ path: reqData.sourceKey });
return { success: true };
} catch (err) {
console.error('Error moving object:', err);
return { success: false, error: String(err) };
}
}
)
);
// Move prefix (folder) - copy all objects then delete all
typedrouter.addTypedHandler(
new plugins.typedrequest.TypedHandler<interfaces.IReq_MovePrefix>(
'movePrefix',
async (reqData) => {
const smartbucket = await tsview.getSmartBucket();
if (!smartbucket) {
return { success: false, movedCount: 0, error: 'S3 not configured' };
}
try {
const bucket = await smartbucket.getBucketByName(reqData.bucketName);
if (!bucket) {
return { success: false, movedCount: 0, error: `Bucket ${reqData.bucketName} not found` };
}
// List all objects under the source prefix recursively
const allObjects: string[] = [];
const listRecursive = async (prefix: string): Promise<void> => {
const baseDir = await bucket.getBaseDirectory();
let targetDir = baseDir;
if (prefix) {
const prefixParts = prefix.replace(/\/$/, '').split('/').filter(Boolean);
for (const part of prefixParts) {
const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
if (subDir) {
targetDir = subDir;
} else {
return;
}
}
}
// Get files in this directory
const files = await targetDir.listFiles();
for (const file of files) {
allObjects.push(prefix + file.name);
}
// Recurse into subdirectories
const dirs = await targetDir.listDirectories();
for (const dir of dirs) {
await listRecursive(prefix + dir.name + '/');
}
};
await listRecursive(reqData.sourcePrefix);
// Copy all objects to new location
for (const objKey of allObjects) {
const relativePath = objKey.substring(reqData.sourcePrefix.length);
const newKey = reqData.destPrefix + relativePath;
const content = await bucket.fastGet({ path: objKey });
await bucket.fastPut({
path: newKey,
contents: content,
overwrite: true,
});
}
// Delete the source directory
const baseDir = await bucket.getBaseDirectory();
let targetDir = baseDir;
const prefix = reqData.sourcePrefix.replace(/\/$/, '');
const prefixParts = prefix.split('/').filter(Boolean);
for (const part of prefixParts) {
const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
if (subDir) {
targetDir = subDir;
} else {
return { success: false, movedCount: 0, error: 'Source folder not found' };
}
}
await targetDir.delete({ mode: 'permanent' });
return { success: true, movedCount: allObjects.length };
} catch (err) {
console.error('Error moving prefix:', err);
return { success: false, movedCount: 0, error: String(err) };
}
}
)
);
}

2
ts/bundled_ui.ts
View File

File diff suppressed because one or more lines are too long

33
ts/interfaces/index.ts
View File

@@ -213,6 +213,39 @@ export interface IReq_DeletePrefix extends plugins.typedrequestInterfaces.implem
};
}
export interface IReq_MoveObject extends plugins.typedrequestInterfaces.implementsTR<
plugins.typedrequestInterfaces.ITypedRequest,
IReq_MoveObject
> {
method: 'moveObject';
request: {
bucketName: string;
sourceKey: string;
destKey: string;
};
response: {
success: boolean;
error?: string;
};
}
export interface IReq_MovePrefix extends plugins.typedrequestInterfaces.implementsTR<
plugins.typedrequestInterfaces.ITypedRequest,
IReq_MovePrefix
> {
method: 'movePrefix';
request: {
bucketName: string;
sourcePrefix: string;
destPrefix: string;
};
response: {
success: boolean;
movedCount: number;
error?: string;
};
}
export interface IReq_GetObjectUrl extends plugins.typedrequestInterfaces.implementsTR<
plugins.typedrequestInterfaces.ITypedRequest,
IReq_GetObjectUrl

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@git.zone/tsview',
version: '1.9.0',
version: '1.10.0',
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
}

449
ts_web/elements/tsview-s3-columns.ts
View File

@@ -1,6 +1,6 @@
import * as plugins from '../plugins.js';
import { apiService, type IS3Object } from '../services/index.js';
import { getFileName } from '../utilities/index.js';
import { getFileName, validateMove, getParentPrefix } from '../utilities/index.js';
import { themeStyles } from '../styles/index.js';
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
@@ -74,6 +74,42 @@ export class TsviewS3Columns extends DeesElement {
@state()
private accessor uploadProgress: { current: number; total: number } | null = null;
// Move dialog state
@state()
private accessor showMoveDialog: boolean = false;
@state()
private accessor moveSource: { key: string; isFolder: boolean } | null = null;
@state()
private accessor moveDestination: string = '';
@state()
private accessor moveInProgress: boolean = false;
@state()
private accessor moveError: string | null = null;
// Move picker dialog state
@state()
private accessor showMovePickerDialog: boolean = false;
@state()
private accessor movePickerSource: { key: string; isFolder: boolean } | null = null;
@state()
private accessor movePickerCurrentPrefix: string = '';
@state()
private accessor movePickerPrefixes: string[] = [];
@state()
private accessor movePickerLoading: boolean = false;
// Internal drag state
@state()
private accessor draggedItem: { key: string; isFolder: boolean } | null = null;
private resizing: { columnIndex: number; startX: number; startWidth: number } | null = null;
private readonly DEFAULT_COLUMN_WIDTH = 250;
private readonly MIN_COLUMN_WIDTH = 150;
@@ -368,6 +404,134 @@ export class TsviewS3Columns extends DeesElement {
opacity: 0.5;
cursor: not-allowed;
}
/* Move dialog styles */
.move-summary {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.move-item {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.move-item:last-child {
margin-bottom: 0;
}
.move-label {
color: #888;
min-width: 40px;
}
.move-path {
color: #e0e0e0;
font-family: monospace;
font-size: 12px;
word-break: break-all;
}
.move-error {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #f87171;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 13px;
}
/* Move picker dialog styles */
.move-picker-dialog {
min-width: 450px;
max-height: 500px;
}
.picker-breadcrumb {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
margin-bottom: 12px;
font-size: 12px;
overflow-x: auto;
}
.picker-crumb {
color: #888;
cursor: pointer;
white-space: nowrap;
}
.picker-crumb:hover {
color: #fff;
}
.picker-separator {
color: #555;
}
.picker-list {
max-height: 280px;
overflow-y: auto;
border: 1px solid #333;
border-radius: 6px;
margin-bottom: 16px;
min-height: 100px;
}
.picker-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
color: #fbbf24;
}
.picker-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.picker-item .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.picker-item .name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.picker-empty {
padding: 24px;
text-align: center;
color: #666;
font-size: 13px;
}
.column-item.dragging {
opacity: 0.5;
}
.column-item.drop-target {
background: rgba(59, 130, 246, 0.15) !important;
outline: 1px dashed rgba(59, 130, 246, 0.5);
}
.column-item.drop-invalid {
background: rgba(239, 68, 68, 0.1) !important;
cursor: not-allowed;
}
`,
];
@@ -594,6 +758,12 @@ export class TsviewS3Columns extends DeesElement {
},
},
{ divider: true },
{
name: 'Move to...',
iconName: 'lucide:folderInput',
action: async () => this.openMovePickerDialog(prefix, true),
},
{ divider: true },
{
name: 'New Folder Inside',
iconName: 'lucide:folderPlus',
@@ -664,6 +834,12 @@ export class TsviewS3Columns extends DeesElement {
},
},
{ divider: true },
{
name: 'Move to...',
iconName: 'lucide:folderInput',
action: async () => this.openMovePickerDialog(key, false),
},
{ divider: true },
{
name: 'Delete',
iconName: 'lucide:trash2',
@@ -868,7 +1044,9 @@ export class TsviewS3Columns extends DeesElement {
private handleColumnDragOver(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
if (e.dataTransfer) {
e.dataTransfer.dropEffect = this.draggedItem ? 'move' : 'copy';
}
}
private handleColumnDragLeave(e: DragEvent, columnIndex: number) {
@@ -885,13 +1063,25 @@ export class TsviewS3Columns extends DeesElement {
private async handleColumnDrop(e: DragEvent, columnIndex: number) {
e.preventDefault();
e.stopPropagation();
const targetPrefix = this.dragOverFolderPrefix ?? this.columns[columnIndex].prefix;
// Check if this is an internal move (item from within the app)
if (this.draggedItem) {
this.initiateMove(this.draggedItem.key, this.draggedItem.isFolder, targetPrefix);
this.draggedItem = null;
this.clearFolderHover();
this.dragCounters.clear();
this.dragOverColumnIndex = -1;
return;
}
this.dragCounters.clear();
this.dragOverColumnIndex = -1;
const items = e.dataTransfer?.items;
if (!items || items.length === 0) return;
const targetPrefix = this.dragOverFolderPrefix ?? this.columns[columnIndex].prefix;
this.clearFolderHover();
// Collect all files (including from nested folders)
@@ -942,6 +1132,12 @@ export class TsviewS3Columns extends DeesElement {
private handleFolderDragLeave(e: DragEvent, folderPrefix: string) {
e.stopPropagation();
// Check if we're leaving to a child element - if so, don't cancel the hover
const target = e.currentTarget as HTMLElement;
const relatedTarget = e.relatedTarget as Node | null;
if (relatedTarget && target.contains(relatedTarget)) {
return; // Still inside the folder, ignore this dragleave
}
if (this.dragOverFolderPrefix === folderPrefix) this.dragOverFolderPrefix = null;
if (this.folderHoverTimer) {
clearTimeout(this.folderHoverTimer);
@@ -949,11 +1145,239 @@ export class TsviewS3Columns extends DeesElement {
}
}
private handleFolderDragOver(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer) {
e.dataTransfer.dropEffect = this.draggedItem ? 'move' : 'copy';
}
}
private clearFolderHover() {
if (this.folderHoverTimer) { clearTimeout(this.folderHoverTimer); this.folderHoverTimer = null; }
this.dragOverFolderPrefix = null;
}
// --- Internal drag handlers for move ---
private handleItemDragStart(e: DragEvent, key: string, isFolder: boolean) {
this.draggedItem = { key, isFolder };
e.dataTransfer?.setData('text/plain', key);
e.dataTransfer!.effectAllowed = 'copyMove'; // Allow both for flexibility
// Add visual feedback to dragged item
const target = e.target as HTMLElement;
target.classList.add('dragging');
}
private handleItemDragEnd(e: DragEvent) {
this.draggedItem = null;
const target = e.target as HTMLElement;
target.classList.remove('dragging');
}
// --- Move picker dialog ---
private async openMovePickerDialog(key: string, isFolder: boolean) {
this.movePickerSource = { key, isFolder };
this.movePickerCurrentPrefix = '';
this.showMovePickerDialog = true;
await this.loadMovePickerPrefixes('');
}
private async navigateMovePicker(prefix: string) {
this.movePickerCurrentPrefix = prefix;
await this.loadMovePickerPrefixes(prefix);
}
private async loadMovePickerPrefixes(prefix: string) {
this.movePickerLoading = true;
try {
const result = await apiService.listObjects(this.bucketName, prefix, '/');
this.movePickerPrefixes = result.prefixes;
} catch {
this.movePickerPrefixes = [];
}
this.movePickerLoading = false;
}
private selectMoveDestination(destPrefix: string) {
if (!this.movePickerSource) return;
this.closeMovePickerDialog();
this.initiateMove(this.movePickerSource.key, this.movePickerSource.isFolder, destPrefix);
}
private closeMovePickerDialog() {
this.showMovePickerDialog = false;
this.movePickerSource = null;
this.movePickerCurrentPrefix = '';
this.movePickerPrefixes = [];
}
// --- Move confirmation dialog ---
private initiateMove(sourceKey: string, isFolder: boolean, destPrefix: string) {
const validation = validateMove(sourceKey, destPrefix);
if (!validation.valid) {
this.moveSource = { key: sourceKey, isFolder };
this.moveDestination = destPrefix;
this.moveError = validation.error!;
this.showMoveDialog = true;
return;
}
this.moveSource = { key: sourceKey, isFolder };
this.moveDestination = destPrefix;
this.moveError = null;
this.showMoveDialog = true;
}
private async executeMove() {
if (!this.moveSource) return;
this.moveInProgress = true;
try {
const sourceName = getFileName(this.moveSource.key);
const destKey = this.moveDestination + sourceName;
let result: { success: boolean; error?: string };
if (this.moveSource.isFolder) {
result = await apiService.movePrefix(
this.bucketName,
this.moveSource.key,
destKey
);
} else {
result = await apiService.moveObject(
this.bucketName,
this.moveSource.key,
destKey
);
}
if (result.success) {
this.closeMoveDialog();
await this.refreshAllColumns();
} else {
this.moveError = result.error || 'Move operation failed';
}
} catch (err) {
this.moveError = `Error: ${err}`;
}
this.moveInProgress = false;
}
private closeMoveDialog() {
this.showMoveDialog = false;
this.moveSource = null;
this.moveDestination = '';
this.moveError = null;
this.moveInProgress = false;
}
private renderMoveDialog() {
if (!this.showMoveDialog || !this.moveSource) return '';
const sourceName = getFileName(this.moveSource.key);
return html`
<div class="dialog-overlay" @click=${() => this.closeMoveDialog()}>
<div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
<div class="dialog-title">Move ${this.moveSource.isFolder ? 'Folder' : 'File'}</div>
${this.moveError ? html`
<div class="move-error">${this.moveError}</div>
` : html`
<div class="move-summary">
<div class="move-item">
<span class="move-label">From:</span>
<span class="move-path">${this.moveSource.key}</span>
</div>
<div class="move-item">
<span class="move-label">To:</span>
<span class="move-path">${this.moveDestination}${sourceName}</span>
</div>
</div>
`}
<div class="dialog-actions">
<button class="dialog-btn dialog-btn-cancel"
@click=${() => this.closeMoveDialog()}
?disabled=${this.moveInProgress}>
Cancel
</button>
${!this.moveError ? html`
<button class="dialog-btn dialog-btn-create"
@click=${() => this.executeMove()}
?disabled=${this.moveInProgress}>
${this.moveInProgress ? 'Moving...' : 'Move'}
</button>
` : ''}
</div>
</div>
</div>
`;
}
private renderMovePickerDialog() {
if (!this.showMovePickerDialog || !this.movePickerSource) return '';
const sourceName = getFileName(this.movePickerSource.key);
const sourceParent = getParentPrefix(this.movePickerSource.key);
return html`
<div class="dialog-overlay" @click=${() => this.closeMovePickerDialog()}>
<div class="dialog move-picker-dialog" @click=${(e: Event) => e.stopPropagation()}>
<div class="dialog-title">Move "${sourceName}" to...</div>
<div class="picker-breadcrumb">
<span class="picker-crumb" @click=${() => this.navigateMovePicker('')}>
${this.bucketName}
</span>
${this.getPathSegments(this.movePickerCurrentPrefix).map(seg => html`
<span class="picker-separator">/</span>
<span class="picker-crumb" @click=${() => this.navigateMovePicker(seg)}>
${getFileName(seg)}
</span>
`)}
</div>
<div class="picker-list">
${this.movePickerLoading ? html`<div class="picker-empty">Loading...</div>` : ''}
${!this.movePickerLoading && this.movePickerPrefixes.filter(p => p !== this.movePickerSource!.key).length === 0 ? html`
<div class="picker-empty">No subfolders</div>
` : ''}
${this.movePickerPrefixes
.filter(p => p !== this.movePickerSource!.key) // Hide source from list
.map(prefix => html`
<div class="picker-item"
@click=${() => this.navigateMovePicker(prefix)}
@dblclick=${() => this.selectMoveDestination(prefix)}>
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
<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"/>
</svg>
<span class="name">${getFileName(prefix)}</span>
</div>
`)}
</div>
<div class="dialog-actions">
<button class="dialog-btn dialog-btn-cancel" @click=${() => this.closeMovePickerDialog()}>
Cancel
</button>
<button class="dialog-btn dialog-btn-create"
@click=${() => this.selectMoveDestination(this.movePickerCurrentPrefix)}
?disabled=${this.movePickerCurrentPrefix === sourceParent}>
Move Here
</button>
</div>
</div>
</div>
`;
}
private async handleCreate() {
if (!this.createDialogName.trim()) return;
@@ -1036,6 +1460,8 @@ export class TsviewS3Columns extends DeesElement {
${this.columns.map((column, index) => this.renderColumnWrapper(column, index))}
</div>
${this.renderCreateDialog()}
${this.renderMoveDialog()}
${this.renderMovePickerDialog()}
`;
}
@@ -1076,9 +1502,13 @@ export class TsviewS3Columns extends DeesElement {
(prefix) => html`
<div
class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''} ${this.dragOverFolderPrefix === prefix ? 'drag-target' : ''}"
draggable="true"
@click=${() => this.selectFolder(index, prefix)}
@contextmenu=${(e: MouseEvent) => this.handleFolderContextMenu(e, index, prefix)}
@dragstart=${(e: DragEvent) => this.handleItemDragStart(e, prefix, true)}
@dragend=${(e: DragEvent) => this.handleItemDragEnd(e)}
@dragenter=${(e: DragEvent) => this.handleFolderDragEnter(e, prefix)}
@dragover=${(e: DragEvent) => this.handleFolderDragOver(e)}
@dragleave=${(e: DragEvent) => this.handleFolderDragLeave(e, prefix)}
>
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
@@ -1095,8 +1525,11 @@ export class TsviewS3Columns extends DeesElement {
(obj) => html`
<div
class="column-item ${column.selectedItem === obj.key ? 'selected' : ''}"
draggable="true"
@click=${() => this.selectFile(index, obj.key)}
@contextmenu=${(e: MouseEvent) => this.handleFileContextMenu(e, index, obj.key)}
@dragstart=${(e: DragEvent) => this.handleItemDragStart(e, obj.key, false)}
@dragend=${(e: DragEvent) => this.handleItemDragEnd(e)}
>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="${this.getFileIcon(obj.key)}" />
@@ -1108,9 +1541,13 @@ export class TsviewS3Columns extends DeesElement {
</div>
${this.dragOverColumnIndex === index ? html`
<div class="drag-hint">
${this.dragOverFolderPrefix
? `Drop to upload into ${getFileName(this.dragOverFolderPrefix)}`
: 'Drop to upload here'}
${this.draggedItem
? (this.dragOverFolderPrefix
? `Move to ${getFileName(this.dragOverFolderPrefix)}`
: 'Move here')
: (this.dragOverFolderPrefix
? `Drop to upload into ${getFileName(this.dragOverFolderPrefix)}`
: 'Drop to upload here')}
</div>
` : ''}
${this.uploading ? html`

379
ts_web/elements/tsview-s3-keys.ts
View File

@@ -1,6 +1,6 @@
import * as plugins from '../plugins.js';
import { apiService, type IS3Object } from '../services/index.js';
import { formatSize, getFileName } from '../utilities/index.js';
import { formatSize, getFileName, validateMove, getParentPrefix } from '../utilities/index.js';
import { themeStyles } from '../styles/index.js';
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
@@ -44,6 +44,38 @@ export class TsviewS3Keys extends DeesElement {
@state()
private accessor createDialogName: string = '';
// Move dialog state
@state()
private accessor showMoveDialog: boolean = false;
@state()
private accessor moveSource: { key: string; isFolder: boolean } | null = null;
@state()
private accessor moveDestination: string = '';
@state()
private accessor moveInProgress: boolean = false;
@state()
private accessor moveError: string | null = null;
// Move picker dialog state
@state()
private accessor showMovePickerDialog: boolean = false;
@state()
private accessor movePickerSource: { key: string; isFolder: boolean } | null = null;
@state()
private accessor movePickerCurrentPrefix: string = '';
@state()
private accessor movePickerPrefixes: string[] = [];
@state()
private accessor movePickerLoading: boolean = false;
public static styles = [
cssManager.defaultStyles,
themeStyles,
@@ -256,6 +288,120 @@ export class TsviewS3Keys extends DeesElement {
opacity: 0.5;
cursor: not-allowed;
}
/* Move dialog styles */
.move-summary {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.move-item {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.move-item:last-child {
margin-bottom: 0;
}
.move-label {
color: #888;
min-width: 40px;
}
.move-path {
color: #e0e0e0;
font-family: monospace;
font-size: 12px;
word-break: break-all;
}
.move-error {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #f87171;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 13px;
}
/* Move picker dialog styles */
.move-picker-dialog {
min-width: 450px;
max-height: 500px;
}
.picker-breadcrumb {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
margin-bottom: 12px;
font-size: 12px;
overflow-x: auto;
}
.picker-crumb {
color: #888;
cursor: pointer;
white-space: nowrap;
}
.picker-crumb:hover {
color: #fff;
}
.picker-separator {
color: #555;
}
.picker-list {
max-height: 280px;
overflow-y: auto;
border: 1px solid #333;
border-radius: 6px;
margin-bottom: 16px;
min-height: 100px;
}
.picker-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
color: #fbbf24;
}
.picker-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.picker-item .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.picker-item .name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.picker-empty {
padding: 24px;
text-align: center;
color: #666;
font-size: 13px;
}
`,
];
@@ -341,6 +487,12 @@ export class TsviewS3Keys extends DeesElement {
},
},
{ divider: true },
{
name: 'Move to...',
iconName: 'lucide:folderInput',
action: async () => this.openMovePickerDialog(key, true),
},
{ divider: true },
{
name: 'New Folder Inside',
iconName: 'lucide:folderPlus',
@@ -393,6 +545,12 @@ export class TsviewS3Keys extends DeesElement {
},
},
{ divider: true },
{
name: 'Move to...',
iconName: 'lucide:folderInput',
action: async () => this.openMovePickerDialog(key, false),
},
{ divider: true },
{
name: 'Delete',
iconName: 'lucide:trash2',
@@ -533,6 +691,223 @@ export class TsviewS3Keys extends DeesElement {
`;
}
// --- Helper for path segments ---
private getPathSegments(prefix: string): string[] {
if (!prefix) return [];
const parts = prefix.split('/').filter(p => p);
const segments: string[] = [];
let cumulative = '';
for (const part of parts) {
cumulative += part + '/';
segments.push(cumulative);
}
return segments;
}
// --- Move picker dialog ---
private async openMovePickerDialog(key: string, isFolder: boolean) {
this.movePickerSource = { key, isFolder };
this.movePickerCurrentPrefix = '';
this.showMovePickerDialog = true;
await this.loadMovePickerPrefixes('');
}
private async navigateMovePicker(prefix: string) {
this.movePickerCurrentPrefix = prefix;
await this.loadMovePickerPrefixes(prefix);
}
private async loadMovePickerPrefixes(prefix: string) {
this.movePickerLoading = true;
try {
const result = await apiService.listObjects(this.bucketName, prefix, '/');
this.movePickerPrefixes = result.prefixes;
} catch {
this.movePickerPrefixes = [];
}
this.movePickerLoading = false;
}
private selectMoveDestination(destPrefix: string) {
if (!this.movePickerSource) return;
this.closeMovePickerDialog();
this.initiateMove(this.movePickerSource.key, this.movePickerSource.isFolder, destPrefix);
}
private closeMovePickerDialog() {
this.showMovePickerDialog = false;
this.movePickerSource = null;
this.movePickerCurrentPrefix = '';
this.movePickerPrefixes = [];
}
// --- Move confirmation dialog ---
private initiateMove(sourceKey: string, isFolder: boolean, destPrefix: string) {
const validation = validateMove(sourceKey, destPrefix);
if (!validation.valid) {
this.moveSource = { key: sourceKey, isFolder };
this.moveDestination = destPrefix;
this.moveError = validation.error!;
this.showMoveDialog = true;
return;
}
this.moveSource = { key: sourceKey, isFolder };
this.moveDestination = destPrefix;
this.moveError = null;
this.showMoveDialog = true;
}
private async executeMove() {
if (!this.moveSource) return;
this.moveInProgress = true;
try {
const sourceName = getFileName(this.moveSource.key);
const destKey = this.moveDestination + sourceName;
let result: { success: boolean; error?: string };
if (this.moveSource.isFolder) {
result = await apiService.movePrefix(
this.bucketName,
this.moveSource.key,
destKey
);
} else {
result = await apiService.moveObject(
this.bucketName,
this.moveSource.key,
destKey
);
}
if (result.success) {
this.closeMoveDialog();
await this.loadObjects();
} else {
this.moveError = result.error || 'Move operation failed';
}
} catch (err) {
this.moveError = `Error: ${err}`;
}
this.moveInProgress = false;
}
private closeMoveDialog() {
this.showMoveDialog = false;
this.moveSource = null;
this.moveDestination = '';
this.moveError = null;
this.moveInProgress = false;
}
private renderMoveDialog() {
if (!this.showMoveDialog || !this.moveSource) return '';
const sourceName = getFileName(this.moveSource.key);
return html`
<div class="dialog-overlay" @click=${() => this.closeMoveDialog()}>
<div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
<div class="dialog-title">Move ${this.moveSource.isFolder ? 'Folder' : 'File'}</div>
${this.moveError ? html`
<div class="move-error">${this.moveError}</div>
` : html`
<div class="move-summary">
<div class="move-item">
<span class="move-label">From:</span>
<span class="move-path">${this.moveSource.key}</span>
</div>
<div class="move-item">
<span class="move-label">To:</span>
<span class="move-path">${this.moveDestination}${sourceName}</span>
</div>
</div>
`}
<div class="dialog-actions">
<button class="dialog-btn dialog-btn-cancel"
@click=${() => this.closeMoveDialog()}
?disabled=${this.moveInProgress}>
Cancel
</button>
${!this.moveError ? html`
<button class="dialog-btn dialog-btn-create"
@click=${() => this.executeMove()}
?disabled=${this.moveInProgress}>
${this.moveInProgress ? 'Moving...' : 'Move'}
</button>
` : ''}
</div>
</div>
</div>
`;
}
private renderMovePickerDialog() {
if (!this.showMovePickerDialog || !this.movePickerSource) return '';
const sourceName = getFileName(this.movePickerSource.key);
const sourceParent = getParentPrefix(this.movePickerSource.key);
return html`
<div class="dialog-overlay" @click=${() => this.closeMovePickerDialog()}>
<div class="dialog move-picker-dialog" @click=${(e: Event) => e.stopPropagation()}>
<div class="dialog-title">Move "${sourceName}" to...</div>
<div class="picker-breadcrumb">
<span class="picker-crumb" @click=${() => this.navigateMovePicker('')}>
${this.bucketName}
</span>
${this.getPathSegments(this.movePickerCurrentPrefix).map(seg => html`
<span class="picker-separator">/</span>
<span class="picker-crumb" @click=${() => this.navigateMovePicker(seg)}>
${getFileName(seg)}
</span>
`)}
</div>
<div class="picker-list">
${this.movePickerLoading ? html`<div class="picker-empty">Loading...</div>` : ''}
${!this.movePickerLoading && this.movePickerPrefixes.filter(p => p !== this.movePickerSource!.key).length === 0 ? html`
<div class="picker-empty">No subfolders</div>
` : ''}
${this.movePickerPrefixes
.filter(p => p !== this.movePickerSource!.key) // Hide source from list
.map(prefix => html`
<div class="picker-item"
@click=${() => this.navigateMovePicker(prefix)}
@dblclick=${() => this.selectMoveDestination(prefix)}>
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
<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"/>
</svg>
<span class="name">${getFileName(prefix)}</span>
</div>
`)}
</div>
<div class="dialog-actions">
<button class="dialog-btn dialog-btn-cancel" @click=${() => this.closeMovePickerDialog()}>
Cancel
</button>
<button class="dialog-btn dialog-btn-create"
@click=${() => this.selectMoveDestination(this.movePickerCurrentPrefix)}
?disabled=${this.movePickerCurrentPrefix === sourceParent}>
Move Here
</button>
</div>
</div>
</div>
`;
}
render() {
return html`
<div class="keys-container">
@@ -595,6 +970,8 @@ export class TsviewS3Keys extends DeesElement {
</div>
</div>
${this.renderCreateDialog()}
${this.renderMoveDialog()}
${this.renderMovePickerDialog()}
`;
}
}

22
ts_web/services/api.service.ts
View File

@@ -168,6 +168,28 @@ export class ApiService {
return result.success;
}
async moveObject(
bucketName: string,
sourceKey: string,
destKey: string
): Promise<{ success: boolean; error?: string }> {
return this.request<
{ bucketName: string; sourceKey: string; destKey: string },
{ success: boolean; error?: string }
>('moveObject', { bucketName, sourceKey, destKey });
}
async movePrefix(
bucketName: string,
sourcePrefix: string,
destPrefix: string
): Promise<{ success: boolean; movedCount: number; error?: string }> {
return this.request<
{ bucketName: string; sourcePrefix: string; destPrefix: string },
{ success: boolean; movedCount: number; error?: string }
>('movePrefix', { bucketName, sourcePrefix, destPrefix });
}
// ===========================================
// MongoDB API Methods
// ===========================================

1
ts_web/utilities/index.ts
View File

@@ -1 +1,2 @@
export * from './formatters.js';
export * from './move-validator.js';

47
ts_web/utilities/move-validator.ts Normal file
View File

@@ -0,0 +1,47 @@
/**
* Move validation utilities for S3 objects
*/
export interface IMoveValidation {
valid: boolean;
error?: string;
}
/**
* Validates if a move operation is allowed
* @param sourceKey The source object key (file or folder with trailing /)
* @param destPrefix The destination prefix (folder)
* @returns Validation result with error message if invalid
*/
export function validateMove(sourceKey: string, destPrefix: string): IMoveValidation {
// Check: Moving folder into itself or a subfolder of itself
if (sourceKey.endsWith('/')) {
// It's a folder - check if destPrefix starts with sourceKey
if (destPrefix.startsWith(sourceKey)) {
return { valid: false, error: 'Cannot move a folder into itself' };
}
}
// Check: Source and dest are the same location
const sourceParent = getParentPrefix(sourceKey);
if (sourceParent === destPrefix) {
return { valid: false, error: 'Item is already in this location' };
}
return { valid: true };
}
/**
* Gets the parent prefix (directory) of a given key
* @param key The object key (file or folder)
* @returns The parent prefix
*/
export function getParentPrefix(key: string): string {
// "folder1/folder2/file.txt" -> "folder1/folder2/"
// "folder1/folder2/" -> "folder1/"
// "file.txt" -> ""
// "folder/" -> ""
const trimmed = key.endsWith('/') ? key.slice(0, -1) : key;
const lastSlash = trimmed.lastIndexOf('/');
return lastSlash >= 0 ? trimmed.substring(0, lastSlash + 1) : '';
}