initial
This commit is contained in:
299
ts_web/elements/tsview-s3-columns.ts
Normal file
299
ts_web/elements/tsview-s3-columns.ts
Normal file
@@ -0,0 +1,299 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { apiService, type IS3Object } from '../services/index.js';
|
||||
|
||||
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
||||
|
||||
interface IColumn {
|
||||
prefix: string;
|
||||
objects: IS3Object[];
|
||||
prefixes: string[];
|
||||
selectedItem: string | null;
|
||||
}
|
||||
|
||||
@customElement('tsview-s3-columns')
|
||||
export class TsviewS3Columns extends DeesElement {
|
||||
@property({ type: String })
|
||||
public accessor bucketName: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor currentPrefix: string = '';
|
||||
|
||||
@state()
|
||||
private accessor columns: IColumn[] = [];
|
||||
|
||||
@state()
|
||||
private accessor loading: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.columns-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.column {
|
||||
min-width: 220px;
|
||||
max-width: 280px;
|
||||
border-right: 1px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.column:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.column-items {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.column-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.column-item.selected {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
color: #818cf8;
|
||||
}
|
||||
|
||||
.column-item.folder {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.column-item .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.column-item .name {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.column-item .chevron {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.loadInitialColumn();
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, unknown>) {
|
||||
if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix')) {
|
||||
this.loadInitialColumn();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadInitialColumn() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await apiService.listObjects(this.bucketName, this.currentPrefix, '/');
|
||||
this.columns = [
|
||||
{
|
||||
prefix: this.currentPrefix,
|
||||
objects: result.objects,
|
||||
prefixes: result.prefixes,
|
||||
selectedItem: null,
|
||||
},
|
||||
];
|
||||
} catch (err) {
|
||||
console.error('Error loading objects:', err);
|
||||
this.columns = [];
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
private async selectFolder(columnIndex: number, prefix: string) {
|
||||
// Update selection in current column
|
||||
this.columns = this.columns.map((col, i) => {
|
||||
if (i === columnIndex) {
|
||||
return { ...col, selectedItem: prefix };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
|
||||
// Remove columns after current
|
||||
this.columns = this.columns.slice(0, columnIndex + 1);
|
||||
|
||||
// Load new column
|
||||
try {
|
||||
const result = await apiService.listObjects(this.bucketName, prefix, '/');
|
||||
this.columns = [
|
||||
...this.columns,
|
||||
{
|
||||
prefix,
|
||||
objects: result.objects,
|
||||
prefixes: result.prefixes,
|
||||
selectedItem: null,
|
||||
},
|
||||
];
|
||||
} catch (err) {
|
||||
console.error('Error loading folder:', err);
|
||||
}
|
||||
|
||||
// Dispatch navigate event
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('navigate', {
|
||||
detail: { prefix },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private selectFile(columnIndex: number, key: string) {
|
||||
// Update selection
|
||||
this.columns = this.columns.map((col, i) => {
|
||||
if (i === columnIndex) {
|
||||
return { ...col, selectedItem: key };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
|
||||
// Remove columns after current
|
||||
this.columns = this.columns.slice(0, columnIndex + 1);
|
||||
|
||||
// Dispatch key-selected event
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('key-selected', {
|
||||
detail: { key },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private getFileName(path: string): string {
|
||||
const parts = path.replace(/\/$/, '').split('/');
|
||||
return parts[parts.length - 1] || path;
|
||||
}
|
||||
|
||||
private getFileIcon(key: string): string {
|
||||
const ext = key.split('.').pop()?.toLowerCase() || '';
|
||||
const iconMap: Record<string, string> = {
|
||||
json: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
|
||||
txt: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
|
||||
png: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
|
||||
jpg: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
|
||||
jpeg: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
|
||||
gif: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
|
||||
pdf: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
|
||||
};
|
||||
return iconMap[ext] || 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z';
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.loading && this.columns.length === 0) {
|
||||
return html`<div class="loading">Loading...</div>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="columns-container">
|
||||
${this.columns.map((column, index) => this.renderColumn(column, index))}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderColumn(column: IColumn, index: number) {
|
||||
const headerName = column.prefix
|
||||
? this.getFileName(column.prefix)
|
||||
: this.bucketName;
|
||||
|
||||
return html`
|
||||
<div class="column">
|
||||
<div class="column-header" title=${column.prefix || this.bucketName}>
|
||||
${headerName}
|
||||
</div>
|
||||
<div class="column-items">
|
||||
${column.prefixes.length === 0 && column.objects.length === 0
|
||||
? html`<div class="empty-state">Empty folder</div>`
|
||||
: ''}
|
||||
${column.prefixes.map(
|
||||
(prefix) => html`
|
||||
<div
|
||||
class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''}"
|
||||
@click=${() => this.selectFolder(index, 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">${this.getFileName(prefix)}</span>
|
||||
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
${column.objects.map(
|
||||
(obj) => html`
|
||||
<div
|
||||
class="column-item ${column.selectedItem === obj.key ? 'selected' : ''}"
|
||||
@click=${() => this.selectFile(index, obj.key)}
|
||||
>
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="${this.getFileIcon(obj.key)}" />
|
||||
</svg>
|
||||
<span class="name">${this.getFileName(obj.key)}</span>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user