@monoui/vuejs 1.1.19 → 1.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.19",
+	"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

@@ -417,21 +417,22 @@ export default {
 			type: String,
 			required: false,
 			default: ""
+		},
+		perPage: {
+			type: Number,
+			required: false,
+			default: 10
 		}
 	},
 	watch: {
-		searchWord(word) {
-			this.addFilter(word);
+		searchWord: {
+			handler: function(newValue) {
+				if (!this.comingFromPopState) this.addFilter(newValue);
+			}
 		}
 	},
 	data() {
 		return {
-			defaultSettings: {
-				currentPage: 1,
-				pageCount: 0,
-				itemPerPage: 10,
-				totalItemCount: 0
-			},
 			settings: {
 				currentPage: 1,
 				pageCount: 0,
@@ -443,7 +444,9 @@ export default {
 			isDataEmpty: false,
 			isLoading: false,
 			limit: 250,
-			searchDebounceTimeout: null
+			searchDebounceTimeout: null,
+			comingFromPopState: false,
+			skipWatch: false
 		};
 	},
 	computed: {
@@ -470,8 +473,15 @@ export default {
 		this.addPopStateListener();
 	},
 	async mounted() {
-		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() {
@@ -481,29 +491,24 @@ 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.defaultSettings.currentPage
-			);
+			this.settings.currentPage = this.getHistoryParameter("page", 1);
 			this.settings.itemPerPage = this.getHistoryParameter(
 				"limit",
-				this.defaultSettings.itemPerPage
+				this.perPage || this.settings.itemPerPage
 			);
 			if (this.searchColumn) {
 				this.searchWord = this.getHistoryParameter(
 					`f-${this.searchColumn}`,
-					this.searchWord
+					""
 				);
 			}
 			this.loadHistoryFilters();
 			this.loadHistorySorting();
-			// console.log("loadHistory:settings", this.settings);
-			// console.log("loadHistory:filters", this.filters);
-			// console.log("loadHistory:sorting", this.sorting);
 		},
 		sortableIcon(column) {
 			const currentSort = this.sorting.find(x => x.Column === column);
@@ -555,7 +560,7 @@ export default {
 				row
 			);
 		},
-		async getValues() {
+		async getValues(addHistory = true) {
 			this.isLoading = true;
 			this.$emit("loading", this.isLoading);
 			const { currentPage, itemPerPage } = this.settings;
@@ -567,15 +572,47 @@ export default {
 				itemPerPage
 			);
 
-			this.clearHistoryParameters("f-");
-			for (const filter of this.filters) {
-				this.addHistoryParameter(`f-${filter.Column}`, filter.Value);
-			}
+			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);
+					}
 
-			this.clearHistoryParameters("s-");
-			for (const sort of this.sorting) {
-				this.addHistoryParameter(`s-${sort.Column}`, sort.Asc ? 1 : 0);
+					if (searchParam[0].startsWith(sortPrefix)) {
+						url.searchParams.delete(searchParam[0]);
+						//console.log("url later: " + url);
+					}
+				}
+
+				for (const filter of this.filters) {
+					url = this.addHistoryParameter(
+						`f-${filter.Column}`,
+						filter.Value,
+						this.storage,
+						url,
+						false
+					);
+				}
+
+				for (const sort of this.sorting) {
+					url = this.addHistoryParameter(
+						`s-${sort.Column}`,
+						sort.Asc ? 1 : 0,
+						this.storage,
+						url,
+						false
+					);
+				}
+				this.replaceHistory(url);
 			}
+			this.comingFromPopState = false;
+			this.skipWatch = false;
 
 			if (!result || result.status !== 200) {
 				this.isLoading = false;
@@ -623,19 +660,19 @@ export default {
 		changePage(page) {
 			this.settings.currentPage = page;
 			this.addHistoryParameter("page", page);
-			this.getValues();
+			this.getValues(false);
 		},
 		changeItemPerPage(value) {
 			this.settings.itemPerPage = value;
 			this.addHistoryParameter("limit", value);
-			this.getValues();
+			this.getValues(false);
 		},
 		isLessThanTotalItemCount(val) {
 			return this.settings.totalItemCount > val;
 		},
 		/** */
 		refresh() {
-			this.getValues();
+			if (!this.comingFromPopState) this.getValues();
 		},
 		addFilter(word) {
 			if (!this.searchColumn) return;
@@ -651,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)) {
@@ -659,12 +697,14 @@ export default {
 				return;
 			}
 
-			if (filter) filter.Value = value;
-			else
+			if (filter) {
+				filter.Value = value;
+			} else {
 				this.filters.push({
 					Column: column,
 					Value: value
 				});
+			}
 			this.getValues();
 		},
 		inLimit() {
@@ -680,7 +720,6 @@ export default {
 			storage = this.historyStorage
 		) {
 			if (!startsWith || !storage) return;
-
 			try {
 				const startsWithName = this.getHistoryName(startsWith);
 
@@ -691,8 +730,7 @@ export default {
 							url.searchParams.delete(searchParam[0]);
 						}
 					}
-					window.history.pushState({}, "", url);
-					return;
+					return url;
 				}
 
 				if (storage === "local") {
@@ -820,23 +858,16 @@ 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
+					});
 				}
 			}
 		},
@@ -844,6 +875,7 @@ export default {
 			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;
@@ -851,26 +883,46 @@ export default {
 				else if (paramValue && paramValue === "0") value = false;
 				const column = paramName.replace(trimName, "");
 
-				let sort = this.sorting.find(x => x.Column === column);
-
-				if (value !== undefined) {
-					if (sort) {
-						sort.Value = value;
-					} else {
-						this.sorting.push({ Column: column, Asc: value });
-					}
-				}
+				this.sorting.push({
+					Column: column,
+					Asc: value
+				});
+			}
+		},
+		replaceHistory(state, storage = this.historyStorage) {
+			if (storage === "query") {
+				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;
 			}
 		},
-		addHistoryParameter(name, value, storage = this.historyStorage) {
+		addHistoryParameter(
+			name,
+			value,
+			storage = this.historyStorage,
+			state = null,
+			replace = true
+		) {
 			if (!this.history || !name || !storage) return;
-			// console.log("addHistoryParameter", name, value, storage);
 			try {
 				if (storage === "query") {
-					const url = new URL(window.location);
+					let url;
+					if (state) url = state;
+					else url = new URL(window.location);
 					const historyName = this.getHistoryName(name);
 					url.searchParams.set(historyName, value);
-					window.history.pushState(null, "", url);
+					if (!replace) {
+						state = url;
+						return state;
+					}
+					//console.log("Pushing(2): " + url.href);
+					window.history.pushState({ url: url.href }, "", url.href);
 					return;
 				}
 
@@ -964,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;
 				}