1095 lines
32 KiB
TypeScript
1095 lines
32 KiB
TypeScript
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
|
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
|
import { themeDefaultStyles } from '../../00theme.js';
|
|
import type { IS3DataProvider, IS3Object } from './interfaces.js';
|
|
import { formatSize, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-s3-keys': DeesS3Keys;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-s3-keys')
|
|
export class DeesS3Keys extends DeesElement {
|
|
@property({ type: Object })
|
|
public accessor dataProvider: IS3DataProvider | null = null;
|
|
|
|
@property({ type: String })
|
|
public accessor bucketName: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor currentPrefix: string = '';
|
|
|
|
@property({ type: Number })
|
|
public accessor refreshKey: number = 0;
|
|
|
|
@state()
|
|
private accessor allKeys: IS3Object[] = [];
|
|
|
|
@state()
|
|
private accessor prefixes: string[] = [];
|
|
|
|
@state()
|
|
private accessor loading: boolean = false;
|
|
|
|
@state()
|
|
private accessor selectedKey: string = '';
|
|
|
|
@state()
|
|
private accessor filterText: string = '';
|
|
|
|
@state()
|
|
private accessor showCreateDialog: boolean = false;
|
|
|
|
@state()
|
|
private accessor createDialogType: 'folder' | 'file' = 'folder';
|
|
|
|
@state()
|
|
private accessor createDialogPrefix: string = '';
|
|
|
|
@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;
|
|
|
|
// Rename dialog state
|
|
@state()
|
|
private accessor showRenameDialog: boolean = false;
|
|
|
|
@state()
|
|
private accessor renameSource: { key: string; isFolder: boolean } | null = null;
|
|
|
|
@state()
|
|
private accessor renameName: string = '';
|
|
|
|
@state()
|
|
private accessor renameInProgress: boolean = false;
|
|
|
|
@state()
|
|
private accessor renameError: string | null = null;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
themeDefaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.keys-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.filter-bar {
|
|
padding: 12px;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
|
|
}
|
|
|
|
.filter-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.3)')};
|
|
border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
|
|
border-radius: 6px;
|
|
color: ${cssManager.bdTheme('#18181b', '#fff')};
|
|
font-size: 14px;
|
|
}
|
|
|
|
.filter-input:focus {
|
|
outline: none;
|
|
border-color: ${cssManager.bdTheme('#a1a1aa', '#404040')};
|
|
}
|
|
|
|
.filter-input::placeholder {
|
|
color: ${cssManager.bdTheme('#a1a1aa', '#666')};
|
|
}
|
|
|
|
.keys-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
thead {
|
|
position: sticky;
|
|
top: 0;
|
|
background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
|
|
z-index: 1;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#71717a', '#666')};
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
|
|
}
|
|
|
|
td {
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#2a2a3e')};
|
|
}
|
|
|
|
tr:hover td {
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.03)')};
|
|
}
|
|
|
|
tr.selected td {
|
|
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(255, 255, 255, 0.08)')};
|
|
}
|
|
|
|
.key-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.key-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.folder-icon {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.key-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.size-cell {
|
|
color: ${cssManager.bdTheme('#71717a', '#888')};
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 32px;
|
|
text-align: center;
|
|
color: ${cssManager.bdTheme('#a1a1aa', '#666')};
|
|
}
|
|
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.dialog {
|
|
background: ${cssManager.bdTheme('#ffffff', '#1e1e1e')};
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
min-width: 400px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.dialog-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: ${cssManager.bdTheme('#18181b', '#fff')};
|
|
}
|
|
|
|
.dialog-location {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#71717a', '#888')};
|
|
margin-bottom: 12px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.dialog-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#141414')};
|
|
border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#333')};
|
|
border-radius: 6px;
|
|
color: ${cssManager.bdTheme('#18181b', '#fff')};
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dialog-input:focus {
|
|
outline: none;
|
|
border-color: ${cssManager.bdTheme('#a1a1aa', '#e0e0e0')};
|
|
}
|
|
|
|
.dialog-hint {
|
|
font-size: 11px;
|
|
color: ${cssManager.bdTheme('#a1a1aa', '#666')};
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.dialog-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dialog-btn {
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.dialog-btn-cancel {
|
|
background: transparent;
|
|
border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
|
|
color: ${cssManager.bdTheme('#71717a', '#aaa')};
|
|
}
|
|
|
|
.dialog-btn-cancel:hover {
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
|
|
color: ${cssManager.bdTheme('#18181b', '#fff')};
|
|
}
|
|
|
|
.dialog-btn-create {
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#404040')};
|
|
border: none;
|
|
color: ${cssManager.bdTheme('#18181b', '#fff')};
|
|
}
|
|
|
|
.dialog-btn-create:hover {
|
|
background: ${cssManager.bdTheme('#d4d4d8', '#505050')};
|
|
}
|
|
|
|
.dialog-btn-create:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Move dialog styles */
|
|
.move-summary {
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', '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: ${cssManager.bdTheme('#71717a', '#888')};
|
|
min-width: 40px;
|
|
}
|
|
|
|
.move-path {
|
|
color: ${cssManager.bdTheme('#3f3f46', '#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: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
font-size: 12px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.picker-crumb {
|
|
color: ${cssManager.bdTheme('#71717a', '#888')};
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.picker-crumb:hover {
|
|
color: ${cssManager.bdTheme('#18181b', '#fff')};
|
|
}
|
|
|
|
.picker-separator {
|
|
color: ${cssManager.bdTheme('#d4d4d8', '#555')};
|
|
}
|
|
|
|
.picker-list {
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#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: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', '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: ${cssManager.bdTheme('#a1a1aa', '#666')};
|
|
font-size: 13px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
async connectedCallback() {
|
|
super.connectedCallback();
|
|
await this.loadObjects();
|
|
}
|
|
|
|
updated(changedProperties: Map<string, unknown>) {
|
|
if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix') || changedProperties.has('refreshKey')) {
|
|
this.loadObjects();
|
|
}
|
|
}
|
|
|
|
private async loadObjects() {
|
|
if (!this.dataProvider) return;
|
|
this.loading = true;
|
|
try {
|
|
const result = await this.dataProvider.listObjects(this.bucketName, this.currentPrefix, '/');
|
|
this.allKeys = result.objects;
|
|
this.prefixes = result.prefixes;
|
|
} catch (err) {
|
|
console.error('Error loading objects:', err);
|
|
this.allKeys = [];
|
|
this.prefixes = [];
|
|
}
|
|
this.loading = false;
|
|
}
|
|
|
|
private handleFilterInput(e: Event) {
|
|
this.filterText = (e.target as HTMLInputElement).value;
|
|
}
|
|
|
|
private selectKey(key: string, isFolder: boolean) {
|
|
this.selectedKey = key;
|
|
|
|
if (isFolder) {
|
|
this.dispatchEvent(
|
|
new CustomEvent('navigate', {
|
|
detail: { prefix: key },
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
} else {
|
|
this.dispatchEvent(
|
|
new CustomEvent('key-selected', {
|
|
detail: { key },
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
private get filteredItems() {
|
|
const filter = this.filterText.toLowerCase();
|
|
const folders = this.prefixes
|
|
.filter((p) => !filter || getFileName(p).toLowerCase().includes(filter))
|
|
.map((p) => ({ key: p, isFolder: true, size: undefined as number | undefined }));
|
|
const files = this.allKeys
|
|
.filter((o) => !filter || getFileName(o.key).toLowerCase().includes(filter))
|
|
.map((o) => ({ key: o.key, isFolder: false, size: o.size }));
|
|
return [...folders, ...files];
|
|
}
|
|
|
|
private handleItemContextMenu(event: MouseEvent, key: string, isFolder: boolean) {
|
|
if (!this.dataProvider) return;
|
|
event.preventDefault();
|
|
|
|
if (isFolder) {
|
|
DeesContextmenu.openContextMenuWithOptions(event, [
|
|
{
|
|
name: 'Open',
|
|
iconName: 'lucide:folderOpen',
|
|
action: async () => {
|
|
this.selectKey(key, true);
|
|
},
|
|
},
|
|
{
|
|
name: 'Copy Path',
|
|
iconName: 'lucide:copy',
|
|
action: async () => {
|
|
await navigator.clipboard.writeText(key);
|
|
},
|
|
},
|
|
{
|
|
name: 'Rename',
|
|
iconName: 'lucide:pencil',
|
|
action: async () => this.openRenameDialog(key, true),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'Move to...',
|
|
iconName: 'lucide:folderInput',
|
|
action: async () => this.openMovePickerDialog(key, true),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'New Folder Inside',
|
|
iconName: 'lucide:folderPlus',
|
|
action: async () => this.openCreateDialog('folder', key),
|
|
},
|
|
{
|
|
name: 'New File Inside',
|
|
iconName: 'lucide:filePlus',
|
|
action: async () => this.openCreateDialog('file', key),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'Delete Folder',
|
|
iconName: 'lucide:trash2',
|
|
action: async () => {
|
|
if (confirm(`Delete folder "${getFileName(key)}" and all its contents?`)) {
|
|
const success = await this.dataProvider!.deletePrefix(this.bucketName, key);
|
|
if (success) {
|
|
await this.loadObjects();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
]);
|
|
} else {
|
|
DeesContextmenu.openContextMenuWithOptions(event, [
|
|
{
|
|
name: 'Preview',
|
|
iconName: 'lucide:eye',
|
|
action: async () => {
|
|
this.selectKey(key, false);
|
|
},
|
|
},
|
|
{
|
|
name: 'Download',
|
|
iconName: 'lucide:download',
|
|
action: async () => {
|
|
const url = await this.dataProvider!.getObjectUrl(this.bucketName, key);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = getFileName(key);
|
|
link.click();
|
|
},
|
|
},
|
|
{
|
|
name: 'Copy Path',
|
|
iconName: 'lucide:copy',
|
|
action: async () => {
|
|
await navigator.clipboard.writeText(key);
|
|
},
|
|
},
|
|
{
|
|
name: 'Rename',
|
|
iconName: 'lucide:pencil',
|
|
action: async () => this.openRenameDialog(key, false),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'Move to...',
|
|
iconName: 'lucide:folderInput',
|
|
action: async () => this.openMovePickerDialog(key, false),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'Delete',
|
|
iconName: 'lucide:trash2',
|
|
action: async () => {
|
|
if (confirm(`Delete file "${getFileName(key)}"?`)) {
|
|
const success = await this.dataProvider!.deleteObject(this.bucketName, key);
|
|
if (success) {
|
|
await this.loadObjects();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
]);
|
|
}
|
|
}
|
|
|
|
private handleEmptySpaceContextMenu(event: MouseEvent) {
|
|
if ((event.target as HTMLElement).closest('tr')) return;
|
|
event.preventDefault();
|
|
|
|
DeesContextmenu.openContextMenuWithOptions(event, [
|
|
{
|
|
name: 'New Folder',
|
|
iconName: 'lucide:folderPlus',
|
|
action: async () => this.openCreateDialog('folder', this.currentPrefix),
|
|
},
|
|
{
|
|
name: 'New File',
|
|
iconName: 'lucide:filePlus',
|
|
action: async () => this.openCreateDialog('file', this.currentPrefix),
|
|
},
|
|
]);
|
|
}
|
|
|
|
private openCreateDialog(type: 'folder' | 'file', prefix: string) {
|
|
this.createDialogType = type;
|
|
this.createDialogPrefix = prefix;
|
|
this.createDialogName = '';
|
|
this.showCreateDialog = true;
|
|
}
|
|
|
|
private async handleCreate() {
|
|
if (!this.createDialogName.trim() || !this.dataProvider) return;
|
|
|
|
const name = this.createDialogName.trim();
|
|
let path: string;
|
|
|
|
if (this.createDialogType === 'folder') {
|
|
path = this.createDialogPrefix + name + '/.keep';
|
|
} else {
|
|
path = this.createDialogPrefix + name;
|
|
}
|
|
|
|
const ext = name.split('.').pop()?.toLowerCase() || '';
|
|
const contentType = this.createDialogType === 'file' ? getContentType(ext) : 'application/octet-stream';
|
|
const content = this.createDialogType === 'file' ? getDefaultContent(ext) : '';
|
|
|
|
const success = await this.dataProvider.putObject(
|
|
this.bucketName,
|
|
path,
|
|
btoa(content),
|
|
contentType
|
|
);
|
|
|
|
if (success) {
|
|
this.showCreateDialog = false;
|
|
await this.loadObjects();
|
|
}
|
|
}
|
|
|
|
private renderCreateDialog() {
|
|
if (!this.showCreateDialog) return '';
|
|
|
|
const isFolder = this.createDialogType === 'folder';
|
|
const title = isFolder ? 'Create New Folder' : 'Create New File';
|
|
const placeholder = isFolder ? 'folder-name or path/to/folder' : 'filename.txt or path/to/file.txt';
|
|
|
|
return html`
|
|
<div class="dialog-overlay" @click=${() => this.showCreateDialog = false}>
|
|
<div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
|
|
<div class="dialog-title">${title}</div>
|
|
<div class="dialog-location">
|
|
Location: ${this.bucketName}/${this.createDialogPrefix}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
class="dialog-input"
|
|
placeholder=${placeholder}
|
|
.value=${this.createDialogName}
|
|
@input=${(e: InputEvent) => this.createDialogName = (e.target as HTMLInputElement).value}
|
|
@keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
|
|
/>
|
|
<div class="dialog-hint">
|
|
Use "/" to create nested ${isFolder ? 'folders' : 'path'} (e.g., ${isFolder ? 'parent/child' : 'folder/file.txt'})
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button class="dialog-btn dialog-btn-cancel" @click=${() => this.showCreateDialog = false}>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="dialog-btn dialog-btn-create"
|
|
?disabled=${!this.createDialogName.trim()}
|
|
@click=${() => this.handleCreate()}
|
|
>
|
|
Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// --- 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) {
|
|
if (!this.dataProvider) return;
|
|
this.movePickerLoading = true;
|
|
try {
|
|
const result = await this.dataProvider.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 || !this.dataProvider) 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 this.dataProvider.movePrefix(
|
|
this.bucketName,
|
|
this.moveSource.key,
|
|
destKey
|
|
);
|
|
} else {
|
|
result = await this.dataProvider.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;
|
|
}
|
|
|
|
// --- Rename dialog methods ---
|
|
|
|
private openRenameDialog(key: string, isFolder: boolean) {
|
|
this.renameSource = { key, isFolder };
|
|
this.renameName = getFileName(key);
|
|
this.renameError = null;
|
|
this.showRenameDialog = true;
|
|
|
|
this.updateComplete.then(() => {
|
|
const input = this.shadowRoot?.querySelector('.rename-dialog-input') as HTMLInputElement;
|
|
if (input) {
|
|
input.focus();
|
|
if (!isFolder) {
|
|
const lastDot = this.renameName.lastIndexOf('.');
|
|
if (lastDot > 0) {
|
|
input.setSelectionRange(0, lastDot);
|
|
} else {
|
|
input.select();
|
|
}
|
|
} else {
|
|
input.select();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
private async executeRename() {
|
|
if (!this.renameSource || !this.renameName.trim() || !this.dataProvider) return;
|
|
|
|
const newName = this.renameName.trim();
|
|
const currentName = getFileName(this.renameSource.key);
|
|
|
|
if (newName === currentName) {
|
|
this.renameError = 'Name is the same as current';
|
|
return;
|
|
}
|
|
if (!newName) {
|
|
this.renameError = 'Name cannot be empty';
|
|
return;
|
|
}
|
|
if (newName.includes('/')) {
|
|
this.renameError = 'Name cannot contain "/"';
|
|
return;
|
|
}
|
|
|
|
this.renameInProgress = true;
|
|
this.renameError = null;
|
|
|
|
try {
|
|
const parentPrefix = getParentPrefix(this.renameSource.key);
|
|
const newKey = parentPrefix + newName + (this.renameSource.isFolder ? '/' : '');
|
|
|
|
let result: { success: boolean; error?: string };
|
|
if (this.renameSource.isFolder) {
|
|
result = await this.dataProvider.movePrefix(this.bucketName, this.renameSource.key, newKey);
|
|
} else {
|
|
result = await this.dataProvider.moveObject(this.bucketName, this.renameSource.key, newKey);
|
|
}
|
|
|
|
if (result.success) {
|
|
this.closeRenameDialog();
|
|
await this.loadObjects();
|
|
} else {
|
|
this.renameError = result.error || 'Rename failed';
|
|
}
|
|
} catch (err) {
|
|
this.renameError = `Error: ${err}`;
|
|
}
|
|
this.renameInProgress = false;
|
|
}
|
|
|
|
private closeRenameDialog() {
|
|
this.showRenameDialog = false;
|
|
this.renameSource = null;
|
|
this.renameName = '';
|
|
this.renameError = null;
|
|
this.renameInProgress = false;
|
|
}
|
|
|
|
private renderRenameDialog() {
|
|
if (!this.showRenameDialog || !this.renameSource) return '';
|
|
|
|
const isFolder = this.renameSource.isFolder;
|
|
const title = isFolder ? 'Rename Folder' : 'Rename File';
|
|
|
|
return html`
|
|
<div class="dialog-overlay" @click=${() => this.closeRenameDialog()}>
|
|
<div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
|
|
<div class="dialog-title">${title}</div>
|
|
<div class="dialog-location">
|
|
Location: ${this.bucketName}/${getParentPrefix(this.renameSource.key)}
|
|
</div>
|
|
${this.renameError ? html`<div class="move-error">${this.renameError}</div>` : ''}
|
|
<input
|
|
type="text"
|
|
class="dialog-input rename-dialog-input"
|
|
placeholder=${isFolder ? 'folder-name' : 'filename.ext'}
|
|
.value=${this.renameName}
|
|
@input=${(e: InputEvent) => {
|
|
this.renameName = (e.target as HTMLInputElement).value;
|
|
this.renameError = null;
|
|
}}
|
|
@keydown=${(e: KeyboardEvent) => {
|
|
if (e.key === 'Enter') this.executeRename();
|
|
if (e.key === 'Escape') this.closeRenameDialog();
|
|
}}
|
|
/>
|
|
<div class="dialog-actions">
|
|
<button class="dialog-btn dialog-btn-cancel"
|
|
@click=${() => this.closeRenameDialog()}
|
|
?disabled=${this.renameInProgress}>Cancel</button>
|
|
<button class="dialog-btn dialog-btn-create"
|
|
@click=${() => this.executeRename()}
|
|
?disabled=${this.renameInProgress || !this.renameName.trim()}>
|
|
${this.renameInProgress ? 'Renaming...' : 'Rename'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
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>
|
|
${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)
|
|
.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">
|
|
<div class="filter-bar">
|
|
<input
|
|
type="text"
|
|
class="filter-input"
|
|
placeholder="Filter files..."
|
|
.value=${this.filterText}
|
|
@input=${this.handleFilterInput}
|
|
/>
|
|
</div>
|
|
|
|
<div class="keys-list" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e)}>
|
|
${this.loading
|
|
? html`<div class="empty-state">Loading...</div>`
|
|
: this.filteredItems.length === 0
|
|
? html`<div class="empty-state">No objects found</div>`
|
|
: html`
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th style="width: 100px;">Size</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${this.filteredItems.map(
|
|
(item) => html`
|
|
<tr
|
|
class="${this.selectedKey === item.key ? 'selected' : ''}"
|
|
@click=${() => this.selectKey(item.key, item.isFolder)}
|
|
@contextmenu=${(e: MouseEvent) => this.handleItemContextMenu(e, item.key, item.isFolder)}
|
|
>
|
|
<td>
|
|
<div class="key-cell">
|
|
${item.isFolder
|
|
? html`
|
|
<svg class="key-icon folder-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>
|
|
`
|
|
: html`
|
|
<svg class="key-icon" 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" />
|
|
</svg>
|
|
`}
|
|
<span class="key-name">${getFileName(item.key)}</span>
|
|
</div>
|
|
</td>
|
|
<td class="size-cell">
|
|
${item.isFolder ? '-' : formatSize(item.size)}
|
|
</td>
|
|
</tr>
|
|
`
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
`}
|
|
</div>
|
|
</div>
|
|
${this.renderCreateDialog()}
|
|
${this.renderMoveDialog()}
|
|
${this.renderMovePickerDialog()}
|
|
${this.renderRenameDialog()}
|
|
`;
|
|
}
|
|
}
|