@@ -112,8 +110,10 @@
diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 0e46a5d3..2816dcf0 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -48,9 +48,6 @@ import * as upload from "@/utils/upload";
export default {
name: "item",
- compatConfig: {
- ATTR_FALSE_VALUE: "suppress-warning",
- },
data: function () {
return {
touches: 0,
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 00442507..9308889c 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -1,6 +1,5 @@
@import "normalize.css/normalize.css";
-@import "noty/lib/noty.css";
-@import "noty/lib/themes/mint.css";
+@import "vue-toastification/dist/index.css";
@import "./_variables.css";
@import "./_buttons.css";
@import "./_inputs.css";
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 995b47e7..02e9bf07 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,14 +1,12 @@
import { disableExternal } from "@/utils/constants";
import { createApp } from "vue";
-import Noty from "noty";
import VueLazyload from "vue-lazyload";
+import Toast, { useToast } from "vue-toastification";
import createPinia from "@/stores";
import router from "@/router";
-import i18n from "@/i18n";
+import i18n, { rtlLanguages } from "@/i18n";
import App from "@/App.vue";
-import '@/css/styles.css'
-
-// configureCompat({ RENDER_FUNCTION: false });
+import CustomToast from "@/components/CustomToast.vue";
import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -24,6 +22,11 @@ const pinia = createPinia(router);
const app = createApp(App);
app.use(VueLazyload);
+app.use(Toast, {
+ transition: "Vue-Toastification__bounce",
+ maxToasts: 10,
+ newestOnTop: true,
+});
app.use(i18n);
app.use(pinia);
@@ -44,54 +47,51 @@ app.directive("focus", {
},
});
-const notyDefault: Noty.Options = {
- type: "info",
- layout: "bottomCenter",
- timeout: 1000,
- progressBar: true,
+const toastConfig = {
+ position: "bottom-center",
+ timeout: 4000,
+ closeOnClick: true,
+ pauseOnFocusLoss: true,
+ pauseOnHover: true,
+ draggable: true,
+ draggablePercent: 0.6,
+ showCloseButtonOnHover: false,
+ hideProgressBar: false,
+ closeButton: "button",
+ icon: true,
};
-// app.provide("$noty", (opts) => {
-// new Noty(Object.assign({}, notyDefault, opts)).show();
-// });
-
-app.provide("$showSuccess", (message: any) => {
- new Noty(
- Object.assign({}, notyDefault, {
- text: message,
- type: "success",
- })
- ).show();
+app.provide("$showSuccess", (message) => {
+ const $toast = useToast();
+ $toast.success(
+ {
+ component: CustomToast,
+ props: {
+ message: message,
+ },
+ },
+ { ...toastConfig, rtl: rtlLanguages.includes(i18n.global.locale) }
+ );
});
-app.provide("$showError", (error: any, displayReport = true) => {
- let btns = [
- // @ts-ignore
- Noty.button(i18n.global.t("buttons.close"), "", function () {
- n.close();
- }),
- ];
-
- if (!disableExternal && displayReport) {
- btns.unshift(
- Noty.button(i18n.global.t("buttons.reportIssue"), "", function () {
- window.open(
- "https://github.com/filebrowser/filebrowser/issues/new/choose"
- );
- })
- );
- }
-
- let n = new Noty(
- Object.assign({}, notyDefault, {
- text: error.message || error,
- type: "error",
- timeout: null,
- buttons: btns,
- })
+app.provide("$showError", (error, displayReport = true) => {
+ const $toast = useToast();
+ $toast.error(
+ {
+ component: CustomToast,
+ props: {
+ message: error.message || error,
+ isReport: !disableExternal && displayReport,
+ // TODO: i couldnt use $t inside the component
+ reportText: i18n.global.t("buttons.reportIssue"),
+ },
+ },
+ {
+ ...toastConfig,
+ timeout: 0,
+ rtl: rtlLanguages.includes(i18n.global.locale),
+ }
);
-
- n.show();
});
router.isReady().then(() => app.mount("#app"));
diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index 88f23d7a..10bba803 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -27,6 +27,7 @@ export const useUploadStore = defineStore("upload", {
progress: [],
queue: [],
uploads: {},
+ error: null,
}),
getters: {
// user and jwt getter removed, no longer needed
@@ -78,6 +79,9 @@ export const useUploadStore = defineStore("upload", {
const { id, loaded } = obj
this.progress[id] = loaded;
},
+ setError(error) {
+ this.error = error;
+ },
reset() {
this.id = 0;
this.sizes = [];
@@ -140,8 +144,7 @@ export const useUploadStore = defineStore("upload", {
this.moveJob();
if (item.file.isDir) {
- // TODO: find a way to display notification
- await api.post(item.path).catch(console.error);
+ await api.post(item.path).catch(this.setError);
} else {
let onUpload = throttle(
(event) =>
@@ -153,10 +156,9 @@ export const useUploadStore = defineStore("upload", {
{ leading: true, trailing: false }
);
- // TODO: find a way to display notification
await api
.post(item.path, item.file, item.overwrite, onUpload)
- .catch(console.error);
+ .catch(this.setError);
}
this.finishUpload(item);
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index e519bbeb..51744265 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -25,12 +25,13 @@ import { files as api } from "@/api";
import { mapState, mapActions, mapWritableState } from "pinia";
import { useFileStore } from "@/stores/file";
import { useLayoutStore } from "@/stores/layout";
+import { useUploadStore } from "@/stores/upload";
import HeaderBar from "@/components/header/HeaderBar.vue";
import Breadcrumbs from "@/components/Breadcrumbs.vue";
import Errors from "@/views/Errors.vue";
import Preview from "@/views/files/Preview.vue";
-import Listing from "@/views/files/Listing.vue";
+import FileListing from "@/views/files/FileListing.vue";
function clean(path) {
return path.endsWith("/") ? path.slice(0, -1) : path;
@@ -43,7 +44,7 @@ export default {
Breadcrumbs,
Errors,
Preview,
- Listing,
+ FileListing,
Editor: defineAsyncComponent(() => import("@/views/files/Editor.vue")),
},
data: function () {
@@ -52,6 +53,7 @@ export default {
width: window.innerWidth,
};
},
+ inject: ["$showError"],
computed: {
...mapWritableState(useFileStore, [
"req",
@@ -62,13 +64,16 @@ export default {
]),
...mapState(useLayoutStore, ["show", "showShell"]),
...mapWritableState(useLayoutStore, ["loading"]),
+ ...mapState(useUploadStore, {
+ uploadError: "error",
+ }),
currentView() {
if (this.req.type == undefined) {
return null;
}
if (this.req.isDir) {
- return "listing";
+ return "file-listing";
} else if (
this.req.type === "text" ||
this.req.type === "textImmutable"
@@ -89,6 +94,9 @@ export default {
this.fetchData();
}
},
+ uploadError(newValue, oldValue) {
+ newValue && newValue !== oldValue && this.$showError(this.uploadError);
+ },
},
mounted() {
this.isFiles = true;
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/FileListing.vue
similarity index 99%
rename from frontend/src/views/files/Listing.vue
rename to frontend/src/views/files/FileListing.vue
index 422453b6..8dd8c334 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/FileListing.vue
@@ -267,7 +267,6 @@