@monoui/vuejs 1.1.16 → 1.1.19

package/package.json

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

@@ -185,69 +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>
-						<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"
+			<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"
 								>
-									<b-dropdown-item
-										:key="'per-page-' + perPage"
-										@click="changeItemPerPage(perPage)"
+									<template
+										v-for="perPage in filteredPerPageValues"
 									>
-										{{ 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
-											)
+										<b-dropdown-item
+											:key="'per-page-' + perPage"
+											@click="changeItemPerPage(perPage)"
+										>
+											{{ perPage }}
+										</b-dropdown-item>
+									</template>
+									<b-dropdown-divider
+										v-if="
+											filteredPerPageValues &&
+												filteredPerPageValues.length &&
+												inLimit()
 										"
-									>
-										All ({{ settings.totalItemCount }})
-									</b-dropdown-item>
-								</template>
-							</b-dropdown>
+									/>
+									<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>
-					</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>
+					</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" />
@@ -408,6 +412,11 @@ export default {
 			type: Number,
 			required: false,
 			default: 300
+		},
+		paginationClass: {
+			type: String,
+			required: false,
+			default: ""
 		}
 	},
 	watch: {
@@ -417,6 +426,12 @@ export default {
 	},
 	data() {
 		return {
+			defaultSettings: {
+				currentPage: 1,
+				pageCount: 0,
+				itemPerPage: 10,
+				totalItemCount: 0
+			},
 			settings: {
 				currentPage: 1,
 				pageCount: 0,
@@ -451,27 +466,45 @@ export default {
 			return this.settings.totalItemCount <= 0;
 		}
 	},
+	created() {
+		this.addPopStateListener();
+	},
 	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();
+		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) {
@@ -527,6 +560,13 @@ export default {
 			this.$emit("loading", this.isLoading);
 			const { currentPage, itemPerPage } = this.settings;
 
+			let result = await this.requestFunction(
+				this.filters,
+				this.sorting,
+				currentPage,
+				itemPerPage
+			);
+
 			this.clearHistoryParameters("f-");
 			for (const filter of this.filters) {
 				this.addHistoryParameter(`f-${filter.Column}`, filter.Value);
@@ -537,13 +577,6 @@ export default {
 				this.addHistoryParameter(`s-${sort.Column}`, sort.Asc ? 1 : 0);
 			}
 
-			let result = await this.requestFunction(
-				this.filters,
-				this.sorting,
-				currentPage,
-				itemPerPage
-			);
-
 			if (!result || result.status !== 200) {
 				this.isLoading = false;
 				this.isDataEmpty = true;
@@ -795,13 +828,15 @@ 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
+						});
+					}
 				}
 			}
 		},
@@ -810,27 +845,32 @@ export default {
 			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);
 
-				if (sort) {
-					sort.Value = value;
-				} else {
-					this.sorting.push({ Column: column, Asc: value });
+				if (value !== undefined) {
+					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({}, "", url);
+					window.history.pushState(null, "", url);
 					return;
 				}