From 0b1badd4bba17e2124d7ec621d05a5c4066912b3 Mon Sep 17 00:00:00 2001 From: bivashy Date: Fri, 2 Jan 2026 23:21:38 +0500 Subject: [PATCH] Implement progress and error for import `UploadEntry` --- .../import/uploadentry/UploadEntry.vue | 27 ++++++++++--- app/components/ui/progress/Progress.vue | 38 +++++++++++++++++++ app/components/ui/progress/index.ts | 1 + app/pages/import.vue | 6 ++- bun.lock | 12 +++--- package.json | 4 +- 6 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 app/components/ui/progress/Progress.vue create mode 100644 app/components/ui/progress/index.ts diff --git a/app/components/internal/import/uploadentry/UploadEntry.vue b/app/components/internal/import/uploadentry/UploadEntry.vue index dc8155d..678ed85 100644 --- a/app/components/internal/import/uploadentry/UploadEntry.vue +++ b/app/components/internal/import/uploadentry/UploadEntry.vue @@ -4,13 +4,15 @@
-
+

{{ title }}

- + + +
-
+

{{ size }}

@@ -19,9 +21,22 @@ {{ format }}

+
+

+ {{ progress }}% +

+ +
+
+

+ {{ error }} +

+
- + + +
@@ -32,8 +47,8 @@ import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next' interface Props { title: string - size: string - format: string + size?: string + format?: string progress?: number error?: string } diff --git a/app/components/ui/progress/Progress.vue b/app/components/ui/progress/Progress.vue new file mode 100644 index 0000000..5532af7 --- /dev/null +++ b/app/components/ui/progress/Progress.vue @@ -0,0 +1,38 @@ + + + diff --git a/app/components/ui/progress/index.ts b/app/components/ui/progress/index.ts new file mode 100644 index 0000000..8598b96 --- /dev/null +++ b/app/components/ui/progress/index.ts @@ -0,0 +1 @@ +export { default as Progress } from "./Progress.vue" diff --git a/app/pages/import.vue b/app/pages/import.vue index b4bbbd5..94cce32 100644 --- a/app/pages/import.vue +++ b/app/pages/import.vue @@ -36,7 +36,11 @@ import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vu

Uploaded files

- +
+ + + +
diff --git a/bun.lock b/bun.lock index 2525aa1..20f4646 100644 --- a/bun.lock +++ b/bun.lock @@ -13,7 +13,7 @@ "@tanstack/vue-query": "^5.90.7", "@vee-validate/zod": "^4.15.1", "@vue-dnd-kit/core": "^1.7.0", - "@vueuse/core": "^14.0.0", + "@vueuse/core": "^14.1.0", "axios": "^1.13.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -22,7 +22,7 @@ "nuxt": "^4.2.0", "oidc-client-ts": "^3.3.0", "pinia": "^3.0.4", - "reka-ui": "^2.6.0", + "reka-ui": "^2.7.0", "shadcn-nuxt": "2.3.2", "tailwind-merge": "^3.3.1", "tailwindcss": "^4.1.16", @@ -654,11 +654,11 @@ "@vue/shared": ["@vue/shared@3.5.22", "", {}, "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w=="], - "@vueuse/core": ["@vueuse/core@14.0.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.0.0", "@vueuse/shared": "14.0.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ=="], + "@vueuse/core": ["@vueuse/core@14.1.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.1.0", "@vueuse/shared": "14.1.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw=="], - "@vueuse/metadata": ["@vueuse/metadata@14.0.0", "", {}, "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA=="], + "@vueuse/metadata": ["@vueuse/metadata@14.1.0", "", {}, "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA=="], - "@vueuse/shared": ["@vueuse/shared@14.0.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw=="], + "@vueuse/shared": ["@vueuse/shared@14.1.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw=="], "abbrev": ["abbrev@3.0.1", "", {}, "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg=="], @@ -1656,7 +1656,7 @@ "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="], - "reka-ui": ["reka-ui@2.6.0", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^12.5.0", "@vueuse/shared": "^12.5.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.2.0" } }, "sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w=="], + "reka-ui": ["reka-ui@2.7.0", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^12.5.0", "@vueuse/shared": "^12.5.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.2.0" } }, "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA=="], "remove-accents": ["remove-accents@0.5.0", "", {}, "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="], diff --git a/package.json b/package.json index f0e2f7e..d8e438e 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@tanstack/vue-query": "^5.90.7", "@vee-validate/zod": "^4.15.1", "@vue-dnd-kit/core": "^1.7.0", - "@vueuse/core": "^14.0.0", + "@vueuse/core": "^14.1.0", "axios": "^1.13.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -27,7 +27,7 @@ "nuxt": "^4.2.0", "oidc-client-ts": "^3.3.0", "pinia": "^3.0.4", - "reka-ui": "^2.6.0", + "reka-ui": "^2.7.0", "shadcn-nuxt": "2.3.2", "tailwind-merge": "^3.3.1", "tailwindcss": "^4.1.16",