@monoui/vuejs 1.1.21 → 1.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.21",
+	"version": "1.1.22",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",
@@ -8,6 +8,7 @@
 	"license": "MIT",
 	"scripts": {
 		"docs": "vuepress dev docs",
+		"dev": "vuepress dev docs",
 		"styleguide": "vue-styleguidist server",
 		"styleguide:build": "vue-styleguidist build",
 		"deploy": "cross-env NODE_ENV=production webpack --config webpack.config.js",

package/src/components/Table/Table.vue

@@ -425,8 +425,10 @@ export default {
 		}
 	},
 	watch: {
-		searchWord(word) {
-			this.addFilter(word);
+		searchWord: {
+			handler: function(newValue) {
+				if (!this.comingFromPopState) this.addFilter(newValue);
+			}
 		}
 	},
 	data() {
@@ -443,7 +445,8 @@ export default {
 			isLoading: false,
 			limit: 250,
 			searchDebounceTimeout: null,
-			initialSorting: []
+			comingFromPopState: false,
+			skipWatch: false
 		};
 	},
 	computed: {
@@ -470,9 +473,15 @@ export default {
 		this.addPopStateListener();
 	},
 	async mounted() {
-		this.initialSorting = [...this.sorting];
-		this.loadHistory();
-		if (this.autoLoad) await this.getValues();
+		var filterPrefix = this.getHistoryName("f-");
+		var sortingPrefix = this.getHistoryName("s-");
+		let url = new URL(window.location).toString();
+		if (url.indexOf(filterPrefix) >= 0 || url.indexOf(sortingPrefix) >= 0) {
+			this.loadHistory();
+		}
+		if (this.autoLoad) {
+			await this.getValues();
+		}
 	},
 	methods: {
 		addPopStateListener() {
@@ -482,14 +491,12 @@ export default {
 			window.removeEventListener("popstate", this.popStateEvent);
 		},
 		async popStateEvent() {
+			this.comingFromPopState = true;
 			this.loadHistory();
-			await this.getValues(false);
+			this.getValues(false);
 		},
 		loadHistory() {
-			this.settings.currentPage = this.getHistoryParameter(
-				"page",
-				this.settings.currentPage
-			);
+			this.settings.currentPage = this.getHistoryParameter("page", 1);
 			this.settings.itemPerPage = this.getHistoryParameter(
 				"limit",
 				this.perPage || this.settings.itemPerPage
@@ -565,34 +572,47 @@ export default {
 				itemPerPage
 			);
 
-			if (addHistory) {
-				let state = null;
+			if (addHistory && !this.comingFromPopState) {
+				const filterPrefix = this.getHistoryName("f-");
+				const sortPrefix = this.getHistoryName("s-");
+				let url = new URL(window.location);
+				let params = new URLSearchParams(url.search);
+				//console.log("url start: " + url);
+				for (const searchParam of params) {
+					if (searchParam[0].startsWith(filterPrefix)) {
+						url.searchParams.delete(searchParam[0]);
+						//console.log("url later: " + url);
+					}
 
-				// clear all first
-				this.clearHistoryParameters("f-");
-				this.clearHistoryParameters("s-");
+					if (searchParam[0].startsWith(sortPrefix)) {
+						url.searchParams.delete(searchParam[0]);
+						//console.log("url later: " + url);
+					}
+				}
 
 				for (const filter of this.filters) {
-					state = this.addHistoryParameter(
+					url = this.addHistoryParameter(
 						`f-${filter.Column}`,
 						filter.Value,
 						this.storage,
-						state,
+						url,
 						false
 					);
 				}
 
 				for (const sort of this.sorting) {
-					state = this.addHistoryParameter(
+					url = this.addHistoryParameter(
 						`s-${sort.Column}`,
 						sort.Asc ? 1 : 0,
 						this.storage,
-						state,
+						url,
 						false
 					);
 				}
-				this.replaceHistory(state);
+				this.replaceHistory(url);
 			}
+			this.comingFromPopState = false;
+			this.skipWatch = false;
 
 			if (!result || result.status !== 200) {
 				this.isLoading = false;
@@ -652,7 +672,7 @@ export default {
 		},
 		/** */
 		refresh() {
-			this.getValues();
+			if (!this.comingFromPopState) this.getValues();
 		},
 		addFilter(word) {
 			if (!this.searchColumn) return;
@@ -668,6 +688,7 @@ export default {
 			);
 		},
 		searchColumnValue(column, value, limit = -1) {
+			if (this.skipWatch) return;
 			let filter = this.filters.find(x => x.Column === column);
 
 			if (filter && (!value || value.length < limit)) {
@@ -709,8 +730,7 @@ export default {
 							url.searchParams.delete(searchParam[0]);
 						}
 					}
-					window.history.pushState({}, "", url);
-					return;
+					return url;
 				}
 
 				if (storage === "local") {
@@ -838,31 +858,24 @@ export default {
 			const parameters = this.getHistoryParameters("f-");
 			const trimName = this.getHistoryName("f-");
 			const names = Object.keys(parameters);
+			this.filters.splice(0, this.filters.length);
 			for (const paramName of names) {
 				const value = parameters[paramName];
 				const column = paramName.replace(trimName, "");
 
-				let filter = this.filters.find(x => x.Column === column);
-
-				if (filter && !value) {
-					this.filters.splice(this.filters.indexOf(filter), 1);
-				} else if (value) {
-					if (filter) {
-						filter.Value = value;
-					} else {
-						this.filters.push({
-							Column: column,
-							Value: value
-						});
-					}
+				if (value) {
+					this.filters.push({
+						Column: column,
+						Value: value
+					});
 				}
 			}
 		},
 		loadHistorySorting() {
-			const latestSorting = [...this.initialSorting];
 			const parameters = this.getHistoryParameters("s-");
 			const trimName = this.getHistoryName("s-");
 			const names = Object.keys(parameters);
+			this.sorting.splice(0, this.sorting.length);
 			for (const paramName of names) {
 				var paramValue = parameters[paramName];
 				let value = undefined;
@@ -870,25 +883,22 @@ export default {
 				else if (paramValue && paramValue === "0") value = false;
 				const column = paramName.replace(trimName, "");
 
-				let sort = latestSorting.find(x => x.Column === column);
-
-				if (value !== undefined) {
-					if (sort) {
-						sort.Value = value;
-					} else {
-						latestSorting.push({ Column: column, Asc: value });
-					}
-				}
-			}
-			this.sorting.length = 0;
-			for (const sort of latestSorting) {
-				this.sorting.push(sort);
+				this.sorting.push({
+					Column: column,
+					Asc: value
+				});
 			}
 		},
 		replaceHistory(state, storage = this.historyStorage) {
-			if (!state) return;
 			if (storage === "query") {
-				window.history.pushState({ url: state.href }, "", state);
+				let url;
+				if (state) url = state;
+				else
+					url = new URL(
+						window.location.origin + window.location.pathname
+					);
+				//console.log("Pushing(3): " + url);
+				window.history.pushState({ url: url.href }, "", url.href);
 				return;
 			}
 		},
@@ -911,6 +921,7 @@ export default {
 						state = url;
 						return state;
 					}
+					//console.log("Pushing(2): " + url.href);
 					window.history.pushState({ url: url.href }, "", url.href);
 					return;
 				}
@@ -1005,6 +1016,7 @@ export default {
 				if (storage === "query") {
 					const url = new URL(window.location);
 					url.searchParams.delete(historyName);
+					//console.log("Pushing(1): " + url);
 					window.history.pushState({}, "", url);
 					return;
 				}