feat(s3): add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation
This commit is contained in:
@@ -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`
|
||||
|
||||
@@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user