@monoui/vuejs 1.1.15 → 1.1.18

package/package.json

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

@@ -79,7 +79,7 @@
 						</slot>
 					</tr>
 					<template v-if="filterable">
-						<tr v-if="filterable.length !== 0">
+						<tr>
 							<th
 								class="p-0 p-t-1 p-b-1"
 								:colspan="Object.keys(columns).length"
@@ -185,62 +185,73 @@
 		</div>
 		<slot name="pagination-seperator" />
 		<slot name="pagination">
-			<div class="d-flex justify-content-between align-items-center mt-2">
-				<slot name="pagination-filters">
-					<div v-show="!isDataEmpty">
-						<span>Show</span>
-						<b-dropdown
-							:text="itemPerPageText"
-							class="m-md-2"
-							size="sm"
-							variant="light"
-						>
-							<template v-for="perPage in filteredPerPageValues">
-								<b-dropdown-item
-									:key="'per-page-' + perPage"
-									@click="changeItemPerPage(perPage)"
-								>
-									{{ perPage }}
-								</b-dropdown-item>
-							</template>
-							<b-dropdown-divider
-								v-if="
-									filteredPerPageValues &&
-										filteredPerPageValues.length &&
-										inLimit()
-								"
-							></b-dropdown-divider>
-
-							<template>
-								<b-dropdown-item
-									v-if="inLimit()"
-									@click="
-										changeItemPerPage(
-											settings.totalItemCount
-										)
-									"
+			<div :class="paginationClass">
+				<div
+					class="d-flex justify-content-between align-items-center mt-2"
+				>
+					<slot name="pagination-filters">
+						<div>
+							<div v-show="!isDataEmpty">
+								<span>Show</span>
+								<b-dropdown
+									:text="itemPerPageText"
+									class="m-md-2"
+									size="sm"
+									variant="light"
 								>
-									All ({{ settings.totalItemCount }})
-								</b-dropdown-item>
-							</template>
-						</b-dropdown>
-					</div>
-				</slot>
-				<slot name="pagination-center" v-bind="settings">
-					<span v-show="!isDataEmpty">
-						{{ settings.totalItemCount }} rows
-					</span>
-				</slot>
-				<slot name="pagination-buttons">
-					<b-pagination
-						v-if="settings.pageCount > 1"
-						v-model="settings.currentPage"
-						:total-rows="settings.totalItemCount"
-						:per-page="settings.itemPerPage"
-						@change="changePage"
-						v-bind="pagination"
-					/>
-				</slot>
+									<template
+										v-for="perPage in filteredPerPageValues"
+									>
+										<b-dropdown-item
+											:key="'per-page-' + perPage"
+											@click="changeItemPerPage(perPage)"
+										>
+											{{ perPage }}
+										</b-dropdown-item>
+									</template>
+									<b-dropdown-divider
+										v-if="
+											filteredPerPageValues &&
+												filteredPerPageValues.length &&
+												inLimit()
+										"
+									/>
+									<template>
+										<b-dropdown-item
+											v-if="inLimit()"
+											@click="
+												changeItemPerPage(
+													settings.totalItemCount
+												)
+											"
+										>
+											All ({{ settings.totalItemCount }})
+										</b-dropdown-item>
+									</template>
+								</b-dropdown>
+							</div>
+						</div>
+					</slot>
+					<slot name="pagination-center" v-bind="settings">
+						<div>
+							<span v-show="!isDataEmpty">
+								{{ settings.totalItemCount }} rows
+							</span>
+						</div>
+					</slot>
+					<slot name="pagination-buttons">
+						<div>
+							<b-pagination
+								v-if="settings.pageCount > 1"
+								v-model="settings.currentPage"
+								:total-rows="settings.totalItemCount"
+								:per-page="settings.itemPerPage"
+								@change="changePage"
+								v-bind="pagination"
+							/>
+						</div>
+					</slot>
+				</div>
 			</div>
 		</slot>
 		<slot name="footer" />
@@ -271,6 +282,23 @@ export default {
 		IconSortingArrows
 	},
 	props: {
+		history: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		/// <summary>
+		/// Keep the table navigation history on options: 'query', 'cookie', 'session', 'local', 'hash'.
+		/// </summary>
+		historyStorage: {
+			type: String,
+			required: false,
+			default: "query"
+		},
+		historyName: {
+			type: String,
+			default: ""
+		},
 		columns: {
 			type: Object,
 			required: false
@@ -289,8 +317,9 @@ export default {
 			required: false
 		},
 		filterable: {
-			type: Array,
-			required: false
+			type: Boolean,
+			required: false,
+			default: false
 		},
 		headerClass: {
 			type: String,
@@ -368,6 +397,26 @@ export default {
 			type: String,
 			required: false,
 			default: "icon-arrow-down-long"
+		},
+		searchColumn: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		searchWordMinLength: {
+			type: Number,
+			required: false,
+			default: 2
+		},
+		searchDebounce: {
+			type: Number,
+			required: false,
+			default: 300
+		},
+		paginationClass: {
+			type: String,
+			required: false,
+			default: ""
 		}
 	},
 	watch: {
@@ -377,6 +426,12 @@ export default {
 	},
 	data() {
 		return {
+			defaultSettings: {
+				currentPage: 1,
+				pageCount: 0,
+				itemPerPage: 10,
+				totalItemCount: 0
+			},
 			settings: {
 				currentPage: 1,
 				pageCount: 0,
@@ -387,7 +442,8 @@ export default {
 			searchWord: null,
 			isDataEmpty: false,
 			isLoading: false,
-			limit: 250
+			limit: 250,
+			searchDebounceTimeout: null
 		};
 	},
 	computed: {
@@ -410,11 +466,45 @@ export default {
 			return this.settings.totalItemCount <= 0;
 		}
 	},
+	created() {
+		this.addPopStateListener();
+	},
 	async mounted() {
+		this.loadHistory();
 		if (this.autoLoad) await this.getValues();
 	},
-	created() {},
 	methods: {
+		addPopStateListener() {
+			window.addEventListener("popstate", this.popStateEvent);
+		},
+		removePopStateListener() {
+			window.removeEventListener("popstate", this.popStateEvent);
+		},
+		async popStateEvent() {
+			this.loadHistory();
+			await this.getValues(false);
+		},
+		loadHistory() {
+			this.settings.currentPage = this.getHistoryParameter(
+				"page",
+				this.defaultSettings.currentPage
+			);
+			this.settings.itemPerPage = this.getHistoryParameter(
+				"limit",
+				this.defaultSettings.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);
 			if (!currentSort) {
@@ -436,9 +526,8 @@ export default {
 			return this.sorting.some(x => x.Column === column);
 		},
 		async toggleSort(column) {
-			if (!this.isSortable(column)) {
-				return;
-			}
+			if (!this.isSortable(column)) return;
+
 			let currentSort = this.sorting.find(x => x.Column === column);
 			if (!currentSort) {
 				currentSort = { Column: column, Asc: true };
@@ -478,6 +567,16 @@ export default {
 				itemPerPage
 			);
 
+			this.clearHistoryParameters("f-");
+			for (const filter of this.filters) {
+				this.addHistoryParameter(`f-${filter.Column}`, filter.Value);
+			}
+
+			this.clearHistoryParameters("s-");
+			for (const sort of this.sorting) {
+				this.addHistoryParameter(`s-${sort.Column}`, sort.Asc ? 1 : 0);
+			}
+
 			if (!result || result.status !== 200) {
 				this.isLoading = false;
 				this.isDataEmpty = true;
@@ -513,16 +612,22 @@ export default {
 			) {
 				this.settings.pageCount = 1;
 			}
+			if (this.settings.currentPage > this.settings.pageCount) {
+				this.settings.currentPage = this.settings.pageCount;
+				this.changePage(this.settings.currentPage);
+				return;
+			}
 			this.isLoading = false;
 			this.$emit("loading", this.isLoading);
 		},
 		changePage(page) {
 			this.settings.currentPage = page;
-
+			this.addHistoryParameter("page", page);
 			this.getValues();
 		},
 		changeItemPerPage(value) {
 			this.settings.itemPerPage = value;
+			this.addHistoryParameter("limit", value);
 			this.getValues();
 		},
 		isLessThanTotalItemCount(val) {
@@ -533,15 +638,359 @@ export default {
 			this.getValues();
 		},
 		addFilter(word) {
-			if (!word || word.length < 3) {
+			if (!this.searchColumn) return;
+			clearTimeout(this.searchDebounceTimeout);
+			this.searchDebounceTimeout = setTimeout(
+				() =>
+					this.searchColumnValue(
+						this.searchColumn,
+						word,
+						this.searchWordMinLength
+					),
+				this.searchDebounce
+			);
+		},
+		searchColumnValue(column, value, limit = -1) {
+			let filter = this.filters.find(x => x.Column === column);
+
+			if (filter && (!value || value.length < limit)) {
+				this.filters.splice(this.filters.indexOf(filter), 1);
 				this.getValues();
 				return;
 			}
 
+			if (filter) filter.Value = value;
+			else
+				this.filters.push({
+					Column: column,
+					Value: value
+				});
 			this.getValues();
 		},
 		inLimit() {
 			return this.settings.totalItemCount <= this.limit;
+		},
+		getHistoryName(name, seperator = "-") {
+			if (!name) name = "";
+			if (!this.historyName) return name;
+			return `${this.historyName}${seperator}${name}`;
+		},
+		clearHistoryParameters(
+			startsWith = null,
+			storage = this.historyStorage
+		) {
+			if (!startsWith || !storage) return;
+
+			try {
+				const startsWithName = this.getHistoryName(startsWith);
+
+				if (storage === "query") {
+					const url = new URL(window.location);
+					for (const searchParam of url.searchParams) {
+						if (searchParam[0].startsWith(startsWithName)) {
+							url.searchParams.delete(searchParam[0]);
+						}
+					}
+					window.history.pushState({}, "", url);
+					return;
+				}
+
+				if (storage === "local") {
+					const keys = Object.keys(localStorage);
+					for (const key of keys) {
+						if (!key.startsWith(startsWithName)) continue;
+						localStorage.removeItem(key);
+					}
+					return;
+				}
+
+				if (storage === "session") {
+					const keys = Object.keys(sessionStorage);
+					for (const key of keys) {
+						if (!key.startsWith(startsWithName)) continue;
+						sessionStorage.removeItem(key);
+					}
+					return;
+				}
+
+				if (storage === "cookie") {
+					var pairs = document.cookie.split(";");
+					var cookies = {};
+					for (var i = 0; i < pairs.length; i++) {
+						var pair = pairs[i].split("=");
+						cookies[(pair[0] + "").trim()] = unescape(
+							pair.slice(1).join("=")
+						);
+					}
+					const keys = Object.keys(cookies);
+					for (const key of keys) {
+						if (!key.startsWith(startsWithName)) continue;
+						document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+					}
+					return;
+				}
+
+				if (storage === "hash") {
+					if (!window.location.hash) return;
+					const hash = window.location.hash.substr(1);
+					hash.split("&").reduce(function(_, item) {
+						var parts = item.split("=");
+						if (!parts[0].startsWith(startsWithName)) return;
+						window.location.hash = window.location.hash.replace(
+							`${item}`,
+							""
+						);
+					}, {});
+					return;
+				}
+			} catch (error) {
+				console.error(error);
+			}
+		},
+		getHistoryParameters(startsWith = null, storage = this.historyStorage) {
+			if (!storage) return;
+
+			try {
+				const startsWithName = this.getHistoryName(startsWith);
+				let returnParameters = {};
+
+				if (storage === "query") {
+					const url = new URL(window.location);
+					for (const searchParam of url.searchParams) {
+						if (!searchParam[0].startsWith(startsWithName))
+							continue;
+						returnParameters[searchParam[0]] = searchParam[1];
+					}
+				}
+
+				if (storage === "local") {
+					const keys = Object.keys(localStorage);
+					for (const key of keys) {
+						if (!key.startsWith(startsWithName)) continue;
+						returnParameters[key] = localStorage.getItem(key);
+					}
+				}
+
+				if (storage === "session") {
+					const keys = Object.keys(sessionStorage);
+					for (const key of keys) {
+						if (!key.startsWith(startsWithName)) continue;
+						returnParameters[key] = sessionStorage.getItem(key);
+					}
+				}
+
+				if (storage === "cookie") {
+					var pairs = document.cookie.split(";");
+					var cookies = {};
+					for (var i = 0; i < pairs.length; i++) {
+						var pair = pairs[i].split("=");
+						cookies[(pair[0] + "").trim()] = unescape(
+							pair.slice(1).join("=")
+						);
+					}
+					const keys = Object.keys(cookies);
+					for (const key of keys) {
+						if (startsWithName && !key.startsWith(startsWithName))
+							continue;
+						returnParameters[key] = cookies[key];
+					}
+				}
+
+				if (storage === "hash") {
+					if (window.location.hash) {
+						const hash = window.location.hash.substr(1);
+						hash.split("&").reduce(function(_, item) {
+							var parts = item.split("=");
+							if (
+								startsWithName &&
+								!parts[0].startsWith(startsWithName)
+							)
+								return;
+							returnParameters[parts[0]] = parts[1];
+						}, {});
+					}
+				}
+
+				return returnParameters;
+			} catch (error) {
+				console.error(error);
+			}
+		},
+		loadHistoryFilters() {
+			const parameters = this.getHistoryParameters("f-");
+			const trimName = this.getHistoryName("f-");
+			const names = Object.keys(parameters);
+			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 (filter) {
+					filter.Value = value;
+				} else {
+					this.filters.push({
+						Column: column,
+						Value: value
+					});
+				}
+			}
+		},
+		loadHistorySorting() {
+			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;
+				const column = paramName.replace(trimName, "");
+
+				let sort = this.sorting.find(x => x.Column === column);
+
+				if (sort) {
+					sort.Value = value;
+				} else {
+					this.sorting.push({ Column: column, Asc: value });
+				}
+			}
+		},
+		addHistoryParameter(name, value, storage = this.historyStorage) {
+			if (!this.history || !name || !storage) return;
+			// console.log("addHistoryParameter", name, value, storage);
+			try {
+				if (storage === "query") {
+					const url = new URL(window.location);
+					const historyName = this.getHistoryName(name);
+					url.searchParams.set(historyName, value);
+					window.history.pushState(null, "", url);
+					return;
+				}
+
+				if (storage === "local") {
+					const historyName = this.getHistoryName(name);
+					localStorage.setItem(historyName, value);
+					return;
+				}
+
+				if (storage === "session") {
+					const historyName = this.getHistoryName(name);
+					sessionStorage.setItem(historyName, value);
+					return;
+				}
+
+				if (storage === "cookie") {
+					const historyName = this.getHistoryName(name);
+					document.cookie = `${historyName}=${value}`;
+					return;
+				}
+
+				if (storage === "hash") {
+					const historyName = this.getHistoryName(name);
+					const curretParameters = this.getHistoryParameters();
+					const newParameters = {
+						...curretParameters,
+						[historyName]: value
+					};
+					const newHash = Object.keys(newParameters)
+						.map(key => `${key}=${newParameters[key]}`)
+						.join("&");
+					window.location.hash = newHash;
+					return;
+				}
+			} catch (error) {
+				console.error(error);
+			}
+		},
+		getHistoryParameter(
+			name,
+			defaultValue = null,
+			storage = this.historyStorage
+		) {
+			if (!this.history || !name || !storage) return defaultValue;
+
+			try {
+				if (storage === "query") {
+					const url = new URL(window.location);
+					const historyName = this.getHistoryName(name);
+					return url.searchParams.get(historyName) || defaultValue;
+				}
+
+				if (storage === "local") {
+					const historyName = this.getHistoryName(name);
+					return localStorage.getItem(historyName) || defaultValue;
+				}
+
+				if (storage === "session") {
+					const historyName = this.getHistoryName(name);
+					return sessionStorage.getItem(historyName) || defaultValue;
+				}
+
+				if (storage === "cookie") {
+					const historyName = this.getHistoryName(name);
+					const cookie = document.cookie
+						.split(";")
+						.find(c => c.trim().startsWith(`${historyName}=`));
+					if (!cookie) return defaultValue;
+					return cookie.split("=")[1] || defaultValue;
+				}
+
+				if (storage === "hash") {
+					const historyName = this.getHistoryName(name);
+					const hash = window.location.hash
+						.split("#")
+						.find(c => c.trim().startsWith(`${historyName}=`));
+					if (!hash) return defaultValue;
+					return hash.split("=")[1] || defaultValue;
+				}
+			} catch (error) {
+				console.error(error);
+			}
+
+			return defaultValue;
+		},
+		removeHistoryParameter(name, storage = this.historyStorage) {
+			if (!this.history || !name || !storage) return;
+
+			try {
+				const historyName = this.getHistoryName(name);
+				if (storage === "query") {
+					const url = new URL(window.location);
+					url.searchParams.delete(historyName);
+					window.history.pushState({}, "", url);
+					return;
+				}
+
+				if (storage === "local") {
+					localStorage.removeItem(historyName);
+					return;
+				}
+
+				if (storage === "session") {
+					sessionStorage.removeItem(historyName);
+					return;
+				}
+
+				if (storage === "cookie") {
+					document.cookie = `${historyName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+					return;
+				}
+
+				if (storage === "hash") {
+					if (!window.location.hash) return;
+					const hash = window.location.hash.substr(1);
+					hash.split("&").reduce(function(_, item) {
+						var parts = item.split("=");
+						if (!parts[0].startsWith(historyName)) return;
+						window.location.hash = window.location.hash.replace(
+							`${item}`,
+							""
+						);
+					}, {});
+				}
+			} catch (error) {
+				console.error(error);
+			}
 		}
 	}
 };