Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2da2d57df1 | |||
| 150d6d9d86 | |||
| c4afbdfd7f | |||
| b72b36c4ea | |||
| 8c5cea7e0b | |||
| d9fc7f8257 | |||
| b41adc184e | |||
| 175e9cb691 |
29
changelog.md
29
changelog.md
@@ -1,5 +1,34 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 2026-03-12 - 1.12.0 - feat(web)
|
||||||
|
replace custom S3 browser components with dees-s3-browser integration
|
||||||
|
|
||||||
|
- adds an S3 data provider adapter that delegates object operations to the existing ApiService
|
||||||
|
- wires live bucket change events into dees-s3-browser via changeStreamService
|
||||||
|
- removes exported custom tsview S3 elements in favor of the shared catalog component
|
||||||
|
|
||||||
|
## 2026-01-29 - 1.11.1 - fix(mongo-browser)
|
||||||
|
increase default editor width and broaden resize range in Mongo browser pane
|
||||||
|
|
||||||
|
- Set default editorWidth from 400 to 700
|
||||||
|
- Update CSS grid-template default editor width variable to 700
|
||||||
|
- Expand editor resize bounds: min 300 -> 250, max 700 -> 1000 (resizer calculation adjusted)
|
||||||
|
|
||||||
|
## 2026-01-28 - 1.11.0 - feat(s3)
|
||||||
|
add rename support for files and folders in S3 UI columns and keys
|
||||||
|
|
||||||
|
- Adds 'Rename' option to context menus in tsview-s3-columns and tsview-s3-keys for files and folders
|
||||||
|
- Implements a rename dialog with validation, auto-focus and smart selection (preserves extensions), and progress/error states
|
||||||
|
- Performs renames via apiService.moveObject / apiService.movePrefix and refreshes the UI after success
|
||||||
|
- Bumps @design.estate/dees-catalog dependency to ^3.41.2
|
||||||
|
|
||||||
|
## 2026-01-28 - 1.10.2 - fix(tsview-s3-columns)
|
||||||
|
append trailing slash to destination key when moving folders to ensure folder destination path
|
||||||
|
|
||||||
|
- ts_web/elements/tsview-s3-columns.ts: add '/' to destKey when moveSource.isFolder to preserve folder semantics
|
||||||
|
- Prevents folder moves from being treated as object moves by ensuring destination key ends with a slash
|
||||||
|
- Change affects logic that calls apiService.movePrefix for folder moves
|
||||||
|
|
||||||
## 2026-01-28 - 1.10.1 - fix(playwright-mcp)
|
## 2026-01-28 - 1.10.1 - fix(playwright-mcp)
|
||||||
remove Playwright-generated snapshot images to avoid committing autogenerated test artifacts and reduce repository size
|
remove Playwright-generated snapshot images to avoid committing autogenerated test artifacts and reduce repository size
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@git.zone/tsview",
|
"name": "@git.zone/tsview",
|
||||||
"version": "1.10.1",
|
"version": "1.12.0",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
|
"description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
|
||||||
"main": "dist_ts/index.js",
|
"main": "dist_ts/index.js",
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
"@api.global/typedrequest-interfaces": "^3.0.19",
|
"@api.global/typedrequest-interfaces": "^3.0.19",
|
||||||
"@api.global/typedserver": "^8.3.0",
|
"@api.global/typedserver": "^8.3.0",
|
||||||
"@aws-sdk/client-s3": "^3.975.0",
|
"@aws-sdk/client-s3": "^3.975.0",
|
||||||
"@design.estate/dees-catalog": "^3.41.1",
|
"@design.estate/dees-catalog": "^3.41.2",
|
||||||
"@design.estate/dees-element": "^2.1.6",
|
"@design.estate/dees-element": "^2.1.6",
|
||||||
"@push.rocks/early": "^4.0.4",
|
"@push.rocks/early": "^4.0.4",
|
||||||
"@push.rocks/npmextra": "^5.3.3",
|
"@push.rocks/npmextra": "^5.3.3",
|
||||||
|
|||||||
108
pnpm-lock.yaml
generated
108
pnpm-lock.yaml
generated
@@ -21,8 +21,8 @@ importers:
|
|||||||
specifier: ^3.975.0
|
specifier: ^3.975.0
|
||||||
version: 3.975.0
|
version: 3.975.0
|
||||||
'@design.estate/dees-catalog':
|
'@design.estate/dees-catalog':
|
||||||
specifier: ^3.41.1
|
specifier: ^3.41.2
|
||||||
version: 3.41.1(@tiptap/pm@2.27.2)
|
version: 3.41.2(@tiptap/pm@2.27.2)
|
||||||
'@design.estate/dees-element':
|
'@design.estate/dees-element':
|
||||||
specifier: ^2.1.6
|
specifier: ^2.1.6
|
||||||
version: 2.1.6
|
version: 2.1.6
|
||||||
@@ -331,8 +331,8 @@ packages:
|
|||||||
'@configvault.io/interfaces@1.0.17':
|
'@configvault.io/interfaces@1.0.17':
|
||||||
resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
|
resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
|
||||||
|
|
||||||
'@design.estate/dees-catalog@3.41.1':
|
'@design.estate/dees-catalog@3.41.2':
|
||||||
resolution: {integrity: sha512-AMD0VNLQEWXYRUYWwjLA8K8KEKAiUO7GiriWQm+ld7cj+LrCMsJO0jjVfOCsd4G7fURMqmab9ereBJyxqjoFgQ==}
|
resolution: {integrity: sha512-G6b7TbqkEupHwty3q+Y42xbmwkfFBf3S5JBrMLAw1S0kR88ZCio0dOBcvmvQTQ5pQBz6TDRkx1prXpoQbZDt7A==}
|
||||||
|
|
||||||
'@design.estate/dees-comms@1.0.30':
|
'@design.estate/dees-comms@1.0.30':
|
||||||
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
|
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
|
||||||
@@ -660,74 +660,74 @@ packages:
|
|||||||
'@mongodb-js/saslprep@1.4.5':
|
'@mongodb-js/saslprep@1.4.5':
|
||||||
resolution: {integrity: sha512-k64Lbyb7ycCSXHSLzxVdb2xsKGPMvYZfCICXvDsI8Z65CeWQzTEKS4YmGbnqw+U9RBvLPTsB6UCmwkgsDTGWIw==}
|
resolution: {integrity: sha512-k64Lbyb7ycCSXHSLzxVdb2xsKGPMvYZfCICXvDsI8Z65CeWQzTEKS4YmGbnqw+U9RBvLPTsB6UCmwkgsDTGWIw==}
|
||||||
|
|
||||||
'@napi-rs/canvas-android-arm64@0.1.88':
|
'@napi-rs/canvas-android-arm64@0.1.89':
|
||||||
resolution: {integrity: sha512-KEaClPnZuVxJ8smUWjV1wWFkByBO/D+vy4lN+Dm5DFH514oqwukxKGeck9xcKJhaWJGjfruGmYGiwRe//+/zQQ==}
|
resolution: {integrity: sha512-CXxQTXsjtQqKGENS8Ejv9pZOFJhOPIl2goenS+aU8dY4DygvkyagDhy/I07D1YLqrDtPvLEX5zZHt8qUdnuIpQ==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [android]
|
os: [android]
|
||||||
|
|
||||||
'@napi-rs/canvas-darwin-arm64@0.1.88':
|
'@napi-rs/canvas-darwin-arm64@0.1.89':
|
||||||
resolution: {integrity: sha512-Xgywz0dDxOKSgx3eZnK85WgGMmGrQEW7ZLA/E7raZdlEE+xXCozobgqz2ZvYigpB6DJFYkqnwHjqCOTSDGlFdg==}
|
resolution: {integrity: sha512-k29cR/Zl20WLYM7M8YePevRu2VQRaKcRedYr1V/8FFHkyIQ8kShEV+MPoPGi+znvmd17Eqjy2Pk2F2kpM2umVg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
|
|
||||||
'@napi-rs/canvas-darwin-x64@0.1.88':
|
'@napi-rs/canvas-darwin-x64@0.1.89':
|
||||||
resolution: {integrity: sha512-Yz4wSCIQOUgNucgk+8NFtQxQxZV5NO8VKRl9ePKE6XoNyNVC8JDqtvhh3b3TPqKK8W5p2EQpAr1rjjm0mfBxdg==}
|
resolution: {integrity: sha512-iUragqhBrA5FqU13pkhYBDbUD1WEAIlT8R2+fj6xHICY2nemzwMUI8OENDhRh7zuL06YDcRwENbjAVxOmaX9jg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.88':
|
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.89':
|
||||||
resolution: {integrity: sha512-9gQM2SlTo76hYhxHi2XxWTAqpTOb+JtxMPEIr+H5nAhHhyEtNmTSDRtz93SP7mGd2G3Ojf2oF5tP9OdgtgXyKg==}
|
resolution: {integrity: sha512-y3SM9sfDWasY58ftoaI09YBFm35Ig8tosZqgahLJ2WGqawCusGNPV9P0/4PsrLOCZqGg629WxexQMY25n7zcvA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-arm64-gnu@0.1.88':
|
'@napi-rs/canvas-linux-arm64-gnu@0.1.89':
|
||||||
resolution: {integrity: sha512-7qgaOBMXuVRk9Fzztzr3BchQKXDxGbY+nwsovD3I/Sx81e+sX0ReEDYHTItNb0Je4NHbAl7D0MKyd4SvUc04sg==}
|
resolution: {integrity: sha512-NEoF9y8xq5fX8HG8aZunBom1ILdTwt7ayBzSBIwrmitk7snj4W6Fz/yN/ZOmlM1iyzHDNX5Xn0n+VgWCF8BEdA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-arm64-musl@0.1.88':
|
'@napi-rs/canvas-linux-arm64-musl@0.1.89':
|
||||||
resolution: {integrity: sha512-kYyNrUsHLkoGHBc77u4Unh067GrfiCUMbGHC2+OTxbeWfZkPt2o32UOQkhnSswKd9Fko/wSqqGkY956bIUzruA==}
|
resolution: {integrity: sha512-UQQkIEzV12/l60j1ziMjZ+mtodICNUbrd205uAhbyTw0t60CrC/EsKb5/aJWGq1wM0agvcgZV72JJCKfLS6+4w==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-riscv64-gnu@0.1.88':
|
'@napi-rs/canvas-linux-riscv64-gnu@0.1.89':
|
||||||
resolution: {integrity: sha512-HVuH7QgzB0yavYdNZDRyAsn/ejoXB0hn8twwFnOqUbCCdkV+REna7RXjSR7+PdfW0qMQ2YYWsLvVBT5iL/mGpw==}
|
resolution: {integrity: sha512-1/VmEoFaIO6ONeeEMGoWF17wOYZOl5hxDC1ios2Bkz/oQjbJJ8DY/X22vWTmvuUKWWhBVlo63pxLGZbjJU/heA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [riscv64]
|
cpu: [riscv64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-x64-gnu@0.1.88':
|
'@napi-rs/canvas-linux-x64-gnu@0.1.89':
|
||||||
resolution: {integrity: sha512-hvcvKIcPEQrvvJtJnwD35B3qk6umFJ8dFIr8bSymfrSMem0EQsfn1ztys8ETIFndTwdNWJKWluvxztA41ivsEw==}
|
resolution: {integrity: sha512-ebLuqkCuaPIkKgKH9q4+pqWi1tkPOfiTk5PM1LKR1tB9iO9sFNVSIgwEp+SJreTSbA2DK5rW8lQXiN78SjtcvA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-x64-musl@0.1.88':
|
'@napi-rs/canvas-linux-x64-musl@0.1.89':
|
||||||
resolution: {integrity: sha512-eSMpGYY2xnZSQ6UxYJ6plDboxq4KeJ4zT5HaVkUnbObNN6DlbJe0Mclh3wifAmquXfrlgTZt6zhHsUgz++AK6g==}
|
resolution: {integrity: sha512-w+5qxHzplvA4BkHhCaizNMLLXiI+CfP84YhpHm/PqMub4u8J0uOAv+aaGv40rYEYra5hHRWr9LUd6cfW32o9/A==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
|
|
||||||
'@napi-rs/canvas-win32-arm64-msvc@0.1.88':
|
'@napi-rs/canvas-win32-arm64-msvc@0.1.89':
|
||||||
resolution: {integrity: sha512-qcIFfEgHrchyYqRrxsCeTQgpJZ/GqHiqPcU/Fvw/ARVlQeDX1VyFH+X+0gCR2tca6UJrq96vnW+5o7buCq+erA==}
|
resolution: {integrity: sha512-DmyXa5lJHcjOsDC78BM3bnEECqbK3xASVMrKfvtT/7S7Z8NGQOugvu+L7b41V6cexCd34mBWgMOsjoEBceeB1Q==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
'@napi-rs/canvas-win32-x64-msvc@0.1.88':
|
'@napi-rs/canvas-win32-x64-msvc@0.1.89':
|
||||||
resolution: {integrity: sha512-ROVqbfS4QyZxYkqmaIBBpbz/BQvAR+05FXM5PAtTYVc0uyY8Y4BHJSMdGAaMf6TdIVRsQsiq+FG/dH9XhvWCFQ==}
|
resolution: {integrity: sha512-WMej0LZrIqIncQcx0JHaMXlnAG7sncwJh7obs/GBgp0xF9qABjwoRwIooMWCZkSansapKGNUHhamY6qEnFN7gA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
'@napi-rs/canvas@0.1.88':
|
'@napi-rs/canvas@0.1.89':
|
||||||
resolution: {integrity: sha512-/p08f93LEbsL5mDZFQ3DBxcPv/I4QG9EDYRRq1WNlCOXVfAHBTHMSVMwxlqG/AtnSfUr9+vgfN7MKiyDo0+Weg==}
|
resolution: {integrity: sha512-7GjmkMirJHejeALCqUnZY3QwID7bbumOiLrqq2LKgxrdjdmxWQBTc6rcASa2u8wuWrH7qo4/4n/VNrOwCoKlKg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
|
|
||||||
'@napi-rs/wasm-runtime@1.0.7':
|
'@napi-rs/wasm-runtime@1.0.7':
|
||||||
@@ -4066,7 +4066,7 @@ snapshots:
|
|||||||
'@api.global/typedrequest-interfaces': 3.0.19
|
'@api.global/typedrequest-interfaces': 3.0.19
|
||||||
'@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@2.0.1)
|
'@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@2.0.1)
|
||||||
'@cloudflare/workers-types': 4.20260123.0
|
'@cloudflare/workers-types': 4.20260123.0
|
||||||
'@design.estate/dees-catalog': 3.41.1(@tiptap/pm@2.27.2)
|
'@design.estate/dees-catalog': 3.41.2(@tiptap/pm@2.27.2)
|
||||||
'@design.estate/dees-comms': 1.0.30
|
'@design.estate/dees-comms': 1.0.30
|
||||||
'@push.rocks/lik': 6.2.2
|
'@push.rocks/lik': 6.2.2
|
||||||
'@push.rocks/smartdelay': 3.0.5
|
'@push.rocks/smartdelay': 3.0.5
|
||||||
@@ -4694,7 +4694,7 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@api.global/typedrequest-interfaces': 3.0.19
|
'@api.global/typedrequest-interfaces': 3.0.19
|
||||||
|
|
||||||
'@design.estate/dees-catalog@3.41.1(@tiptap/pm@2.27.2)':
|
'@design.estate/dees-catalog@3.41.2(@tiptap/pm@2.27.2)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@design.estate/dees-domtools': 2.3.8
|
'@design.estate/dees-domtools': 2.3.8
|
||||||
'@design.estate/dees-element': 2.1.6
|
'@design.estate/dees-element': 2.1.6
|
||||||
@@ -5203,52 +5203,52 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
sparse-bitfield: 3.0.3
|
sparse-bitfield: 3.0.3
|
||||||
|
|
||||||
'@napi-rs/canvas-android-arm64@0.1.88':
|
'@napi-rs/canvas-android-arm64@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-darwin-arm64@0.1.88':
|
'@napi-rs/canvas-darwin-arm64@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-darwin-x64@0.1.88':
|
'@napi-rs/canvas-darwin-x64@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.88':
|
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-arm64-gnu@0.1.88':
|
'@napi-rs/canvas-linux-arm64-gnu@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-arm64-musl@0.1.88':
|
'@napi-rs/canvas-linux-arm64-musl@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-riscv64-gnu@0.1.88':
|
'@napi-rs/canvas-linux-riscv64-gnu@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-x64-gnu@0.1.88':
|
'@napi-rs/canvas-linux-x64-gnu@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-linux-x64-musl@0.1.88':
|
'@napi-rs/canvas-linux-x64-musl@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-win32-arm64-msvc@0.1.88':
|
'@napi-rs/canvas-win32-arm64-msvc@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas-win32-x64-msvc@0.1.88':
|
'@napi-rs/canvas-win32-x64-msvc@0.1.89':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/canvas@0.1.88':
|
'@napi-rs/canvas@0.1.89':
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
'@napi-rs/canvas-android-arm64': 0.1.88
|
'@napi-rs/canvas-android-arm64': 0.1.89
|
||||||
'@napi-rs/canvas-darwin-arm64': 0.1.88
|
'@napi-rs/canvas-darwin-arm64': 0.1.89
|
||||||
'@napi-rs/canvas-darwin-x64': 0.1.88
|
'@napi-rs/canvas-darwin-x64': 0.1.89
|
||||||
'@napi-rs/canvas-linux-arm-gnueabihf': 0.1.88
|
'@napi-rs/canvas-linux-arm-gnueabihf': 0.1.89
|
||||||
'@napi-rs/canvas-linux-arm64-gnu': 0.1.88
|
'@napi-rs/canvas-linux-arm64-gnu': 0.1.89
|
||||||
'@napi-rs/canvas-linux-arm64-musl': 0.1.88
|
'@napi-rs/canvas-linux-arm64-musl': 0.1.89
|
||||||
'@napi-rs/canvas-linux-riscv64-gnu': 0.1.88
|
'@napi-rs/canvas-linux-riscv64-gnu': 0.1.89
|
||||||
'@napi-rs/canvas-linux-x64-gnu': 0.1.88
|
'@napi-rs/canvas-linux-x64-gnu': 0.1.89
|
||||||
'@napi-rs/canvas-linux-x64-musl': 0.1.88
|
'@napi-rs/canvas-linux-x64-musl': 0.1.89
|
||||||
'@napi-rs/canvas-win32-arm64-msvc': 0.1.88
|
'@napi-rs/canvas-win32-arm64-msvc': 0.1.89
|
||||||
'@napi-rs/canvas-win32-x64-msvc': 0.1.88
|
'@napi-rs/canvas-win32-x64-msvc': 0.1.89
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/wasm-runtime@1.0.7':
|
'@napi-rs/wasm-runtime@1.0.7':
|
||||||
@@ -8747,7 +8747,7 @@ snapshots:
|
|||||||
|
|
||||||
pdfjs-dist@4.10.38:
|
pdfjs-dist@4.10.38:
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
'@napi-rs/canvas': 0.1.88
|
'@napi-rs/canvas': 0.1.89
|
||||||
|
|
||||||
peek-readable@5.4.2: {}
|
peek-readable@5.4.2: {}
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@git.zone/tsview',
|
name: '@git.zone/tsview',
|
||||||
version: '1.10.1',
|
version: '1.12.0',
|
||||||
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
|
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@git.zone/tsview',
|
name: '@git.zone/tsview',
|
||||||
version: '1.10.1',
|
version: '1.12.0',
|
||||||
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
|
description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
|
||||||
}
|
}
|
||||||
|
|||||||
41
ts_web/adapters/s3-data-provider.ts
Normal file
41
ts_web/adapters/s3-data-provider.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import type { IS3DataProvider } from '@design.estate/dees-catalog';
|
||||||
|
import { apiService } from '../services/index.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adapter that implements IS3DataProvider by delegating to tsview's ApiService
|
||||||
|
*/
|
||||||
|
export class TsviewS3DataProvider implements IS3DataProvider {
|
||||||
|
async listObjects(bucket: string, prefix?: string, delimiter?: string) {
|
||||||
|
return apiService.listObjects(bucket, prefix, delimiter);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getObject(bucket: string, key: string) {
|
||||||
|
return apiService.getObject(bucket, key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async putObject(bucket: string, key: string, base64Content: string, contentType: string) {
|
||||||
|
return apiService.putObject(bucket, key, base64Content, contentType);
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteObject(bucket: string, key: string) {
|
||||||
|
return apiService.deleteObject(bucket, key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async deletePrefix(bucket: string, prefix: string) {
|
||||||
|
return apiService.deletePrefix(bucket, prefix);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getObjectUrl(bucket: string, key: string) {
|
||||||
|
return apiService.getObjectUrl(bucket, key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async moveObject(bucket: string, sourceKey: string, destKey: string) {
|
||||||
|
return apiService.moveObject(bucket, sourceKey, destKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
async movePrefix(bucket: string, sourcePrefix: string, destPrefix: string) {
|
||||||
|
return apiService.movePrefix(bucket, sourcePrefix, destPrefix);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const s3DataProvider = new TsviewS3DataProvider();
|
||||||
@@ -1,12 +1,6 @@
|
|||||||
// Main app shell
|
// Main app shell
|
||||||
export * from './tsview-app.js';
|
export * from './tsview-app.js';
|
||||||
|
|
||||||
// S3 components
|
|
||||||
export * from './tsview-s3-browser.js';
|
|
||||||
export * from './tsview-s3-columns.js';
|
|
||||||
export * from './tsview-s3-keys.js';
|
|
||||||
export * from './tsview-s3-preview.js';
|
|
||||||
|
|
||||||
// MongoDB components
|
// MongoDB components
|
||||||
export * from './tsview-mongo-browser.js';
|
export * from './tsview-mongo-browser.js';
|
||||||
export * from './tsview-mongo-collections.js';
|
export * from './tsview-mongo-collections.js';
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
import * as plugins from '../plugins.js';
|
import * as plugins from '../plugins.js';
|
||||||
import { apiService, changeStreamService } from '../services/index.js';
|
import { apiService, changeStreamService } from '../services/index.js';
|
||||||
import { themeStyles } from '../styles/index.js';
|
import { themeStyles } from '../styles/index.js';
|
||||||
|
import { s3DataProvider } from '../adapters/s3-data-provider.js';
|
||||||
|
import type { IS3ChangeEvent } from '@design.estate/dees-catalog';
|
||||||
|
|
||||||
const { html, css, cssManager, customElement, state, DeesElement } = plugins;
|
const { html, css, cssManager, customElement, state, DeesElement } = plugins;
|
||||||
const { DeesContextmenu } = plugins.deesCatalog;
|
const { DeesContextmenu } = plugins.deesCatalog;
|
||||||
@@ -1039,7 +1041,16 @@ export class TsviewApp extends DeesElement {
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="content-area">
|
<div class="content-area">
|
||||||
<tsview-s3-browser .bucketName=${this.selectedBucket}></tsview-s3-browser>
|
<dees-s3-browser
|
||||||
|
.dataProvider=${s3DataProvider}
|
||||||
|
.bucketName=${this.selectedBucket}
|
||||||
|
.onChangeEvent=${(callback: (event: IS3ChangeEvent) => void) => {
|
||||||
|
const sub = changeStreamService
|
||||||
|
.getBucketChanges(this.selectedBucket)
|
||||||
|
.subscribe(callback);
|
||||||
|
return () => sub.unsubscribe();
|
||||||
|
}}
|
||||||
|
></dees-s3-browser>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export class TsviewMongoBrowser extends DeesElement {
|
|||||||
private accessor stats: ICollectionStats | null = null;
|
private accessor stats: ICollectionStats | null = null;
|
||||||
|
|
||||||
@state()
|
@state()
|
||||||
private accessor editorWidth: number = 400;
|
private accessor editorWidth: number = 700;
|
||||||
|
|
||||||
@state()
|
@state()
|
||||||
private accessor isResizingEditor: boolean = false;
|
private accessor isResizingEditor: boolean = false;
|
||||||
@@ -117,7 +117,7 @@ export class TsviewMongoBrowser extends DeesElement {
|
|||||||
.content {
|
.content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 4px var(--editor-width, 400px);
|
grid-template-columns: 1fr 4px var(--editor-width, 700px);
|
||||||
gap: 0;
|
gap: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -305,7 +305,7 @@ export class TsviewMongoBrowser extends DeesElement {
|
|||||||
const contentEl = this.shadowRoot?.querySelector('.content');
|
const contentEl = this.shadowRoot?.querySelector('.content');
|
||||||
if (!contentEl) return;
|
if (!contentEl) return;
|
||||||
const containerRect = contentEl.getBoundingClientRect();
|
const containerRect = contentEl.getBoundingClientRect();
|
||||||
const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 300), 700);
|
const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
|
||||||
this.editorWidth = newWidth;
|
this.editorWidth = newWidth;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,423 +0,0 @@
|
|||||||
import * as plugins from '../plugins.js';
|
|
||||||
import { apiService, changeStreamService, type IS3ChangeEvent } from '../services/index.js';
|
|
||||||
import { themeStyles } from '../styles/index.js';
|
|
||||||
|
|
||||||
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
|
||||||
|
|
||||||
type TViewType = 'columns' | 'keys';
|
|
||||||
|
|
||||||
@customElement('tsview-s3-browser')
|
|
||||||
export class TsviewS3Browser extends DeesElement {
|
|
||||||
@property({ type: String })
|
|
||||||
public accessor bucketName: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor viewType: TViewType = 'columns';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor currentPrefix: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor selectedKey: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor refreshKey: number = 0;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor previewWidth: number = 700;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor isResizingPreview: boolean = false;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor recentChangeCount: number = 0;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor isStreamConnected: boolean = false;
|
|
||||||
|
|
||||||
private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
|
|
||||||
private connectionSubscription: plugins.smartrx.rxjs.Subscription | null = null;
|
|
||||||
|
|
||||||
public static styles = [
|
|
||||||
cssManager.defaultStyles,
|
|
||||||
themeStyles,
|
|
||||||
css`
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-item {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-separator {
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn {
|
|
||||||
padding: 6px 12px;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid #444;
|
|
||||||
color: #888;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn:hover {
|
|
||||||
border-color: #666;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn.active {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-color: #404040;
|
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.has-preview {
|
|
||||||
grid-template-columns: 1fr 4px var(--preview-width, 700px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-divider {
|
|
||||||
width: 4px;
|
|
||||||
background: transparent;
|
|
||||||
cursor: col-resize;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-divider:hover,
|
|
||||||
.resize-divider.active {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-view {
|
|
||||||
overflow: auto;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-panel {
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.content,
|
|
||||||
.content.has-preview {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-panel,
|
|
||||||
.resize-divider {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-status {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #888;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-dot {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-dot.connected {
|
|
||||||
background: #22c55e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.change-indicator {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
background: rgba(245, 158, 11, 0.2);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #f59e0b;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.change-indicator.pulse {
|
|
||||||
animation: pulse-orange 1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse-orange {
|
|
||||||
0% { background: rgba(245, 158, 11, 0.4); }
|
|
||||||
100% { background: rgba(245, 158, 11, 0.2); }
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
|
|
||||||
async connectedCallback() {
|
|
||||||
super.connectedCallback();
|
|
||||||
// Subscription is handled by updated() when bucketName is set.
|
|
||||||
// Only track connection status for UI indicator here.
|
|
||||||
this.connectionSubscription = changeStreamService.connectionStatus$.subscribe((status) => {
|
|
||||||
this.isStreamConnected = status === 'connected';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
super.disconnectedCallback();
|
|
||||||
this.unsubscribeFromChanges();
|
|
||||||
if (this.connectionSubscription) {
|
|
||||||
this.connectionSubscription.unsubscribe();
|
|
||||||
this.connectionSubscription = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private setViewType(type: TViewType) {
|
|
||||||
this.viewType = type;
|
|
||||||
}
|
|
||||||
|
|
||||||
private navigateToPrefix(prefix: string) {
|
|
||||||
this.currentPrefix = prefix;
|
|
||||||
this.selectedKey = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleKeySelected(e: CustomEvent) {
|
|
||||||
this.selectedKey = e.detail.key;
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleNavigate(e: CustomEvent) {
|
|
||||||
this.navigateToPrefix(e.detail.prefix);
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleObjectDeleted(e: CustomEvent) {
|
|
||||||
this.selectedKey = '';
|
|
||||||
// Increment refresh key to trigger re-render of child components
|
|
||||||
this.refreshKey++;
|
|
||||||
}
|
|
||||||
|
|
||||||
updated(changedProperties: Map<string, unknown>) {
|
|
||||||
if (changedProperties.has('bucketName')) {
|
|
||||||
// Clear selection when bucket changes
|
|
||||||
this.selectedKey = '';
|
|
||||||
this.currentPrefix = '';
|
|
||||||
this.recentChangeCount = 0;
|
|
||||||
// Re-subscribe to the new bucket
|
|
||||||
this.unsubscribeFromChanges();
|
|
||||||
this.subscribeToChanges();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async subscribeToChanges() {
|
|
||||||
if (!this.bucketName) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Set up RxJS listener first so events aren't missed on reconnect
|
|
||||||
if (!this.changeSubscription) {
|
|
||||||
this.changeSubscription = changeStreamService
|
|
||||||
.getBucketChanges(this.bucketName, this.currentPrefix || undefined)
|
|
||||||
.subscribe((event) => this.handleChange(event));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Subscribe on the server side (will auto-connect if needed)
|
|
||||||
const success = await changeStreamService.subscribeToBucket(this.bucketName, this.currentPrefix || undefined);
|
|
||||||
this.isStreamConnected = success;
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('[S3Browser] Failed to subscribe to changes:', error);
|
|
||||||
this.isStreamConnected = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private unsubscribeFromChanges() {
|
|
||||||
if (this.changeSubscription) {
|
|
||||||
this.changeSubscription.unsubscribe();
|
|
||||||
this.changeSubscription = null;
|
|
||||||
}
|
|
||||||
if (this.bucketName) {
|
|
||||||
changeStreamService.unsubscribeFromBucket(this.bucketName, this.currentPrefix || undefined);
|
|
||||||
}
|
|
||||||
this.isStreamConnected = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleChange(event: IS3ChangeEvent) {
|
|
||||||
console.log('[S3Browser] Received change:', event);
|
|
||||||
this.recentChangeCount++;
|
|
||||||
|
|
||||||
// Trigger refresh of child components
|
|
||||||
this.refreshKey++;
|
|
||||||
}
|
|
||||||
|
|
||||||
private startPreviewResize = (e: MouseEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.isResizingPreview = true;
|
|
||||||
document.addEventListener('mousemove', this.handlePreviewResize);
|
|
||||||
document.addEventListener('mouseup', this.endPreviewResize);
|
|
||||||
};
|
|
||||||
|
|
||||||
private handlePreviewResize = (e: MouseEvent) => {
|
|
||||||
if (!this.isResizingPreview) return;
|
|
||||||
const contentEl = this.shadowRoot?.querySelector('.content');
|
|
||||||
if (!contentEl) return;
|
|
||||||
const containerRect = contentEl.getBoundingClientRect();
|
|
||||||
const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
|
|
||||||
this.previewWidth = newWidth;
|
|
||||||
};
|
|
||||||
|
|
||||||
private endPreviewResize = () => {
|
|
||||||
this.isResizingPreview = false;
|
|
||||||
document.removeEventListener('mousemove', this.handlePreviewResize);
|
|
||||||
document.removeEventListener('mouseup', this.endPreviewResize);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const breadcrumbParts = this.currentPrefix
|
|
||||||
? this.currentPrefix.split('/').filter(Boolean)
|
|
||||||
: [];
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<div class="browser-container">
|
|
||||||
<div class="toolbar">
|
|
||||||
<div class="breadcrumb">
|
|
||||||
<span
|
|
||||||
class="breadcrumb-item"
|
|
||||||
@click=${() => this.navigateToPrefix('')}
|
|
||||||
>
|
|
||||||
${this.bucketName}
|
|
||||||
</span>
|
|
||||||
${breadcrumbParts.map((part, index) => {
|
|
||||||
const prefix = breadcrumbParts.slice(0, index + 1).join('/') + '/';
|
|
||||||
return html`
|
|
||||||
<span class="breadcrumb-separator">/</span>
|
|
||||||
<span
|
|
||||||
class="breadcrumb-item"
|
|
||||||
@click=${() => this.navigateToPrefix(prefix)}
|
|
||||||
>
|
|
||||||
${part}
|
|
||||||
</span>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stream-status">
|
|
||||||
<span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
|
|
||||||
${this.isStreamConnected ? 'Live' : 'Offline'}
|
|
||||||
</div>
|
|
||||||
${this.recentChangeCount > 0
|
|
||||||
? html`
|
|
||||||
<div class="change-indicator pulse">
|
|
||||||
${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: ''}
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button
|
|
||||||
class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"
|
|
||||||
@click=${() => this.setViewType('columns')}
|
|
||||||
>
|
|
||||||
Columns
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="view-btn ${this.viewType === 'keys' ? 'active' : ''}"
|
|
||||||
@click=${() => this.setViewType('keys')}
|
|
||||||
>
|
|
||||||
List
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content ${this.selectedKey ? 'has-preview' : ''}" style="--preview-width: ${this.previewWidth}px">
|
|
||||||
<div class="main-view">
|
|
||||||
${this.viewType === 'columns'
|
|
||||||
? html`
|
|
||||||
<tsview-s3-columns
|
|
||||||
.bucketName=${this.bucketName}
|
|
||||||
.currentPrefix=${this.currentPrefix}
|
|
||||||
.refreshKey=${this.refreshKey}
|
|
||||||
@key-selected=${this.handleKeySelected}
|
|
||||||
@navigate=${this.handleNavigate}
|
|
||||||
></tsview-s3-columns>
|
|
||||||
`
|
|
||||||
: html`
|
|
||||||
<tsview-s3-keys
|
|
||||||
.bucketName=${this.bucketName}
|
|
||||||
.currentPrefix=${this.currentPrefix}
|
|
||||||
.refreshKey=${this.refreshKey}
|
|
||||||
@key-selected=${this.handleKeySelected}
|
|
||||||
@navigate=${this.handleNavigate}
|
|
||||||
></tsview-s3-keys>
|
|
||||||
`}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
${this.selectedKey
|
|
||||||
? html`
|
|
||||||
<div
|
|
||||||
class="resize-divider ${this.isResizingPreview ? 'active' : ''}"
|
|
||||||
@mousedown=${this.startPreviewResize}
|
|
||||||
></div>
|
|
||||||
<div class="preview-panel">
|
|
||||||
<tsview-s3-preview
|
|
||||||
.bucketName=${this.bucketName}
|
|
||||||
.objectKey=${this.selectedKey}
|
|
||||||
@object-deleted=${this.handleObjectDeleted}
|
|
||||||
></tsview-s3-preview>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: ''}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,977 +0,0 @@
|
|||||||
import * as plugins from '../plugins.js';
|
|
||||||
import { apiService, type IS3Object } from '../services/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;
|
|
||||||
const { DeesContextmenu } = plugins.deesCatalog;
|
|
||||||
|
|
||||||
@customElement('tsview-s3-keys')
|
|
||||||
export class TsviewS3Keys extends DeesElement {
|
|
||||||
@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;
|
|
||||||
|
|
||||||
public static styles = [
|
|
||||||
cssManager.defaultStyles,
|
|
||||||
themeStyles,
|
|
||||||
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 #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border: 1px solid #444;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #404040;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-input::placeholder {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keys-list {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
background: #1a1a1a;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #666;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border-bottom: 1px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
border-bottom: 1px solid #2a2a3e;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover td {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.selected td {
|
|
||||||
background: 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: #888;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
padding: 32px;
|
|
||||||
text-align: center;
|
|
||||||
color: #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: #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: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-location {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 12px;
|
|
||||||
background: #141414;
|
|
||||||
border: 1px solid #333;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-hint {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #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 #444;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-btn-cancel:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-btn-create {
|
|
||||||
background: #404040;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-btn-create:hover {
|
|
||||||
background: #505050;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-btn-create:disabled {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
|
|
||||||
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() {
|
|
||||||
this.loading = true;
|
|
||||||
try {
|
|
||||||
const result = await apiService.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 }));
|
|
||||||
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) {
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ 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 apiService.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 apiService.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);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ 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 apiService.deleteObject(this.bucketName, key);
|
|
||||||
if (success) {
|
|
||||||
await this.loadObjects();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleEmptySpaceContextMenu(event: MouseEvent) {
|
|
||||||
// Only trigger if clicking on the container itself, not on items
|
|
||||||
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 getContentType(ext: string): string {
|
|
||||||
const contentTypes: Record<string, string> = {
|
|
||||||
json: 'application/json',
|
|
||||||
txt: 'text/plain',
|
|
||||||
html: 'text/html',
|
|
||||||
css: 'text/css',
|
|
||||||
js: 'application/javascript',
|
|
||||||
ts: 'text/typescript',
|
|
||||||
md: 'text/markdown',
|
|
||||||
xml: 'application/xml',
|
|
||||||
yaml: 'text/yaml',
|
|
||||||
yml: 'text/yaml',
|
|
||||||
csv: 'text/csv',
|
|
||||||
};
|
|
||||||
return contentTypes[ext] || 'application/octet-stream';
|
|
||||||
}
|
|
||||||
|
|
||||||
private getDefaultContent(ext: string): string {
|
|
||||||
const defaults: Record<string, string> = {
|
|
||||||
json: '{\n \n}',
|
|
||||||
html: '<!DOCTYPE html>\n<html>\n<head>\n <title></title>\n</head>\n<body>\n \n</body>\n</html>',
|
|
||||||
md: '# Title\n\n',
|
|
||||||
txt: '',
|
|
||||||
};
|
|
||||||
return defaults[ext] || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
private async handleCreate() {
|
|
||||||
if (!this.createDialogName.trim()) 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' ? this.getContentType(ext) : 'application/octet-stream';
|
|
||||||
const content = this.createDialogType === 'file' ? this.getDefaultContent(ext) : '';
|
|
||||||
|
|
||||||
const success = await apiService.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>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- 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">
|
|
||||||
<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()}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,538 +0,0 @@
|
|||||||
import * as plugins from '../plugins.js';
|
|
||||||
import { apiService } from '../services/index.js';
|
|
||||||
import { formatSize, getFileName } from '../utilities/index.js';
|
|
||||||
import { themeStyles } from '../styles/index.js';
|
|
||||||
|
|
||||||
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
|
||||||
|
|
||||||
@customElement('tsview-s3-preview')
|
|
||||||
export class TsviewS3Preview extends DeesElement {
|
|
||||||
@property({ type: String })
|
|
||||||
public accessor bucketName: string = '';
|
|
||||||
|
|
||||||
@property({ type: String })
|
|
||||||
public accessor objectKey: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor loading: boolean = false;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor saving: boolean = false;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor content: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor originalTextContent: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor hasChanges: boolean = false;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor editing: boolean = false;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor contentType: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor size: number = 0;
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor lastModified: string = '';
|
|
||||||
|
|
||||||
@state()
|
|
||||||
private accessor error: string = '';
|
|
||||||
|
|
||||||
public static styles = [
|
|
||||||
cssManager.defaultStyles,
|
|
||||||
themeStyles,
|
|
||||||
css`
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-header {
|
|
||||||
padding: 12px;
|
|
||||||
border-bottom: 1px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-meta {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-content {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-content dees-preview {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-content.code-editor {
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-content.code-editor dees-input-code {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-actions {
|
|
||||||
padding: 12px;
|
|
||||||
border-top: 1px solid #333;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
flex: 1;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid #404040;
|
|
||||||
color: #e0e0e0;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.danger {
|
|
||||||
background: rgba(239, 68, 68, 0.2);
|
|
||||||
border-color: #ef4444;
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.danger:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.primary {
|
|
||||||
background: rgba(59, 130, 246, 0.3);
|
|
||||||
border-color: #3b82f6;
|
|
||||||
color: #60a5fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.primary:hover {
|
|
||||||
background: rgba(59, 130, 246, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.primary:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.secondary {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-color: #555;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unsaved-indicator {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
background: rgba(251, 191, 36, 0.1);
|
|
||||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #fbbf24;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unsaved-dot {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #fbbf24;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
color: #666;
|
|
||||||
text-align: center;
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state svg {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-state {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-state {
|
|
||||||
padding: 16px;
|
|
||||||
color: #f87171;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
|
|
||||||
updated(changedProperties: Map<string, unknown>) {
|
|
||||||
if (changedProperties.has('objectKey') || changedProperties.has('bucketName')) {
|
|
||||||
if (this.objectKey) {
|
|
||||||
this.loadObject();
|
|
||||||
} else {
|
|
||||||
this.content = '';
|
|
||||||
this.contentType = '';
|
|
||||||
this.error = '';
|
|
||||||
this.originalTextContent = '';
|
|
||||||
this.hasChanges = false;
|
|
||||||
this.editing = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async loadObject() {
|
|
||||||
if (!this.objectKey || !this.bucketName) return;
|
|
||||||
|
|
||||||
this.loading = true;
|
|
||||||
this.error = '';
|
|
||||||
this.hasChanges = false;
|
|
||||||
this.editing = false;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await apiService.getObject(this.bucketName, this.objectKey);
|
|
||||||
if (!result) {
|
|
||||||
this.error = 'Object not found';
|
|
||||||
this.loading = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.content = result.content || '';
|
|
||||||
this.contentType = result.contentType || '';
|
|
||||||
this.size = result.size || 0;
|
|
||||||
this.lastModified = result.lastModified || '';
|
|
||||||
|
|
||||||
// For text files, decode and store original content
|
|
||||||
if (this.isText()) {
|
|
||||||
this.originalTextContent = this.getTextContent();
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading object:', err);
|
|
||||||
this.error = 'Failed to load object';
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loading = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
private formatDate(dateStr: string): string {
|
|
||||||
if (!dateStr) return '-';
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
return date.toLocaleString();
|
|
||||||
}
|
|
||||||
|
|
||||||
private isImage(): boolean {
|
|
||||||
return this.contentType.startsWith('image/');
|
|
||||||
}
|
|
||||||
|
|
||||||
private isText(): boolean {
|
|
||||||
return (
|
|
||||||
this.contentType.startsWith('text/') ||
|
|
||||||
this.contentType === 'application/json' ||
|
|
||||||
this.contentType === 'application/xml' ||
|
|
||||||
this.contentType === 'application/javascript'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private getTextContent(): string {
|
|
||||||
try {
|
|
||||||
// Properly decode base64 to UTF-8 text
|
|
||||||
const binaryString = atob(this.content);
|
|
||||||
const bytes = new Uint8Array(binaryString.length);
|
|
||||||
for (let i = 0; i < binaryString.length; i++) {
|
|
||||||
bytes[i] = binaryString.charCodeAt(i);
|
|
||||||
}
|
|
||||||
return new TextDecoder('utf-8').decode(bytes);
|
|
||||||
} catch {
|
|
||||||
return 'Unable to decode content';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async handleDownload() {
|
|
||||||
try {
|
|
||||||
const blob = new Blob([Uint8Array.from(atob(this.content), (c) => c.charCodeAt(0))], {
|
|
||||||
type: this.contentType,
|
|
||||||
});
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = getFileName(this.objectKey);
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error downloading:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async handleDelete() {
|
|
||||||
if (!confirm(`Delete "${getFileName(this.objectKey)}"?`)) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await apiService.deleteObject(this.bucketName, this.objectKey);
|
|
||||||
this.dispatchEvent(
|
|
||||||
new CustomEvent('object-deleted', {
|
|
||||||
detail: { key: this.objectKey },
|
|
||||||
bubbles: true,
|
|
||||||
composed: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error deleting object:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private getLanguage(): string {
|
|
||||||
const ext = this.objectKey.split('.').pop()?.toLowerCase() || '';
|
|
||||||
const languageMap: Record<string, string> = {
|
|
||||||
ts: 'typescript',
|
|
||||||
tsx: 'typescript',
|
|
||||||
js: 'javascript',
|
|
||||||
jsx: 'javascript',
|
|
||||||
mjs: 'javascript',
|
|
||||||
cjs: 'javascript',
|
|
||||||
json: 'json',
|
|
||||||
html: 'html',
|
|
||||||
htm: 'html',
|
|
||||||
css: 'css',
|
|
||||||
scss: 'scss',
|
|
||||||
sass: 'scss',
|
|
||||||
less: 'less',
|
|
||||||
md: 'markdown',
|
|
||||||
markdown: 'markdown',
|
|
||||||
xml: 'xml',
|
|
||||||
yaml: 'yaml',
|
|
||||||
yml: 'yaml',
|
|
||||||
py: 'python',
|
|
||||||
rb: 'ruby',
|
|
||||||
go: 'go',
|
|
||||||
rs: 'rust',
|
|
||||||
java: 'java',
|
|
||||||
c: 'c',
|
|
||||||
cpp: 'cpp',
|
|
||||||
h: 'c',
|
|
||||||
hpp: 'cpp',
|
|
||||||
cs: 'csharp',
|
|
||||||
php: 'php',
|
|
||||||
sh: 'shell',
|
|
||||||
bash: 'shell',
|
|
||||||
zsh: 'shell',
|
|
||||||
sql: 'sql',
|
|
||||||
graphql: 'graphql',
|
|
||||||
gql: 'graphql',
|
|
||||||
dockerfile: 'dockerfile',
|
|
||||||
txt: 'plaintext',
|
|
||||||
};
|
|
||||||
return languageMap[ext] || 'plaintext';
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleContentChange(event: CustomEvent) {
|
|
||||||
const newValue = event.detail as string;
|
|
||||||
this.hasChanges = newValue !== this.originalTextContent;
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleEdit() {
|
|
||||||
this.editing = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleDiscard() {
|
|
||||||
const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
|
|
||||||
if (codeEditor) {
|
|
||||||
codeEditor.value = this.originalTextContent;
|
|
||||||
}
|
|
||||||
this.hasChanges = false;
|
|
||||||
this.editing = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
private async handleSave() {
|
|
||||||
if (!this.hasChanges || this.saving) return;
|
|
||||||
|
|
||||||
this.saving = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Get current content from the editor
|
|
||||||
const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
|
|
||||||
const currentContent = codeEditor?.value ?? '';
|
|
||||||
|
|
||||||
// Encode the text content to base64
|
|
||||||
const encoder = new TextEncoder();
|
|
||||||
const bytes = encoder.encode(currentContent);
|
|
||||||
const base64Content = btoa(String.fromCharCode(...bytes));
|
|
||||||
|
|
||||||
const success = await apiService.putObject(
|
|
||||||
this.bucketName,
|
|
||||||
this.objectKey,
|
|
||||||
base64Content,
|
|
||||||
this.contentType
|
|
||||||
);
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
this.originalTextContent = currentContent;
|
|
||||||
this.hasChanges = false;
|
|
||||||
this.editing = false;
|
|
||||||
// Update the stored content as well
|
|
||||||
this.content = base64Content;
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error saving object:', err);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.saving = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (!this.objectKey) {
|
|
||||||
return html`
|
|
||||||
<div class="preview-container">
|
|
||||||
<div class="empty-state">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
||||||
<polyline points="14 2 14 8 20 8" />
|
|
||||||
</svg>
|
|
||||||
<p>Select a file to preview</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.loading) {
|
|
||||||
return html`
|
|
||||||
<div class="preview-container">
|
|
||||||
<div class="loading-state">Loading...</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.error) {
|
|
||||||
return html`
|
|
||||||
<div class="preview-container">
|
|
||||||
<div class="error-state">${this.error}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<div class="preview-container">
|
|
||||||
<div class="preview-header">
|
|
||||||
<div class="preview-title">${getFileName(this.objectKey)}</div>
|
|
||||||
<div class="preview-meta">
|
|
||||||
<span class="meta-item">${this.contentType}</span>
|
|
||||||
<span class="meta-item">${formatSize(this.size)}</span>
|
|
||||||
<span class="meta-item">${this.formatDate(this.lastModified)}</span>
|
|
||||||
${this.hasChanges ? html`
|
|
||||||
<span class="unsaved-indicator">
|
|
||||||
<span class="unsaved-dot"></span>
|
|
||||||
Unsaved changes
|
|
||||||
</span>
|
|
||||||
` : ''}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="preview-content ${this.editing ? 'code-editor' : ''}">
|
|
||||||
${this.editing
|
|
||||||
? html`
|
|
||||||
<dees-input-code
|
|
||||||
.value=${this.originalTextContent}
|
|
||||||
.language=${this.getLanguage()}
|
|
||||||
height="100%"
|
|
||||||
@content-change=${(e: CustomEvent) => this.handleContentChange(e)}
|
|
||||||
></dees-input-code>
|
|
||||||
`
|
|
||||||
: this.isText()
|
|
||||||
? html`
|
|
||||||
<dees-preview
|
|
||||||
.textContent=${this.originalTextContent}
|
|
||||||
.filename=${getFileName(this.objectKey)}
|
|
||||||
.language=${this.getLanguage()}
|
|
||||||
.showToolbar=${true}
|
|
||||||
.showFilename=${false}
|
|
||||||
></dees-preview>
|
|
||||||
`
|
|
||||||
: html`
|
|
||||||
<dees-preview
|
|
||||||
.base64=${this.content}
|
|
||||||
.mimeType=${this.contentType}
|
|
||||||
.filename=${getFileName(this.objectKey)}
|
|
||||||
.showToolbar=${true}
|
|
||||||
.showFilename=${false}
|
|
||||||
></dees-preview>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="preview-actions">
|
|
||||||
${this.editing
|
|
||||||
? html`
|
|
||||||
<button class="action-btn secondary" @click=${this.handleDiscard}>
|
|
||||||
${this.hasChanges ? 'Discard' : 'Cancel'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="action-btn primary"
|
|
||||||
@click=${this.handleSave}
|
|
||||||
?disabled=${this.saving || !this.hasChanges}
|
|
||||||
>
|
|
||||||
${this.saving ? 'Saving...' : 'Save'}
|
|
||||||
</button>
|
|
||||||
`
|
|
||||||
: html`
|
|
||||||
${this.isText()
|
|
||||||
? html`<button class="action-btn" @click=${this.handleEdit}>Edit</button>`
|
|
||||||
: ''}
|
|
||||||
<button class="action-btn" @click=${this.handleDownload}>Download</button>
|
|
||||||
<button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user