@monoui/vuejs 1.1.12 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.12",
+	"version": "1.1.16",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",
@@ -33,6 +33,7 @@
 		"vee-validate": "^3.0.11",
 		"vue": "^2.6.12",
 		"vue-cron-2": "^1.0.7",
+		"vue-js-toggle-button": "^1.3.3",
 		"vue-multiselect": "^2.1.6",
 		"vue-server-renderer": "^2.6.12",
 		"vue-sweetalert": "^0.1.18",

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"
@@ -187,52 +187,66 @@
 		<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
-								"
-							></b-dropdown-divider>
-							<b-dropdown-item
-								@click="
-									changeItemPerPage(settings.totalItemCount)
-								"
+					<div>
+						<div v-show="!isDataEmpty">
+							<span>Show</span>
+							<b-dropdown
+								:text="itemPerPageText"
+								class="m-md-2"
+								size="sm"
+								variant="light"
 							>
-								All
-							</b-dropdown-item>
-						</b-dropdown>
+								<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">
-					<span v-show="!isDataEmpty">
-						{{ settings.totalItemCount }} rows
-					</span>
+					<div>
+						<span v-show="!isDataEmpty">
+							{{ settings.totalItemCount }} rows
+						</span>
+					</div>
 				</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"
-					/>
+					<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>
 		</slot>
@@ -264,6 +278,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
@@ -282,8 +313,9 @@ export default {
 			required: false
 		},
 		filterable: {
-			type: Array,
-			required: false
+			type: Boolean,
+			required: false,
+			default: false
 		},
 		headerClass: {
 			type: String,
@@ -320,7 +352,7 @@ export default {
 		emptyMessage: {
 			type: String,
 			required: false,
-			default: "No data avaible in table"
+			default: "No data available in table"
 		},
 		autoLoad: {
 			type: Boolean,
@@ -361,6 +393,21 @@ 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
 		}
 	},
 	watch: {
@@ -379,7 +426,9 @@ export default {
 			tableData: [],
 			searchWord: null,
 			isDataEmpty: false,
-			isLoading: false
+			isLoading: false,
+			limit: 250,
+			searchDebounceTimeout: null
 		};
 	},
 	computed: {
@@ -403,6 +452,22 @@ export default {
 		}
 	},
 	async mounted() {
+		this.settings.currentPage = this.getHistoryParameter(
+			"page",
+			this.settings.currentPage
+		);
+		this.settings.itemPerPage = this.getHistoryParameter(
+			"limit",
+			this.settings.itemPerPage
+		);
+		if (this.searchColumn) {
+			this.searchWord = this.getHistoryParameter(
+				`f-${this.searchColumn}`,
+				this.searchWord
+			);
+		}
+		this.loadHistoryFilters();
+		this.loadHistorySorting();
 		if (this.autoLoad) await this.getValues();
 	},
 	created() {},
@@ -428,9 +493,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 };
@@ -463,6 +527,16 @@ export default {
 			this.$emit("loading", this.isLoading);
 			const { currentPage, itemPerPage } = this.settings;
 
+			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);
+			}
+
 			let result = await this.requestFunction(
 				this.filters,
 				this.sorting,
@@ -505,16 +579,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) {
@@ -525,12 +605,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;
+
+			try {
+				if (storage === "query") {
+					const url = new URL(window.location);
+					const historyName = this.getHistoryName(name);
+					url.searchParams.set(historyName, value);
+					window.history.pushState({}, "", 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);
+			}
 		}
 	}
 };