@monoui/vuejs 1.1.18 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.18",
+	"version": "1.1.21",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",

package/src/components/Table/Table.vue

@@ -417,6 +417,11 @@ export default {
 			type: String,
 			required: false,
 			default: ""
+		},
+		perPage: {
+			type: Number,
+			required: false,
+			default: 10
 		}
 	},
 	watch: {
@@ -426,12 +431,6 @@ export default {
 	},
 	data() {
 		return {
-			defaultSettings: {
-				currentPage: 1,
-				pageCount: 0,
-				itemPerPage: 10,
-				totalItemCount: 0
-			},
 			settings: {
 				currentPage: 1,
 				pageCount: 0,
@@ -443,7 +442,8 @@ export default {
 			isDataEmpty: false,
 			isLoading: false,
 			limit: 250,
-			searchDebounceTimeout: null
+			searchDebounceTimeout: null,
+			initialSorting: []
 		};
 	},
 	computed: {
@@ -470,6 +470,7 @@ export default {
 		this.addPopStateListener();
 	},
 	async mounted() {
+		this.initialSorting = [...this.sorting];
 		this.loadHistory();
 		if (this.autoLoad) await this.getValues();
 	},
@@ -487,23 +488,20 @@ export default {
 		loadHistory() {
 			this.settings.currentPage = this.getHistoryParameter(
 				"page",
-				this.defaultSettings.currentPage
+				this.settings.currentPage
 			);
 			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 +553,7 @@ export default {
 				row
 			);
 		},
-		async getValues() {
+		async getValues(addHistory = true) {
 			this.isLoading = true;
 			this.$emit("loading", this.isLoading);
 			const { currentPage, itemPerPage } = this.settings;
@@ -567,14 +565,33 @@ export default {
 				itemPerPage
 			);
 
-			this.clearHistoryParameters("f-");
-			for (const filter of this.filters) {
-				this.addHistoryParameter(`f-${filter.Column}`, filter.Value);
-			}
+			if (addHistory) {
+				let state = null;
+
+				// clear all first
+				this.clearHistoryParameters("f-");
+				this.clearHistoryParameters("s-");
+
+				for (const filter of this.filters) {
+					state = this.addHistoryParameter(
+						`f-${filter.Column}`,
+						filter.Value,
+						this.storage,
+						state,
+						false
+					);
+				}
 
-			this.clearHistoryParameters("s-");
-			for (const sort of this.sorting) {
-				this.addHistoryParameter(`s-${sort.Column}`, sort.Asc ? 1 : 0);
+				for (const sort of this.sorting) {
+					state = this.addHistoryParameter(
+						`s-${sort.Column}`,
+						sort.Asc ? 1 : 0,
+						this.storage,
+						state,
+						false
+					);
+				}
+				this.replaceHistory(state);
 			}
 
 			if (!result || result.status !== 200) {
@@ -623,12 +640,12 @@ 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;
@@ -659,12 +676,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 +699,6 @@ export default {
 			storage = this.historyStorage
 		) {
 			if (!startsWith || !storage) return;
-
 			try {
 				const startsWithName = this.getHistoryName(startsWith);
 
@@ -828,42 +846,72 @@ export default {
 
 				if (filter && !value) {
 					this.filters.splice(this.filters.indexOf(filter), 1);
-				} else if (filter) {
-					filter.Value = value;
-				} else {
-					this.filters.push({
-						Column: column,
-						Value: value
-					});
+				} else if (value) {
+					if (filter) {
+						filter.Value = value;
+					} else {
+						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);
 			for (const paramName of names) {
-				const value = parameters[paramName] ? true : false;
+				var paramValue = parameters[paramName];
+				let value = undefined;
+				if (paramValue && paramValue === "1") value = true;
+				else if (paramValue && paramValue === "0") value = false;
 				const column = paramName.replace(trimName, "");
 
-				let sort = this.sorting.find(x => x.Column === column);
+				let sort = latestSorting.find(x => x.Column === column);
 
-				if (sort) {
-					sort.Value = value;
-				} else {
-					this.sorting.push({ Column: column, Asc: value });
+				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);
+			}
 		},
-		addHistoryParameter(name, value, storage = this.historyStorage) {
+		replaceHistory(state, storage = this.historyStorage) {
+			if (!state) return;
+			if (storage === "query") {
+				window.history.pushState({ url: state.href }, "", state);
+				return;
+			}
+		},
+		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;
+					}
+					window.history.pushState({ url: url.href }, "", url.href);
 					return;
 				}