@monoui/vuejs 1.1.76 → 1.1.78

package/package.json

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

@@ -57,6 +57,58 @@
 											>
 												{{ columnKey }}
 											</small>
+
+											<b-dropdown
+												boundary="window"
+												v-if="
+													finalTimeFrame &&
+														finalTimeFrame.enabled &&
+														finalTimeFrame.column ===
+															columnKey
+												"
+												:text="getTimeFrameTitle()"
+												size="sm"
+												variant="light"
+											>
+												<b-dropdown-item
+													v-for="opt in finalTimeFrame.options.filter(
+														q => q !== 'Clear'
+													)"
+													:key="'time-frame-' + opt"
+													@click.stop="
+														applyTimeFrameFilter(
+															opt
+														)
+													"
+												>
+													<span>{{
+														getMonthLabel(opt)
+													}}</span>
+												</b-dropdown-item>
+
+												<template
+													v-if="
+														finalTimeFrame.options.some(
+															q => q === 'Clear'
+														)
+													"
+												>
+													<b-dropdown-divider></b-dropdown-divider>
+													<b-dropdown-item
+														@click.stop="
+															applyTimeFrameFilter(
+																'Clear'
+															)
+														"
+													>
+														<i
+															class="fa fa-trash mr-1"
+														/>
+														Clear
+													</b-dropdown-item>
+												</template>
+											</b-dropdown>
+
 											<span
 												v-if="isSortable(columnKey)"
 												class="sort-position"
@@ -92,18 +144,26 @@
 							</th>
 						</tr>
 					</template>
-					<slot name="header-row-raw">
-						<tr>
-							<slot name="header-row">
-								<th
-									class="p-0 p-t-1 p-b-1"
-									:colspan="Object.keys(columns).length"
-								>
-									<slot name="header-row-column" />
-								</th>
-							</slot>
-						</tr>
-					</slot>
+					<template
+						v-if="
+							$slots['header-row-raw'] ||
+								$slots['header-row'] ||
+								$slots['header-row-column']
+						"
+					>
+						<slot name="header-row-raw">
+							<tr>
+								<slot name="header-row">
+									<th
+										class="p-0 p-t-1 p-b-1"
+										:colspan="Object.keys(columns).length"
+									>
+										<slot name="header-row-column" />
+									</th>
+								</slot>
+							</tr>
+						</slot>
+					</template>
 				</thead>
 				<tbody>
 					<tr class="text-center" v-if="isDataEmpty && !isLoading">
@@ -357,6 +417,15 @@ import IconArrowDownLong from "./Icons/ArrowDownLong.vue";
 import IconSorting from "./Icons/Sorting.vue";
 import IconSortingAZ from "./Icons/SortingAZ.vue";
 import IconSortingArrows from "./Icons/SortingArrows.vue";
+
+const defaultTimeFrame = {
+	enabled: false,
+	title: "All",
+	column: "CreatedDate",
+	frame: 3,
+	options: [3, 6, 9, 12, "Clear"]
+};
+
 export default {
 	name: "mui-table",
 	components: {
@@ -529,6 +598,11 @@ export default {
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		timeFrame: {
+			type: Object,
+			required: false,
+			default: () => ({})
 		}
 	},
 	watch: {
@@ -559,6 +633,13 @@ export default {
 		};
 	},
 	computed: {
+		finalTimeFrame() {
+			return {
+				...defaultTimeFrame,
+				...this.timeFrame
+			};
+		},
+
 		filteredPerPageValues() {
 			const values = [];
 			for (const value of this.perPageValues) {
@@ -587,11 +668,63 @@ export default {
 	async mounted() {
 		if (this.history) this.loadHistory();
 
+		if (this.finalTimeFrame && this.finalTimeFrame.enabled) {
+			this.applyTimeFrameFilter(this.finalTimeFrame.frame);
+		}
+
 		if (this.autoLoad) {
 			await this.getValues(true, true);
 		}
 	},
 	methods: {
+		getMonthLabel(lbl, align = false) {
+			if (lbl === "Clear") return lbl;
+
+			if (!align) return `${lbl} months`;
+			return lbl < 10 ? `\u00A0${lbl} months` : `${lbl} months`;
+		},
+
+		getTimeFrameTitle() {
+			if (this.finalTimeFrame.frame)
+				return this.getMonthLabel(this.finalTimeFrame.frame, true);
+			return this.finalTimeFrame.title;
+		},
+
+		applyTimeFrameFilter(opt) {
+			const existingIndex = this.filters.findIndex(
+				f => f.Column === this.finalTimeFrame.column
+			);
+
+			if (opt === "Clear") {
+				this.finalTimeFrame.frame = null;
+				if (existingIndex !== -1) {
+					this.filters.splice(existingIndex, 1);
+				}
+			} else {
+				this.finalTimeFrame.frame = opt;
+
+				if (existingIndex !== -1) {
+					// Update existing filter
+					this.$set(this.filters, existingIndex, {
+						Column: this.finalTimeFrame.column,
+						Value: -opt,
+						Operator: 5,
+						AddMonths: true
+					});
+				} else {
+					// Add new filter
+					this.filters.push({
+						Column: this.finalTimeFrame.column,
+						Value: -opt,
+						Operator: 5,
+						AddMonths: true
+					});
+				}
+			}
+
+			this.getValues();
+		},
+
 		getCorrelationClass(row, tableData) {
 			var correlationCount = 0;
 			tableData.forEach(element => {
@@ -655,6 +788,10 @@ export default {
 			}
 			this.loadHistoryFilters();
 			this.loadHistorySorting();
+
+			if (this.finalTimeFrame && this.finalTimeFrame.enabled) {
+				this.applyTimeFrameFilter(this.finalTimeFrame.frame);
+			}
 		},
 		sortableIcon(column) {
 			const currentSort = this.sorting.find(x => x.Column === column);